4 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
9 var $window
= $(window
),
15 xlarge
: [ '1281px', '1680px' ],
16 large
: [ '981px', '1280px' ],
17 medium
: [ '737px', '980px' ],
18 small
: [ '481px', '736px' ],
19 xsmall
: [ '361px', '480px' ],
20 xxsmall
: [ null, '360px' ],
21 'xlarge-to-max': '(min-width: 1681px)',
22 'small-to-xlarge': '(min-width: 481px) and (max-width: 1680px)'
25 // Stops animations/transitions until the page has ...
28 $window
.on('load', function() {
29 window
.setTimeout(function() {
30 $body
.removeClass('is-preload');
34 // ... stopped resizing.
37 $window
.on('resize', function() {
40 $body
.addClass('is-resizing');
42 // Unmark after delay.
43 clearTimeout(resizeTimeout
);
45 resizeTimeout
= setTimeout(function() {
46 $body
.removeClass('is-resizing');
54 if (!browser
.canUse('object-fit')
55 || browser
.name
== 'safari')
56 $('.image.object').each(function() {
59 $img
= $this.children('img');
61 // Hide original image.
62 $img
.css('opacity', '0');
66 .css('background-image', 'url("' + $img
.attr('src') + '")')
67 .css('background-size', $img
.css('object-fit') ? $img
.css('object-fit') : 'cover')
68 .css('background-position', $img
.css('object-position') ? $img
.css('object-position') : 'center');
73 var $sidebar
= $('#sidebar'),
74 $sidebar_inner
= $sidebar
.children('.inner');
76 // Inactive by default on <= large.
77 breakpoints
.on('<=large', function() {
78 $sidebar
.addClass('inactive');
81 breakpoints
.on('>large', function() {
82 $sidebar
.removeClass('inactive');
85 // Hack: Workaround for Chrome/Android scrollbar position bug.
86 if (browser
.os
== 'android'
87 && browser
.name
== 'chrome')
88 $('<style>#sidebar .inner::-webkit-scrollbar { display: none; }</style>')
92 $('<a href="#sidebar" class="toggle">Toggle</a>')
94 .on('click', function(event
) {
97 event
.preventDefault();
98 event
.stopPropagation();
101 $sidebar
.toggleClass('inactive');
108 $sidebar
.on('click', 'a', function(event
) {
111 if (breakpoints
.active('>large'))
116 href
= $a
.attr('href'),
117 target
= $a
.attr('target');
120 event
.preventDefault();
121 event
.stopPropagation();
124 if (!href
|| href
== '#' || href
== '')
128 $sidebar
.addClass('inactive');
131 setTimeout(function() {
133 if (target
== '_blank')
136 window
.location
.href
= href
;
142 // Prevent certain events inside the panel from bubbling.
143 $sidebar
.on('click touchend touchstart touchmove', function(event
) {
146 if (breakpoints
.active('>large'))
149 // Prevent propagation.
150 event
.stopPropagation();
154 // Hide panel on body click/tap.
155 $body
.on('click touchend', function(event
) {
158 if (breakpoints
.active('>large'))
162 $sidebar
.addClass('inactive');
167 // Note: If you do anything to change the height of the sidebar's content, be sure to
168 // trigger 'resize.sidebar-lock' on $window so stuff doesn't get out of sync.
170 $window
.on('load.sidebar-lock', function() {
174 // Reset scroll position to 0 if it's 1.
175 if ($window
.scrollTop() == 1)
176 $window
.scrollTop(0);
179 .on('scroll.sidebar-lock', function() {
184 if (breakpoints
.active('<=large')) {
195 // Calculate positions.
196 x
= Math
.max(sh
- wh
, 0);
197 y
= Math
.max(0, $window
.scrollTop() - x
);
200 if ($sidebar_inner
.data('locked') == 1) {
217 .css('position', 'fixed')
223 .on('resize.sidebar-lock', function() {
225 // Calculate heights.
226 wh
= $window
.height();
227 sh
= $sidebar_inner
.outerHeight() + 30;
230 $window
.trigger('scroll.sidebar-lock');
233 .trigger('resize.sidebar-lock');
238 var $menu
= $('#menu'),
239 $menu_openers
= $menu
.children('ul').find('.opener');
242 $menu_openers
.each(function() {
246 $this.on('click', function(event
) {
249 event
.preventDefault();
252 $menu_openers
.not($this).removeClass('active');
253 $this.toggleClass('active');
255 // Trigger resize (sidebar lock).
256 $window
.triggerHandler('resize.sidebar-lock');