diff --git a/data/magprog/assets/js/main.js b/data/magprog/assets/js/main.js index 6dbd82d..71bec9c 100644 --- a/data/magprog/assets/js/main.js +++ b/data/magprog/assets/js/main.js @@ -20,7 +20,7 @@ }); // Hack: Enable IE flexbox workarounds. - if (browser.name == 'ie') + if (browser.name === 'ie') $body.addClass('is-ie'); // Play initial animations on page load. @@ -48,7 +48,7 @@ if ($sidebar.length > 0) { //adding exclusion for home link - var $sidebar_a = $sidebar.find('a').not('.spc-home'); + let $sidebar_a = $sidebar.find('a').not('.spc-home'); $sidebar_a .addClass('scrolly') @@ -57,7 +57,7 @@ var $this = $(this); // External link? Bail. - if ($this.attr('href').charAt(0) != '#') + if ($this.attr('href').charAt(0) !== '#') return; // Deactivate all links. @@ -71,7 +71,7 @@ }) .each(function () { - var $this = $(this), + let $this = $(this), id = $this.attr('href'), $section = $(id); @@ -81,7 +81,7 @@ // Scrollex. $section.scrollex({ - mode: 'middle', + // mode: 'middle', top: '-20vh', bottom: '-20vh', initialize: function () { @@ -96,7 +96,7 @@ $section.removeClass('inactive'); // No locked links? Deactivate all links and activate this section's one. - if ($sidebar_a.filter('.active-locked').length == 0) { + if ($sidebar_a.filter('.active-locked').length === 0) { $sidebar_a.removeClass('active'); $this.addClass('active'); @@ -133,13 +133,13 @@ // Spotlights. $('.spotlights > section') .scrollex({ - mode: 'middle', + // mode: 'middle', top: '-10vh', bottom: '-10vh', initialize: function () { // Deactivate section. - // $(this).addClass('inactive'); + $(this).addClass('inactive'); }, enter: function () { @@ -151,7 +151,7 @@ }) .each(function () { - var $this = $(this), + let $this = $(this), $image = $this.find('.image'), $img = $image.find('img'), x; @@ -160,7 +160,7 @@ $image.css('background-image', 'url(' + $img.attr('src') + ')'); // Set background position. - if (x = $img.data('position')) + if (x === $img.data('position')) $image.css('background-position', x); // Hide . @@ -171,7 +171,7 @@ // Features. $('.features') .scrollex({ - mode: 'middle', + // mode: 'middle', top: '-20vh', bottom: '-20vh', initialize: function () { @@ -188,4 +188,21 @@ } }); -})(jQuery); \ No newline at end of file +})(jQuery); + + +//From https://www.w3schools.com/howto/howto_js_collapsible.asp +let collapsibles = document.getElementsByClassName("collapsible"); + +Array.from(collapsibles).forEach(item => { + item.addEventListener("click", function () { + this.classList.toggle("collapsible-expanded"); + let target = item.attributes.getNamedItem("data-target").value; + let content = document.getElementById(target); + if (content.style.maxHeight) { + content.style.maxHeight = null; + } else { + content.style.maxHeight = content.scrollHeight + "px"; + } + }); +}) \ No newline at end of file diff --git a/data/magprog/assets/js/util.js b/data/magprog/assets/js/util.js index ecf7b37..9842bde 100644 --- a/data/magprog/assets/js/util.js +++ b/data/magprog/assets/js/util.js @@ -1,587 +1,587 @@ -(function($) { +(function ($) { - /** - * Generate an indented list of links from a nav. Meant for use with panel(). - * @return {jQuery} jQuery object. - */ - $.fn.navList = function() { + /** + * Generate an indented list of links from a nav. Meant for use with panel(). + * @return {jQuery} jQuery object. + */ + $.fn.navList = function () { - var $this = $(this); - $a = $this.find('a'), - b = []; + const $this = $(this); + $a = $this.find('a'), + b = []; - $a.each(function() { + $a.each(function () { - var $this = $(this), - indent = Math.max(0, $this.parents('li').length - 1), - href = $this.attr('href'), - target = $this.attr('target'); + const $this = $(this), + indent = Math.max(0, $this.parents('li').length - 1), + href = $this.attr('href'), + target = $this.attr('target'); - b.push( - '' + - '' + - $this.text() + - '' - ); + b.push( + '' + + '' + + $this.text() + + '' + ); - }); + }); - return b.join(''); + return b.join(''); - }; + }; - /** - * Panel-ify an element. - * @param {object} userConfig User config. - * @return {jQuery} jQuery object. - */ - $.fn.panel = function(userConfig) { + /** + * Panel-ify an element. + * @param {object} userConfig User config. + * @return {jQuery} jQuery object. + */ + $.fn.panel = function (userConfig) { - // No elements? - if (this.length == 0) - return $this; + let $this = $(this); +// No elements? + if (this.length === 0) + return $this; - // Multiple elements? - if (this.length > 1) { + // Multiple elements? + if (this.length > 1) { - for (var i=0; i < this.length; i++) - $(this[i]).panel(userConfig); + for (let i = 0; i < this.length; i++) + $(this[i]).panel(userConfig); - return $this; + return $this; - } + } - // Vars. - var $this = $(this), - $body = $('body'), - $window = $(window), - id = $this.attr('id'), - config; + // Vars. + let $body = $('body'), + $window = $(window), + id = $this.attr('id'), + config; - // Config. - config = $.extend({ + // Config. + config = $.extend({ - // Delay. - delay: 0, + // Delay. + delay: 0, - // Hide panel on link click. - hideOnClick: false, + // Hide panel on link click. + hideOnClick: false, - // Hide panel on escape keypress. - hideOnEscape: false, + // Hide panel on escape keypress. + hideOnEscape: false, - // Hide panel on swipe. - hideOnSwipe: false, + // Hide panel on swipe. + hideOnSwipe: false, - // Reset scroll position on hide. - resetScroll: false, + // Reset scroll position on hide. + resetScroll: false, - // Reset forms on hide. - resetForms: false, + // Reset forms on hide. + resetForms: false, - // Side of viewport the panel will appear. - side: null, + // Side of viewport the panel will appear. + side: null, - // Target element for "class". - target: $this, + // Target element for "class". + target: $this, - // Class to toggle. - visibleClass: 'visible' + // Class to toggle. + visibleClass: 'visible' - }, userConfig); + }, userConfig); - // Expand "target" if it's not a jQuery object already. - if (typeof config.target != 'jQuery') - config.target = $(config.target); + // Expand "target" if it's not a jQuery object already. + if (typeof config.target != 'jQuery') + config.target = $(config.target); - // Panel. + // Panel. - // Methods. - $this._hide = function(event) { + // Methods. + $this._hide = function (event) { - // Already hidden? Bail. - if (!config.target.hasClass(config.visibleClass)) - return; + // Already hidden? Bail. + if (!config.target.hasClass(config.visibleClass)) + return; - // If an event was provided, cancel it. - if (event) { + // If an event was provided, cancel it. + if (event) { - event.preventDefault(); - event.stopPropagation(); + event.preventDefault(); + event.stopPropagation(); - } + } - // Hide. - config.target.removeClass(config.visibleClass); + // Hide. + config.target.removeClass(config.visibleClass); - // Post-hide stuff. - window.setTimeout(function() { + // Post-hide stuff. + window.setTimeout(function () { - // Reset scroll position. - if (config.resetScroll) - $this.scrollTop(0); + // Reset scroll position. + if (config.resetScroll) + $this.scrollTop(0); - // Reset forms. - if (config.resetForms) - $this.find('form').each(function() { - this.reset(); - }); + // Reset forms. + if (config.resetForms) + $this.find('form').each(function () { + this.reset(); + }); - }, config.delay); + }, config.delay); - }; + }; - // Vendor fixes. - $this - .css('-ms-overflow-style', '-ms-autohiding-scrollbar') - .css('-webkit-overflow-scrolling', 'touch'); + // Vendor fixes. + $this + .css('-ms-overflow-style', '-ms-autohiding-scrollbar') + .css('-webkit-overflow-scrolling', 'touch'); - // Hide on click. - if (config.hideOnClick) { + // Hide on click. + if (config.hideOnClick) { - $this.find('a') - .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); + $this.find('a') + .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); - $this - .on('click', 'a', function(event) { + $this + .on('click', 'a', function (event) { - var $a = $(this), - href = $a.attr('href'), - target = $a.attr('target'); + const $a = $(this), + href = $a.attr('href'), + target = $a.attr('target'); - if (!href || href == '#' || href == '' || href == '#' + id) - return; + if (!href || href === '#' || href === '' || href === '#' + id) + return; - // Cancel original event. - event.preventDefault(); - event.stopPropagation(); + // Cancel original event. + event.preventDefault(); + event.stopPropagation(); - // Hide panel. - $this._hide(); + // Hide panel. + $this._hide(); - // Redirect to href. - window.setTimeout(function() { + // Redirect to href. + window.setTimeout(function () { - if (target == '_blank') - window.open(href); - else - window.location.href = href; + if (target === '_blank') + window.open(href); + else + window.location.href = href; - }, config.delay + 10); + }, config.delay + 10); - }); + }); - } + } - // Event: Touch stuff. - $this.on('touchstart', function(event) { + // Event: Touch stuff. + $this.on('touchstart', function (event) { - $this.touchPosX = event.originalEvent.touches[0].pageX; - $this.touchPosY = event.originalEvent.touches[0].pageY; + $this.touchPosX = event.originalEvent.touches[0].pageX; + $this.touchPosY = event.originalEvent.touches[0].pageY; - }) + }) - $this.on('touchmove', function(event) { + $this.on('touchmove', function (event) { - if ($this.touchPosX === null - || $this.touchPosY === null) - return; + if ($this.touchPosX === null + || $this.touchPosY === null) + return; - var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, - diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, - th = $this.outerHeight(), - ts = ($this.get(0).scrollHeight - $this.scrollTop()); + const diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, + diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, + th = $this.outerHeight(), + ts = ($this.get(0).scrollHeight - $this.scrollTop()); - // Hide on swipe? - if (config.hideOnSwipe) { + // Hide on swipe? + if (config.hideOnSwipe) { - var result = false, - boundary = 20, - delta = 50; + let result = false; + const boundary = 20, + delta = 50; - switch (config.side) { + switch (config.side) { - case 'left': - result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); - break; + case 'left': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); + break; - case 'right': - result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); - break; + case 'right': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); + break; - case 'top': - result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); - break; + case 'top': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); + break; - case 'bottom': - result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); - break; + case 'bottom': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); + break; - default: - break; + default: + break; - } + } - if (result) { + if (result) { - $this.touchPosX = null; - $this.touchPosY = null; - $this._hide(); + $this.touchPosX = null; + $this.touchPosY = null; + $this._hide(); - return false; + return false; - } + } - } + } - // Prevent vertical scrolling past the top or bottom. - if (($this.scrollTop() < 0 && diffY < 0) - || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { + // Prevent vertical scrolling past the top or bottom. + if (($this.scrollTop() < 0 && diffY < 0) + || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { - event.preventDefault(); - event.stopPropagation(); + event.preventDefault(); + event.stopPropagation(); - } + } - }); + }); - // Event: Prevent certain events inside the panel from bubbling. - $this.on('click touchend touchstart touchmove', function(event) { - event.stopPropagation(); - }); + // Event: Prevent certain events inside the panel from bubbling. + $this.on('click touchend touchstart touchmove', function (event) { + event.stopPropagation(); + }); - // Event: Hide panel if a child anchor tag pointing to its ID is clicked. - $this.on('click', 'a[href="#' + id + '"]', function(event) { + // Event: Hide panel if a child anchor tag pointing to its ID is clicked. + $this.on('click', 'a[href="#' + id + '"]', function (event) { - event.preventDefault(); - event.stopPropagation(); + event.preventDefault(); + event.stopPropagation(); - config.target.removeClass(config.visibleClass); + config.target.removeClass(config.visibleClass); - }); + }); - // Body. + // Body. - // Event: Hide panel on body click/tap. - $body.on('click touchend', function(event) { - $this._hide(event); - }); + // Event: Hide panel on body click/tap. + $body.on('click touchend', function (event) { + $this._hide(event); + }); - // Event: Toggle. - $body.on('click', 'a[href="#' + id + '"]', function(event) { + // Event: Toggle. + $body.on('click', 'a[href="#' + id + '"]', function (event) { - event.preventDefault(); - event.stopPropagation(); + event.preventDefault(); + event.stopPropagation(); - config.target.toggleClass(config.visibleClass); + config.target.toggleClass(config.visibleClass); - }); + }); - // Window. + // Window. - // Event: Hide on ESC. - if (config.hideOnEscape) - $window.on('keydown', function(event) { + // Event: Hide on ESC. + if (config.hideOnEscape) + $window.on('keydown', function (event) { - if (event.keyCode == 27) - $this._hide(event); + if (event.keyCode === 27) + $this._hide(event); - }); + }); - return $this; + return $this; - }; + }; - /** - * Apply "placeholder" attribute polyfill to one or more forms. - * @return {jQuery} jQuery object. - */ - $.fn.placeholder = function() { + /** + * Apply "placeholder" attribute polyfill to one or more forms. + * @return {jQuery} jQuery object. + */ + $.fn.placeholder = function () { - // Browser natively supports placeholders? Bail. - if (typeof (document.createElement('input')).placeholder != 'undefined') - return $(this); + // Browser natively supports placeholders? Bail. + if (typeof (document.createElement('input')).placeholder != 'undefined') + return $(this); - // No elements? - if (this.length == 0) - return $this; + // No elements? + if (this.length === 0) + return $this; - // Multiple elements? - if (this.length > 1) { + // Multiple elements? + if (this.length > 1) { - for (var i=0; i < this.length; i++) - $(this[i]).placeholder(); + for (let i = 0; i < this.length; i++) + $(this[i]).placeholder(); - return $this; + return $this; - } + } - // Vars. - var $this = $(this); + // Vars. + var $this = $(this); - // Text, TextArea. - $this.find('input[type=text],textarea') - .each(function() { + // Text, TextArea. + $this.find('input[type=text],textarea') + .each(function () { - var i = $(this); + const i = $(this); - if (i.val() == '' - || i.val() == i.attr('placeholder')) - i - .addClass('polyfill-placeholder') - .val(i.attr('placeholder')); + if (i.val() === '' + || i.val() === i.attr('placeholder')) + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); - }) - .on('blur', function() { + }) + .on('blur', function () { - var i = $(this); + const i = $(this); - if (i.attr('name').match(/-polyfill-field$/)) - return; + if (i.attr('name').match(/-polyfill-field$/)) + return; - if (i.val() == '') - i - .addClass('polyfill-placeholder') - .val(i.attr('placeholder')); + if (i.val() === '') + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); - }) - .on('focus', function() { + }) + .on('focus', function () { - var i = $(this); + const i = $(this); - if (i.attr('name').match(/-polyfill-field$/)) - return; + if (i.attr('name').match(/-polyfill-field$/)) + return; - if (i.val() == i.attr('placeholder')) - i - .removeClass('polyfill-placeholder') - .val(''); + if (i.val() === i.attr('placeholder')) + i + .removeClass('polyfill-placeholder') + .val(''); - }); + }); - // Password. - $this.find('input[type=password]') - .each(function() { + // Password. + $this.find('input[type=password]') + .each(function () { - var i = $(this); - var x = $( - $('