/*\r
- Massively by HTML5 UP\r
+ Editorial by HTML5 UP\r
html5up.net | @ajlkn\r
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
*/\r
(function($) {\r
\r
var $window = $(window),\r
- $body = $('body'),\r
- $wrapper = $('#wrapper'),\r
- $header = $('#header'),\r
- $nav = $('#nav'),\r
- $main = $('#main'),\r
- $navPanelToggle, $navPanel, $navPanelInner;\r
+ $head = $('head'),\r
+ $body = $('body');\r
\r
// Breakpoints.\r
breakpoints({\r
- default: ['1681px', null ],\r
- xlarge: ['1281px', '1680px' ],\r
- large: ['981px', '1280px' ],\r
- medium: ['737px', '980px' ],\r
- small: ['481px', '736px' ],\r
- xsmall: ['361px', '480px' ],\r
- xxsmall: [null, '360px' ]\r
+ xlarge: [ '1281px', '1680px' ],\r
+ large: [ '981px', '1280px' ],\r
+ medium: [ '737px', '980px' ],\r
+ small: [ '481px', '736px' ],\r
+ xsmall: [ '361px', '480px' ],\r
+ xxsmall: [ null, '360px' ],\r
+ 'xlarge-to-max': '(min-width: 1681px)',\r
+ 'small-to-xlarge': '(min-width: 481px) and (max-width: 1680px)'\r
});\r
\r
- /**\r
- * Applies parallax scrolling to an element's background image.\r
- * @return {jQuery} jQuery object.\r
- */\r
- $.fn._parallax = function(intensity) {\r
+ // Stops animations/transitions until the page has ...\r
\r
- var $window = $(window),\r
- $this = $(this);\r
+ // ... loaded.\r
+ $window.on('load', function() {\r
+ window.setTimeout(function() {\r
+ $body.removeClass('is-preload');\r
+ }, 100);\r
+ });\r
\r
- if (this.length == 0 || intensity === 0)\r
- return $this;\r
+ // ... stopped resizing.\r
+ var resizeTimeout;\r
\r
- if (this.length > 1) {\r
+ $window.on('resize', function() {\r
\r
- for (var i=0; i < this.length; i++)\r
- $(this[i])._parallax(intensity);\r
+ // Mark as resizing.\r
+ $body.addClass('is-resizing');\r
\r
- return $this;\r
+ // Unmark after delay.\r
+ clearTimeout(resizeTimeout);\r
\r
- }\r
+ resizeTimeout = setTimeout(function() {\r
+ $body.removeClass('is-resizing');\r
+ }, 100);\r
\r
- if (!intensity)\r
- intensity = 0.25;\r
+ });\r
\r
- $this.each(function() {\r
+ // Fixes.\r
\r
- var $t = $(this),\r
- $bg = $('<div class="bg"></div>').appendTo($t),\r
- on, off;\r
+ // Object fit images.\r
+ if (!browser.canUse('object-fit')\r
+ || browser.name == 'safari')\r
+ $('.image.object').each(function() {\r
\r
- on = function() {\r
+ var $this = $(this),\r
+ $img = $this.children('img');\r
\r
- $bg\r
- .removeClass('fixed')\r
- .css('transform', 'matrix(1,0,0,1,0,0)');\r
+ // Hide original image.\r
+ $img.css('opacity', '0');\r
\r
- $window\r
- .on('scroll._parallax', function() {\r
+ // Set background.\r
+ $this\r
+ .css('background-image', 'url("' + $img.attr('src') + '")')\r
+ .css('background-size', $img.css('object-fit') ? $img.css('object-fit') : 'cover')\r
+ .css('background-position', $img.css('object-position') ? $img.css('object-position') : 'center');\r
\r
- var pos = parseInt($window.scrollTop()) - parseInt($t.position().top);\r
+ });\r
\r
- $bg.css('transform', 'matrix(1,0,0,1,0,' + (pos * intensity) + ')');\r
+ // Sidebar.\r
+ var $sidebar = $('#sidebar'),\r
+ $sidebar_inner = $sidebar.children('.inner');\r
\r
- });\r
+ // Inactive by default on <= large.\r
+ breakpoints.on('<=large', function() {\r
+ $sidebar.addClass('inactive');\r
+ });\r
\r
- };\r
+ breakpoints.on('>large', function() {\r
+ $sidebar.removeClass('inactive');\r
+ });\r
\r
- off = function() {\r
+ // Hack: Workaround for Chrome/Android scrollbar position bug.\r
+ if (browser.os == 'android'\r
+ && browser.name == 'chrome')\r
+ $('<style>#sidebar .inner::-webkit-scrollbar { display: none; }</style>')\r
+ .appendTo($head);\r
\r
- $bg\r
- .addClass('fixed')\r
- .css('transform', 'none');\r
+ // Toggle.\r
+ $('<a href="#sidebar" class="toggle">Toggle</a>')\r
+ .appendTo($sidebar)\r
+ .on('click', function(event) {\r
\r
- $window\r
- .off('scroll._parallax');\r
+ // Prevent default.\r
+ event.preventDefault();\r
+ event.stopPropagation();\r
\r
- };\r
+ // Toggle.\r
+ $sidebar.toggleClass('inactive');\r
\r
- // Disable parallax on ..\r
- if (browser.name == 'ie' // IE\r
- || browser.name == 'edge' // Edge\r
- || window.devicePixelRatio > 1 // Retina/HiDPI (= poor performance)\r
- || browser.mobile) // Mobile devices\r
- off();\r
+ });\r
\r
- // Enable everywhere else.\r
- else {\r
+ // Events.\r
\r
- breakpoints.on('>large', on);\r
- breakpoints.on('<=large', off);\r
+ // Link clicks.\r
+ $sidebar.on('click', 'a', function(event) {\r
\r
- }\r
+ // >large? Bail.\r
+ if (breakpoints.active('>large'))\r
+ return;\r
\r
- });\r
+ // Vars.\r
+ var $a = $(this),\r
+ href = $a.attr('href'),\r
+ target = $a.attr('target');\r
\r
- $window\r
- .off('load._parallax resize._parallax')\r
- .on('load._parallax resize._parallax', function() {\r
- $window.trigger('scroll');\r
- });\r
+ // Prevent default.\r
+ event.preventDefault();\r
+ event.stopPropagation();\r
\r
- return $(this);\r
+ // Check URL.\r
+ if (!href || href == '#' || href == '')\r
+ return;\r
\r
- };\r
+ // Hide sidebar.\r
+ $sidebar.addClass('inactive');\r
\r
- // Play initial animations on page load.\r
- $window.on('load', function() {\r
- window.setTimeout(function() {\r
- $body.removeClass('is-preload');\r
- }, 100);\r
- });\r
+ // Redirect to href.\r
+ setTimeout(function() {\r
\r
- // Scrolly.\r
- $('.scrolly').scrolly();\r
+ if (target == '_blank')\r
+ window.open(href);\r
+ else\r
+ window.location.href = href;\r
\r
- // Background.\r
- $wrapper._parallax(0.925);\r
+ }, 500);\r
\r
- // Nav Panel.\r
+ });\r
+\r
+ // Prevent certain events inside the panel from bubbling.\r
+ $sidebar.on('click touchend touchstart touchmove', function(event) {\r
+\r
+ // >large? Bail.\r
+ if (breakpoints.active('>large'))\r
+ return;\r
+\r
+ // Prevent propagation.\r
+ event.stopPropagation();\r
\r
- // Toggle.\r
- $navPanelToggle = $(\r
- '<a href="#navPanel" id="navPanelToggle">Menu</a>'\r
- )\r
- .appendTo($wrapper);\r
-\r
- // Change toggle styling once we've scrolled past the header.\r
- $header.scrollex({\r
- bottom: '5vh',\r
- enter: function() {\r
- $navPanelToggle.removeClass('alt');\r
- },\r
- leave: function() {\r
- $navPanelToggle.addClass('alt');\r
- }\r
});\r
\r
- // Panel.\r
- $navPanel = $(\r
- '<div id="navPanel">' +\r
- '<nav>' +\r
- '</nav>' +\r
- '<a href="#navPanel" class="close"></a>' +\r
- '</div>'\r
- )\r
- .appendTo($body)\r
- .panel({\r
- delay: 500,\r
- hideOnClick: true,\r
- hideOnSwipe: true,\r
- resetScroll: true,\r
- resetForms: true,\r
- side: 'right',\r
- target: $body,\r
- visibleClass: 'is-navPanel-visible'\r
+ // Hide panel on body click/tap.\r
+ $body.on('click touchend', function(event) {\r
+\r
+ // >large? Bail.\r
+ if (breakpoints.active('>large'))\r
+ return;\r
+\r
+ // Deactivate.\r
+ $sidebar.addClass('inactive');\r
+\r
});\r
\r
- // Get inner.\r
- $navPanelInner = $navPanel.children('nav');\r
+ // Scroll lock.\r
+ // Note: If you do anything to change the height of the sidebar's content, be sure to\r
+ // trigger 'resize.sidebar-lock' on $window so stuff doesn't get out of sync.\r
\r
- // Move nav content on breakpoint change.\r
- var $navContent = $nav.children();\r
+ $window.on('load.sidebar-lock', function() {\r
\r
- breakpoints.on('>medium', function() {\r
+ var sh, wh, st;\r
\r
- // NavPanel -> Nav.\r
- $navContent.appendTo($nav);\r
+ // Reset scroll position to 0 if it's 1.\r
+ if ($window.scrollTop() == 1)\r
+ $window.scrollTop(0);\r
\r
- // Flip icon classes.\r
- $nav.find('.icons, .icon')\r
- .removeClass('alt');\r
+ $window\r
+ .on('scroll.sidebar-lock', function() {\r
\r
- });\r
+ var x, y;\r
\r
- breakpoints.on('<=medium', function() {\r
+ // <=large? Bail.\r
+ if (breakpoints.active('<=large')) {\r
\r
- // Nav -> NavPanel.\r
- $navContent.appendTo($navPanelInner);\r
+ $sidebar_inner\r
+ .data('locked', 0)\r
+ .css('position', '')\r
+ .css('top', '');\r
\r
- // Flip icon classes.\r
- $navPanelInner.find('.icons, .icon')\r
- .addClass('alt');\r
+ return;\r
\r
- });\r
+ }\r
\r
- // Hack: Disable transitions on WP.\r
- if (browser.os == 'wp'\r
- && browser.osVersion < 10)\r
- $navPanel\r
- .css('transition', 'none');\r
+ // Calculate positions.\r
+ x = Math.max(sh - wh, 0);\r
+ y = Math.max(0, $window.scrollTop() - x);\r
\r
- // Intro.\r
- var $intro = $('#intro');\r
+ // Lock/unlock.\r
+ if ($sidebar_inner.data('locked') == 1) {\r
\r
- if ($intro.length > 0) {\r
+ if (y <= 0)\r
+ $sidebar_inner\r
+ .data('locked', 0)\r
+ .css('position', '')\r
+ .css('top', '');\r
+ else\r
+ $sidebar_inner\r
+ .css('top', -1 * x);\r
\r
- // Hack: Fix flex min-height on IE.\r
- if (browser.name == 'ie') {\r
- $window.on('resize.ie-intro-fix', function() {\r
+ }\r
+ else {\r
\r
- var h = $intro.height();\r
+ if (y > 0)\r
+ $sidebar_inner\r
+ .data('locked', 1)\r
+ .css('position', 'fixed')\r
+ .css('top', -1 * x);\r
\r
- if (h > $window.height())\r
- $intro.css('height', 'auto');\r
- else\r
- $intro.css('height', h);\r
+ }\r
\r
- }).trigger('resize.ie-intro-fix');\r
- }\r
+ })\r
+ .on('resize.sidebar-lock', function() {\r
\r
- // Hide intro on scroll (> small).\r
- breakpoints.on('>small', function() {\r
+ // Calculate heights.\r
+ wh = $window.height();\r
+ sh = $sidebar_inner.outerHeight() + 30;\r
\r
- $main.unscrollex();\r
+ // Trigger scroll.\r
+ $window.trigger('scroll.sidebar-lock');\r
\r
- $main.scrollex({\r
- mode: 'bottom',\r
- top: '25vh',\r
- bottom: '-50vh',\r
- enter: function() {\r
- $intro.addClass('hidden');\r
- },\r
- leave: function() {\r
- $intro.removeClass('hidden');\r
- }\r
- });\r
+ })\r
+ .trigger('resize.sidebar-lock');\r
\r
});\r
\r
- // Hide intro on scroll (<= small).\r
- breakpoints.on('<=small', function() {\r
+ // Menu.\r
+ var $menu = $('#menu'),\r
+ $menu_openers = $menu.children('ul').find('.opener');\r
\r
- $main.unscrollex();\r
+ // Openers.\r
+ $menu_openers.each(function() {\r
\r
- $main.scrollex({\r
- mode: 'middle',\r
- top: '15vh',\r
- bottom: '-15vh',\r
- enter: function() {\r
- $intro.addClass('hidden');\r
- },\r
- leave: function() {\r
- $intro.removeClass('hidden');\r
- }\r
- });\r
+ var $this = $(this);\r
\r
- });\r
+ $this.on('click', function(event) {\r
+\r
+ // Prevent default.\r
+ event.preventDefault();\r
+\r
+ // Toggle.\r
+ $menu_openers.not($this).removeClass('active');\r
+ $this.toggleClass('active');\r
+\r
+ // Trigger resize (sidebar lock).\r
+ $window.triggerHandler('resize.sidebar-lock');\r
\r
- }\r
+ });\r
+\r
+ });\r
\r
})(jQuery);
\ No newline at end of file
projects / editorial.git / blobdiff