Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Как переписать функцию map es6 под ie11? (https://javascript.ru/forum/css-html/76860-kak-perepisat-funkciyu-map-es6-pod-ie11.html)

giwuf 21.02.2019 11:25

Как переписать функцию map es6 под ie11?
 
Всем привет. Обнаружил, что функция map из es6 не работает в ie11.

Подскажите, пожалуйста, как ее переписать под ie11 так, чтобы она заработала или может быть использовать какой 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();
});

Nexus 21.02.2019 11:53

С чего вы взяли, что у вас проблема с Array.map?
https://developer.mozilla.org/ru/doc...B0%D0%BC%D0%B8

Template strings
For of

Воспользуйтесь транспайлером, например этим Babel

upd. еще и деструктуризация юзается.

giwuf 21.02.2019 12:21

Цитата:

Сообщение от Nexus (Сообщение 503893)
С чего вы взяли, что у вас проблема с Array.map?
https://developer.mozilla.org/ru/doc...B0%D0%BC%D0%B8

Воспользуйтесь транспайлером, например этим Babel

Да, Nexus, спасибо, понял, что не в map дело, просто во всех этих блоках он присутствовал.

Но, пока это решило проблему лишь частично - остались вопросы к этому блоку, в частности к matches и closest - ie говорит, что не знает таких функций
document.addEventListener("click", function (_ref) {
    var target = _ref.target;
    if (!target.matches("".concat(keys.map(function (k) {
      return "[data-key=\"".concat(k, "\"]");
    }).join(", "), ", .slick-arrow"))) return;
    var root = target.closest("#main-slider-wrapper");
    var key = target.dataset.key;
    var index = keys.indexOf(key);
    root.dataset.key = key;
}

Nexus 21.02.2019 12:40

giwuf, воспользуйтесь гуглом.

https://developer.mozilla.org/ru/doc...%D0%BB %D0%BB
https://developer.mozilla.org/ru/doc...%D0%B E%D0%B4)

SuperZen 21.02.2019 13:08

https://learn.javascript.ru/task/polyfill-matches
https://learn.javascript.ru/task/polyfill-closest

giwuf 21.02.2019 13:41

Цитата:

Сообщение от Nexus
giwuf, воспользуйтесь гуглом.

Да, спасибо, так и сделал, когда искал пути решения + обязательно добавил babel polyfill, без него показывало ошибку

Цитата:

"Символ" не определен в IE после использования babel
Сейчас практически все работает кроме подгрузки изображений, почему-то еще с ними пока косяк, но разбираюсь

SuperZen 21.02.2019 13:58

не понятно, какая инфраструктура у тебя, но если звезды совпали, то можно указать target: ie11 )

https://github.com/babel/babel-prese...ment-285820866

giwuf 21.02.2019 15:29

Цитата:

Сообщение от SuperZen
не понятно, какая инфраструктура у тебя, но если звезды совпали, то можно указать target: ie11 )

Но, я воспользовался babel online - https://babeljs.io/repl


Часовой пояс GMT +3, время: 18:07.