Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.02.2019, 11:25
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 116

Как переписать функцию 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();
});
Ответить с цитированием
  #2 (permalink)  
Старый 21.02.2019, 11:53
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,906

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

Template strings
For of

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

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

Последний раз редактировалось Nexus, 21.02.2019 в 11:57.
Ответить с цитированием
  #3 (permalink)  
Старый 21.02.2019, 12:21
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 116

Сообщение от Nexus Посмотреть сообщение
С чего вы взяли, что у вас проблема с 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;
}
Ответить с цитированием
  #4 (permalink)  
Старый 21.02.2019, 12:40
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,906

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

https://developer.mozilla.org/ru/doc...%D0%BB %D0%BB
https://developer.mozilla.org/ru/doc...%D0%B E%D0%B4)
Ответить с цитированием
  #5 (permalink)  
Старый 21.02.2019, 13:08
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 311

https://learn.javascript.ru/task/polyfill-matches
https://learn.javascript.ru/task/polyfill-closest
Ответить с цитированием
  #6 (permalink)  
Старый 21.02.2019, 13:41
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 116

Сообщение от Nexus
giwuf, воспользуйтесь гуглом.
Да, спасибо, так и сделал, когда искал пути решения + обязательно добавил babel polyfill, без него показывало ошибку

Цитата:
"Символ" не определен в IE после использования babel
Сейчас практически все работает кроме подгрузки изображений, почему-то еще с ними пока косяк, но разбираюсь
Ответить с цитированием
  #7 (permalink)  
Старый 21.02.2019, 13:58
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 311

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

https://github.com/babel/babel-prese...ment-285820866
Ответить с цитированием
  #8 (permalink)  
Старый 21.02.2019, 15:29
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 116

Сообщение от SuperZen
не понятно, какая инфраструктура у тебя, но если звезды совпали, то можно указать target: ie11 )
Но, я воспользовался babel online - https://babeljs.io/repl
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как через динамическую втавку в страницу автоматически вызвать функцию javascript? Roberts AJAX и COMET 2 19.03.2013 11:32
как создать собственную карту как в Google map Khazaryan jQuery 1 21.03.2011 20:55
как создать собственную карту как в Google map Khazaryan Общие вопросы Javascript 1 20.03.2011 02:56
[Closure Compiler] Как запретить инлайнить функцию, которая вызывается из setTimeout? xintrea Events/DOM/Window 4 11.02.2011 16:23
Как писать скрипты под Opera? ucsus (X)HTML/CSS 2 15.04.2009 13:07