+
traversing the DOM https://vanillajstoolkit.com/ Unicode Table string manipulation methods setTimeout and this https://developers.kameleoon.com/git-integration.html https://www.kameleoon.com/en/blog/kameleoon-developer-experimentation-tools https://www.kameleoon.com/en/integrations/git

CSS per JS einfügen

let stylesLeap = document.createElement('style'); stylesLeap.textContent = `{}
@media only screen and (max-width:767.98px) {
}
`; document.head.append(stylesLeap);

// Wait

let waitForDomNodes = function (selector, callbackFunction, parameters) {
	parameters = { timeout: 100, context: document, clear: true, 
		...parameters
	};
    let wait = setInterval( function () {
        let nodeList = parameters.context.querySelectorAll(selector);
        if (nodeList.length) {
            if (parameters.clear) {
                clearInterval(wait);
            }
            callbackFunction(nodeList);
        }
    }, parameters.timeout);
};

waitForDomNodes( '.content', (nodeList) => {
    console.log(nodeList.length);
    nodeList[0].parentNode.insertAdjacentHTML('afterBegin', '

hello

'); nodeList.forEach( (node) => { node.insertAdjacentHTML('afterbegin', '<i class="uk-icon-exclamation-circle"></i>'); }) }, {timeout: 100, context: document, clear: true}); Kameleoon.API.Core.runWhenElementPresent( '.selector', function (nodeList) { const observer = new MutationObserver( (mutationList) => { mutationList.forEach( (mutation) => { if (mutation.type === 'childList') { // do something } }) }); observer.observe( nodeList[0], {childList: true} ); } );

Flackereffekt entfernen

.searchField {
    opacity: 0;
}    
.leap-flackern-entfernen {
    opacity: 1 !important;
    transition: opacity .25s linear;
}

let searchField = document.querySelector('.searchField');
searchField.classList.add('leap-flackern-entfernen');

Wait for a DOMELEMENT to load

let waitEl = setInterval( function () {
    let DOMELEMENT = document.querySelector('.DOMELEMENT');
    if (DOMELEMENT) {
        clearInterval(waitEl);
        
        DOMELEMENT.style.width = newPosition + 'px';
    }
}, 50);

Wait for document to load

document.addEventListener('DOMContentLoaded', (event) => {});

Wait for jQuery

const CheckjQueryInt = setInterval(function() {
        if (typeof $ != 'undefined') {
            clearInterval(CheckjQueryInt);
        }
    }, 100);

vanillajstoolkit.com DOM-Injection
https://caniuse.com/dom-manip-convenience

neues Element in die Seite einfügen

let ELEMENT = document.createElement("div");
ELEMENT.classList.add('item');
ELEMENT.innerHTML = `
    icon mit Text`;
document.querySelector('.item:last-child').after(ELEMENT);

//////////// oder //////////////

const string_of_html = '<div>text</div>';
const svg = document.createElementNS("<http://www.w3.org/2000/svg>", "svg");
const text = document.createTextNode("Text");

const domelement = document.createElement('div');
domelement.innerHTML = string_of_html;
domelement.textContent = "text";

el.insertAdjacentHTML(WHERE, string_of_html);
el.insertAdjacentElement(WHERE, domelement);
el.insertAdjacentText(WHERE, 'text');

    el.before(domelement oder text); // kein HTML
    el.insertAdjacentXXX('beforeBegin', WHAT);
----
|	el.insertAdjacentXXX('afterBegin', WHAT);
|
|   el.prepend(domelement, svg, ...);
|	el.prepend('text');
| --
| | let oldChild = parentNode.replaceChild(newChild, oldChild);	
| |	parentNode.firstElementChild.replaceWith(newChild); // Node or DOMString
| --
|	child1.parentNode.insertBefore( domelement, child1.nextSibling );
|	child2.parentNode.insertBefore( domelement, child2 );
| --
| |	el.removeChild(el.lastElementChild);
| | el.children[1].remove();
| --
|   el.appendChild(domelement);
|   el.append(domelement, svg, ...);
|	el.append('text');
|
|	el.insertAdjacentXXX('beforeend', WHAT);
----
    el.insertAdjacentXXX('afterend', WHAT);
    el.after(domelement oder text);
    
el.children
el.firstElementChild	
el.lastElementChild
el.childElementCount 

el.textContent (auch unsichtbare Elemente) 
el.innerText (nur gerenderte Elemente)

Erstes Element clonen

let parentNode = document.querySelector('.some_selector');
let childNode = parentNode.querySelector(':first-child');
parentNode.insertBefore(childNode.cloneNode(true), childNode);

Alle EventListener von einem Domelement entfernen

function removeEventListeners (el) {
    let elClone = el.cloneNode(true);
    el.parentNode.replaceChild(elClone, el);
    return elClone;
}

let element = document.querySelector('dl.leap-faq:nth-child(5) > dt:nth-child(1)');
element = removeEventListeners( element );

Auf welcher Page bin ich?

let bool1 = document.body.classList.contains('product-page');
let bool2 = window.location.href.includes('/checkout');
window.location.href.split('?')[0] schneidet die Parameter ab

let word = 'marek';
if ( !~word.indexOf('Arrrr!') ) {
    console.log("word does NOT contain 'Arrrr!'");
}
if ( !!~word.indexOf('ar') ) {
    console.log("word contains 'ar'");
}

Scrolltiefe

let waitingForScroll50 = true;
let waitingForScroll100 = true;

function ScrolltiefeProzent(scrollPosition) {
    const scrolltiefe =
    scrollPosition / (document.body.offsetHeight - window.innerHeight);

    if (scrolltiefe > 0.95) {
    if (waitingForScroll100) {
        console.log("Scrolltiefe 100% erreicht - PDS");
        //Kameleoon.API.Goals.processConversion(229292);
        waitingForScroll100 = false;
    }
    } else if (scrolltiefe >= 0.5) {
    if (waitingForScroll50) {
        console.log("Scrolltiefe 50% erreicht - PDS");
        //Kameleoon.API.Goals.processConversion(229290);
        waitingForScroll50 = false;
    }
    }
}

let zumElementGescrollt = false;

function ScrolltiefeElement (scrollPosition, elementSelector) {
    let h2Top = document.querySelector(elementSelector)
    if (!zumElementGescrollt && scrollPosition > $(h2Top).offset().top - 200)  {
        console.log('Scrolltiefe: Anfang Content - PDS');
        zumElementGescrollt = true;
    }
}

on 'scroll' throtteling

let ticking = false;
document.addEventListener("scroll", function (e) {
    if (!ticking) {
        window.requestAnimationFrame(function () {
            let letzteScrollPosition = window.pageYOffset; // better cross-browser compatibility than window.scrollY
        
            ScrolltiefeProzent(letzteScrollPosition);
            ScrolltiefeElement(letzteScrollPosition, 'div:nth-of-type(3).container.section' );

            ticking = false;
        });
        ticking = true;
    }
});

add class to body if Scroll down

header.header:not(.header--simple) {
    position: fixed;
    transform: translateY(0%);
}
body.leap-scrolling-down header.header:not(.header--simple) {
    transform: translateY(-100%);
}


/* ein- und ausblenden der Navi beim Scrollen */
let scrolltiefe = function (scrollpos) {
    if (scrollpos < letzteScrollPosition && scrollRichtung !== 'up') {
        scrollRichtung = 'up';
        document.body.classList.remove('leap-scrolling-down');
    } else if ( scrollpos > letzteScrollPosition && scrollRichtung !== 'down' ) {
        scrollRichtung = 'down';
        document.body.classList.add('leap-scrolling-down');
    }
    letzteScrollPosition = scrollpos;
};
let ticking = false;
let letzteScrollPosition = window.pageYOffset; // better cross-browser compatibility than window.scrollY
let scrollRichtung;
document.addEventListener("scroll", function (e) {
    if (!ticking) {
        window.requestAnimationFrame(function () {
            scrolltiefe(window.pageYOffset);
            ticking = false;
        });
        ticking = true;
    }
});

vanilla JavaScript replacement for jQuery.on()

document.addEventListener('click', function (event) {
    if (event.target.closest('.logo')) {
        //todo //Klick Logo - Header - Sitewide
        console.log('Klick Logo - Header - Sitewide');
    } else if (event.target.closest('')) {
        //todo //
        console.log('');
    }
});

localStorage || sessionStorage

if (!sessionStorage.leap_polo_coupon) {
    sessionStorage.leap_polo_coupon = 1;
}

Zahl aus einem String parsen

function extractPrice (element) {
    let preisString = element.innerText
                .trim()
                .replace('.','').
                replace(',','.');
    return parseInt(preisString, 10);
}
extractPrice( document.getElementById('preis') );

FIX Kameleoon layer zu breit on Mobile

let stylesLeap = document.createElement('style');
stylesLeap.innerHTML = `

#knsmp .kn-sm-show {
    left: 0 !important;
    right: unset !important;
}
#knsmp .kn-sm {
    width: 100vw !important;
    right: unset !important;
    left: 0 !important;
    top: 100px !important;
}

`;
document.body.insertAdjacentElement('beforeend', stylesLeap);

CSS (mobile CSS width: 320px - 480px)

:root {
    --bg-color-1: #aed;
    --bg-color-2: #dae;
}
@media only screen and (max-width:779.98px) {
    div {
        background-color: var(--bg-color-1);
    }
}

console.log


var logStyle = 'background: #2E495E;border-radius: 0.5em;color: white;font-weight: bold;padding: 2px 0.5em;';
console.log('%cLEAP', logStyle,  'text' );

Unicode Characters

content: '✖';
    × 
★ ★
✓	 	✓	✓	checkmark sign
✔	 	✔	✔	checkmark sign
→
Gedankenstrich/Halbgeviertstrich – – – | Minus -

Material Icons Ligatures