From 72ccfcc4aa30a637faf1c7da0d294329f01e34f7 Mon Sep 17 00:00:00 2001 From: Dylan Bolger Date: Wed, 21 Mar 2018 12:34:37 -0500 Subject: working on web --- assets/js/main.js | 766 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 766 insertions(+) create mode 100644 assets/js/main.js (limited to 'assets/js/main.js') diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..81a9d1a --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,766 @@ +/* + Ethereal by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +(function($) { + + // Settings. + var settings = { + + // Keyboard shortcuts. + keyboardShortcuts: { + + // If true, enables scrolling via keyboard shortcuts. + enabled: true, + + // Sets the distance to scroll when using the left/right arrow keys. + distance: 100 + + }, + + // Scroll wheel. + scrollWheel: { + + // If true, enables scrolling via the scroll wheel. + enabled: true, + + // Sets the scroll wheel factor. (Ideally) a value between 0 and 1 (lower = slower scroll, higher = faster scroll). + factor: 1 + + }, + + // Scroll zones. + scrollZones: { + + // If true, enables scrolling via scroll zones on the left/right edges of the scren. + enabled: true, + + // Sets the speed at which the page scrolls when a scroll zone is active (higher = faster scroll, lower = slower scroll). + speed: 15 + + }, + + // Dragging. + dragging: { + + // If true, enables scrolling by dragging the main wrapper with the mouse. + enabled: true, + + // Sets the momentum factor. Must be a value between 0 and 1 (lower = less momentum, higher = more momentum, 0 = disable momentum scrolling). + momentum: 0.875, + + // Sets the drag threshold (in pixels). + threshold: 10 + + }, + + // If set to a valid selector , prevents key/mouse events from bubbling from these elements. + excludeSelector: 'input:focus, select:focus, textarea:focus, audio, video, iframe', + + // Link scroll speed. + linkScrollSpeed: 1000 + + }; + + // Skel. + skel.breakpoints({ + xlarge: '(max-width: 1680px)', + large: '(max-width: 1280px)', + medium: '(max-width: 980px)', + small: '(max-width: 736px)', + xsmall: '(max-width: 480px)', + xxsmall: '(max-width: 360px)', + short: '(min-aspect-ratio: 16/7)', + xshort: '(min-aspect-ratio: 16/6)' + }); + + // Ready event. + $(function() { + + // Vars. + var $window = $(window), + $document = $(document), + $body = $('body'), + $html = $('html'), + $bodyHtml = $('body,html'), + $wrapper = $('#wrapper'); + + // Disable animations/transitions until the page has loaded. + $body.addClass('is-loading'); + + $window.on('load', function() { + window.setTimeout(function() { + $body.removeClass('is-loading'); + }, 100); + }); + + // Tweaks/fixes. + + // Mobile: Revert to native scrolling. + if (skel.vars.mobile) { + + // Disable all scroll-assist features. + settings.keyboardShortcuts.enabled = false; + settings.scrollWheel.enabled = false; + settings.scrollZones.enabled = false; + settings.dragging.enabled = false; + + // Re-enable overflow on body. + $body.css('overflow-x', 'auto'); + + } + + // IE: Various fixes. + if (skel.vars.browser == 'ie') { + + // Enable IE mode. + $body.addClass('is-ie'); + + // Page widths. + $window + .on('load resize', function() { + + // Calculate wrapper width. + var w = 0; + + $wrapper.children().each(function() { + w += $(this).width(); + }); + + // Apply to page. + $html.css('width', w + 'px'); + + }); + + } + + // Polyfill: Object fit. + if (!skel.canUse('object-fit')) { + + $('.image[data-position]').each(function() { + + var $this = $(this), + $img = $this.children('img'); + + // Apply img as background. + $this + .css('background-image', 'url("' + $img.attr('src') + '")') + .css('background-position', $this.data('position')) + .css('background-size', 'cover') + .css('background-repeat', 'no-repeat'); + + // Hide img. + $img + .css('opacity', '0'); + + }); + + } + + // Keyboard shortcuts. + if (settings.keyboardShortcuts.enabled) + (function() { + + $wrapper + + // Prevent keystrokes inside excluded elements from bubbling. + .on('keypress keyup keydown', settings.excludeSelector, function(event) { + + // Stop propagation. + event.stopPropagation(); + + }); + + $window + + // Keypress event. + .on('keydown', function(event) { + + var scrolled = false; + + switch (event.keyCode) { + + // Left arrow. + case 37: + $document.scrollLeft($document.scrollLeft() - settings.keyboardShortcuts.distance); + scrolled = true; + break; + + // Right arrow. + case 39: + $document.scrollLeft($document.scrollLeft() + settings.keyboardShortcuts.distance); + scrolled = true; + break; + + // Page Up. + case 33: + $document.scrollLeft($document.scrollLeft() - $window.width() + 100); + scrolled = true; + break; + + // Page Down, Space. + case 34: + case 32: + $document.scrollLeft($document.scrollLeft() + $window.width() - 100); + scrolled = true; + break; + + // Home. + case 36: + $document.scrollLeft(0); + scrolled = true; + break; + + // End. + case 35: + $document.scrollLeft($document.width()); + scrolled = true; + break; + + } + + // Scrolled? + if (scrolled) { + + // Prevent default. + event.preventDefault(); + event.stopPropagation(); + + // Stop link scroll. + $bodyHtml.stop(); + + } + + }); + + })(); + + // Scroll wheel. + if (settings.scrollWheel.enabled) + (function() { + + // Based on code by @miorel + @pieterv of Facebook (thanks guys :) + // github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js + var normalizeWheel = function(event) { + + var pixelStep = 10, + lineHeight = 40, + pageHeight = 800, + sX = 0, + sY = 0, + pX = 0, + pY = 0; + + // Legacy. + if ('detail' in event) + sY = event.detail; + else if ('wheelDelta' in event) + sY = event.wheelDelta / -120; + else if ('wheelDeltaY' in event) + sY = event.wheelDeltaY / -120; + + if ('wheelDeltaX' in event) + sX = event.wheelDeltaX / -120; + + // Side scrolling on FF with DOMMouseScroll. + if ('axis' in event + && event.axis === event.HORIZONTAL_AXIS) { + sX = sY; + sY = 0; + } + + // Calculate. + pX = sX * pixelStep; + pY = sY * pixelStep; + + if ('deltaY' in event) + pY = event.deltaY; + + if ('deltaX' in event) + pX = event.deltaX; + + if ((pX || pY) + && event.deltaMode) { + + if (event.deltaMode == 1) { + pX *= lineHeight; + pY *= lineHeight; + } + else { + pX *= pageHeight; + pY *= pageHeight; + } + + } + + // Fallback if spin cannot be determined. + if (pX && !sX) + sX = (pX < 1) ? -1 : 1; + + if (pY && !sY) + sY = (pY < 1) ? -1 : 1; + + // Return. + return { + spinX: sX, + spinY: sY, + pixelX: pX, + pixelY: pY + }; + + }; + + // Wheel event. + $body.on('wheel', function(event) { + + // Disable on <=small. + if (skel.breakpoint('small').active) + return; + + // Prevent default. + event.preventDefault(); + event.stopPropagation(); + + // Stop link scroll. + $bodyHtml.stop(); + + // Calculate delta, direction. + var n = normalizeWheel(event.originalEvent), + x = (n.pixelX != 0 ? n.pixelX : n.pixelY), + delta = Math.min(Math.abs(x), 150) * settings.scrollWheel.factor, + direction = x > 0 ? 1 : -1; + + // Scroll page. + $document.scrollLeft($document.scrollLeft() + (delta * direction)); + + }); + + })(); + + // Scroll zones. + if (settings.scrollZones.enabled) + (function() { + + var $left = $('
'), + $right = $('
'), + $zones = $left.add($right), + paused = false, + intervalId = null, + direction, + activate = function(d) { + + // Disable on <=small. + if (skel.breakpoint('small').active) + return; + + // Paused? Bail. + if (paused) + return; + + // Stop link scroll. + $bodyHtml.stop(); + + // Set direction. + direction = d; + + // Initialize interval. + clearInterval(intervalId); + + intervalId = setInterval(function() { + $document.scrollLeft($document.scrollLeft() + (settings.scrollZones.speed * direction)); + }, 25); + + }, + deactivate = function() { + + // Unpause. + paused = false; + + // Clear interval. + clearInterval(intervalId); + + }; + + $zones + .appendTo($wrapper) + .on('mouseleave mousedown', function(event) { + deactivate(); + }); + + $left + .css('left', '0') + .on('mouseenter', function(event) { + activate(-1); + }); + + $right + .css('right', '0') + .on('mouseenter', function(event) { + activate(1); + }); + + $wrapper + .on('---pauseScrollZone', function(event) { + + // Pause. + paused = true; + + // Unpause after delay. + setTimeout(function() { + paused = false; + }, 500); + + }); + + })(); + + // Dragging. + if (settings.dragging.enabled) + (function() { + + var dragging = false, + dragged = false, + distance = 0, + startScroll, + momentumIntervalId, velocityIntervalId, + startX, currentX, previousX, + velocity, direction; + + $wrapper + + // Prevent image drag and drop. + .on('mouseup mousemove mousedown', '.image, img', function(event) { + event.preventDefault(); + }) + + // Prevent mouse events inside excluded elements from bubbling. + .on('mouseup mousemove mousedown', settings.excludeSelector, function(event) { + + // Prevent event from bubbling. + event.stopPropagation(); + + // End drag. + dragging = false; + $wrapper.removeClass('is-dragging'); + clearInterval(velocityIntervalId); + clearInterval(momentumIntervalId); + + // Pause scroll zone. + $wrapper.triggerHandler('---pauseScrollZone'); + + }) + + // Mousedown event. + .on('mousedown', function(event) { + + // Disable on <=small. + if (skel.breakpoint('small').active) + return; + + // Clear momentum interval. + clearInterval(momentumIntervalId); + + // Stop link scroll. + $bodyHtml.stop(); + + // Start drag. + dragging = true; + $wrapper.addClass('is-dragging'); + + // Initialize and reset vars. + startScroll = $document.scrollLeft(); + startX = event.clientX; + previousX = startX; + currentX = startX; + distance = 0; + direction = 0; + + // Initialize velocity interval. + clearInterval(velocityIntervalId); + + velocityIntervalId = setInterval(function() { + + // Calculate velocity, direction. + velocity = Math.abs(currentX - previousX); + direction = (currentX > previousX ? -1 : 1); + + // Update previous X. + previousX = currentX; + + }, 50); + + }) + + // Mousemove event. + .on('mousemove', function(event) { + + // Not dragging? Bail. + if (!dragging) + return; + + // Velocity. + currentX = event.clientX; + + // Scroll page. + $document.scrollLeft(startScroll + (startX - currentX)); + + // Update distance. + distance = Math.abs(startScroll - $document.scrollLeft()); + + // Distance exceeds threshold? Disable pointer events on all descendents. + if (!dragged + && distance > settings.dragging.threshold) { + + $wrapper.addClass('is-dragged'); + + dragged = true; + + } + + }) + + // Mouseup/mouseleave event. + .on('mouseup mouseleave', function(event) { + + var m; + + // Not dragging? Bail. + if (!dragging) + return; + + // Dragged? Re-enable pointer events on all descendents. + if (dragged) { + + setTimeout(function() { + $wrapper.removeClass('is-dragged'); + }, 100); + + dragged = false; + + } + + // Distance exceeds threshold? Prevent default. + if (distance > settings.dragging.threshold) + event.preventDefault(); + + // End drag. + dragging = false; + $wrapper.removeClass('is-dragging'); + clearInterval(velocityIntervalId); + clearInterval(momentumIntervalId); + + // Pause scroll zone. + $wrapper.triggerHandler('---pauseScrollZone'); + + // Initialize momentum interval. + if (settings.dragging.momentum > 0) { + + m = velocity; + + momentumIntervalId = setInterval(function() { + + // Momentum is NaN? Bail. + if (isNaN(m)) { + + clearInterval(momentumIntervalId); + return; + + } + + // Scroll page. + $document.scrollLeft($document.scrollLeft() + (m * direction)); + + // Decrease momentum. + m = m * settings.dragging.momentum; + + // Negligible momentum? Clear interval and end. + if (Math.abs(m) < 1) + clearInterval(momentumIntervalId); + + }, 15); + + } + + }); + + })(); + + // Link scroll. + $wrapper + .on('mousedown mouseup', 'a[href^="#"]', function(event) { + + // Stop propagation. + event.stopPropagation(); + + }) + .on('click', 'a[href^="#"]', function(event) { + + var $this = $(this), + href = $this.attr('href'), + $target, x, y; + + // Get target. + if (href == '#' + || ($target = $(href)).length == 0) + return; + + // Prevent default. + event.preventDefault(); + event.stopPropagation(); + + // Calculate x, y. + if (skel.breakpoint('small').active) { + + x = $target.offset().top - (Math.max(0, $window.height() - $target.outerHeight()) / 2); + y = { scrollTop: x }; + + } + else { + + x = $target.offset().left - (Math.max(0, $window.width() - $target.outerWidth()) / 2); + y = { scrollLeft: x }; + + } + + // Scroll. + $bodyHtml + .stop() + .animate( + y, + settings.linkScrollSpeed, + 'swing' + ); + + }); + + // Gallery. + $('.gallery') + .on('click', 'a', function(event) { + + var $a = $(this), + $gallery = $a.parents('.gallery'), + $modal = $gallery.children('.modal'), + $modalImg = $modal.find('img'), + href = $a.attr('href'); + + // Not an image? Bail. + if (!href.match(/\.(jpg|gif|png|mp4)$/)) + return; + + // Prevent default. + event.preventDefault(); + event.stopPropagation(); + + // Locked? Bail. + if ($modal[0]._locked) + return; + + // Lock. + $modal[0]._locked = true; + + // Set src. + $modalImg.attr('src', href); + + // Set visible. + $modal.addClass('visible'); + + // Focus. + $modal.focus(); + + // Delay. + setTimeout(function() { + + // Unlock. + $modal[0]._locked = false; + + }, 600); + + }) + .on('click', '.modal', function(event) { + + var $modal = $(this), + $modalImg = $modal.find('img'); + + // Locked? Bail. + if ($modal[0]._locked) + return; + + // Already hidden? Bail. + if (!$modal.hasClass('visible')) + return; + + // Stop propagation. + event.stopPropagation(); + + // Lock. + $modal[0]._locked = true; + + // Clear visible, loaded. + $modal + .removeClass('loaded') + + // Delay. + setTimeout(function() { + + $modal + .removeClass('visible') + + // Pause scroll zone. + $wrapper.triggerHandler('---pauseScrollZone'); + + setTimeout(function() { + + // Clear src. + $modalImg.attr('src', ''); + + // Unlock. + $modal[0]._locked = false; + + // Focus. + $body.focus(); + + }, 475); + + }, 125); + + }) + .on('keypress', '.modal', function(event) { + + var $modal = $(this); + + // Escape? Hide modal. + if (event.keyCode == 27) + $modal.trigger('click'); + + }) + .on('mouseup mousedown mousemove', '.modal', function(event) { + + // Stop propagation. + event.stopPropagation(); + + }) + .prepend('
') + .find('img') + .on('load', function(event) { + + var $modalImg = $(this), + $modal = $modalImg.parents('.modal'); + + setTimeout(function() { + + // No longer visible? Bail. + if (!$modal.hasClass('visible')) + return; + + // Set loaded. + $modal.addClass('loaded'); + + }, 275); + + }); + + }); + +})(jQuery); \ No newline at end of file -- cgit v1.2.3