diff options
Diffstat (limited to 'app/assets/javascripts/behaviors/toggler_behavior.js')
-rw-r--r-- | app/assets/javascripts/behaviors/toggler_behavior.js | 83 |
1 files changed, 41 insertions, 42 deletions
diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js index 576b8a0425f..4c9ad128e6c 100644 --- a/app/assets/javascripts/behaviors/toggler_behavior.js +++ b/app/assets/javascripts/behaviors/toggler_behavior.js @@ -1,44 +1,43 @@ -/* eslint-disable wrap-iife, func-names, space-before-function-paren, prefer-arrow-callback, vars-on-top, no-var, max-len */ -(function(w) { - $(function() { - var toggleContainer = function(container, /* optional */toggleState) { - var $container = $(container); - - $container - .find('.js-toggle-button .fa') - .toggleClass('fa-chevron-up', toggleState) - .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined); - - $container - .find('.js-toggle-content') - .toggle(toggleState); - }; - - // Toggle button. Show/hide content inside parent container. - // Button does not change visibility. If button has icon - it changes chevron style. - // - // %div.js-toggle-container - // %button.js-toggle-button - // %div.js-toggle-content - // - $('body').on('click', '.js-toggle-button', function(e) { - toggleContainer($(this).closest('.js-toggle-container')); - - const targetTag = e.currentTarget.tagName.toLowerCase(); - if (targetTag === 'a' || targetTag === 'button') { - e.preventDefault(); - } - }); - - // If we're accessing a permalink, ensure it is not inside a - // closed js-toggle-container! - var hash = w.gl.utils.getLocationHash(); - var anchor = hash && document.getElementById(hash); - var container = anchor && $(anchor).closest('.js-toggle-container'); - - if (container) { - toggleContainer(container, true); - anchor.scrollIntoView(); + +// Toggle button. Show/hide content inside parent container. +// Button does not change visibility. If button has icon - it changes chevron style. +// +// %div.js-toggle-container +// %button.js-toggle-button +// %div.js-toggle-content +// + +$(() => { + function toggleContainer(container, toggleState) { + const $container = $(container); + + $container + .find('.js-toggle-button .fa') + .toggleClass('fa-chevron-up', toggleState) + .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined); + + $container + .find('.js-toggle-content') + .toggle(toggleState); + } + + $('body').on('click', '.js-toggle-button', function toggleButton(e) { + toggleContainer($(this).closest('.js-toggle-container')); + + const targetTag = e.currentTarget.tagName.toLowerCase(); + if (targetTag === 'a' || targetTag === 'button') { + e.preventDefault(); } }); -})(window); + + // If we're accessing a permalink, ensure it is not inside a + // closed js-toggle-container! + const hash = window.gl.utils.getLocationHash(); + const anchor = hash && document.getElementById(hash); + const container = anchor && $(anchor).closest('.js-toggle-container'); + + if (container) { + toggleContainer(container, true); + anchor.scrollIntoView(); + } +}); |