assets/main/js/main.js

   1 /*
   2         Editorial 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                 $head = $('head'),
  11                 $body = $('body');
  12
  13         // Breakpoints.
  14                 breakpoints({
  15                         xlarge:   [ '1281px',  '1680px' ],
  16                         large:    [ '981px',   '1280px' ],
  17                         medium:   [ '737px',   '980px'  ],
  18                         small:    [ '481px',   '736px'  ],
  19                         xsmall:   [ '361px',   '480px'  ],
  20                         xxsmall:  [ null,      '360px'  ],
  21                         'xlarge-to-max':    '(min-width: 1681px)',
  22                         'small-to-xlarge':  '(min-width: 481px) and (max-width: 1680px)'
  23                 });
  24
  25         // Stops animations/transitions until the page has ...
  26
  27                 // ... loaded.
  28                         $window.on('load', function() {
  29                                 window.setTimeout(function() {
  30                                         $body.removeClass('is-preload');
  31                                 }, 100);
  32                         });
  33
  34                 // ... stopped resizing.
  35                         var resizeTimeout;
  36
  37                         $window.on('resize', function() {
  38
  39                                 // Mark as resizing.
  40                                         $body.addClass('is-resizing');
  41
  42                                 // Unmark after delay.
  43                                         clearTimeout(resizeTimeout);
  44
  45                                         resizeTimeout = setTimeout(function() {
  46                                                 $body.removeClass('is-resizing');
  47                                         }, 100);
  48
  49                         });
  50
  51         // Fixes.
  52
  53                 // Object fit images.
  54                         if (!browser.canUse('object-fit')
  55                         ||      browser.name == 'safari')
  56                                 $('.image.object').each(function() {
  57
  58                                         var $this = $(this),
  59                                                 $img = $this.children('img');
  60
  61                                         // Hide original image.
  62                                                 $img.css('opacity', '0');
  63
  64                                         // Set background.
  65                                                 $this
  66                                                         .css('background-image', 'url("' + $img.attr('src') + '")')
  67                                                         .css('background-size', $img.css('object-fit') ? $img.css('object-fit') : 'cover')
  68                                                         .css('background-position', $img.css('object-position') ? $img.css('object-position') : 'center');
  69
  70                                 });
  71
  72         // Sidebar.
  73                 var $sidebar = $('#sidebar'),
  74                         $sidebar_inner = $sidebar.children('.inner');
  75
  76                 // Inactive by default on <= large.
  77                         breakpoints.on('<=large', function() {
  78                                 $sidebar.addClass('inactive');
  79                         });
  80
  81                         breakpoints.on('>large', function() {
  82                                 $sidebar.removeClass('inactive');
  83                         });
  84
  85                 // Hack: Workaround for Chrome/Android scrollbar position bug.
  86                         if (browser.os == 'android'
  87                         &&      browser.name == 'chrome')
  88                                 $('<style>#sidebar .inner::-webkit-scrollbar { display: none; }</style>')
  89                                         .appendTo($head);
  90
  91                 // Toggle.
  92                         $('<a href="#sidebar" class="toggle">Toggle</a>')
  93                                 .appendTo($sidebar)
  94                                 .on('click', function(event) {
  95
  96                                         // Prevent default.
  97                                                 event.preventDefault();
  98                                                 event.stopPropagation();
  99
 100                                         // Toggle.
 101                                                 $sidebar.toggleClass('inactive');
 102
 103                                 });
 104
 105                 // Events.
 106
 107                         // Link clicks.
 108                                 $sidebar.on('click', 'a', function(event) {
 109
 110                                         // >large? Bail.
 111                                                 if (breakpoints.active('>large'))
 112                                                         return;
 113
 114                                         // Vars.
 115                                                 var $a = $(this),
 116                                                         href = $a.attr('href'),
 117                                                         target = $a.attr('target');
 118
 119                                         // Prevent default.
 120                                                 event.preventDefault();
 121                                                 event.stopPropagation();
 122
 123                                         // Check URL.
 124                                                 if (!href || href == '#' || href == '')
 125                                                         return;
 126
 127                                         // Hide sidebar.
 128                                                 $sidebar.addClass('inactive');
 129
 130                                         // Redirect to href.
 131                                                 setTimeout(function() {
 132
 133                                                         if (target == '_blank')
 134                                                                 window.open(href);
 135                                                         else
 136                                                                 window.location.href = href;
 137
 138                                                 }, 500);
 139
 140                                 });
 141
 142                         // Prevent certain events inside the panel from bubbling.
 143                                 $sidebar.on('click touchend touchstart touchmove', function(event) {
 144
 145                                         // >large? Bail.
 146                                                 if (breakpoints.active('>large'))
 147                                                         return;
 148
 149                                         // Prevent propagation.
 150                                                 event.stopPropagation();
 151
 152                                 });
 153
 154                         // Hide panel on body click/tap.
 155                                 $body.on('click touchend', function(event) {
 156
 157                                         // >large? Bail.
 158                                                 if (breakpoints.active('>large'))
 159                                                         return;
 160
 161                                         // Deactivate.
 162                                                 $sidebar.addClass('inactive');
 163
 164                                 });
 165
 166                 // Scroll lock.
 167                 // Note: If you do anything to change the height of the sidebar's content, be sure to
 168                 // trigger 'resize.sidebar-lock' on $window so stuff doesn't get out of sync.
 169
 170                         $window.on('load.sidebar-lock', function() {
 171
 172                                 var sh, wh, st;
 173
 174                                 // Reset scroll position to 0 if it's 1.
 175                                         if ($window.scrollTop() == 1)
 176                                                 $window.scrollTop(0);
 177
 178                                 $window
 179                                         .on('scroll.sidebar-lock', function() {
 180
 181                                                 var x, y;
 182
 183                                                 // <=large? Bail.
 184                                                         if (breakpoints.active('<=large')) {
 185
 186                                                                 $sidebar_inner
 187                                                                         .data('locked', 0)
 188                                                                         .css('position', '')
 189                                                                         .css('top', '');
 190
 191                                                                 return;
 192
 193                                                         }
 194
 195                                                 // Calculate positions.
 196                                                         x = Math.max(sh - wh, 0);
 197                                                         y = Math.max(0, $window.scrollTop() - x);
 198
 199                                                 // Lock/unlock.
 200                                                         if ($sidebar_inner.data('locked') == 1) {
 201
 202                                                                 if (y <= 0)
 203                                                                         $sidebar_inner
 204                                                                                 .data('locked', 0)
 205                                                                                 .css('position', '')
 206                                                                                 .css('top', '');
 207                                                                 else
 208                                                                         $sidebar_inner
 209                                                                                 .css('top', -1 * x);
 210
 211                                                         }
 212                                                         else {
 213
 214                                                                 if (y > 0)
 215                                                                         $sidebar_inner
 216                                                                                 .data('locked', 1)
 217                                                                                 .css('position', 'fixed')
 218                                                                                 .css('top', -1 * x);
 219
 220                                                         }
 221
 222                                         })
 223                                         .on('resize.sidebar-lock', function() {
 224
 225                                                 // Calculate heights.
 226                                                         wh = $window.height();
 227                                                         sh = $sidebar_inner.outerHeight() + 30;
 228
 229                                                 // Trigger scroll.
 230                                                         $window.trigger('scroll.sidebar-lock');
 231
 232                                         })
 233                                         .trigger('resize.sidebar-lock');
 234
 235                                 });
 236
 237         // Menu.
 238                 var $menu = $('#menu'),
 239                         $menu_openers = $menu.children('ul').find('.opener');
 240
 241                 // Openers.
 242                         $menu_openers.each(function() {
 243
 244                                 var $this = $(this);
 245
 246                                 $this.on('click', function(event) {
 247
 248                                         // Prevent default.
 249                                                 event.preventDefault();
 250
 251                                         // Toggle.
 252                                                 $menu_openers.not($this).removeClass('active');
 253                                                 $this.toggleClass('active');
 254
 255                                         // Trigger resize (sidebar lock).
 256                                                 $window.triggerHandler('resize.sidebar-lock');
 257
 258                                 });
 259
 260                         });
 261
 262 })(jQuery);