You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
408 lines
8.8 KiB
JavaScript
408 lines
8.8 KiB
JavaScript
/*
|
|
Dimension by HTML5 UP
|
|
html5up.net | @ajlkn
|
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
*/
|
|
|
|
(function($) {
|
|
|
|
let $window = $(window),
|
|
$body = $('body'),
|
|
$wrapper = $('#wrapper'),
|
|
$header = $('#header'),
|
|
$footer = $('#footer'),
|
|
$main = $('#main'),
|
|
$main_articles = $main.children('article');
|
|
|
|
// Breakpoints.
|
|
breakpoints({
|
|
xlarge: [ '1281px', '1680px' ],
|
|
large: [ '981px', '1280px' ],
|
|
medium: [ '737px', '980px' ],
|
|
small: [ '481px', '736px' ],
|
|
xsmall: [ '361px', '480px' ],
|
|
xxsmall: [ null, '360px' ]
|
|
});
|
|
|
|
// Play initial animations on page load.
|
|
$window.on('load', function() {
|
|
window.setTimeout(function() {
|
|
$body.removeClass('is-preload');
|
|
}, 100);
|
|
});
|
|
|
|
// Fix: Flexbox min-height bug on IE.
|
|
if (browser.name === 'ie') {
|
|
|
|
let flexboxFixTimeoutId;
|
|
|
|
$window.on('resize.flexbox-fix', function() {
|
|
|
|
clearTimeout(flexboxFixTimeoutId);
|
|
|
|
flexboxFixTimeoutId = setTimeout(function() {
|
|
|
|
if ($wrapper.prop('scrollHeight') > $window.height())
|
|
$wrapper.css('height', 'auto');
|
|
else
|
|
$wrapper.css('height', '100vh');
|
|
|
|
}, 250);
|
|
|
|
}).triggerHandler('resize.flexbox-fix');
|
|
|
|
}
|
|
|
|
// Nav.
|
|
let $nav = $header.children('nav'),
|
|
$nav_li = $nav.find('li');
|
|
|
|
// Add "middle" alignment classes if we're dealing with an even number of items.
|
|
if ($nav_li.length % 2 === 0) {
|
|
|
|
$nav.addClass('use-middle');
|
|
$nav_li.eq( ($nav_li.length / 2) ).addClass('is-middle');
|
|
|
|
}
|
|
|
|
// Main.
|
|
let delay = 325,
|
|
locked = false;
|
|
|
|
// Methods.
|
|
$main._show = function(id, initial) {
|
|
|
|
let $article = $main_articles.filter('#' + id);
|
|
|
|
// No such article? Bail.
|
|
if ($article.length === 0)
|
|
return;
|
|
|
|
// Load article if it is the first visit.
|
|
if (!$article.hasClass('loaded')) {
|
|
// Event articles have a specific location
|
|
let $location = id;
|
|
let $is_event = id.substr(0, 6) === 'event-';
|
|
if ($is_event) {
|
|
$location = id.substr(6) + '/' + id.substr(6);
|
|
}
|
|
|
|
$article.load('templates/' + $location + '.html', function () {
|
|
$article.addClass('loaded');
|
|
|
|
// Add close button.
|
|
$('<div class="close">Close</div>')
|
|
.appendTo($article)
|
|
.on('click', function() {
|
|
location.hash = '';
|
|
});
|
|
|
|
// Add previous button for events
|
|
if ($is_event) {
|
|
$('<div class="previous">Previous</div>')
|
|
.appendTo($article)
|
|
.on('click', function() {
|
|
location.hash='events';
|
|
});
|
|
}
|
|
|
|
// Prevent clicks from inside article from bubbling.
|
|
$article.on('click', function(event) {
|
|
event.stopPropagation();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Handle lock.
|
|
|
|
// Already locked? Speed through "show" steps w/o delays.
|
|
if (locked || (typeof initial != 'undefined' && initial === true)) {
|
|
|
|
// Mark as switching.
|
|
$body.addClass('is-switching');
|
|
|
|
// Mark as visible.
|
|
$body.addClass('is-article-visible');
|
|
|
|
// Deactivate all articles (just in case one's already active).
|
|
$main_articles.removeClass('active');
|
|
|
|
// Hide header, footer.
|
|
$header.hide();
|
|
$footer.hide();
|
|
|
|
// Show main, article.
|
|
$main.show();
|
|
$article.show();
|
|
|
|
// Activate article.
|
|
$article.addClass('active');
|
|
|
|
// Unlock.
|
|
locked = false;
|
|
|
|
// Unmark as switching.
|
|
setTimeout(function() {
|
|
$body.removeClass('is-switching');
|
|
}, (initial ? 1000 : 0));
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// Lock.
|
|
locked = true;
|
|
|
|
// Article already visible? Just swap articles.
|
|
if ($body.hasClass('is-article-visible')) {
|
|
|
|
// Deactivate current article.
|
|
let $currentArticle = $main_articles.filter('.active');
|
|
|
|
$currentArticle.removeClass('active');
|
|
|
|
// Show article.
|
|
setTimeout(function() {
|
|
|
|
// Hide current article.
|
|
$currentArticle.hide();
|
|
|
|
// Show article.
|
|
$article.show();
|
|
|
|
// Activate article.
|
|
setTimeout(function() {
|
|
|
|
$article.addClass('active');
|
|
|
|
// Window stuff.
|
|
$window
|
|
.scrollTop(0)
|
|
.triggerHandler('resize.flexbox-fix');
|
|
|
|
// Unlock.
|
|
setTimeout(function() {
|
|
locked = false;
|
|
}, delay);
|
|
|
|
}, 25);
|
|
|
|
}, delay);
|
|
|
|
}
|
|
|
|
// Otherwise, handle as normal.
|
|
else {
|
|
|
|
// Mark as visible.
|
|
$body
|
|
.addClass('is-article-visible');
|
|
|
|
// Show article.
|
|
setTimeout(function() {
|
|
|
|
// Hide header, footer.
|
|
$header.hide();
|
|
$footer.hide();
|
|
|
|
// Show main, article.
|
|
$main.show();
|
|
$article.show();
|
|
|
|
// Activate article.
|
|
setTimeout(function() {
|
|
|
|
$article.addClass('active');
|
|
|
|
// Window stuff.
|
|
$window
|
|
.scrollTop(0)
|
|
.triggerHandler('resize.flexbox-fix');
|
|
|
|
// Unlock.
|
|
setTimeout(function() {
|
|
locked = false;
|
|
}, delay);
|
|
|
|
}, 25);
|
|
|
|
}, delay);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
$main._hide = function(addState) {
|
|
|
|
let $article = $main_articles.filter('.active');
|
|
|
|
// Article not visible? Bail.
|
|
if (!$body.hasClass('is-article-visible'))
|
|
return;
|
|
|
|
// Add state?
|
|
if (typeof addState != 'undefined'
|
|
&& addState === true)
|
|
history.pushState(null, null, '#');
|
|
|
|
// Handle lock.
|
|
|
|
// Already locked? Speed through "hide" steps w/o delays.
|
|
if (locked) {
|
|
|
|
// Mark as switching.
|
|
$body.addClass('is-switching');
|
|
|
|
// Deactivate article.
|
|
$article.removeClass('active');
|
|
|
|
// Hide article, main.
|
|
$article.hide();
|
|
$main.hide();
|
|
|
|
// Show footer, header.
|
|
$footer.show();
|
|
$header.show();
|
|
|
|
// Unmark as visible.
|
|
$body.removeClass('is-article-visible');
|
|
|
|
// Unlock.
|
|
locked = false;
|
|
|
|
// Unmark as switching.
|
|
$body.removeClass('is-switching');
|
|
|
|
// Window stuff.
|
|
$window
|
|
.scrollTop(0)
|
|
.triggerHandler('resize.flexbox-fix');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// Lock.
|
|
locked = true;
|
|
|
|
// Deactivate article.
|
|
$article.removeClass('active');
|
|
|
|
// Hide article.
|
|
setTimeout(function() {
|
|
|
|
// Hide article, main.
|
|
$article.hide();
|
|
$main.hide();
|
|
|
|
// Show footer, header.
|
|
$footer.show();
|
|
$header.show();
|
|
|
|
// Unmark as visible.
|
|
setTimeout(function() {
|
|
|
|
$body.removeClass('is-article-visible');
|
|
|
|
// Window stuff.
|
|
$window
|
|
.scrollTop(0)
|
|
.triggerHandler('resize.flexbox-fix');
|
|
|
|
// Unlock.
|
|
setTimeout(function() {
|
|
locked = false;
|
|
}, delay);
|
|
|
|
}, 25);
|
|
|
|
}, delay);
|
|
|
|
|
|
};
|
|
|
|
// Events.
|
|
$body.on('click', function() {
|
|
|
|
// Article visible? Hide.
|
|
if ($body.hasClass('is-article-visible'))
|
|
$main._hide(true);
|
|
|
|
});
|
|
|
|
$window.on('keyup', function(event) {
|
|
|
|
if (event.keyCode === 27) {
|
|
if ($body.hasClass('is-article-visible'))
|
|
$main._hide(true);
|
|
}
|
|
|
|
});
|
|
|
|
$window.on('hashchange', function(event) {
|
|
|
|
let hash = decodeURIComponent(location.hash);
|
|
// Empty hash?
|
|
if (hash === ''
|
|
|| hash === '#') {
|
|
|
|
// Prevent default.
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
// Hide.
|
|
$main._hide();
|
|
|
|
}
|
|
|
|
// Otherwise, check for a matching article.
|
|
else if ($main_articles.filter(hash).length > 0) {
|
|
|
|
// Prevent default.
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
// Show article.
|
|
$main._show(hash.substr(1));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// Scroll restoration.
|
|
// This prevents the page from scrolling back to the top on a hashchange.
|
|
if ('scrollRestoration' in history)
|
|
history.scrollRestoration = 'manual';
|
|
else {
|
|
|
|
let oldScrollPos = 0,
|
|
scrollPos = 0,
|
|
$htmlbody = $('html,body');
|
|
|
|
$window
|
|
.on('scroll', function() {
|
|
|
|
oldScrollPos = scrollPos;
|
|
scrollPos = $htmlbody.scrollTop();
|
|
|
|
})
|
|
.on('hashchange', function() {
|
|
$window.scrollTop(oldScrollPos);
|
|
});
|
|
|
|
}
|
|
|
|
// Initialize.
|
|
|
|
// Hide main, articles.
|
|
$main.hide();
|
|
$main_articles.hide();
|
|
|
|
// Initial article.
|
|
if (location.hash !== ''
|
|
&& location.hash !== '#')
|
|
$window.on('load', function() {
|
|
$main._show(location.hash.substr(1), true);
|
|
});
|
|
|
|
})(jQuery); |