Привет, ребята🙌
Сегодня я закончил пятое видео JavaScript30!
Проект 05: Галерея изображений панелей Flex
Источник: https://javascript30.com
Обучение:
Сегодня я научился модифицировать flexbox с помощью JavaScript! Прикрепите изображение с переходом ниже, поэтому, когда вы нажимаете на любой конкретный раздел веб-страницы, размер контейнера увеличивается, а затем происходит переход в верхний и нижний текст. Это круто!
Во-первых, нам нужно убедиться, что изображения расположены слева направо, а текст равномерно разделен на трети. Основной <div class="panels">
содержит каждый из <div class="panel">
, который представляет собой отдельную фотографию и текст. Чтобы сложить каждую панель рядом с другой, вместо использования float: left
, как в старые времена, мы используем flexbox.
С flexbox вы сначала выясняете, каким будет ваш flex-контейнер. В данном случае это наш <div class="panels">
, и мы присваиваем ему свойство display: flex
. Отлично, теперь у нас есть гибкий контейнер с дочерними элементами.
Теперь, используя свойство flex: 1
, мы равномерно распределим пространство между флексбоксами.
Таким образом, по умолчанию <div>
имеет свойство отображения display: block
, и flex-потомки не являются исключением. Но мы можем сделать каждый flex-потомок своим собственным flex-контейнером, делая дочерние flex-потомки также flex-потомками.
Это будет сделано с помощью следующего CSS:
flex: 1 0 auto; display: flex; justify-content: center; align-items: center;
Теперь идет часть JavaScript
Первое, что нам нужно сделать, это убедиться, что текст, который мы хотим вводить и выводить, на самом деле находится вне нашего поля зрения. Так что несколько быстрых строк CSS сделают свое дело:
.panel > *:first-child { transform: translateY(-100%) } .panel.open-active > *:first-child { transform: translateY(0) } .panel > *:last-child { transform: translateY(100%) } .panel.open-active > *:last-child { transform: translateY(0) }
Из-за flexbox мы можем просто translateY
обоих потомков таким образом, чтобы они оба оказались за пределами документа. Затем у нас есть класс .open-active
, чтобы вернуть их обратно в документ с помощью JavaScript.
Итак, первое, что нам нужно сделать, это собрать все панели. Для этого мы выводим наш верный querySelectorAll
вот так:
const panels = document.querySelectorAll('.panel');
Когда мы нажимаем на панель, мы хотим, чтобы она открывалась, а затем переводила текст в изображение. Это делается с помощью метода addEventListener
:
panels.forEach(panel => panel.addEventListener('click', toggleOpen))
Когда мы нажимаем на панель, мы хотим, чтобы она открывалась, добавляя к ней класс .open
. Мы могли бы сделать это, используя классный метод .toggle()
, который позволяет нам буквально переключать класс элемента.
function toggleOpen() { this.classList.toggle('open'); }panels.forEach(panel => panel.addEventListener('click', toggleOpen))
Итак, что происходит сейчас, так это то, что каждый раз, когда вы нажимаете на панель, она прослушивает этот щелчок. Когда он услышит фактический щелчок, он запустит функцию toggleOpen()
и переключит класс .open
.
Теперь, когда мы можем открыть панель, мы хотим убедиться, что после завершения перехода к открытию панели мы переходим по тексту. Итак, сначала нам нужно убедиться, что открытый переход действительно завершился:
panels.forEach(panel => panel.addEventListener( 'transitionend', toggleActive ))
слушатель получит 2 события: flex-grow и текст. Flex-grow относится к панели, так что это то, к чему мы хотим прислушаться. Уэс отмечает, что из-за разных браузеров, на этот раз в основном Safari, нам нужно обязательно прослушивать flex
и flex-grow
до конца. Вот тут-то и появляется includes()
метод:
function toggleActive(e) { if(e.propertyName.includes('flex')) { this.classList.toggle('open-active'); } }
В дополнение к вышеуказанному проекту я реализовал логгер в своем веб-приложении Django👇
Регистратор в Джанго
Таким образом, мне было просто следовать документации Django, чтобы реализовать его.
Код выглядит следующим образом:
import os LOGGING = { 'version': 1, 'loggers': { 'django': { 'handlers': ['file', 'file2'], 'level': 'DEBUG' } }, 'handlers': { 'file': { 'level': 'INFO', 'class': 'logging.FileHandler', 'filename': './logs/debug_info.log', 'formatter': 'simpleRe', }, 'file2': { 'level': 'DEBUG', 'class': 'logging.FileHandler', 'filename': './logs/debug.log', 'formatter': 'simpleRe', } }, 'formatters': { 'simpleRe': { 'format': '{levelname} {asctime} {module} {process:d} {thread:d} {message}', 'style': '{', } } }
TIL (Сегодня я узнал)
- Флексбокс
- Метод
toggle()
— отличный способ буквально переключать классы. - Используя
includes()
, мы можем проверить, есть ли у чего-то определенное слово или символ, который мы ищем! - Logger действительно полезен при отслеживании вызовов API и, конечно же, при отладке!
Это все на Day05 ✅
Спасибо за внимание.Увидимся завтра!