problem with js animated text in elementor plugin

I bought a WordPress theme made with Elementor
There is a piece of code in the plugins that shows the titles in the form of animation on the site
My site’s language is Arabic and I can’t use it because this plugin animates letters by letters and I want it to animate word by word.



! function(D, u) { "object" == typeof exports && "undefined" != typeof module ? u(exports) : "function" == typeof define && define.amd ? define(["exports"], u) : u((D = D || self).window = D.window || {}) }(this, function(D) {
    "use strict";
    var _ = /([uD800-uDBFF][uDC00-uDFFF](?:[u200DuFE0F][uD800-uDBFF][uDC00-uDFFF]){2,}|uD83DuDC69(?:u200D(?:(?:uD83DuDC69u200D)?uD83DuDC67|(?:uD83DuDC69u200D)?uD83DuDC66)|uD83C[uDFFB-uDFFF])|uD83DuDC69u200D(?:uD83DuDC69u200D)?uD83DuDC66u200DuD83DuDC66|uD83DuDC69u200D(?:uD83DuDC69u200D)?uD83DuDC67u200D(?:uD83D[uDC66uDC67])|uD83CuDFF3uFE0Fu200DuD83CuDF08|(?:uD83C[uDFC3uDFC4uDFCA]|uD83D[uDC6EuDC71uDC73uDC77uDC81uDC82uDC86uDC87uDE45-uDE47uDE4BuDE4DuDE4EuDEA3uDEB4-uDEB6]|uD83E[uDD26uDD37-uDD39uDD3DuDD3EuDDD6-uDDDD])(?:uD83C[uDFFB-uDFFF])u200D[u2640u2642]uFE0F|uD83DuDC69(?:uD83C[uDFFB-uDFFF])u200D(?:uD83C[uDF3EuDF73uDF93uDFA4uDFA8uDFEBuDFED]|uD83D[uDCBBuDCBCuDD27uDD2CuDE80uDE92])|(?:uD83C[uDFC3uDFC4uDFCA]|uD83D[uDC6EuDC6FuDC71uDC73uDC77uDC81uDC82uDC86uDC87uDE45-uDE47uDE4BuDE4DuDE4EuDEA3uDEB4-uDEB6]|uD83E[uDD26uDD37-uDD39uDD3C-uDD3EuDDD6-uDDDF])u200D[u2640u2642]uFE0F|uD83CuDDFDuD83CuDDF0|uD83CuDDF6uD83CuDDE6|uD83CuDDF4uD83CuDDF2|uD83CuDDE9(?:uD83C[uDDEAuDDECuDDEFuDDF0uDDF2uDDF4uDDFF])|uD83CuDDF7(?:uD83C[uDDEAuDDF4uDDF8uDDFAuDDFC])|uD83CuDDE8(?:uD83C[uDDE6uDDE8uDDE9uDDEB-uDDEEuDDF0-uDDF5uDDF7uDDFA-uDDFF])|(?:u26F9|uD83C[uDFCBuDFCC]|uD83DuDD75)(?:uFE0Fu200D[u2640u2642]|(?:uD83C[uDFFB-uDFFF])u200D[u2640u2642])uFE0F|(?:uD83DuDC41uFE0Fu200DuD83DuDDE8|uD83DuDC69(?:uD83C[uDFFB-uDFFF])u200D[u2695u2696u2708]|uD83DuDC69u200D[u2695u2696u2708]|uD83DuDC68(?:(?:uD83C[uDFFB-uDFFF])u200D[u2695u2696u2708]|u200D[u2695u2696u2708]))uFE0F|uD83CuDDF2(?:uD83C[uDDE6uDDE8-uDDEDuDDF0-uDDFF])|uD83DuDC69u200D(?:uD83C[uDF3EuDF73uDF93uDFA4uDFA8uDFEBuDFED]|uD83D[uDCBBuDCBCuDD27uDD2CuDE80uDE92]|u2764uFE0Fu200D(?:uD83DuDC8Bu200D(?:uD83D[uDC68uDC69])|uD83D[uDC68uDC69]))|uD83CuDDF1(?:uD83C[uDDE6-uDDE8uDDEEuDDF0uDDF7-uDDFBuDDFE])|uD83CuDDEF(?:uD83C[uDDEAuDDF2uDDF4uDDF5])|uD83CuDDED(?:uD83C[uDDF0uDDF2uDDF3uDDF7uDDF9uDDFA])|uD83CuDDEB(?:uD83C[uDDEE-uDDF0uDDF2uDDF4uDDF7])|[#*0-9]uFE0Fu20E3|uD83CuDDE7(?:uD83C[uDDE6uDDE7uDDE9-uDDEFuDDF1-uDDF4uDDF6-uDDF9uDDFBuDDFCuDDFEuDDFF])|uD83CuDDE6(?:uD83C[uDDE8-uDDECuDDEEuDDF1uDDF2uDDF4uDDF6-uDDFAuDDFCuDDFDuDDFF])|uD83CuDDFF(?:uD83C[uDDE6uDDF2uDDFC])|uD83CuDDF5(?:uD83C[uDDE6uDDEA-uDDEDuDDF0-uDDF3uDDF7-uDDF9uDDFCuDDFE])|uD83CuDDFB(?:uD83C[uDDE6uDDE8uDDEAuDDECuDDEEuDDF3uDDFA])|uD83CuDDF3(?:uD83C[uDDE6uDDE8uDDEA-uDDECuDDEEuDDF1uDDF4uDDF5uDDF7uDDFAuDDFF])|uD83CuDFF4uDB40uDC67uDB40uDC62(?:uDB40uDC77uDB40uDC6CuDB40uDC73|uDB40uDC73uDB40uDC63uDB40uDC74|uDB40uDC65uDB40uDC6EuDB40uDC67)uDB40uDC7F|uD83DuDC68(?:u200D(?:u2764uFE0Fu200D(?:uD83DuDC8Bu200D)?uD83DuDC68|(?:(?:uD83D[uDC68uDC69])u200D)?uD83DuDC66u200DuD83DuDC66|(?:(?:uD83D[uDC68uDC69])u200D)?uD83DuDC67u200D(?:uD83D[uDC66uDC67])|uD83C[uDF3EuDF73uDF93uDFA4uDFA8uDFEBuDFED]|uD83D[uDCB
    function k(D) { return e.getComputedStyle(D) }
    function n(D, u) { var e; return i(D) ? D : "string" == (e = typeof D) && !u && D ? E.call(X.querySelectorAll(D), 0) : D && "object" == e && "length" in D ? E.call(D, 0) : D ? [D] : [] }
    function o(D) { return "absolute" === D.position || !0 === D.absolute }
    function p(D, u) {
        for (var e, t = u.length; - 1 < --t;)
            if (e = u[t], D.substr(0, e.length) === e) return e.length
    }
    function r(D, u) {
        void 0 === D && (D = "");
        var e = ~D.indexOf("++"),
            t = 1;
        return e && (D = D.split("++").join("")),
            function() { return "<" + u + " style='position:relative;display:inline-block;'" + (D ? " class='" + D + (e ? t++ : "") + "'>" : ">") }
    }
    function s(D, u, e) {
        var t = D.nodeType;
        if (1 === t || 9 === t || 11 === t)
            for (D = D.firstChild; D; D = D.nextSibling) s(D, u, e);
        else 3 !== t && 4 !== t || (D.nodeValue = D.nodeValue.split(u).join(e))
    }
    function t(D, u) { for (var e = u.length; - 1 < --e;) D.push(u[e]) }
    function u(D, u, e) {
        for (var t; D && D !== u;) {
            if (t = D._next || D.nextSibling) return t.textContent.charAt(0) === e;
            D = D.parentNode || D._parent
        }
    }
    function v(D) {
        var u, e, t = n(D.childNodes),
            F = t.length;
        for (u = 0; u < F; u++)(e = t[u])._isSplit ? v(e) : u && e.previousSibling && 3 === e.previousSibling.nodeType ? (e.previousSibling.nodeValue += 3 === e.nodeType ? e.nodeValue : e.firstChild.nodeValue, D.removeChild(e)) : 3 !== e.nodeType && (D.insertBefore(e.firstChild, e), D.removeChild(e))
    }
    function w(D, u) { return parseFloat(u[D]) || 0 }
    function x(D, e, F, C, i, n, E) {
        var r, l, p, d, a, h, B, f, A, c, x, g, y = k(D),
            _ = w("paddingLeft", y),
            b = -999,
            S = w("borderBottomWidth", y) + w("borderTopWidth", y),
            T = w("borderLeftWidth", y) + w("borderRightWidth", y),
            m = w("paddingTop", y) + w("paddingBottom", y),
            N = w("paddingLeft", y) + w("paddingRight", y),
            L = w("fontSize", y) * (e.lineThreshold || .2),
            W = y.textAlign,
            H = [],
            O = [],
            V = [],
            j = e.wordDelimiter || " ",
            M = e.tag ? e.tag : e.span ? "span" : "div",
            R = e.type || e.split || "chars,words,lines",
            z = i && ~R.indexOf("lines") ? [] : null,
            P = ~R.indexOf("words"),
            q = ~R.indexOf("chars"),
            G = o(e),
            I = e.linesClass,
            J = ~(I || "").indexOf("++"),
            K = [],
            Q = "flex" === y.display,
            U = D.style.display;
        for (J && (I = I.split("++").join("")), Q && (D.style.display = "block"), p = (l = D.getElementsByTagName("*")).length, a = [], r = 0; r < p; r++) a[r] = l[r];
        if (z || G)
            for (r = 0; r < p; r++)((h = (d = a[r]).parentNode === D) || G || q && !P) && (g = d.offsetTop, z && h && Math.abs(g - b) > L && ("BR" !== d.nodeName || 0 === r) && (B = [], z.push(B), b = g), G && (d._x = d.offsetLeft, d._y = g, d._w = d.offsetWidth, d._h = d.offsetHeight), z && ((d._isSplit && h || !q && h || P && h || !P && d.parentNode.parentNode === D && !d.parentNode._isSplit) && (B.push(d), d._x -= _, u(d, D, j) && (d._wordEnd = !0)), "BR" === d.nodeName && (d.nextSibling && "BR" === d.nextSibling.nodeName || 0 === r) && z.push([])));
        for (r = 0; r < p; r++)
            if (h = (d = a[r]).parentNode === D, "BR" !== d.nodeName)
                if (G && (A = d.style, P || h || (d._x += d.parentNode._x, d._y += d.parentNode._y), A.left = d._x + "px", A.top = d._y + "px", A.position = "absolute", A.display = "block", A.width = d._w + 1 + "px", A.height = d._h + "px"), !P && q)
                    if (d._isSplit)
                        for (d._next = l = d.nextSibling, d.parentNode.appendChild(d); l && 3 === l.nodeType && " " === l.textContent;) d._next = l.nextSibling, d.parentNode.appendChild(l), l = l.nextSibling;
                    else d.parentNode._isSplit ? (d._parent = d.parentNode, !d.previousSibling && d.firstChild && (d.firstChild._isFirst = !0), d.nextSibling && " " === d.nextSibling.textContent && !d.nextSibling.nextSibling && K.push(d.nextSibling), d._next = d.nextSibling && d.nextSibling._isFirst ? null : d.nextSibling, d.parentNode.removeChild(d), a.splice(r--, 1), p--) : h || (g = !d.nextSibling && u(d.parentNode, D, j), d.parentNode._parent && d.parentNode._parent.appendChild(d), g && d.parentNode.appendChild(X.createTextNode(" ")), "span" === M && (d.style.display = "inline"), H.push(d));
        else d.parentNode._isSplit && !d._isSplit && "" !== d.innerHTML ? O.push(d) : q && !d._isSplit && ("span" === M && (d.style.display = "inline"), H.push(d));
        else z || G ? (d.parentNode && d.parentNode.removeChild(d), a.splice(r--, 1), p--) : P || D.appendChild(d);
        for (r = K.length; - 1 < --r;) K[r].parentNode.removeChild(K[r]);
        if (z) {
            for (G && (c = X.createElement(M), D.appendChild(c), x = c.offsetWidth + "px", g = c.offsetParent === D ? 0 : D.offsetLeft, D.removeChild(c)), A = D.style.cssText, D.style.cssText = "display:none;"; D.firstChild;) D.removeChild(D.firstChild);
            for (f = " " === j && (!G || !P && !q), r = 0; r < z.length; r++) {
                for (B = z[r], (c = X.createElement(M)).style.cssText = "display:block;text-align:" + W + ";position:" + (G ? "absolute;" : "relative;"), I && (c.className = I + (J ? r + 1 : "")), V.push(c), p = B.length, l = 0; l < p; l++) "BR" !== B[l].nodeName && (d = B[l], c.appendChild(d), f && d._wordEnd && c.appendChild(X.createTextNode(" ")), G && (0 === l && (c.style.top = d._y + "px", c.style.left = _ + g + "px"), d.style.top = "0px", g && (d.style.left = d._x - g + "px")));
                0 === p ? c.innerHTML = "&nbsp;" : P || q || (v(c), s(c, String.fromCharCode(160), " ")), G && (c.style.width = x, c.style.height = d._h + "px"), D.appendChild(c)
            }
            D.style.cssText = A
        }
        G && (E > D.clientHeight && (D.style.height = E - m + "px", D.clientHeight < E && (D.style.height = E + S + "px")), n > D.clientWidth && (D.style.width = n - N + "px", D.clientWidth < n && (D.style.width = n + T + "px"))), Q && (U ? D.style.display = U : D.style.removeProperty("display")), t(F, H), P && t(C, O), t(i, V)
    }
    function y(D, u, e, t) {
        var F, C, i, n, E, r, l, d, a = u.tag ? u.tag : u.span ? "span" : "div",
            h = ~(u.type || u.split || "chars,words,lines").indexOf("chars"),
            B = o(u),
            f = u.wordDelimiter || " ",
            A = " " !== f ? "" : B ? "&#173; " : " ",
            c = "</" + a + ">",
            x = 1,
            g = u.specialChars ? "function" == typeof u.specialChars ? u.specialChars : p : null,
            y = X.createElement("div"),
            v = D.parentNode;
        for (v.insertBefore(y, D), y.textContent = D.nodeValue, v.removeChild(D), l = -1 !== (F = function getText(D) {
                var u = D.nodeType,
                    e = "";
                if (1 === u || 9 === u || 11 === u) { if ("string" == typeof D.textContent) return D.textContent; for (D = D.firstChild; D; D = D.nextSibling) e += getText(D) } else if (3 === u || 4 === u) return D.nodeValue;
                return e
            }(D = y)).indexOf("<"), !1 !== u.reduceWhiteSpace && (F = F.replace(S, " ").replace(b, "")), l && (F = F.split("<").join("{{LT}}")), E = F.length, C = (" " === F.charAt(0) ? A : "") + e(), i = 0; i < E; i++)
            if (r = F.charAt(i), g && (d = g(F.substr(i), u.specialChars))) r = F.substr(i, d || 1), C += h && " " !== r ? t() + r + "</" + a + ">" : r, i += d - 1;
            else if (r === f && F.charAt(i - 1) !== f && i) {
            for (C += x ? c : "", x = 0; F.charAt(i + 1) === f;) C += A, i++;
            i === E - 1 ? C += A : ")" !== F.charAt(i + 1) && (C += A + e(), x = 1)
        } else "{" === r && "{{LT}}" === F.substr(i, 6) ? (C += h ? t() + "{{LT}}</" + a + ">" : "{{LT}}", i += 5) : 55296 <= r.charCodeAt(0) && r.charCodeAt(0) <= 56319 || 65024 <= F.charCodeAt(i + 1) && F.charCodeAt(i + 1) <= 65039 ? (n = ((F.substr(i, 12).split(_) || [])[1] || "").length || 2, C += h && " " !== r ? t() + F.substr(i, n) + "</" + a + ">" : F.substr(i, n), i += n - 1) : C += h && " " !== r ? t() + r + "</" + a + ">" : r;
        D.outerHTML = C + (x ? c : ""), l && s(v, "{{LT}}", "<")
    }
    function z(D, u, e, t) {
        var F, C, i = n(D.childNodes),
            E = i.length,
            s = o(u);
        if (3 !== D.nodeType || 1 < E) { for (u.absolute = !1, F = 0; F < E; F++)(C = i[F])._next = C._isFirst = C._parent = C._wordEnd = null, 3 === C.nodeType && !/S+/.test(C.nodeValue) || (s && 3 !== C.nodeType && "inline" === k(C).display && (C.style.display = "inline-block", C.style.position = "relative"), C._isSplit = !0, z(C, u, e, t)); return u.absolute = s, void(D._isSplit = !0) }
        y(D, u, e, t)
    }
    var X, e, F, C, b = /(?:r|n|tt)/g,
        S = /(?:ss+)/g,
        i = Array.isArray,
        E = [].slice,
        l = ((C = SplitText.prototype).split = function split(D) { this.isSplit && this.revert(), this.vars = D = D || this.vars, this._originals.length = this.chars.length = this.words.length = this.lines.length = 0; for (var u, e, t, F = this.elements.length, C = D.tag ? D.tag : D.span ? "span" : "div", i = r(D.wordsClass, C), n = r(D.charsClass, C); - 1 < --F;) t = this.elements[F], this._originals[F] = t.innerHTML, u = t.clientHeight, e = t.clientWidth, z(t, D, i, n), x(t, D, this.chars, this.words, this.lines, e, u); return this.chars.reverse(), this.words.reverse(), this.lines.reverse(), this.isSplit = !0, this }, C.revert = function revert() { var e = this._originals; if (!e) throw "revert() call wasn't scoped properly."; return this.elements.forEach(function(D, u) { return D.innerHTML = e[u] }), this.chars = [], this.words = [], this.lines = [], this.isSplit = !1, this }, SplitText.create = function create(D, u) { return new SplitText(D, u) }, SplitText);
    function SplitText(D, u) { F || function _initCore() { X = document, e = window, F = 1 }(), this.elements = n(D), this.chars = [], this.words = [], this.lines = [], this._originals = [], this.vars = u || {}, this.split(u) }
    l.version = "3.6.1", D.SplitText = l, D.default = l;
    if (typeof(window) === "undefined" || window !== D) { Object.defineProperty(D, "__esModule", { value: !0 }) } else { delete D.default }
});;

My specialized language is PHP and I don’t know JavaScript
Thank you for your guidance on how I can edit this code

OpenLayers + Nuxt 3 : Issue with visual update after applying filters without using refresh()

I’m working on a project using Nuxt 3 and OpenLayers version 10.
I’m facing difficulties with updating the visual rendering of the map after applying filters on my vector layers.

Context :

I have several vector layers ( points and multilinestring ) on my map, and filters that allow me to hide or display certain features based on a different criteria.
Currently, I’m using layer.getSource().refresh() to reload the data after applying the filters, but this causes an issue: the map view (zoom and center), is reset, and the user often has to zoom out manually to see the visual update.

  • I’m already using layer.changed() before calling refresh(), but I doesn’t seem to be enough to force a visual update without reloading the entire data source.

Current code :

const reloadAllLayers = () => {
  const map = mapInstance.value
  if (!map) { return }

  map.updateSize()
  map.render()

  map.getLayers().forEach((layer) => {
    if (layer instanceof VectorLayer) {
      layer.changed()
      layer.getSource().refresh()
    }
  })

  map.getView().changed()
}

What I want :

I’m looking for a solution that allows me to :

  • Apply filters on my vector layers without having use layer.getSource().refresh()
    (witch causes the map view state to be lost)

  • Ensure a proper visual update after applying the filters without requiring the user to manually adjust the zoom or view.

Any suggestions or examples of successfully updating the map visually without losing view state (zoom, center) would be greatly appreciated !

Thanks for your help !

how to sort option elements in html [closed]

so I made a HTML for a library wherein if students want to borrow a book they would need to enter the following, student name, Book name and book type well it did work somehow the program was able to input the name of student, book, subject and the date it was borrowed though my problem is that it has no sorting and im having a hard time scrolling find the specific data
the div class contains 3 input elements (for student name, book name and date), select element (with 3 options named Story books , Educational books and Modules)

but i wanna start on making the options in the select element as the sorting button first

well I tried to put each of the three

addTypeButton.addEventListener("click", () => {

    const type = typeInput.value = "";

contract in not deploying [closed]

Here is the link to the repo: https://github.com/EddiePumpin/My-Hotel

$ yarn hardhat deploy
yarn run v1.22.22
$ "C:UsersHP FOLIO.vscodeMy-Hotelnode_modules.binhardhat" deploy
Nothing to compile
An unexpected error occurred:

Error: ERROR processing C:UsersHP FOLIO.vscodeMy-HoteldeployHotel-Token-deploy.js:
TypeError: network.provider.getSignerFrom is not a function
at getFrom (C:UsersHP FOLIO.vscodeMy-Hotelnode_moduleshardhat-deploysrchelpers.ts:1708:28)

Everything I can as a newbie. I expect the contract to be deployed.

Bootstrap 3 Modal stop to work after dom updates

I have this HTML (using Bootstrap 3):

    <div class="container">
        <h2>Bootstrap 3 Modal Example</h2>
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <form id="myForm">
                            <div class="form-group">
                                <label for="name">Name:</label>
                                <input type="text" class="form-control" id="name" name="name">
                            </div>
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" name="email">
                            </div>
                        </form>
      
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="saveBtn">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="divText">
    </div>
    </div>

and this JavaScript:

    $(document).ready(function(){
            $('#saveBtn').click(function(){

$('body').append('<div id="spinner" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;font-size:5em;color:#000;"><i class="fa fa-spinner fa-spin"></i></div>');

$('#divText').html("<p>Hello world</p>")
                
                 $('#myModal').modal('hide');
                
            });
        });

If I press Save the modal stop to work (the close button not work and also modal(‘hide’) not work).

Can you help me? you can test it using jsfiddle and using on CSS:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css');
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css');

Thanks

How do I intercept the openDefaultBrowser(url) call in Thunderbird?

Is there some kind of ‘beforeLinkClick’ event which can be canceled, on certain URLs? Or an option to rewrite the openDefaultBrowser(url) function, which I’m guessing gets called, when you click a link?

The end-goal is to develop a ‘Link-Blocker’ for emails opened in Thunderbird.

I already found out that there is a setting under network.protocol-handler.external-default to completely disable links, which is what I want for most links. Other links I want to whitelist via user-prompt.

Auto-generate columns for bulk insert in mssql npm package?

Every sample I’ve found online that uses bulk to insert data looks something like this, which is the working code I currently have:

const table = new sql.Table(`${this.prefix}.Sections`);
table.create = false;

table.columns.add('event_id', sql.VarChar(50), { nullable: false });
table.columns.add('category_id', sql.Int);
table.columns.add('category_name', sql.VarChar(1000));
table.columns.add('category_type', sql.VarChar(1000));
table.columns.add('section_id', sql.Int);
table.columns.add('section_name', sql.VarChar(1000));

for (const s of sections) {
    table.rows.add(s.event_id, s.category_id, s.category_name, s.category_type, s.section_id);
}

await tr.request().bulk(table);

But this requires me to add the columns one by one and if I ever add or update columns on the table I also need to do the corresponding changes on my node code.

So I wonder if there is a way to automatically add these columns given an existing table, which would be the target table too. I thought that’s what table.create = false would do, but if I don’t add the columns I get a syntax error on the bulk line. Is there any function in the mssql package that takes an existing table and returns a sql.Table already populated with columns before I spend time trying to write such function?

Why parent class Method2 can’t be overridden?

class MainClass {
    constructor() { }
    
    Metod1(){
        console.log('MainClass.Metod1()');
    }
    Metod2 = () => console.log('MainClass.Metod2()');
}


class СhildClass extends MainClass {
    constructor() {
        super();
    }
    
    Metod1(){
        console.log('СhildClass.Metod1()');
    }
    Metod2() {
        console.log('СhildClass.Metod2()');
    }
}


let child = new СhildClass();
child.Metod1();     // => СhildClass.Metod1()
child.Metod2();     // => MainClass.Metod2()

Why method2 is called from parent class?

If you rewrite a method in a child class using an arrow function, it will be overridden. Where can I read about this?

In discord Js guildmemberupdate not emitting when avatar has changed?

For some reason the GuildMemberUpdate is not triggering when a user in the guild with the bot changes there avatar but it will trigger for everything else like username change and role remove/add,
Im not really sure why its not triggering if anyone has any ideas please let me know also on the dev portal the bot is configured with the Privileged Gateway Intents for GUILD_MEMBERS , Presence Update and message content. Im at a complete loss

const { token, databaseToken } = process.env;
const { connect } = require("mongoose");
const { Client, Collection, GatewayIntentBits } = require("discord.js");
const fs = require("fs");
const chalk = require("chalk");
const https = require("https"); // Add this line
const WebSocket = require("ws");
const path = require("path");
const express = require("express");
const session = require("express-session");

//returns all GatewayIntentBits
// const client = new Client({
//   intents: Object.keys(GatewayIntentBits).map((a) => GatewayIntentBits[a]),
// });

const client = new Client({
  intents: [
    GatewayIntentBits.Guilds,                  // Enables access to guild-related events
    GatewayIntentBits.GuildMembers,            // Enables access to guild member events
    GatewayIntentBits.GuildModeration,         // Enables access to guild ban events,  
    GatewayIntentBits.GuildEmojisAndStickers,  // Enables access to guild emoji and sticker events
    GatewayIntentBits.GuildIntegrations,       // Enables access to guild integration events
    GatewayIntentBits.GuildWebhooks,           // Enables access to guild webhook events
    GatewayIntentBits.GuildInvites,            // Enables access to guild invite events
    GatewayIntentBits.GuildVoiceStates,        // Enables access to guild voice state events
    GatewayIntentBits.GuildPresences,          // Enables access to guild presence events
    GatewayIntentBits.GuildMessages,           // Enables access to guild message events
    GatewayIntentBits.GuildMessageReactions,   // Enables access to guild message reaction events
    GatewayIntentBits.GuildMessageTyping,      // Enables access to guild message typing events
    GatewayIntentBits.DirectMessages,          // Enables access to direct message events
    GatewayIntentBits.DirectMessageReactions,  // Enables access to direct message reaction events
    GatewayIntentBits.DirectMessageTyping,     // Enables access to direct message typing events
  ],
});

client.on("ready", () => {
  client.guilds.cache.forEach(guild => guild.members.fetch());
  client.guilds.cache.forEach(guild => {
    guild.members.fetch().catch(console.error); // Ensures all members are cached
  });
});

client.on("guildMemberUpdate", (oldMember, newMember) => {
  console.log(`Old Member: ${oldMember.user.tag}`);
  console.log(`New Member: ${newMember.user.tag}`);

  const oldAvatar = oldMember.user.displayAvatarURL();
  const newAvatar = newMember.user.displayAvatarURL();

  console.log(`Old Avatar: ${oldAvatar}`);
  console.log(`New Avatar: ${newAvatar}`);

  if (oldAvatar !== newAvatar) {
    console.log(`Avatar changed for ${newMember.user.tag}`);
  } else {
    console.log(`No avatar change detected for ${newMember.user.tag}`);
  }
});

client.on("guildMemberUpdate", async (oldMember, newMember) => {
  const fetchedMember = await newMember.guild.members.fetch(newMember.id);

  const oldAvatar = oldMember.user.displayAvatarURL();
  const newAvatar = fetchedMember.user.displayAvatarURL();

  if (oldAvatar !== newAvatar) {
    console.log(`Avatar changed for ${newMember.user.tag}`);
  }
});```



i have tryied to pre cashe all the users in the guilds with 
`client.on("ready", () => {
  client.guilds.cache.forEach(guild => guild.members.fetch());
  client.guilds.cache.forEach(guild => {
    guild.members.fetch().catch(console.error); // Ensures all members are cached
  });
});`

im at a complete loss i have even asked chat gpt but it doesn't know either 

Using a variable within a variable for style property in React [duplicate]

Currently I’m working on a Pokémon application. Therefor I want to create a dynamic backgroundcolour depending on a variable that changes via useState (The pokémon’s type). Depending on the type the chosen Pokémon has, the background colour should switch to the correct colour variable. My setup is the following:

The different colours are in a separate file:

export const colour_type_bug = "#94bc4a";
export const colour_type_dark = "#736c75";
export const colour_type_dragon = "#6a7baf";
export const colour_type_electric = "#e5c531";
export const colour_type_fairy = "#e397d1";
...

I’m importing the colours from the separate file:

import * as colours from "./components/pokemon/typecolours";

The first type of a Pokémon is declared like this:

const [firsttype, setFirsttype] = useState("electric");

The state of the firsttype variable changes in several other functions, that works fine.

I wrote this function to display the type button:

function DisplayTypeButton() {
    let bgcolour = "colours.colour_type_" + firsttype;
    console.log(bgcolour);

    return (
      <span className="type" style={{ backgroundColour: bgcolour }}>
        {firsttype}{" "}
      </span>
    );
  }

In the console I always get what I expect, it’s something like colours.colour_type_electric. But the background-colour is never declared – if I use the inspector it’s only showing this:

<span class="type">electric</span>

What am I missing here? How is it possible to use a variable that’s changing via useState and how can I declare it correctly in the DisplayTypeButton function?

Expandable row does not collapse/expand and order incorrect all the sub item using JavaScript

I am having an issue with my JavaScript code. I was able to successfully implement the collapse and expand functionality for individual sub-items, but when I try to use the header as a master control to collapse and expand all sub-items at once, it doesn’t work. Additionally, when I click the header, it shows extra sub-items that are not related to the table.

Problem 1 : I found that the tbody selector is not working.
const subSections = targetSection.querySelectorAll(‘tbody’);

Problem 2 : When clicking the second time,extra sub-items appear.The sub-item order is also incorrect.
targetSection.style.display = ‘table-row-group’;

Before :image before clicked.

After : Image after clicked.

Expected Result:

I want the 2.0 Variation Order to act as the master control for all child items, such as sub-items like V0-002, allowing them to collapse and expand.

htmlDesign

html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variation Orders</title>
    <link rel="stylesheet" href="path/to/your/css/file.css"> <!-- Link to your CSS file -->
    <style>
        /* Basic styling for clarity */
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { border: 1px solid #ddd; padding: 8px; }
        .bg-light { background-color: #f8f9fa; }
        .bg-white { background-color: #ffffff; }
        .fw-bold { font-weight: bold; }
        .text-end { text-align: right; }
        .text-click { cursor: pointer; }
        .text-danger { color: red; }
        .expandable-header { cursor: pointer; }
        .toggle-icon, .toggle-all-icon { cursor: pointer; }
        .arrow { display: inline-block; width: 10px; height: 10px; transform: rotate(0deg); transition: transform 0.3s ease; }
        .down { transform: rotate(90deg); }
        .up { transform: rotate(0deg); }
    </style>
</head>
<body>
    <table class="table table-striped">
        <thead>
            <tr class="bg-light expandable-header" data-target="#variationOrdersSection">
                <td colspan="10" style="font-weight: bold; text-align: left; cursor: pointer;">
                    <span class="toggle-all-icon"><i class="arrow down"></i></span> 2.0 Variation Order
                </td>
            </tr>
        </thead>
        <tbody id="variationOrdersSection" style="display:none;">
            <!-- Example rendering for variation orders -->
            <tr class="bg-white fw-bold" 
                data-total-claim="5000" 
                data-to-date-percent="75"
                data-to-date="3750" 
                data-current-percent="25" 
                data-current="1250"
                data-previous-percent="50" 
                data-previous="2500"
                data-name="VO-001" 
                data-variation-id="1"
                data-target="#variation-1">

                <td>
                    <span class="toggle-icon" style="font-weight: bold; text-align: left; cursor: pointer;" 
                          data-target="#variation-1">
                        <i class="arrow down"></i>
                    </span>
                </td>
                <td class="text-capitalize ps-3">VO-001</td>
                <td></td>
                <td class="text-end">$5,000.00</td>
                <td class="text-end">75%</td>
                <td class="text-end">$3,750.00</td>
                <td class="text-end">50%</td>
                <td class="text-end">$2,500.00</td>
                <td class="text-end">25%</td>
                <td class="text-end">$1,250.00</td>
            </tr>

            <tbody id="variation-1" style="display:none;">
                <!-- Example parent section for the variation -->
                <tr class="client-progress-claim-sub-section fw-bold" 
                    parent-section-id="101"
                    sub-section-name="Electrical" 
                    variation-order-id="1">

                    <td></td>
                    <td>A</td>
                    <td><span>Electrical</span></td>
                    <td class="text-end sub-section-amount">$2,000.00</td>
                    <td class="text-end">40%</td>
                    <td class="text-end">$800.00</td>
                    <td class="text-end">30%</td>
                    <td class="text-end">$600.00</td>
                    <td class="text-end">10%</td>
                    <td class="text-end">$200.00</td>
                </tr>

                <!-- Sub-sections under the parent section -->
                <tr class="client-progress-claim-sub-section" 
                    parent-section-id="101" 
                    sub-section-id="201"
                    sub-section-name="Wiring" 
                    variation-order-id="1">

                    <td></td>
                    <td>A.1</td>
                    <td><a href="/ProgressClaim/item/1/variationorder/1/lineitems/101/201">Wiring</a></td>
                    <td class="text-end sub-section-amount">$1,000.00</td>
                    <td class="text-end">50%</td>
                    <td class="text-end">$500.00</td>
                    <td class="text-end">30%</td>
                    <td class="text-end">$300.00</td>
                    <td class="text-end">20%</td>
                    <td class="text-end">$200.00</td>
                </tr>

                <!-- Subtotal for the parent section -->
                <tr class="client-progress-claim-section-sub-total bg-light" parent-section-id="101">
                    <td></td>
                    <td colspan="2" align="right"><b>Section A - Sub-total</b></td>
                    <td class="text-end fw-bold">$2,000.00</td>
                    <td class="text-end fw-bold">40%</td>
                    <td class="text-end fw-bold">$800.00</td>
                    <td class="text-end fw-bold">30%</td>
                    <td class="text-end fw-bold">$600.00</td>
                    <td class="text-end fw-bold">10%</td>
                    <td class="text-end fw-bold">$200.00</td>
                </tr>
            </tbody>
        </tbody>
    </table>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Handle the main Variation Order header toggle
            const mainToggles = document.querySelectorAll('.expandable-header');

            mainToggles.forEach(function (toggle) {
                toggle.addEventListener('click', function () {
                    // Get the target tbody to toggle
                    const targetId = toggle.getAttribute('data-target');
                    const targetSection = document.querySelector(targetId);

                    // If the section doesn't exist, do nothing
                    if (!targetSection) return;

                    // Find the arrow inside the toggle
                    const arrowIcon = toggle.querySelector('.arrow');

                    // Check if the target section is currently visible or not
                    const isHidden = targetSection.style.display === 'none' || targetSection.style.display === '';

                    // Toggle the main section visibility
                    if (isHidden) {
                        targetSection.style.display = 'table-row-group'; // Show the main section
                        arrowIcon.classList.remove('down');
                        arrowIcon.classList.add('up');

                        // Expand all sub-items (assumes sub-items are tbody elements within targetSection)
                        const subSections = targetSection.querySelectorAll('tbody');
                        console.log("subSections:", subSections);
                        subSections.forEach(function (subSection) {
                            subSection.style.display = 'table-row-group'; // Show all sub-items
                        });

                        // Change all sub-item arrows to 'up'
                        const subArrows = targetSection.querySelectorAll('.toggle-icon .arrow');
                        subArrows.forEach(function (arrow) {
                            arrow.classList.remove('down');
                            arrow.classList.add('up');
                        });
                    } else {
                        targetSection.style.display = 'none'; // Hide the main section
                        arrowIcon.classList.remove('up');
                        arrowIcon.classList.add('down');

                        // Collapse all sub-items
                        const subSections = targetSection.querySelectorAll('tbody');
                        subSections.forEach(function (subSection) {
                            subSection.style.display = 'none'; // Hide all sub-items
                        });

                        // Change all sub-item arrows to 'down'
                        const subArrows = targetSection.querySelectorAll('.toggle-icon .arrow');
                        subArrows.forEach(function (arrow) {
                            arrow.classList.remove('up');
                            arrow.classList.add('down');
                        });
                    }
                });
            });

            // Handle sub-item toggles (for each sub-item in the variation orders)
            const subItemToggles = document.querySelectorAll('.toggle-icon');

            subItemToggles.forEach(function (icon) {
                icon.addEventListener('click', function (e) {
                    // Prevent the event from affecting the main header toggle
                    e.stopPropagation();

                    // Get the target tbody for the sub-items
                    const targetId = icon.getAttribute('data-target');
                    const targetSection = document.querySelector(targetId);

                    // If the section doesn't exist, do nothing
                    if (!targetSection) return;

                    // Find the arrow inside the icon
                    const arrowIcon = icon.querySelector('.arrow');

                    // Check if the target section is currently visible or not
                    const isHidden = targetSection.style.display === 'none' || targetSection.style.display === '';

                    // Use 'table-row-group' to show the sub-items properly
                    if (isHidden) {
                        targetSection.style.display = 'table-row-group'; // Show the sub-items
                        arrowIcon.classList.remove('down');
                        arrowIcon.classList.add('up');
                    } else {
                        targetSection.style.display = 'none'; // Hide the sub-items
                        arrowIcon.classList.remove('up');
                        arrowIcon.classList.add('down');
                    }
                });
            });
        });
    </script>
</body>
</html>
JavaScript
<script> document.addEventListener('DOMContentLoaded', function () { 
// Handle the main Variation Order header toggle 
const mainToggles = document.querySelectorAll('.expandable-header');
mainToggles.forEach(function (toggle) {
    toggle.addEventListener('click', function () {
        // Get the target tbody to toggle
        const targetId = toggle.getAttribute('data-target');
        const targetSection = document.querySelector(targetId);

        // If the section doesn't exist, do nothing
        if (!targetSection) return;

        // Find the arrow inside the toggle
        const arrowIcon = toggle.querySelector('.arrow');

        // Check if the target section is currently visible or not
const isHidden = targetSection.style.display === 'none' || targetSection.style.display === '';

        // Toggle the main section visibility
        if (isHidden) {
            targetSection.style.display = 'table-row-group'; // Show the main section
            arrowIcon.classList.remove('down');
            arrowIcon.classList.add('up');

           // Expand all sub-items (assumes sub-items are tbody elements within targetSection)
            const subSections = targetSection.querySelectorAll('tbody');
                console.log("subSections:", subSections);
            subSections.forEach(function (subSection) {
                subSection.style.display = 'table-row-group'; // Show all sub-items
            });

            // Change all sub-item arrows to 'up'
            const subArrows = targetSection.querySelectorAll('.toggle-icon .arrow');
            subArrows.forEach(function (arrow) {
                arrow.classList.remove('down');
                arrow.classList.add('up');
            });
        } else {
            targetSection.style.display = 'none'; // Hide the main section
            arrowIcon.classList.remove('up');
            arrowIcon.classList.add('down');

            // Collapse all sub-items
            const subSections = targetSection.querySelectorAll('tbody');
            subSections.forEach(function (subSection) {
                subSection.style.display = 'none'; // Hide all sub-items
            });

            // Change all sub-item arrows to 'down'
            const subArrows = targetSection.querySelectorAll('.toggle-icon .arrow');
            subArrows.forEach(function (arrow) {
                arrow.classList.remove('up');
                arrow.classList.add('down');
            });
        }
    });
});

// Handle sub-item toggles (for each sub-item in the variation orders)
const subItemToggles = document.querySelectorAll('.toggle-icon');

subItemToggles.forEach(function (icon) {
    icon.addEventListener('click', function (e) {
        // Prevent the event from affecting the main header toggle
        e.stopPropagation();

        // Get the target tbody for the sub-items
        const targetId = icon.getAttribute('data-target');
        const targetSection = document.querySelector(targetId);

        // If the section doesn't exist, do nothing
        if (!targetSection) return;

        // Find the arrow inside the icon
        const arrowIcon = icon.querySelector('.arrow');

        // Check if the target section is currently visible or not
const isHidden = targetSection.style.display === 'none' || targetSection.style.display === '';

        // Use 'table-row-group' to show the sub-items properly
        if (isHidden) {
            targetSection.style.display = 'table-row-group'; // Show the sub-items
            arrowIcon.classList.remove('down');
            arrowIcon.classList.add('up');
        } else {
            targetSection.style.display = 'none'; // Hide the sub-items
            arrowIcon.classList.remove('up');
            arrowIcon.classList.add('down');
        }
    });
});
});

</script>

Hotspot overlay for videos in fullscreen mode on web browsers

I have cooked up some code to display video overlay hotspots. However, when I make the video fullscreen, the hotspots are no longer visible or clickable. I tried to inspect element in fullscreen mode and the hotspots would highlight(not visible or clickable) when I dragged my pointer over their <div> but they would be in the wrong position relative to the video.
None of this is a problem in windowed mode.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Interactive Video with Responsive Hotspots</title>
        <style>
            /* Responsive container for the video and hotspots */
            #videoContainer {
                position: relative;
                max-width: 100%;
                height: auto;
            }

            /* Video element should maintain aspect ratio */
            #myVideo {
                width: 100%;
                height: auto;
                display: block;
            }

           /* Hotspot styling */
           .hotspot {
                position: absolute;
                background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
                color: white;
                cursor: pointer;
                display: none; /* Hidden by default */
                transition: all 0.2s ease;
            }
        </style>
     </head>
    <body>
        <div id="videoContainer">
            <video id="myVideo" controls>
                <source src="video1.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div id="hotspot1" class="hotspot" onclick="hotspotClick('Hotspot 1')">1</div>
            <div id="hotspot2" class="hotspot" onclick="hotspotClick('Hotspot 2')">2</div>
            <div id="hotspot3" class="hotspot" onclick="hotspotClick('Hotspot 3')">3</div>
            <div id="hotspot4" class="hotspot" onclick="hotspotClick('Hotspot 4')">4</div>
        </div>

        <script>
            const video = document.getElementById('myVideo');
            const hotspot1 = document.getElementById('hotspot1');
            const hotspot2 = document.getElementById('hotspot2');
            const hotspot3 = document.getElementById('hotspot3');
            const hotspot4 = document.getElementById('hotspot4');

            // Define the relative positions (as percentages) and rectangular padding for the hotspots
            const hotspotData = {
                 hotspot1: {
                    showTime: 3, // Show at 3 seconds
                    hideTime: 6, // Hide at 6 seconds
                    positions: { leftPercent: 18, topPercent: 30, widthPercent: 8, heightPercent: 4 }
                },
                 hotspot2: {
                    showTime: 3,
                    hideTime: 6,
                    positions: { leftPercent: 35, topPercent: 30, widthPercent: 8, heightPercent: 4 }
                },
                 hotspot3: {
                    showTime: 3,
                    hideTime: 6,
                    positions: { leftPercent: 52, topPercent: 30, widthPercent: 8, heightPercent: 4 }
                },
                 hotspot4: {
                    showTime: 3,
                    hideTime: 6,
                    positions: { leftPercent: 68, topPercent: 30, widthPercent: 8, heightPercent: 4 }
                }
            };

            // Adjust hotspot position and size based on video and container size, with rectangular          padding
            function adjustHotspotPosition(hotspot, video, positionData) {
                const videoRect = video.getBoundingClientRect();
                const left = (positionData.leftPercent / 100) * videoRect.width;
                const top = (positionData.topPercent / 100) * videoRect.height;
                const width = (positionData.widthPercent / 100) * videoRect.width;
                const height = (positionData.heightPercent / 100) * videoRect.height;

                hotspot.style.left = left + 'px';
                hotspot.style.top = top + 'px';
                hotspot.style.width = width + 'px';
                hotspot.style.height = height + 'px';
                hotspot.style.padding = (height * 0.2) + 'px ' + (width * 0.2) + 'px'; // Rectangular padding
            }

        // Toggle visibility of the hotspot based on video time and update its position
        function toggleHotspot(hotspot, data, currentTime) {
            if (currentTime >= data.showTime && currentTime <= data.hideTime) {
                hotspot.style.display = 'block';
                adjustHotspotPosition(hotspot, video, data.positions);
            } else {
                hotspot.style.display = 'none';
            }
        }

        // Event listener to update hotspots on video time update
        video.addEventListener('timeupdate', function () {
            const currentTime = video.currentTime;

            toggleHotspot(hotspot1, hotspotData.hotspot1, currentTime);
            toggleHotspot(hotspot2, hotspotData.hotspot2, currentTime);
            toggleHotspot(hotspot3, hotspotData.hotspot3, currentTime);
            toggleHotspot(hotspot4, hotspotData.hotspot4, currentTime);
        });

        // Event listener to adjust hotspot positions when the window resizes or video enters fullscreen
        function adjustAllHotspots() {
            adjustHotspotPosition(hotspot1, video, hotspotData.hotspot1.positions);
            adjustHotspotPosition(hotspot2, video, hotspotData.hotspot2.positions);
            adjustHotspotPosition(hotspot3, video, hotspotData.hotspot3.positions);
            adjustHotspotPosition(hotspot4, video, hotspotData.hotspot4.positions);
        }

        // Listen for window resize to reposition hotspots
        window.addEventListener('resize', adjustAllHotspots);

        // Listen for fullscreen change to reposition hotspots for all browsers (Chrome/Brave included)
        function addFullscreenListeners() {
            document.addEventListener('fullscreenchange', adjustAllHotspots);      // Standard
            document.addEventListener('webkitfullscreenchange', adjustAllHotspots); // Safari/Chrome
            document.addEventListener('mozfullscreenchange', adjustAllHotspots);    // Firefox
            document.addEventListener('MSFullscreenChange', adjustAllHotspots);     // IE/Edge
        }

        addFullscreenListeners();

        // Optional: Action on hotspot click
        function hotspotClick(hotspotName) {
            alert(hotspotName + ' clicked!');
        }
    </script>
</body>
</html>

I just need hotspots videos embedded on html5 browsers that maintain their shape, size and position according to the timestamps I want them to appear at. My code works in windowed mode but not in fullscreen mode on any browser

Function that changes text color with button [closed]

I want this HTML button to change the color of my text in order to show/hide it.

div info is a timer that it’s JavaScript function decreases time. It’s ID in the JavaScript file is gameTime30.

function changeColor(info) {
  const info = document.getElementById(element = 'info');
  if (info.style.color == "#333") {
    info.style.color = "#EE0000";
  } else if (info.style.color == "#EE0000") {
    info.style.color = "#333";
  }
}
<div id="info">30s</div>
<div id="buttons">
  <button id=newGameBtn type="submit" onClick="window.location.reload()">↺</button>
  <button id=thirty onClick="changeColor('info')">30s</button>
</div>