Untitled

(function() {
    try {
        /* main variables */
        var debug = 0;
        var variation_name = "";
        var $;
        /* all Pure helper functions */

        function waitForElement(selector, trigger, delayInterval, delayTimeout) {
            var interval = setInterval(function() {
                if (
                    document &&
                    document.querySelector(selector) &&
                    document.querySelectorAll(selector).length > 0
                ) {
                    clearInterval(interval);
                    trigger();
                }
            }, delayInterval);
            setTimeout(function() {
                clearInterval(interval);
            }, delayTimeout);
        }

        function live(selector, event, callback, context) {
            /****Helper Functions****/
            // helper for enabling IE 8 event bindings
            function addEvent(el, type, handler) {
                if (el.attachEvent) el.attachEvent("on" + type, handler);
                else el.addEventListener(type, handler);
            }
            // matches polyfill
            this.Element &&
                (function(ElementPrototype) {
                    ElementPrototype.matches =
                        ElementPrototype.matches ||
                        ElementPrototype.matchesSelector ||
                        ElementPrototype.webkitMatchesSelector ||
                        ElementPrototype.msMatchesSelector ||
                        function(selector) {
                            var node = this,
                                nodes = (node.parentNode || node.document).querySelectorAll(selector),
                                i = -1;
                            while (nodes[++i] && nodes[i] != node);
                            return !!nodes[i];
                        };
                })(Element.prototype);
            // live binding helper using matchesSelector
            function live(selector, event, callback, context) {
                addEvent(context || document, event, function(e) {
                    var found,
                        el = e.target || e.srcElement;
                    while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
                    if (found) callback.call(el, e);
                });
            }
            live(selector, event, callback, context);
        }

        let egNewHtml = `<div class="eg-filter">
    <p>Investment goal</p>
    <!-- clear and select all -->
    
    <!-- new filters -->
    <ul class="eg-filters">
        <li class="eg-defensive">
            <label>
                <span>Defensive</span>
            </label>
        </li>
        <li class="eg-income">
            <label>
                <span>Income</span>
            </label>
        </li>
        <li class="eg-growth">
            <label>
                <span>Growth</span>
            </label>
        </li>
        <li class="eg-all">
            <label>
                <span>All</span>
            </label>
        </li>
    </ul>
</div>`;

        let egNewHtml2 = `
<div class="eg-filter eg-filter-2">
    
</div>
`;
        let egPopup = `
<div class="eg-popup">
    <div class="eg-container">
    <span class="eg-close-btn"><svg viewBox="0 0 12 12" width="12" height="12" class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="
"><path d="M6 4.88 1.12 0 0 1.13 4.88 6 0 10.88 1.13 12 6 7.12 10.88 12 12 10.87 7.12 6 12 1.13 10.87 0 6 4.87Z"></path></svg></span>
        ${egNewHtml}
        ${egNewHtml2}
        <!-- view results cta -->
        <button class="eg-view-results">View Results</button>
    </div>
</div>`;

        /* Variation Init */
        function init() {
            /* start your code here */
            if (window.location.href.indexOf("/fund")) {
                if ((window.innerWidth > 768) && (!document.querySelector(".eg-filter"))) {
                    waitForElement('html body .our-funds.content-container > div:first-child > div:last-child > div:first-child > ul', function() {
                        document.querySelector("html body .our-funds.content-container > div:first-child > div:last-child > div:first-child > ul").insertAdjacentHTML("beforebegin", egNewHtml);
                        newFilterClick();
                        document.querySelector(".eg-all").classList.add("eg-clicked");
                        allClick(true);
                    }, 50, 15000);
                } else if ((window.innerWidth < 640) && (!document.querySelector(".eg-filter"))) {
                    console.log("mobile");
                    // INSERTING POPUP
                    if (!document.querySelector(".eg-popup")) {
                        document.body.insertAdjacentHTML("beforeend", egPopup);
                        document.body.classList.add("egPopupLoaded");
                        closePopup();
                        // view results btn click
                        document.querySelector(".eg-view-results").addEventListener("click", function() {
                            if (this.parentElement.querySelector(".eg-filter-2 input:checked")) {
                                document.querySelector('button[aria-controls*="slide-target-all-funds"]').parentElement.classList.remove("eg-display");
                                document.querySelector('button[aria-controls*="slide-target-all-funds"][aria-expanded="true"]') && document.querySelector('button[aria-controls*="slide-target-all-funds"][aria-expanded="true"]').click();
                            } else {
                                document.querySelector('button[aria-controls*="slide-target-all-funds"]').parentElement.classList.add("eg-display");
                                document.querySelector('button[aria-controls*="slide-target-all-funds"][aria-expanded="false"]') && document.querySelector('button[aria-controls*="slide-target-all-funds"][aria-expanded="false"]').click();
                            }
                            document.querySelector(".eg-close-btn").click();
                        });
                        addDataToNewfilter();

                        waitForElement("#slide-target-all-funds > div > div > div:last-child", function() {
                            // CLICKING ON THE ALL FUNDS SECTION
                            document.querySelector("#slide-target-all-funds > div > div > div:last-child").click();
                            document.querySelector("button[aria-controls='slide-target-all-funds']").focus();
                            document.querySelector("button[aria-controls='slide-target-all-funds']").parentElement.classList.add("eg-display");
                            movingDefaultSearchList();

                            // INSERTING FILTER BUTTON
                            if (!document.querySelector("html body .our-funds__data-metric > .eg-filter-btn")) {
                                document.querySelector("html body .our-funds__data-metric").insertAdjacentHTML("beforeend", `
                                    <button class="eg-filter-btn">
                                        Filter <span aria-hidden="true" class="filter-button-icon"><span></span></span>
                                    </button>`);
                                // ADD CLICK ON THE FILTER BUTTON 
                                showPopup();
                            }
                        }, 50, 15000);
                    }
                }
            }
        }

        function closePopup() {
            document.querySelector("html body .eg-popup .eg-container .eg-close-btn").addEventListener("click", function() {
                if (document.querySelector(".eg-filter-2 input:checked")) {
                    document.querySelector('button[aria-controls*="slide-target-all-funds"]').parentElement.classList.remove("eg-display");
                    document.querySelector('button[aria-controls*="slide-target-all-funds"][aria-expanded="true"]') && document.querySelector('button[aria-controls*="slide-target-all-funds"][aria-expanded="true"]').click();
                } else {
                    document.querySelector('button[aria-controls*="slide-target-all-funds"]').parentElement.classList.add("eg-display");
                    document.querySelector('button[aria-controls*="slide-target-all-funds"][aria-expanded="false"]') && document.querySelector('button[aria-controls*="slide-target-all-funds"][aria-expanded="false"]').click();
                }
                document.querySelector(".eg-popup").classList.remove("eg-popup-shown");
            });
        }

        function showPopup() {
            document.querySelector("button.eg-filter-btn").addEventListener("click", function() {
                document.querySelector(".eg-popup").classList.add("eg-popup-shown");
            });
        }

        function addDataToNewfilter() {
            waitForElement('html body button[aria-controls*="slide-target"]', function() {
                let egDataHtml = '';
                let egAllfund;
                document.querySelectorAll('html body button[aria-controls*="slide-target"] > span').forEach(cta => {
                    if (cta.parentElement.getAttribute("aria-controls") != "slide-target-all-funds") {
                        egDataHtml += `
                        <li data-id="${cta.parentElement.getAttribute("aria-controls")}" class="eg-new-filter-cta">
                            <label>
                                <input type="checkbox">
                                <span>${cta.innerText}</span>
                                <span class="eg-box">
                                    <svg viewBox="0 0 26 26" width="18" height="18" class="" pathLength="1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
                                        <path d="m5 12.5 6 6L21 6" pathLength="1" style="fill:none;fill-rule:nonzero;stroke-width:3px;stroke:currentColor;">
                                        </path>
                                    </svg>
                                </span>
                            </label>
                        </li>`;
                    } else {
                        egAllfund = cta.innerText;
                    }
                });

                let egDataHtmlAdd = `
                <p>${egAllfund}</p>
                <!-- clear and select all -->
                <div class="eg-clear-select-all"><button class="eg-s">Select all/</button><button class="eg-c">Clear all</button></div>
                <!-- new filters -->
                <ul class="eg-filters">${egDataHtml}</ul>`;

                document.querySelector(".eg-filter-2").insertAdjacentHTML("afterbegin", egDataHtmlAdd);
                newFilterClick();
                // SELECT ALL AND CLEAR ALL
                document.querySelectorAll(".eg-filter.eg-filter-2 .eg-clear-select-all > button").forEach(cta => {
                    cta.addEventListener('click', function() {
                        let prm = false;
                        if (this.classList.contains("eg-s")) {
                            prm = true;
                        }
                        allClick2(prm);
                    });
                });
            }, 150, 15000);


        }

        function newFilterClick() {
            document.querySelectorAll(".eg-filters > li").forEach(filter => {
                filter.addEventListener("mousedown", function() {
                    if (this.classList.contains("eg-defensive")) {
                        if (document.querySelector('.eg-all.eg-clicked')) {
                            document.querySelector(".eg-all").classList.remove("eg-clicked");
                            allClear(document.querySelector('div[data-filter-type="investmentGoal"] > label:nth-child(1)'));
                        } else {
                            document.querySelector('div[data-filter-type="investmentGoal"] > label:nth-child(1) input').click();
                        }
                    }

                    if (this.classList.contains("eg-growth")) {
                        if (document.querySelector('.eg-all.eg-clicked')) {
                            document.querySelector(".eg-all").classList.remove("eg-clicked");
                            allClear(document.querySelector('div[data-filter-type="investmentGoal"] > label:nth-child(2)'));
                        } else {
                            document.querySelector('div[data-filter-type="investmentGoal"] > label:nth-child(2) input').click();
                        }
                    }

                    if (this.classList.contains("eg-income")) {
                        if (document.querySelector('.eg-all.eg-clicked')) {
                            document.querySelector(".eg-all").classList.remove("eg-clicked");
                            allClear(document.querySelector('div[data-filter-type="investmentGoal"] > label:nth-child(3)'));
                        } else {
                            document.querySelector('div[data-filter-type="investmentGoal"] > label:nth-child(3) input').click();
                        }
                    }

                    // gettin total number of results
                    this.classList.toggle("eg-clicked");
                    // let egTotal = document.querySelector("div.our-funds__search-results .funds-search-number span").innerText.replace("funds", "").replace("(", "").replace(")", "").trim();
                    if (this.classList.contains("eg-new-filter-cta")) {
                        let egSelector = `button[aria-controls="${this.getAttribute("data-id")}"]`;
                        document.querySelector(egSelector).click();
                        document.querySelector(egSelector).focus();
                        document.querySelector(egSelector).parentElement.classList.toggle("eg-display");
                    }

                    if (this.classList.contains("eg-all")) {
                        let prm = false;
                        if (this.classList.contains("eg-clicked")) {
                            prm = true;
                        }
                        allClick(prm);
                    }
                });
            })
        }

        function allClick(prm) {
            document.querySelectorAll(".eg-filter:not(.eg-filter-2) .eg-filters > li:not(.eg-all)").forEach(itm => {
                itm.classList.remove("eg-clicked");
            });
            let egSelectorS = [...document.querySelectorAll('div[data-filter-type="investmentGoal"] > label input:not(:checked)')];
            if (prm == false) {
                egSelectorS = [...document.querySelectorAll('div[data-filter-type="investmentGoal"] > label input:checked')];
            }
            if (egSelectorS.length > 0) {
                let egl = egSelectorS.length;
                let count = 0;
                let intr = setInterval(function() {
                    if (egSelectorS[count]) {
                        egSelectorS[count].click();
                    }
                    if (count == egl)
                        clearInterval(intr);
                    count++;
                }, 50);
            }
        }

        function allClear(target) {
            let egSelectorS = [...document.querySelectorAll('div[data-filter-type="investmentGoal"] > label input:checked')];
            console.log(egSelectorS);
            let egl = egSelectorS.length;
            if (egl > 0) {
                let count = 0;
                let intr2 = setInterval(function() {
                    if (count == egl) {
                        clearInterval(intr2);
                        // console.log("cleared",target);
                        setTimeout(() => {
                            target.click();
                        }, 500);
                    } else {
                        if (egSelectorS[count]) {
                            egSelectorS[count].click();
                        }
                    }
                    count++;
                }, 100);
            }
        }

        function allClick2(prm) {
            let egSelector;
            if (prm == true) {
                egSelector = ".eg-filter.eg-filter-2 .eg-filters > li:not(.eg-clicked)";

            } else {
                egSelector = ".eg-filter.eg-filter-2 .eg-filters > li.eg-clicked";
            }

            document.querySelectorAll(egSelector).forEach(itm => {
                if (prm == true) {
                    itm.classList.add("eg-clicked");
                    itm.querySelector("input").checked = true;
                } else {
                    itm.classList.remove('eg-clicked');
                    itm.querySelector("input").checked = false;
                }
                setTimeout(() => {
                    document.querySelector('button[aria-controls="' + itm.getAttribute("data-id") + '"]').click();
                    document.querySelector('button[aria-controls="' + itm.getAttribute("data-id") + '"]').parentElement.classList.toggle("eg-display");
                }, 300);
            });
        }

        function movingDefaultSearchList() {
            waitForElement("html body .our-funds__search-results", function() {
                document.querySelector("html body .our-funds__search-results").classList.add("eg-our-srch");
                document.querySelector("html body .our-funds__listing > div:nth-child(3)").insertAdjacentElement("beforebegin", document.querySelector("html body .our-funds__search-results"));
            }, 1000, 15000);
        }

        /* Initialize variation */
        waitForElement("html body", init, 50, 15000);
    } catch (e) {
        if (debug) console.log(e, "error in Test" + variation_name);
    }
})();


<style>
@media(min-width:767px) {
    html body .eg-filter {
        height: max-content !important;
        margin-bottom: 30px;
    }
}


html body .eg-filters {
    list-style: none;
    padding-left: 0;
}

html body .eg-filter:not(.eg-filter-2) .eg-filters {
    display: flex;
    flex-wrap: wrap;
}

html body .eg-filter-2 .eg-filters li+li {
    margin-top: 6px;
}

html body .eg-filters label {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    vertical-align: middle;
    position: relative;
    line-height: 1.5;
}

html body .eg-filters label input {
    appearance: none;
    outline: none !important;
    border: none !important;
}

html body .eg-filters label>span:not(.eg-box) {
    font-size: 16px;
    font-family: 'Rund Text', sans-serif;
    color: #5f5964;
}

html body .eg-filters label>span.eg-box {
    cursor: pointer;
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0px !important;
    background-color: rgb(255 255 255 / 1) !important;
    border: 1px solid rgb(174 174 174 / 0.3);
    border-radius: 0.3125rem;
    appearance: none;
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    display: inline-flex;
    position: absolute;
    color: white;
    justify-content: center;
    align-items: center;
}

html body .eg-filters label>input:not(:checked)~span.eg-box svg {
    display: none;
}

html body .eg-filters label>input:checked~span.eg-box {
    background-color: #fc4d16 !important;
}



html body .eg-filter>p {
    color: #fc4d16;
    font-size: 16px;
    margin-bottom: 11px;
    font-weight: 400;
}

html body .eg-filter-2>p {
    color: #fc4d16 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

html body .eg-filter-2 .eg-filters label>span:not(.eg-box) {
    margin-left: 20px;
}

html body .eg-clear-select-all button {
    padding: 0;
    font-size: 14px;
    color: #5f5964;
}

html body .eg-clear-select-all {
    margin-bottom: 11px;
}

html body .eg-clear-select-all button:not(:last-child) {
    margin-right: 10px;
}

html body .eg-filter:not(.eg-filter-2) .eg-filters>li {
    padding: 5px 10px;
    background: white;
    border: 1px solid rgb(95 89 100 / 43%);
    border-radius: 100vmax;
    margin: 6px 6px 0 0;
}

html body .eg-filter:not(.eg-filter-2) .eg-filters>li label>span:not(.eg-box) {
    color: #fc4d16;
}

html body .eg-filter:not(.eg-filter-2) .eg-filters>li.eg-clicked {
    background: #fc4d16;
    border-color: #fc4d16;
}

html body .eg-filter:not(.eg-filter-2) .eg-filters>li.eg-clicked label>span:not(.eg-box) {
    color: white !important;
}

html body .eg-filter:not(.eg-filter-2)>p {
    margin-left: 6px;
}

/*hiding default filter btn*/
html body .our-funds__active-filters-container {
    display: none !important;
}

/*giving some marginbottom to the search box*/
html body .our-funds__search-container {
    margin-bottom: 35px;
}

/*Mobile*/
@media(max-width:639px) {
    html body .eg-filter:not(.eg-filter-2) .eg-all {
        display: none !important;
    }

    html body .eg-filter:not(.eg-filter-2) .eg-filters {
        justify-content: space-between !important;
    }

    html body .eg-filter {
        margin-bottom: 20px !important;
    }

    html body button[aria-controls="slide-target-all-funds"]>svg {
        display: none !important;
    }

    html body button[aria-controls*="slide-target"]>svg {
        display: none !important;
    }

    html body div.our-funds__listing>div:nth-child(4) {
        display: flex;
        justify-content: space-between;
    }

    html body div.our-funds__listing>div:nth-child(4)>button {
        width: 120px;
    }

    html body .our-funds__data-metric {
        position: relative;
    }

    html body button.eg-filter-btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
        position: absolute;
        width: 80px !important;
        z-index: 15 !important;
        bottom: -78px;
        right: -9px;
        z-index: 15;
    }

    html body .eg-filter-btn .filter-button-icon::before {
        height: 2.5px;
    }

    /*popup css*/
    html body.egPopupLoaded {
        position: relative;
    }

    html body .eg-popup:not(.eg-popup-shown) {
        display: none !important;
    }

    html body .eg-popup {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        z-index: 999999 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(0 0 0 /30%);
    }

    html body .eg-popup .eg-container {
        background: white;
        width: 90%;
        height: 95%;
        border-radius: 20px;
        position: relative;
        padding: 23px;
        max-height: 655px;
    }

    html body .eg-popup .eg-container .eg-close-btn {
        position: absolute;
        right: 23px;
        top: 23px;
    }

    html body .eg-filter.eg-filter-2 {
        height: 74% !important;
    }

    html body .eg-filter.eg-filter-2 .eg-filters {
        height: 87% !important;
        overflow: scroll !important;
    }

    html body button.eg-view-results {
        background: #fc4d16;
        color: white;
        border-radius: 100vmax;
        padding: 12px 16px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    /*popup css*/

    /* show hide the filters */
    html body .our-funds__listing>div[class*="sm:hidden"]:nth-child(n + 3):not(.eg-display) {
        display: none !important;
    }

    html body .eg-our-srch {
        margin-top: 64px !important;
    }

    html body .eg-our-srch>div>div,
    html body .eg-our-srch>div {
        padding-bottom: 0 !important;
    }

    /* show hide the filters **/
    html body .our-funds.content-container>div {
        padding-bottom: 1rem !important;
    }
}
</style>