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 -