Уроки по модулю вернулись!

Привет всем! Я вернулся с уроками по Modulo после летнего перерыва. У меня в работе еще несколько уроков, так что следите за обновлениями. Тем не менее, если у вас есть какие-то конкретные идеи для моей следующей темы, обязательно дайте мне знать в комментариях!

Моим последним уроком было очень быстрое и увлекательное руководство «только HTML, без JS» по компоненту Pokémon Dance Party на основе API, состоящее менее чем из 30 строк кода веб-компонента HTML. Некоторые из моих предыдущих руководств были немного более серьезными, например, более продвинутое руководство по управлению частным и публичным состоянием. Если это звучит немного суховато, то вам повезло, потому что сегодняшний урок — еще один интересный урок, посвященный еще одной любимой видеоигре… Zelda: Breath of the Wild!

Конечно, как всегда, методы, изученные в этом руководстве, применимы к любому API, поэтому продолжайте читать, чтобы узнать больше о галерее, управляемой API!

Как использовать API компендиума Hyrule

Это руководство на 100% создано благодаря бесплатному, лицензированному MIT и щедро размещенному API Hyrule Compendium замечательного Аарава Бортакура, который представляет собой забавную, поддерживаемую фанатами базу данных и API для поиска информации о франшизе Zelda: Breath of the Wild и СМИ. Мы будем использовать конечную точку «Монстры», доступную здесь: https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters

Скриншот

Попробуйте прямо сейчас, менее чем за 30 секунд: ??? Хотите пропустить вперед? Прокрутите до конца и скопируйте 39 строк HTML-кода в любой локальный HTML-файл, а затем откройте его в браузере. Modulo не имеет зависимостей и даже запускается в локальных HTML-файлах, так что это действительно так просто!

Начните с данных

Давайте начнем всего с 6 строк кода со StaticData и шаблоном для их отображения:

В этом фрагменте у нас есть очень простой однострочный

Попробуйте запустить этот фрагмент. Видите полученные данные? Нам нужно будет пройти через это с помощью цикла for.

Создание галереи изображений

Теперь, когда мы видим, что атрибут .data содержит массив из объектов, давайте пройдемся по нему и создадим галерею:

При этом будет создано множество тегов img, каждый из которых будет иметь src=, назначенный свойствам "image" Objects в исходном JSON Array, и {% для %} template-tag — это синтаксис для дублирования фрагмента HTML для каждого элемента массива (не говоря уже о каждом индексе, например, числе, считающемся от 0). Для дальнейшей практики в цикле for есть множество интерактивных примеров в части 4 руководства по Modulo.js.

Создание состояния и сценария

Следующее самое важное, что нужно сделать, — это создать новый тег Script, который мы можем использовать для написания простой однострочной функции JavaScript:

Это основной метод написания сценариев при использовании Modulo: создавайте функции, позволяющие изменять состояние с помощью JavaScript. В данном случае он выполняет очень простую операцию: «Сохраните этого монстра на потом». Точнее, он присваивает переменной состояния «выбрано» данной полезной нагрузке. Таким образом, переменная состояния «выбрано» становится своего рода «тайником» для любого монстра, только что выбранного из API.

Прикрепление события клика

Теперь давайте добавим еще одну часть головоломки: прикрепим событие щелчка. См. ниже:

Это было сделано с помощью синтаксиса вложения событий (@click:=, в этом
case) и атрибут полезной нагрузки, который позволяет нам передать выбранного нами монстра, щелкнув это изображение. Теги «События» и «Скрипт» могут сбить с толку, если вы новичок в JavaScript (и даже если это не так!), поэтому просмотрите примеры на этой странице, чтобы узнать больше примеров использования компонентов скрипта и прикрепления событий.

Прикрепление события клика

Наконец, давайте условно отобразим информацию о монстре, когда монстр выбран:

{% if state.selected %}
    
{{ state.selected.name|capfirst }}
    

    
{{ state.selected.description }}
{% else %}
    
Welcome to Hyrule Monster Guide!
    
← Select a monster to learn more
{% endif %}

Первоначально будет показано приветственное сообщение (поскольку state.selected начинается с нуля). Затем, как только кто-то нажмет на изображение монстра, переменная state.selected больше не будет равна нулю, и
вместо этого содержимое будет отображаться в формате тегов h1 и p с некоторыми изменениями (|capfirst делает первую букву заглавной).

— встраиваемый фрагмент

Объединив все это, мы затем обертываем все в сетку display:, чтобы сделать макет рядом, и overflow: auto влево, делящее полосу прокрутки. Наконец, мы можем добавить несколько окончательных настроек CSS ко второму элементу div (отступы, поля и линейный градиент), и мы получим следующие результаты, которые можно встроить куда угодно:

Надеюсь, вам понравился этот урок. Если да, подписывайтесь, чтобы увидеть больше подобных уроков!