source: main/waeup-hugo/public/js/main.js @ 17945

Last change on this file since 17945 was 14926, checked in by Henrik Bettermann, 7 years ago
File size: 10.2 KB
Line 
1/*
2  Dimension by HTML5 UP
3  html5up.net | @ajlkn
4  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5*/
6
7(function($) {
8
9  skel.breakpoints({
10    xlarge:   '(max-width: 1680px)',
11    large:    '(max-width: 1280px)',
12    medium:   '(max-width: 980px)',
13    small:    '(max-width: 736px)',
14    xsmall:   '(max-width: 480px)',
15    xxsmall:  '(max-width: 360px)'
16  });
17
18  $(function() {
19
20    var $window = $(window),
21      $body = $('body'),
22      $wrapper = $('#wrapper'),
23      $header = $('#header'),
24      $footer = $('#footer'),
25      $languages = $('#languages'),
26      $main = $('#main'),
27      $main_articles = $main.children('article');
28
29    // Disable animations/transitions until the page has loaded.
30      $body.addClass('is-loading');
31
32      $window.on('load', function() {
33        window.setTimeout(function() {
34          $body.removeClass('is-loading');
35        }, 100);
36      });
37
38    // Fix: Placeholder polyfill.
39      $('form').placeholder();
40
41    // Fix: Flexbox min-height bug on IE.
42      if (skel.vars.IEVersion < 12) {
43
44        var flexboxFixTimeoutId;
45
46        $window.on('resize.flexbox-fix', function() {
47
48          clearTimeout(flexboxFixTimeoutId);
49
50          flexboxFixTimeoutId = setTimeout(function() {
51
52            if ($wrapper.prop('scrollHeight') > $window.height())
53              $wrapper.css('height', 'auto');
54            else
55              $wrapper.css('height', '100vh');
56
57          }, 250);
58
59        }).triggerHandler('resize.flexbox-fix');
60
61      }
62
63    // Nav.
64      var $nav = $header.children('nav'),
65        $nav_li = $nav.find('li');
66
67      // Add "middle" alignment classes if we're dealing with an even number of items.
68        if ($nav_li.length % 2 == 0) {
69
70          $nav.addClass('use-middle');
71          $nav_li.eq( ($nav_li.length / 2) ).addClass('is-middle');
72
73        }
74
75    // Main.
76      var delay = 325,
77        locked = false;
78
79      // Methods.
80        $main._show = function(id, initial) {
81
82          var $article = $main_articles.filter('#' + id);
83
84          // No such article? Bail.
85            if ($article.length == 0)
86              return;
87
88          // Handle lock.
89
90            // Already locked? Speed through "show" steps w/o delays.
91              if (locked || (typeof initial != 'undefined' && initial === true)) {
92
93                // Mark as switching.
94                  $body.addClass('is-switching');
95
96                // Mark as visible.
97                  $body.addClass('is-article-visible');
98
99                // Deactivate all articles (just in case one's already active).
100                  $main_articles.removeClass('active');
101
102                // Hide header, footer, languages.
103                  $header.hide();
104                  $footer.hide();
105                  $languages.hide();
106
107                // Show main, article.
108                  $main.show();
109                  $article.show();
110
111                // Activate article.
112                  $article.addClass('active');
113
114                // Unlock.
115                  locked = false;
116
117                // Unmark as switching.
118                  setTimeout(function() {
119                    $body.removeClass('is-switching');
120                  }, (initial ? 1000 : 0));
121
122                return;
123
124              }
125
126            // Lock.
127              locked = true;
128
129          // Article already visible? Just swap articles.
130            if ($body.hasClass('is-article-visible')) {
131
132              // Deactivate current article.
133                var $currentArticle = $main_articles.filter('.active');
134
135                $currentArticle.removeClass('active');
136
137              // Show article.
138                setTimeout(function() {
139
140                  // Hide current article.
141                    $currentArticle.hide();
142
143                  // Show article.
144                    $article.show();
145
146                  // Activate article.
147                    setTimeout(function() {
148
149                      $article.addClass('active');
150
151                      // Window stuff.
152                        $window
153                          .scrollTop(0)
154                          .triggerHandler('resize.flexbox-fix');
155
156                      // Unlock.
157                        setTimeout(function() {
158                          locked = false;
159                        }, delay);
160
161                    }, 25);
162
163                }, delay);
164
165            }
166
167          // Otherwise, handle as normal.
168            else {
169
170              // Mark as visible.
171                $body
172                  .addClass('is-article-visible');
173
174              // Show article.
175                setTimeout(function() {
176
177                  // Hide header, footer, languages.
178                    $header.hide();
179                    $footer.hide();
180                    $languages.hide();
181
182                  // Show main, article.
183                    $main.show();
184                    $article.show();
185
186                  // Activate article.
187                    setTimeout(function() {
188
189                      $article.addClass('active');
190
191                      // Window stuff.
192                        $window
193                          .scrollTop(0)
194                          .triggerHandler('resize.flexbox-fix');
195
196                      // Unlock.
197                        setTimeout(function() {
198                          locked = false;
199                        }, delay);
200
201                    }, 25);
202
203                }, delay);
204
205            }
206
207        };
208
209        $main._hide = function(addState) {
210
211          var $article = $main_articles.filter('.active');
212
213          // Article not visible? Bail.
214            if (!$body.hasClass('is-article-visible'))
215              return;
216
217          // Add state?
218            if (typeof addState != 'undefined'
219            &&  addState === true)
220              history.pushState(null, null, '#');
221
222          // Handle lock.
223
224            // Already locked? Speed through "hide" steps w/o delays.
225              if (locked) {
226
227                // Mark as switching.
228                  $body.addClass('is-switching');
229
230                // Deactivate article.
231                  $article.removeClass('active');
232
233                // Hide article, main.
234                  $article.hide();
235                  $main.hide();
236
237                // Show footer, header.
238                  $footer.show();
239                  $header.show();
240                  $languages.show();
241
242                // Unmark as visible.
243                  $body.removeClass('is-article-visible');
244
245                // Unlock.
246                  locked = false;
247
248                // Unmark as switching.
249                  $body.removeClass('is-switching');
250
251                // Window stuff.
252                  $window
253                    .scrollTop(0)
254                    .triggerHandler('resize.flexbox-fix');
255
256                return;
257
258              }
259
260            // Lock.
261              locked = true;
262
263          // Deactivate article.
264            $article.removeClass('active');
265
266          // Hide article.
267            setTimeout(function() {
268
269              // Hide article, main.
270                $article.hide();
271                $main.hide();
272
273              // Show footer, header.
274                $footer.show();
275                $header.show();
276                $languages.show();
277
278              // Unmark as visible.
279                setTimeout(function() {
280
281                  $body.removeClass('is-article-visible');
282
283                  // Window stuff.
284                    $window
285                      .scrollTop(0)
286                      .triggerHandler('resize.flexbox-fix');
287
288                  // Unlock.
289                    setTimeout(function() {
290                      locked = false;
291                    }, delay);
292
293                }, 25);
294
295            }, delay);
296
297
298        };
299
300      // Articles.
301        $main_articles.each(function() {
302
303          var $this = $(this);
304
305          // Close.
306            $('<div class="close">Close</div>')
307              .appendTo($this)
308              .on('click', function() {
309                location.hash = '';
310              });
311
312          // Prevent clicks from inside article from bubbling.
313            $this.on('click', function(event) {
314              event.stopPropagation();
315            });
316
317        });
318
319      // Events.
320        $body.on('click', function(event) {
321
322          // Article visible? Hide.
323            if ($body.hasClass('is-article-visible'))
324              $main._hide(true);
325
326        });
327
328        $window.on('keyup', function(event) {
329
330          switch (event.keyCode) {
331
332            case 27:
333
334              // Article visible? Hide.
335                if ($body.hasClass('is-article-visible'))
336                  $main._hide(true);
337
338              break;
339
340            default:
341              break;
342
343          }
344
345        });
346
347        $window.on('hashchange', function(event) {
348
349          // Empty hash?
350            if (location.hash == ''
351            ||  location.hash == '#') {
352
353              // Prevent default.
354                event.preventDefault();
355                event.stopPropagation();
356
357              // Hide.
358                $main._hide();
359
360            }
361
362          // Otherwise, check for a matching article.
363            else if ($main_articles.filter(location.hash).length > 0) {
364
365              // Prevent default.
366                event.preventDefault();
367                event.stopPropagation();
368
369              // Show article.
370                $main._show(location.hash.substr(1));
371
372            }
373
374        });
375
376      // Scroll restoration.
377      // This prevents the page from scrolling back to the top on a hashchange.
378        if ('scrollRestoration' in history)
379          history.scrollRestoration = 'manual';
380        else {
381
382          var oldScrollPos = 0,
383            scrollPos = 0,
384            $htmlbody = $('html,body');
385
386          $window
387            .on('scroll', function() {
388
389              oldScrollPos = scrollPos;
390              scrollPos = $htmlbody.scrollTop();
391
392            })
393            .on('hashchange', function() {
394              $window.scrollTop(oldScrollPos);
395            });
396
397        }
398
399      // Initialize.
400
401        // Hide main, articles.
402          $main.hide();
403          $main_articles.hide();
404
405        // Initial article.
406          if (location.hash != ''
407          &&  location.hash != '#')
408            $window.on('load', function() {
409              $main._show(location.hash.substr(1), true);
410            });
411
412  });
413
414})(jQuery);
Note: See TracBrowser for help on using the repository browser.