Frontend + Web-программирование

Доброго времени суток, возникла проблема-призрак, которая появилась просто ниоткуда.

В общем, спокойно живет себе моя сборка GULP, но при сохранении изменений в файле gulpfile.js, в папке dist появляется файл gulpfile.dev.js. Он повторяет логику кода обычного gulpfile, но переписывает его на другом синтаксисе. Если честно, я даже толком не нашел информации, что такое ".dev", а уж решить эту проблему мне совсем не мудрено.

Еще одна проблема - в app/scss появляется папка dist при билде проекта, но только с файлом style.css (ОТКУДА ОН ТАМ БЕРЕТСЯ?!!!)
Очень надеюсь на вашу помощь, вот ссылка кода файла gulpfile.js https://codepen.io/TimurTverdokhleb/pen/oNxWNEK?editors=0010 .

А также, прикрепляю фото файловой структуры проекта (пометил стрелочками нужное). ОГРОМНОЕ СПАСИБО!!!!

Давайте разберемся как сделать аккордеон на ванильном JavaScript.

HTML

<dl>
 <dt class="question js-accordion">
  <button class="question__trigger" type="button">First Question?
 </button>
 </dt>
 <dd class="answer">
  <div>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
  </div>
 </dd>
 <dt class="question js-accordion">
  <button class="question__trigger" type="button">Second Question?</button>
 </dt>
 <dd class="answer">
  <div class="answer__content">
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
  </div>
 </dd>
</dl>

В принципе, можно, но аккордеон — это хороший пример списка из терминов и определений, для чего эти теги и предназначены.

Разберем по частям:

<dt class="question js-accordion">
 <button class="question__trigger" type="button">First Question?
 </button>
</dt>

В dt помещаем вопрос, но для чего оборачивать его в кнопку? Опять семантика: когда пользователь кликает на элемент — что-то должно произойти, для этого необходимо использовать button.

Вторая причина — доступность через клавиатуру: на аккордеон можно попасть через tab и раскрыть через пробел.

<dd class="answer">
 <div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
 </div>
</dd>

В dd кладем ответ, обернутый в дополнительный div?

Дело в том, что для того чтобы анимировать «раскрытие» аккордеона, необходимо знать высоту ответа.

.answer {
 overflow: hidden;
 height: 0;
 transition: height 0.5s;
}

В неактивном состоянии тег answer имеет нулевую высоту, поэтому мы помещаем в него дополнительный div, размер которого мы и будем измерять.

Как только аккордеон будет раскрыт — мы присвоим answer ранее измеренную высоту.

JavaScript

Найдем все аккордеоны на странице и инициализируем их:

const elements = [...document.querySelectorAll('.js-accordion')];
elements.forEach(accordion);

function accordion(element) {
 // объект, в котором будем хранить всю необходимую информацию
 const instance = {};
 function init() {
  // найдем вопрос и ответ
  findElements(instance, element);
  // измерим высоту ответа
  measureHeight(instance);
  // добавим логику нажатия на кнопку
  subscribe(instance);
 }
 init();
}

function findElements(object, element) {
 const instance = object;
 // element - это "вопрос", по которому происходит нажатие
 instance.element = element;
 // target - это "ответ", который должен "раскрываться"
 instance.target = element.nextElementSibling;
}

measureHeight

function measureHeight(object) {
 const instance = object;
 // вычисляем высоту ответа
 instance.height = object.target.firstElementChild.clientHeight;
}

У answer высота — 0, а у answer__content — нет

subscribe

function subscribe(instance) {
 instance.element.addEventListener('click', (event) => {
  // отменяем "действие по умолчанию"
  event.preventDefault();
  // меняем состояние аккордеона
  changeElementStatus(instance);
 });
 // если размер окна поменяется - измерим высоту ответа заново
 window.addEventListener('resize', () => measureHeight(instance));
}

changeElementStatus

function changeElementStatus(instance) {
 if (instance.isActive) {
  hideElement(instance);
 } else {
  showElement(instance);
 }
}

hideElement и showElement

function hideElement(object) {
 const instance = object;
 const { target } = instance;
 // обнуляем высоту ответа
 target.style.height = null;
 // делаем статус неактивным
 instance.isActive = false;
}
function showElement(object) {
 const instance = object;
 const { target, height } = instance;
 // задаем ответу сохраненную в measureHeight высоту
 target.style.height = `${height}px`;
 // делаем статус активным
 instance.isActive = true;
}

Как всегда — демо на codepen.

I. Через фоновое изображение

- Создаем div;

- Задаем ему нулевую высоту;

- Задаем ему фоновое изображение;

- Обнуляем размер фонового изображения;

- Создаем псевдоэлемент before;

- Наследуем фон от родителя;

- Делим высоту на ширину и умножаем результат на сто чтобы получить значение для padding-top;

- В результате получаем следующие стили:

.image {
 background-size: 0 0;
}

.image:before {
 content: '';
 display: block;
 padding-top: 56.25%;
 background-image: inherit;
 background-repeat: no-repeat;
 background-size: cover;
}

II. Через свойство object-fit.

Если поддержка браузеров вас устраивает и вы знаете значение одной из сторон картинки, то вы можете использовать свойство:

object-fit: cover;

Если ширина картинки равна 500px, а соотношение сторон должно быть 4:3, то все что остается сделать это:

(3 / 4) * 500 = 375

В итоге стили будут выглядеть примерно так:

img {
 width: 500px;
 height: 375px;
 object-fit: cover;
}

Если вам интересно то, о чем я пишу - можете заглянуть ко мне в группу вк или телеграм канал.