https://modortho.com/public/js/help.js

1// Custom Help JS Start
2const ease = {
3  exponentialIn: (t) => {
4    return t == 0.0 ? t : Math.pow(2.0, 10.0 * (t - 1.0));
5  },
6  exponentialOut: (t) => {
7    return t == 1.0 ? t : 1.0 - Math.pow(2.0, -10.0 * t);
8  },
9  exponentialInOut: (t) => {
10    return t == 0.0 || t == 1.0
11      ? t
12      : t < 0.5
13        ? +0.5 * Math.pow(2.0, (20.0 * t) - 10.0)
14        : -0.5 * Math.pow(2.0, 10.0 - (t * 20.0)) + 1.0;
15  },
16  sineOut: (t) => {
17    const HALF_PI = 1.5707963267948966;
18    return Math.sin(t * HALF_PI);
19  },
20  circularInOut: (t) => {
21    return t < 0.5
22        ? 0.5 * (1.0 - Math.sqrt(1.0 - 4.0 * t * t))
23        : 0.5 * (Math.sqrt((3.0 - 2.0 * t) * (2.0 * t - 1.0)) + 1.0);
24  },
25  cubicIn: (t) => {
26    return t * t * t;
27  },
28  cubicOut: (t) => {
29    const f = t - 1.0;
30    return f * f * f + 1.0;
31  },
32  cubicInOut: (t) => {
33    return t < 0.5
34      ? 4.0 * t * t * t
35      : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0;
36  },
37  quadraticOut: (t) => {
38    return -t * (t - 2.0);
39  },
40  quarticOut: (t) => {
41    return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
42  },
43}
44
45class ShapeOverlays {
46  constructor(elm) {
47    this.elm = elm;
48    this.path = elm.querySelectorAll('path');
49    this.numPoints = 2;
50    this.duration = 600;
51    this.delayPointsArray = [];
52    this.delayPointsMax = 0;
53    this.delayPerPath = 200;
54    this.timeStart = Date.now();
55    this.isOpened = false;
56    this.isAnimating = false;
57  }
58  toggle() {
59    this.isAnimating = true;
60    for (var i = 0; i < this.numPoints; i++) {
61      this.delayPointsArray[i] = 0;
62    }
63    if (this.isOpened === false) {
64      this.open();
65    } else {
66      this.close();
67    }
68  }
69  open() {
70    this.isOpened = true;
71    this.elm.classList.add('is-opened');
72    this.timeStart = Date.now();
73    this.renderLoop();
74  }
75  close() {
76    this.isOpened = false;
77    this.elm.classList.remove('is-opened');
78    this.timeStart = Date.now();
79    this.renderLoop();
80  }
81  updatePath(time) {
82    const points = [];
83    for (var i = 0; i < this.numPoints; i++) {
84      const thisEase = this.isOpened ? 
85                        (i == 1) ? ease.cubicOut : ease.cubicInOut:
86                        (i == 1) ? ease.cubicInOut : ease.cubicOut;
87      points[i] = thisEase(Math.min(Math.max(time - this.delayPointsArray[i], 0) / this.duration, 1)) * 100
88    }
89
90    let str = '';
91    str += (this.isOpened) ? `M 0 0 V ${points[0]} ` : `M 0 ${points[0]} `;
92    for (var i = 0; i < this.numPoints - 1; i++) {
93      const p = (i + 1) / (this.numPoints - 1) * 100;
94      const cp = p - (1 / (this.numPoints - 1) * 100) / 2;
95      str += `C ${cp} ${points[i]} ${cp} ${points[i + 1]} ${p} ${points[i + 1]} `;
96    }
97    str += (this.isOpened) ? `V 0 H 0` : `V 100 H 0`;
98    return str;
99  }
100  render() {
101    if (this.isOpened) {
102      for (var i = 0; i < this.path.length; i++) {
103        this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * i)));
104      }
105    } else {
106      for (var i = 0; i < this.path.length; i++) {
107        this.path[i].setAttribute('d', this.updatePath(Date.now() - (this.timeStart + this.delayPerPath * (this.path.length - i - 1))));
108      }
109    }
110  }
111  renderLoop() {
112    this.render();
113    if (Date.now() - this.timeStart < this.duration + this.delayPerPath * (this.path.length - 1) + this.delayPointsMax) {
114      requestAnimationFrame(() => {
115        this.renderLoop();
116      });
117    }
118    else {
119      this.isAnimating = false;
120    }
121  }
122}
123
124(function() {
125  const elmHamburger = document.querySelector('.hamburger');
126  const globalData = document.querySelector('.global-data');
127  const gNavItems = document.querySelectorAll('.global-menu__item');
128  const elmOverlay = document.querySelector('.shape-overlays');
129  const overlay = new ShapeOverlays(elmOverlay);
130
131  elmHamburger.addEventListener('click', () => {
132    if (overlay.isAnimating) {
133      return false;
134    }
135    overlay.toggle();
136    if (overlay.isOpened === true) {
137      elmHamburger.classList.add('is-opened-navi');
138	  setTimeout(function(){ globalData.classList.add('global-data-flex'); }, 800);
139      for (var i = 0; i < gNavItems.length; i++) {
140        gNavItems[i].classList.add('is-opened');
141      }
142    } else {
143      elmHamburger.classList.remove('is-opened-navi');
144	  globalData.classList.remove('global-data-flex');
145      for (var i = 0; i < gNavItems.length; i++) {
146        gNavItems[i].classList.remove('is-opened');
147      }
148    }
149  });
150}()); // Custom Help JS Ends