52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
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 || 'open');
|
|
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();
|
|
}
|
|
});
|