Отложено загружаемые встроенные блоки с предварительным заполнением

Встроенные блоки с предварительным заполнением CodePen - идеальный способ дополнить документацию интерактивными примерами. С их помощью можно сохранить весь необходимый код в своем репозитории или публикации в блоге, чтобы иметь возможность обновлять демонстрационные версии и отслеживать изменения. Для начала можно настроить все в реальном Pen, а затем скопировать встраивание из Embed Builder или использовать синтаксис для создания своего собственного решения!

Превращение примеров кода в интерактивную демонстрацию - это действительно круто, но вы можете не захотеть, чтобы это происходило сразу. Давайте рассмотрим способ, позволяющий превратить блоки кода в CodePen Embed при нажатии!

Ниже приведен образец, скопированный непосредственно из Embed Builder.

<div class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="codepen" data-slug-hash="fd63b769e68be117bc6dbc2d259d002c" data-prefill='{"tags":[],"scripts":[],"stylesheets":[]}'>
  <pre data-lang="html">&lt;h1>Hello from HTML&lt;/h1></pre>
  <pre data-lang="css">html {
  background: black;
  color: white;
  text-align: center;
}

h1::after {
  content: " / CSS!";
}
</pre>
  <pre data-lang="js">document.querySelector("h1").innerHTML += " / JavaScript";
</pre></div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Добавление клика для запуска

Скрипт CodePen Embed (ei.js) автоматически превращает элементы с классом codepen во встраивания при загрузке страницы. Если мы уберем этот класс, то сможем применить следующий трюк, чтобы создать кнопку Click to Run:

<div data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="codepen" data-slug-hash="fd63b769e68be117bc6dbc2d259d002c" data-prefill='{"tags":[],"scripts":[],"stylesheets":[]}'>
  ...
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<script>
// Перебираем через цикл все элементы с атрибутом `data-prefill`
Array.from(document.querySelectorAll('[data-prefill]'), ( el ) => {
  // Создаем кнопку Click to Run
  const button = document.createElement("button");
  button.innerHTML = "Click to Run";
  button.setAttribute("class", "prefill-click-to-run");
  el.appendChild(button);

  // При клике элемент превращается во встроенный блок!
  button.addEventListener("click", () => {
    el.classList.add("codepen"); // Add the codepen class back.
    window.__CPEmbed(); // Trigger the CodePen embed script to run again.
  });
});
</script>

Добавьте несколько стилей, и вы сможете получить несколько хороших блоков кода, которые при нажатии превращаются во встроенные блоки:

Подсветка синтаксиса, отложенная загрузка и многое другое!

Можно еще больше улучшить настройку с помощью подсветки синтаксиса через Prism.js, скрытия блоков кода и отложенной загрузки скрипта CodePen Embed, чтобы ваши веб-страницы были как можно более легкими!

Сочетание всех этих методов формирует легкий и эффективный способ создания по запросу встроенных блоков с предварительным заполнением!

Пожалуйста, оставляйте свои отзывы по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, отклики, дизлайки, лайки!

Пожалуйста, оставляйте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, подписки, дизлайки, отклики, лайки!

Вадим Дворниковавтор-переводчик статьи «Lazy Loaded Prefill Embeds»