https://minoko.com.ua/catalog/view/javascript/dynamic_adapt.js

1// Dynamic Adapt v.1
2// HTML data-da="where(uniq class name), when(breakpoint), position(digi)"
3// e.x. data-da=".item, 992, 2"
4// https://www.youtube.com/watch?v=QKuMr575vlQ
5
6class DynamicAdapt {
7  constructor(type) {
8    this.type = type;
9  }
10  init() {
11    // масив об'єктів
12    this.оbjects = [];
13    this.daClassname = '_dynamic_adapt_';
14    // масив DOM-елементів
15    this.nodes = [...document.querySelectorAll('[data-da]')];
16
17    // наповнення оbjects об'єктами
18    this.nodes.forEach((node) => {
19      const data = node.dataset.da.trim();
20      const dataArray = data.split(',');
21      const оbject = {};
22      оbject.element = node;
23      оbject.parent = node.parentNode;
24      оbject.destination = document.querySelector(`${dataArray[0].trim()}`);
25      оbject.breakpoint = dataArray[1] ? dataArray[1].trim() : '767';
26      оbject.place = dataArray[2] ? dataArray[2].trim() : 'last';
27      оbject.index = this.indexInParent(оbject.parent, оbject.element);
28      this.оbjects.push(оbject);
29    });
30
31    this.arraySort(this.оbjects);
32
33    this.mediaQueries = this.оbjects
34      .map(
35        ({ breakpoint }) =>
36          `(${this.type}-width: ${breakpoint}px),${breakpoint}`
37      )
38      .filter((item, index, self) => self.indexOf(item) === index);
39
40    this.mediaQueries.forEach((media) => {
41      const mediaSplit = media.split(',');
42      const matchMedia = window.matchMedia(mediaSplit[0]);
43      const mediaBreakpoint = mediaSplit[1];
44
45      const оbjectsFilter = this.оbjects.filter(
46        ({ breakpoint }) => breakpoint === mediaBreakpoint
47      );
48      matchMedia.addEventListener('change', () => {
49        this.mediaHandler(matchMedia, оbjectsFilter);
50      });
51      this.mediaHandler(matchMedia, оbjectsFilter);
52    });
53  }
54
55  mediaHandler(matchMedia, оbjects) {
56    if (matchMedia.matches) {
57      оbjects.forEach((оbject) => {
58        this.moveTo(оbject.place, оbject.element, оbject.destination);
59      });
60    } else {
61      оbjects.forEach(({ parent, element, index }) => {
62        if (element.classList.contains(this.daClassname)) {
63          this.moveBack(parent, element, index);
64        }
65      });
66    }
67  }
68  moveTo(place, element, destination) {
69    element.classList.add(this.daClassname);
70    if (place === 'last' || place >= destination.children.length) {
71      destination.append(element);
72      return;
73    }
74    if (place === 'first') {
75      destination.prepend(element);
76      return;
77    }
78    destination.children[place].before(element);
79  }
80
81  moveBack(parent, element, index) {
82    element.classList.remove(this.daClassname);
83    if (parent.children[index] !== undefined) {
84      parent.children[index].before(element);
85    } else {
86      parent.append(element);
87    }
88  }
89
90  indexInParent(parent, element) {
91    return [...parent.children].indexOf(element);
92  }
93
94  arraySort(arr) {
95    if (this.type === 'min') {
96      arr.sort((a, b) => {
97        if (a.breakpoint === b.breakpoint) {
98          if (a.place === b.place) {
99            return 0;
100          }
101          if (a.place === 'first' || b.place === 'last') {
102            return -1;
103          }
104          if (a.place === 'last' || b.place === 'first') {
105            return 1;
106          }
107          return 0;
108        }
109        return a.breakpoint - b.breakpoint;
110      });
111    } else {
112      arr.sort((a, b) => {
113        if (a.breakpoint === b.breakpoint) {
114          if (a.place === b.place) {
115            return 0;
116          }
117          if (a.place === 'first' || b.place === 'last') {
118            return 1;
119          }
120          if (a.place === 'last' || b.place === 'first') {
121            return -1;
122          }
123          return 0;
124        }
125        return b.breakpoint - a.breakpoint;
126      });
127      return;
128    }
129  }
130}
131const da = new DynamicAdapt('max');
132da.init();