https://blackwellruiz.com/wp-content/themes/mega-theme/js/fullscreen.js

1var fullscreen = function() {
2  var doc = document;
3  var html = doc.documentElement;
4  var body = doc.body;
5  var mainNav = doc.querySelector('.main-nav');
6  var target = doc.querySelector('.fullscreen');
7  var sections = doc.querySelectorAll('.fullscreen__section');
8  var buttons;
9  var throttle = false;
10  var scrolled = 0;
11  var count = sections.length;
12  var max = count - 1;
13  var index = 0;
14  var start;
15  var end;
16  var timeout;
17
18  var _ = {};
19
20  _.clearThrottle = function() {
21    throttle = true;
22    timeout = setTimeout(function() {
23      throttle = false;
24      scrolled = 0;
25    }, 1000);
26  };
27
28  _.triggerResize = function() {
29    var evt = window.document.createEvent('UIEvents');
30    evt.initUIEvent('resize', true, false, window, 0);
31    window.dispatchEvent(evt);
32  };
33
34  _.getScroll = function() {
35    var scroll = body.scrollTop || html.scrollTop;
36    return scroll;
37  };
38
39  _.buildNav = function() {
40    var nav = document.createElement('div');
41    nav.classList.add('fullscreen__nav');
42    for (var i = 0; i < count + 1; i += 1) {
43      nav.innerHTML += '<button class="fullscreen__button"></button>';
44    }
45    target.appendChild(nav);
46    buttons = doc.querySelectorAll('.fullscreen__button');
47  };
48
49  _.updateNav = function() {
50    for (var i = 0; i < buttons.length; i += 1) {
51      if (i === index) {
52        buttons[i].classList.add('fullscreen__button--active');
53      } else {
54        buttons[i].classList.remove('fullscreen__button--active');
55      }
56    }
57  };
58
59  _.deactivateAll = function() {
60    for (var i = 0; i < max; i += 1) {
61      sections[i].classList.add('fullscreen__section--inactive');
62    }
63  };
64
65  _.previous = function() {
66    if (index > 0 && _.getScroll() === 0) {
67      index -= 1;
68      sections[index].classList.remove('fullscreen__section--inactive');
69      target.classList.remove('fullscreen--inactive');
70      html.classList.add('noscroll');
71      setTimeout(function() {
72        if (!target.classList.contains('fullscreen--inactive')) {
73          mainNav.classList.add('transparent');
74        }
75      }, 1000);
76      _.updateNav();
77    }
78  };
79
80  _.next = function() {
81    if (index < max && _.getScroll() === 0) {
82      sections[index].classList.add('fullscreen__section--inactive');
83      index += 1;
84      _.updateNav();
85    } else if (index === max) {
86      _.end();
87    }
88  };
89
90  _.end = function() {
91    index = count;
92    target.classList.add('fullscreen--inactive');
93    mainNav.classList.remove('transparent');
94    setTimeout(function() {
95      if (target.classList.contains('fullscreen--inactive')) {
96        html.classList.remove('noscroll');
97        _.triggerResize();
98        _.deactivateAll();
99      }
100    }, 1000);
101    _.updateNav();
102  };
103
104  _.onWheel = function(e) {
105    if (_.getScroll() === 0) {
106      var move = e.deltaY;
107      scrolled += move;
108      if (!throttle && move < 0 && !html.classList.contains('noscroll')) {
109        _.clearThrottle();
110        _.previous();
111      } else if (!throttle && Math.abs(scrolled) >= 240) {
112        _.clearThrottle();
113        if (move < 0) {
114          _.previous();
115        } else if (move > 0) {
116          _.next();
117        }
118      }
119    }
120  };
121
122  _.onKeydown = function(e) {
123    if (!throttle) {
124      _.clearThrottle();
125      switch (e.which) {
126        case 38:
127          _.previous();
128          break;
129        case 40:
130          _.next();
131          break;
132      }
133    }
134  };
135
136  _.onTouchstart = function(e) {
137    if (_.getScroll() === 0) {
138      start = e.touches[0].pageY;
139      doc.addEventListener('touchmove', _.onTouchmove);
140      doc.addEventListener('touchend', _.onTouchend);
141    }
142  };
143
144  _.onTouchmove = function(e) {
145    end = e.touches[0].pageY;
146    var distance = end - start;
147    if (distance > 30) {
148      if (!throttle) {
149        _.clearThrottle();
150        _.previous();
151      }
152    }
153    if (distance < -30) {
154      if (!throttle) {
155        _.clearThrottle();
156        _.next();
157      }
158    }
159    if (html.classList.contains('noscroll') || (!html.classList.contains('noscroll') && distance > 0)) {
160      e.preventDefault();
161    }
162  };
163
164  _.onTouchend = function(e) {
165    doc.removeEventListener('touchmove', _.onTouchmove);
166    doc.removeEventListener('touchend', _.onTouchend);
167  };
168
169  _.onButton = function(e) {
170    var goto = Array.prototype.indexOf.call(buttons, this);
171    if (goto !== index) {
172      if (goto === count) {
173        _.end();
174      } else if (goto < index) {
175        while (goto < index) {
176          _.previous();
177        }
178      } else {
179        while (goto > index) {
180          _.next();
181        }
182      }
183    }
184  };
185
186  _.init = function() {
187    html.classList.add('noscroll');
188    _.buildNav();
189    _.updateNav();
190    doc.addEventListener('wheel', _.onWheel);
191    doc.addEventListener('keydown', _.onKeydown);
192    doc.addEventListener('touchstart', _.onTouchstart);
193    for (var i = 0; i < buttons.length; i += 1) {
194      buttons[i].addEventListener('click', _.onButton);
195    }
196    // ios10 hack
197    window.addEventListener('touchmove', function() {});
198  };
199
200  if (document.querySelectorAll('.fullscreen').length) {

201    _.init();
202  }
203}();