remove needlessly complicated, duplicate css class for expanded settings panels
This commit is contained in:
parent
93139aa84a
commit
7e8f3a584f
2 changed files with 27 additions and 27 deletions
|
@ -1,34 +1,26 @@
|
|||
function expandSectionParent($section, $content) {
|
||||
$section.addClass('expanded');
|
||||
$content.off('animationend.expandSectionParent');
|
||||
}
|
||||
|
||||
function expandSection($section) {
|
||||
$section.find('.js-settings-toggle').text('Collapse');
|
||||
|
||||
const $content = $section.find('.settings-content');
|
||||
$content.addClass('expanded').off('scroll.expandSection').scrollTop(0);
|
||||
|
||||
if ($content.hasClass('no-animate')) {
|
||||
expandSectionParent($section, $content);
|
||||
} else {
|
||||
$content.on('animationend.expandSectionParent', () => expandSectionParent($section, $content));
|
||||
$section.find('.settings-content').off('scroll.expandSection').scrollTop(0);
|
||||
$section.addClass('expanded');
|
||||
if (!$section.hasClass('no-animate')) {
|
||||
$section.addClass('animating')
|
||||
.one('animationend.animateSection', () => $section.removeClass('animating'));
|
||||
}
|
||||
}
|
||||
|
||||
function closeSection($section) {
|
||||
$section.find('.js-settings-toggle').text('Expand');
|
||||
|
||||
const $content = $section.find('.settings-content');
|
||||
$content.removeClass('expanded').on('scroll.expandSection', () => expandSection($section));
|
||||
|
||||
$section.find('.settings-content').on('scroll.expandSection', () => expandSection($section));
|
||||
$section.removeClass('expanded');
|
||||
if (!$section.hasClass('no-animate')) {
|
||||
$section.addClass('animating')
|
||||
.one('animationend.animateSection', () => $section.removeClass('animating'));
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSection($section) {
|
||||
const $content = $section.find('.settings-content');
|
||||
$content.removeClass('no-animate');
|
||||
if ($content.hasClass('expanded')) {
|
||||
$section.removeClass('no-animate');
|
||||
if ($section.hasClass('expanded')) {
|
||||
closeSection($section);
|
||||
} else {
|
||||
expandSection($section);
|
||||
|
@ -39,10 +31,19 @@ export default function initSettingsPanels() {
|
|||
$('.settings').each((i, elm) => {
|
||||
const $section = $(elm);
|
||||
$section.on('click.toggleSection', '.js-settings-toggle', () => toggleSection($section));
|
||||
$section.find('.settings-content:not(.expanded)').on('scroll.expandSection', () => expandSection($section));
|
||||
|
||||
if (!$section.hasClass('expanded')) {
|
||||
$section.find('.settings-content').on('scroll.expandSection', () => {
|
||||
$section.removeClass('no-animate');
|
||||
expandSection($section);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (location.hash) {
|
||||
expandSection($(location.hash));
|
||||
const $target = $(location.hash);
|
||||
if ($target.length && $target.hasClass('.settings')) {
|
||||
expandSection($target);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -23,15 +23,14 @@
|
|||
}
|
||||
|
||||
.settings {
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid $gray-darker;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
overflow: visible;
|
||||
&.animating {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -57,13 +56,13 @@
|
|||
padding-right: 110px;
|
||||
animation: collapseMaxHeight 300ms ease-out;
|
||||
|
||||
&.expanded {
|
||||
.settings.expanded & {
|
||||
max-height: none;
|
||||
overflow-y: visible;
|
||||
animation: expandMaxHeight 300ms ease-in;
|
||||
}
|
||||
|
||||
&.no-animate {
|
||||
.settings.no-animate & {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue