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