static/js/main.js

   1 /*
   2         Forty 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         var     $window = $(window),
  10                 $body = $('body'),
  11                 $wrapper = $('#wrapper'),
  12                 $header = $('#header'),
  13                 $banner = $('#banner');
  14
  15         // Breakpoints.
  16                 breakpoints({
  17                         xlarge:    ['1281px',   '1680px'   ],
  18                         large:     ['981px',    '1280px'   ],
  19                         medium:    ['737px',    '980px'    ],
  20                         small:     ['481px',    '736px'    ],
  21                         xsmall:    ['361px',    '480px'    ],
  22                         xxsmall:   [null,       '360px'    ]
  23                 });
  24
  25         /**
  26          * Applies parallax scrolling to an element's background image.
  27          * @return {jQuery} jQuery object.
  28          */
  29         $.fn._parallax = (browser.name == 'ie' || browser.name == 'edge' || browser.mobile) ? function() { return $(this) } : function(intensity) {
  30
  31                 var     $window = $(window),
  32                         $this = $(this);
  33
  34                 if (this.length == 0 || intensity === 0)
  35                         return $this;
  36
  37                 if (this.length > 1) {
  38
  39                         for (var i=0; i < this.length; i++)
  40                                 $(this[i])._parallax(intensity);
  41
  42                         return $this;
  43
  44                 }
  45
  46                 if (!intensity)
  47                         intensity = 0.25;
  48
  49                 $this.each(function() {
  50
  51                         var $t = $(this),
  52                                 on, off;
  53
  54                         on = function() {
  55
  56                                 $t.css('background-position', 'center 100%, center 100%, center 0px');
  57
  58                                 $window
  59                                         .on('scroll._parallax', function() {
  60
  61                                                 var pos = parseInt($window.scrollTop()) - parseInt($t.position().top);
  62
  63                                                 $t.css('background-position', 'center ' + (pos * (-1 * intensity)) + 'px');
  64
  65                                         });
  66
  67                         };
  68
  69                         off = function() {
  70
  71                                 $t
  72                                         .css('background-position', '');
  73
  74                                 $window
  75                                         .off('scroll._parallax');
  76
  77                         };
  78
  79                         breakpoints.on('<=medium', off);
  80                         breakpoints.on('>medium', on);
  81
  82                 });
  83
  84                 $window
  85                         .off('load._parallax resize._parallax')
  86                         .on('load._parallax resize._parallax', function() {
  87                                 $window.trigger('scroll');
  88                         });
  89
  90                 return $(this);
  91
  92         };
  93
  94         // Play initial animations on page load.
  95                 $window.on('load', function() {
  96                         window.setTimeout(function() {
  97                                 $body.removeClass('is-preload');
  98                         }, 100);
  99                 });
 100
 101         // Clear transitioning state on unload/hide.
 102                 $window.on('unload pagehide', function() {
 103                         window.setTimeout(function() {
 104                                 $('.is-transitioning').removeClass('is-transitioning');
 105                         }, 250);
 106                 });
 107
 108         // Fix: Enable IE-only tweaks.
 109                 if (browser.name == 'ie' || browser.name == 'edge')
 110                         $body.addClass('is-ie');
 111
 112         // Scrolly.
 113                 $('.scrolly').scrolly({
 114                         offset: function() {
 115                                 return $header.height() - 2;
 116                         }
 117                 });
 118
 119         // Tiles.
 120                 var $tiles = $('.tiles > article');
 121
 122                 $tiles.each(function() {
 123
 124                         var $this = $(this),
 125                                 $image = $this.find('.image'), $img = $image.find('img'),
 126                                 $link = $this.find('.link'),
 127                                 x;
 128
 129                         // Image.
 130
 131                                 // Set image.
 132                                         $this.css('background-image', 'url(' + $img.attr('src') + ')');
 133
 134                                 // Set position.
 135                                         if (x = $img.data('position'))
 136                                                 $image.css('background-position', x);
 137
 138                                 // Hide original.
 139                                         $image.hide();
 140
 141                         // Link.
 142                                 if ($link.length > 0) {
 143
 144                                         $x = $link.clone()
 145                                                 .text('')
 146                                                 .addClass('primary')
 147                                                 .appendTo($this);
 148
 149                                         $link = $link.add($x);
 150
 151                                         $link.on('click', function(event) {
 152
 153                                                 var href = $link.attr('href');
 154
 155                                                 // Prevent default.
 156                                                         event.stopPropagation();
 157                                                         event.preventDefault();
 158
 159                                                 // Target blank?
 160                                                         if ($link.attr('target') == '_blank') {
 161
 162                                                                 // Open in new tab.
 163                                                                         window.open(href);
 164
 165                                                         }
 166
 167                                                 // Otherwise ...
 168                                                         else {
 169
 170                                                                 // Start transitioning.
 171                                                                         $this.addClass('is-transitioning');
 172                                                                         $wrapper.addClass('is-transitioning');
 173
 174                                                                 // Redirect.
 175                                                                         window.setTimeout(function() {
 176                                                                                 location.href = href;
 177                                                                         }, 500);
 178
 179                                                         }
 180
 181                                         });
 182
 183                                 }
 184
 185                 });
 186
 187         // Header.
 188                 if ($banner.length > 0
 189                 &&      $header.hasClass('alt')) {
 190
 191                         $window.on('resize', function() {
 192                                 $window.trigger('scroll');
 193                         });
 194
 195                         $window.on('load', function() {
 196
 197                                 $banner.scrollex({
 198                                         bottom:         $header.height() + 10,
 199                                         terminate:      function() { $header.removeClass('alt'); },
 200                                         enter:          function() { $header.addClass('alt'); },
 201                                         leave:          function() { $header.removeClass('alt'); $header.addClass('reveal'); }
 202                                 });
 203
 204                                 window.setTimeout(function() {
 205                                         $window.triggerHandler('scroll');
 206                                 }, 100);
 207
 208                         });
 209
 210                 }
 211
 212         // Banner.
 213                 $banner.each(function() {
 214
 215                         var $this = $(this),
 216                                 $image = $this.find('.image'), $img = $image.find('img');
 217
 218                         // Parallax.
 219                                 $this._parallax(0.275);
 220
 221                         // Image.
 222                                 if ($image.length > 0) {
 223
 224                                         // Set image.
 225                                                 $this.css('background-image', 'url(' + $img.attr('src') + ')');
 226
 227                                         // Hide original.
 228                                                 $image.hide();
 229
 230                                 }
 231
 232                 });
 233
 234         // Menu.
 235                 var $menu = $('#menu'),
 236                         $menuInner;
 237
 238                 $menu.wrapInner('<div class="inner"></div>');
 239                 $menuInner = $menu.children('.inner');
 240                 $menu._locked = false;
 241
 242                 $menu._lock = function() {
 243
 244                         if ($menu._locked)
 245                                 return false;
 246
 247                         $menu._locked = true;
 248
 249                         window.setTimeout(function() {
 250                                 $menu._locked = false;
 251                         }, 350);
 252
 253                         return true;
 254
 255                 };
 256
 257                 $menu._show = function() {
 258
 259                         if ($menu._lock())
 260                                 $body.addClass('is-menu-visible');
 261
 262                 };
 263
 264                 $menu._hide = function() {
 265
 266                         if ($menu._lock())
 267                                 $body.removeClass('is-menu-visible');
 268
 269                 };
 270
 271                 $menu._toggle = function() {
 272
 273                         if ($menu._lock())
 274                                 $body.toggleClass('is-menu-visible');
 275
 276                 };
 277
 278                 $menuInner
 279                         .on('click', function(event) {
 280                                 event.stopPropagation();
 281                         })
 282                         .on('click', 'a', function(event) {
 283
 284                                 var href = $(this).attr('href');
 285
 286                                 event.preventDefault();
 287                                 event.stopPropagation();
 288
 289                                 // Hide.
 290                                         $menu._hide();
 291
 292                                 // Redirect.
 293                                         window.setTimeout(function() {
 294                                                 window.location.href = href;
 295                                         }, 250);
 296
 297                         });
 298
 299                 $menu
 300                         .appendTo($body)
 301                         .on('click', function(event) {
 302
 303                                 event.stopPropagation();
 304                                 event.preventDefault();
 305
 306                                 $body.removeClass('is-menu-visible');
 307
 308                         })
 309                         .append('<a class="close" href="#menu">Close</a>');
 310
 311                 $body
 312                         .on('click', 'a[href="#menu"]', function(event) {
 313
 314                                 event.stopPropagation();
 315                                 event.preventDefault();
 316
 317                                 // Toggle.
 318                                         $menu._toggle();
 319
 320                         })
 321                         .on('click', function(event) {
 322
 323                                 // Hide.
 324                                         $menu._hide();
 325
 326                         })
 327                         .on('keydown', function(event) {
 328
 329                                 // Hide on escape.
 330                                         if (event.keyCode == 27)
 331                                                 $menu._hide();
 332
 333                         });
 334
 335 })(jQuery);