All files / app/assets/javascripts/behaviors toggler_behavior.js

0% Statements 0/25
0% Branches 0/16
0% Functions 0/3
0% Lines 0/25

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53                                                                                                         
import $ from 'jquery';
import { getLocationHash } from '../lib/utils/url_utility';
 
// 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);
    const isExpanded = $container.data('is-expanded');
    const $collapseIcon = $container.find('.js-sidebar-collapse');
    const $expandIcon = $container.find('.js-sidebar-expand');
 
    if (isExpanded && !toggleState) {
      $container.data('is-expanded', false);
      $collapseIcon.addClass('hidden');
      $expandIcon.removeClass('hidden');
    } else {
      $container.data('is-expanded', true);
      $expandIcon.addClass('hidden');
      $collapseIcon.removeClass('hidden');
    }
 
    $container.find('.js-toggle-content').toggle(toggleState);
  }
 
  $('body').on('click', '.js-toggle-button', function toggleButton(e) {
    e.currentTarget.classList.toggle(e.currentTarget.dataset.toggleOpenClass || 'selected');
    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!
  const hash = getLocationHash();
  const anchor = hash && document.getElementById(hash);
  const container = anchor && $(anchor).closest('.js-toggle-container');
 
  if (container) {
    toggleContainer(container, true);
    anchor.scrollIntoView();
  }
});