debian-mirror-gitlab/app/assets/javascripts/behaviors/toggler_behavior.js

45 lines
1.4 KiB
JavaScript
Raw Normal View History

2017-08-17 22:00:37 +05:30
// 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
//
2018-03-17 18:26:18 +05:30
import { getLocationHash } from '../lib/utils/url_utility';
2017-08-17 22:00:37 +05:30
$(() => {
function toggleContainer(container, toggleState) {
const $container = $(container);
$container
2018-03-27 19:54:05 +05:30
.find('.js-toggle-button .fa-chevron-up, .js-toggle-button .fa-chevron-down')
2017-08-17 22:00:37 +05:30
.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) {
2018-03-27 19:54:05 +05:30
e.currentTarget.classList.toggle(e.currentTarget.dataset.toggleOpenClass || 'open');
2017-08-17 22:00:37 +05:30
toggleContainer($(this).closest('.js-toggle-container'));
const targetTag = e.currentTarget.tagName.toLowerCase();
if (targetTag === 'a' || targetTag === 'button') {
2016-09-13 17:45:13 +05:30
e.preventDefault();
}
});
2017-08-17 22:00:37 +05:30
// If we're accessing a permalink, ensure it is not inside a
// closed js-toggle-container!
2018-03-17 18:26:18 +05:30
const hash = getLocationHash();
2017-08-17 22:00:37 +05:30
const anchor = hash && document.getElementById(hash);
const container = anchor && $(anchor).closest('.js-toggle-container');
if (container) {
toggleContainer(container, true);
anchor.scrollIntoView();
}
});