X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;f=assets%2Fmain%2Fjs%2Fmain.js;h=494b9ccd04799e1c5ca76af383a419fb9aaf6ebc;hb=5f0749639ca916108518873353bb459e80423f9a;hp=fe372ee18743778425e159437497bbd45bb8f45c;hpb=8af2079e4b096e77ba2f922d6a18224ce01cb7bd;p=editorial.git
diff --git a/assets/main/js/main.js b/assets/main/js/main.js
index fe372ee..494b9cc 100644
--- a/assets/main/js/main.js
+++ b/assets/main/js/main.js
@@ -1,5 +1,5 @@
/*
- Massively by HTML5 UP
+ Editorial by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
@@ -7,252 +7,256 @@
(function($) {
var $window = $(window),
- $body = $('body'),
- $wrapper = $('#wrapper'),
- $header = $('#header'),
- $nav = $('#nav'),
- $main = $('#main'),
- $navPanelToggle, $navPanel, $navPanelInner;
+ $head = $('head'),
+ $body = $('body');
// Breakpoints.
breakpoints({
- default: ['1681px', null ],
- xlarge: ['1281px', '1680px' ],
- large: ['981px', '1280px' ],
- medium: ['737px', '980px' ],
- small: ['481px', '736px' ],
- xsmall: ['361px', '480px' ],
- xxsmall: [null, '360px' ]
+ xlarge: [ '1281px', '1680px' ],
+ large: [ '981px', '1280px' ],
+ medium: [ '737px', '980px' ],
+ small: [ '481px', '736px' ],
+ xsmall: [ '361px', '480px' ],
+ xxsmall: [ null, '360px' ],
+ 'xlarge-to-max': '(min-width: 1681px)',
+ 'small-to-xlarge': '(min-width: 481px) and (max-width: 1680px)'
});
- /**
- * Applies parallax scrolling to an element's background image.
- * @return {jQuery} jQuery object.
- */
- $.fn._parallax = function(intensity) {
+ // Stops animations/transitions until the page has ...
- var $window = $(window),
- $this = $(this);
+ // ... loaded.
+ $window.on('load', function() {
+ window.setTimeout(function() {
+ $body.removeClass('is-preload');
+ }, 100);
+ });
- if (this.length == 0 || intensity === 0)
- return $this;
+ // ... stopped resizing.
+ var resizeTimeout;
- if (this.length > 1) {
+ $window.on('resize', function() {
- for (var i=0; i < this.length; i++)
- $(this[i])._parallax(intensity);
+ // Mark as resizing.
+ $body.addClass('is-resizing');
- return $this;
+ // Unmark after delay.
+ clearTimeout(resizeTimeout);
- }
+ resizeTimeout = setTimeout(function() {
+ $body.removeClass('is-resizing');
+ }, 100);
- if (!intensity)
- intensity = 0.25;
+ });
- $this.each(function() {
+ // Fixes.
- var $t = $(this),
- $bg = $('').appendTo($t),
- on, off;
+ // Object fit images.
+ if (!browser.canUse('object-fit')
+ || browser.name == 'safari')
+ $('.image.object').each(function() {
- on = function() {
+ var $this = $(this),
+ $img = $this.children('img');
- $bg
- .removeClass('fixed')
- .css('transform', 'matrix(1,0,0,1,0,0)');
+ // Hide original image.
+ $img.css('opacity', '0');
- $window
- .on('scroll._parallax', function() {
+ // Set background.
+ $this
+ .css('background-image', 'url("' + $img.attr('src') + '")')
+ .css('background-size', $img.css('object-fit') ? $img.css('object-fit') : 'cover')
+ .css('background-position', $img.css('object-position') ? $img.css('object-position') : 'center');
- var pos = parseInt($window.scrollTop()) - parseInt($t.position().top);
+ });
- $bg.css('transform', 'matrix(1,0,0,1,0,' + (pos * intensity) + ')');
+ // Sidebar.
+ var $sidebar = $('#sidebar'),
+ $sidebar_inner = $sidebar.children('.inner');
- });
+ // Inactive by default on <= large.
+ breakpoints.on('<=large', function() {
+ $sidebar.addClass('inactive');
+ });
- };
+ breakpoints.on('>large', function() {
+ $sidebar.removeClass('inactive');
+ });
- off = function() {
+ // Hack: Workaround for Chrome/Android scrollbar position bug.
+ if (browser.os == 'android'
+ && browser.name == 'chrome')
+ $('')
+ .appendTo($head);
- $bg
- .addClass('fixed')
- .css('transform', 'none');
+ // Toggle.
+ $('Toggle')
+ .appendTo($sidebar)
+ .on('click', function(event) {
- $window
- .off('scroll._parallax');
+ // Prevent default.
+ event.preventDefault();
+ event.stopPropagation();
- };
+ // Toggle.
+ $sidebar.toggleClass('inactive');
- // Disable parallax on ..
- if (browser.name == 'ie' // IE
- || browser.name == 'edge' // Edge
- || window.devicePixelRatio > 1 // Retina/HiDPI (= poor performance)
- || browser.mobile) // Mobile devices
- off();
+ });
- // Enable everywhere else.
- else {
+ // Events.
- breakpoints.on('>large', on);
- breakpoints.on('<=large', off);
+ // Link clicks.
+ $sidebar.on('click', 'a', function(event) {
- }
+ // >large? Bail.
+ if (breakpoints.active('>large'))
+ return;
- });
+ // Vars.
+ var $a = $(this),
+ href = $a.attr('href'),
+ target = $a.attr('target');
- $window
- .off('load._parallax resize._parallax')
- .on('load._parallax resize._parallax', function() {
- $window.trigger('scroll');
- });
+ // Prevent default.
+ event.preventDefault();
+ event.stopPropagation();
- return $(this);
+ // Check URL.
+ if (!href || href == '#' || href == '')
+ return;
- };
+ // Hide sidebar.
+ $sidebar.addClass('inactive');
- // Play initial animations on page load.
- $window.on('load', function() {
- window.setTimeout(function() {
- $body.removeClass('is-preload');
- }, 100);
- });
+ // Redirect to href.
+ setTimeout(function() {
- // Scrolly.
- $('.scrolly').scrolly();
+ if (target == '_blank')
+ window.open(href);
+ else
+ window.location.href = href;
- // Background.
- $wrapper._parallax(0.925);
+ }, 500);
- // Nav Panel.
+ });
+
+ // Prevent certain events inside the panel from bubbling.
+ $sidebar.on('click touchend touchstart touchmove', function(event) {
+
+ // >large? Bail.
+ if (breakpoints.active('>large'))
+ return;
+
+ // Prevent propagation.
+ event.stopPropagation();
- // Toggle.
- $navPanelToggle = $(
- 'Menu'
- )
- .appendTo($wrapper);
-
- // Change toggle styling once we've scrolled past the header.
- $header.scrollex({
- bottom: '5vh',
- enter: function() {
- $navPanelToggle.removeClass('alt');
- },
- leave: function() {
- $navPanelToggle.addClass('alt');
- }
});
- // Panel.
- $navPanel = $(
- '' +
- '
' +
- '
' +
- '