При работе над адаптивом сайта мы часто сталкиваемся в проблемой, что некоторые блоки находятся совершенно в разным местах и зачастую имеют совершенно другой порядок, не такой, как был к примеру на десктопном разрешении. Одна из частых проблем - это когда при адаптиве сайта нам нужно перенести блок контактов из шапки сайта в бургерное меню.

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

Но порой даже такие манипуляции не приводят к должному результату и нам приходится каждый раз под такие элементы писать на JS код, который при адаптиве будет перемещать блоки в нужные нам места. Это занимает много времени и добавляется много лишнего кода.

Компонент динамического адаптива позволит работать с элементами страницы при адаптиве проще, удобнее и быстрее.

Функционал динамического адаптива позволяет перемещать необходимые блоки на заданных разрешениях в другие блоки и обратно. При этом не создаются дублирующие элементы, а именно нужный нам элемент перемещается в другой блок, без необходимости перезагружать страницу, а прямо через resize в реальном времени.

В файле init-dynamic-adaptive.js создаётся класс DynamicAdaptive, который записывается в переменную dynamicAdaptive, после чего динамический адаптив инициализируется.

Динамический адаптив состоит из следующих файлов: dynamic-adaptive.js и init-dynamic-adaptive.js все файлы обязательны к переносу в проект! Файл dynamic-adaptive.scss добавлен только для демонстрации работы компонента, в проект переносить его не нужно

В файле init-dynamic-adaptive.js при инициализации в переменной da в скобках нужно указать тип медиа запроса при котором будет срабатывать данный компонент: указать min если вам нужно, что бы срабатывал компонент по принципу min-width либо max, если по принципу [b max-width]. По умолчанию компонент настроен на max-width.

Обязательные data атрибуты

.block - сюда мы записываем селектор родительского блока в который хотим переместить наш компонент. При этом селектор может быть любым, но обязательно условие в том, что должен быть символ обозначение селектора. К примеру: по классу - .block, по id - #block, по data атрибуту - [block] и так же можно использовать составные селекторы - .foo .bar [data-buzz]

when - когда мы хотим переместить данный блок. В данное место мы записываем разрешение экрана, при котором должен переместить блок. Момент медиа запроса в данном случае будет зависеть от того параметра, который вы укажите при инициализации данного компонента. К примеру: 767 - так как по умолчание при инициализации у нас указан тип max, то в этом случае элемент переместиться тогда, когда сработает медиа запрос max-width(767px)

where - на какую позицию внутри указанного блока переместиться элемент. Если не указать данный параметр, то по умолчанию элемент переместиться в конец родителя, на позицию last. Доступные значения: first, last или номер позиции начиная с 0. К примеру: data-da=".block, 767, first" - так элемент переместиться в блок с классом .block при разрешении ниже 768px на первое место в этом родителе. Запятые между значениями ОБЯЗАТЕЛЬНЫ!

Пример работы динамического адаптива

Для того что бы увидеть результат работы данного компонента измените ширину окна браузера