http://www.ericlee.info/theexperiment/themes/dimension/assets/js/main.js

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			$main = $('#main'),
26			$main_articles = $main.children('article');
27
28		// Disable animations/transitions until the page has loaded.
29			$body.addClass('is-loading');
30
31			$window.on('load', function() {
32				window.setTimeout(function() {
33					$body.removeClass('is-loading');
34				}, 100);
35			});
36
37		// Fix: Placeholder polyfill.
38			$('form').placeholder();
39
40		// Fix: Flexbox min-height bug on IE.
41			if (skel.vars.IEVersion < 12) {
42
43				var flexboxFixTimeoutId;
44
45				$window.on('resize.flexbox-fix', function() {
46
47					clearTimeout(flexboxFixTimeoutId);
48
49					flexboxFixTimeoutId = setTimeout(function() {
50
51						if ($wrapper.prop('scrollHeight') > $window.height())
52							$wrapper.css('height', 'auto');
53						else
54							$wrapper.css('height', '100vh');
55
56					}, 250);
57
58				}).triggerHandler('resize.flexbox-fix');
59
60			}
61
62		// Nav.
63			var $nav = $header.children('nav'),
64				$nav_li = $nav.find('li');
65
66			// Add "middle" alignment classes if we're dealing with an even number of items.
67				if ($nav_li.length % 2 == 0) {
68
69					$nav.addClass('use-middle');
70					$nav_li.eq( ($nav_li.length / 2) ).addClass('is-middle');
71
72				}
73
74		// Main.
75			var	delay = 325,
76				locked = false;
77
78			// Methods.
79				$main._show = function(id, initial) {
80
81					var $article = $main_articles.filter('#' + id);
82
83					// No such article? Bail.
84						if ($article.length == 0)
85							return;
86
87					// Handle lock.
88
89						// Already locked? Speed through "show" steps w/o delays.
90							if (locked || (typeof initial != 'undefined' && initial === true)) {
91
92								// Mark as switching.
93									$body.addClass('is-switching');
94
95								// Mark as visible.
96									$body.addClass('is-article-visible');
97
98								// Deactivate all articles (just in case one's already active).
99									$main_articles.removeClass('active');
100
101								// Hide header, footer.
102									$header.hide();
103									$footer.hide();
104
105								// Show main, article.
106									$main.show();
107									$article.show();
108
109								// Activate article.
110									$article.addClass('active');
111
112								// Unlock.
113									locked = false;
114
115								// Unmark as switching.
116									setTimeout(function() {
117										$body.removeClass('is-switching');
118									}, (initial ? 1000 : 0));
119
120								return;
121
122							}
123
124						// Lock.
125							locked = true;
126
127					// Article already visible? Just swap articles.
128						if ($body.hasClass('is-article-visible')) {
129
130							// Deactivate current article.
131								var $currentArticle = $main_articles.filter('.active');
132
133								$currentArticle.removeClass('active');
134
135							// Show article.
136								setTimeout(function() {
137
138									// Hide current article.
139										$currentArticle.hide();
140
141									// Show article.
142										$article.show();
143
144									// Activate article.
145										setTimeout(function() {
146
147											$article.addClass('active');
148
149											// Window stuff.
150												$window
151													.scrollTop(0)
152													.triggerHandler('resize.flexbox-fix');
153
154											// Unlock.
155												setTimeout(function() {
156													locked = false;
157												}, delay);
158
159										}, 25);
160
161								}, delay);
162
163						}
164
165					// Otherwise, handle as normal.
166						else {
167
168							// Mark as visible.
169								$body
170									.addClass('is-article-visible');
171
172							// Show article.
173								setTimeout(function() {
174
175									// Hide header, footer.
176										$header.hide();
177										$footer.hide();
178
179									// Show main, article.
180										$main.show();
181										$article.show();
182
183									// Activate article.
184										setTimeout(function() {
185
186											$article.addClass('active');
187
188											// Window stuff.
189												$window
190													.scrollTop(0)
191													.triggerHandler('resize.flexbox-fix');
192
193											// Unlock.
194												setTimeout(function() {
195													locked = false;
196												}, delay);
197
198										}, 25);
199
200								}, delay);
201
202						}
203
204				};
205
206				$main._hide = function(addState) {
207
208					var $article = $main_articles.filter('.active');
209
210					// Article not visible? Bail.
211						if (!$body.hasClass('is-article-visible'))
212							return;
213
214					// Add state?
215						if (typeof addState != 'undefined'
216						&&	addState === true)
217							history.pushState(null, null, '#');
218
219					// Handle lock.
220
221						// Already locked? Speed through "hide" steps w/o delays.
222							if (locked) {
223
224								// Mark as switching.
225									$body.addClass('is-switching');
226
227								// Deactivate article.
228									$article.removeClass('active');
229
230								// Hide article, main.
231									$article.hide();
232									$main.hide();
233
234								// Show footer, header.
235									$footer.show();
236									$header.show();
237
238								// Unmark as visible.
239									$body.removeClass('is-article-visible');
240
241								// Unlock.
242									locked = false;
243
244								// Unmark as switching.
245									$body.removeClass('is-switching');
246
247								// Window stuff.
248									$window
249										.scrollTop(0)
250										.triggerHandler('resize.flexbox-fix');
251
252								return;
253
254							}
255
256						// Lock.
257							locked = true;
258
259					// Deactivate article.
260						$article.removeClass('active');
261
262					// Hide article.
263						setTimeout(function() {
264
265							// Hide article, main.
266								$article.hide();
267								$main.hide();
268
269							// Show footer, header.
270								$footer.show();
271								$header.show();
272
273							// Unmark as visible.
274								setTimeout(function() {
275
276									$body.removeClass('is-article-visible');
277
278									// Window stuff.
279										$window
280											.scrollTop(0)
281											.triggerHandler('resize.flexbox-fix');
282
283									// Unlock.
284										setTimeout(function() {
285											locked = false;
286										}, delay);
287
288								}, 25);
289
290						}, delay);
291
292
293				};
294
295			// Articles.
296				$main_articles.each(function() {
297
298					var $this = $(this);
299
300					// Close.

301						$('<div class="close">Close</div>')
302							.appendTo($this)
303							.on('click', function() {
304								location.hash = '';
305							});
306
307					// Prevent clicks from inside article from bubbling.
308						$this.on('click', function(event) {
309							event.stopPropagation();
310						});
311
312				});
313
314			// Events.
315				$body.on('click', function(event) {
316
317					// Article visible? Hide.
318						if ($body.hasClass('is-article-visible'))
319							$main._hide(true);
320
321				});
322
323				$window.on('keyup', function(event) {
324
325					switch (event.keyCode) {
326
327						case 27:
328
329							// Article visible? Hide.
330								if ($body.hasClass('is-article-visible'))
331									$main._hide(true);
332
333							break;
334
335						default:
336							break;
337
338					}
339
340				});
341
342				$window.on('hashchange', function(event) {
343
344					// Empty hash?
345						if (location.hash == ''
346						||	location.hash == '#') {
347
348							// Prevent default.
349								event.preventDefault();
350								event.stopPropagation();
351
352							// Hide.
353								$main._hide();
354
355						}
356
357					// Otherwise, check for a matching article.
358						else if ($main_articles.filter(location.hash).length > 0) {
359
360							// Prevent default.
361								event.preventDefault();
362								event.stopPropagation();
363
364							// Show article.
365								$main._show(location.hash.substr(1));
366
367						}
368
369				});
370
371			// Scroll restoration.
372			// This prevents the page from scrolling back to the top on a hashchange.
373				if ('scrollRestoration' in history)
374					history.scrollRestoration = 'manual';
375				else {
376
377					var	oldScrollPos = 0,
378						scrollPos = 0,
379						$htmlbody = $('html,body');
380
381					$window
382						.on('scroll', function() {
383
384							oldScrollPos = scrollPos;
385							scrollPos = $htmlbody.scrollTop();
386
387						})
388						.on('hashchange', function() {
389							$window.scrollTop(oldScrollPos);
390						});
391
392				}
393
394			// Initialize.
395
396				// Hide main, articles.
397					$main.hide();
398					$main_articles.hide();
399
400				// Initial article.
401					if (location.hash != ''
402					&&	location.hash != '#')
403						$window.on('load', function() {
404							$main._show(location.hash.substr(1), true);
405						});
406
407	});
408
409})(jQuery);