L
L
ligisayan2019-02-21 11:08:28
JavaScript
ligisayan, 2019-02-21 11:08:28

How to rewrite map js function to be usable in ie11?

Hello! Found that ES6 code map() and `` don't work in IE 11 How is this piece of code to be rewritten cross browser or what polyfill can I use for this?

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();
});

Answer the question

In order to leave comments, you need to log in

2 answer(s)
I
Interface, 2019-02-21
@ligisayan

You are using es6. => ` that's it. It's syntax - polyfill won't help.
Paste the code here: https://babeljs.io/repl/
babel will convert it to es5, for example.
Read about: es5, es6 (es2015), babel, transpilers, differences between transpiler and polyfill

N
Nikolai Shabalin, 2019-02-21
@nikolayshabalin

According to MDN , then support with ie9+, but if it still doesn’t work, then there is a polyfill in the same article

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question