Всем привет! Обнаружил, что код
ES6 map() и `` не работают в
IE 11 Как это участок кода переписать кроссбраузерно или какой использовать можно
polyfill для этого?
jQuery.noConflict();
jQuery(document).ready(function($) {
const keys = ["hard", "soft"];
document.head.appendChild((style => {
style.textContent = keys.map(key => `
#main-slider-wrapper .slider-key button[data-key="${key}"] {
background-image:
url(img/${key}-key-slider.png)
}
#main-slider-wrapper[data-key="${key}"] .slider img[src*="${key}-key"] {
opacity: 1;
}
#main-slider-wrapper[data-key="${key}"] .slider-key button[data-key="${key}"] {
filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5));
-webkit-filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5));
}
`).join("\n\n");
return style;
})(document.createElement("style")));
document.addEventListener("click", ({
target
}) => {
if (!target.matches(
`${keys.map(k => `[data-key="${k}"]`).join(", ")}, .slick-arrow`
)) return;
const root = target.closest("#main-slider-wrapper");
const key = target.dataset.key;
const index = keys.indexOf(key);
root.dataset.key = key;
for (const arrow of root.querySelectorAll(".slick-arrow")) {
arrow.dataset.key = keys[
(keys.length + (
arrow.classList.contains("left") ? -1 : 1
) + index) % keys.length
];
}
});
for (const e of document.querySelectorAll(`[data-key="${keys[0]}"]`))
e.click();
});
