126 lines
4.0 KiB
JavaScript
126 lines
4.0 KiB
JavaScript
import $ from 'jquery';
|
|
import '../utils/storage';
|
|
|
|
const sessionKey = 'grav:admin:pages';
|
|
|
|
if (!sessionStorage.getItem(sessionKey)) {
|
|
sessionStorage.setItem(sessionKey, '{}');
|
|
}
|
|
|
|
export default class PagesTree {
|
|
constructor(query, elements = undefined) {
|
|
this.query = query;
|
|
this.elements = $(elements !== undefined ? elements : this.query);
|
|
this.session = JSON.parse(sessionStorage.getItem(sessionKey) || '{}');
|
|
|
|
if (!this.elements.length) { return; }
|
|
|
|
this.restore();
|
|
|
|
this.elements.find('.page-icon').on('click', (event) => this.toggle(event.target));
|
|
this.elements.data('tree_init', 1);
|
|
|
|
$('[data-page-toggleall]').on('click', (event) => {
|
|
let element = $(event.target).closest('[data-page-toggleall]');
|
|
let action = element.data('page-toggleall');
|
|
|
|
this[action]();
|
|
});
|
|
}
|
|
|
|
reload() {
|
|
const elements = $(this.query).filter((index, element) => !$(element).data('tree_init'));
|
|
if (!elements.length) { return; }
|
|
this.constructor(this.query, elements);
|
|
}
|
|
|
|
toggle(elements, dontStore = false) {
|
|
if (typeof elements === 'string') {
|
|
elements = $(`[data-nav-id="${elements}"]`).find('[data-toggle="children"]');
|
|
}
|
|
|
|
elements = $(elements || this.elements);
|
|
elements.each((index, element) => {
|
|
element = $(element);
|
|
let state = this.getState(element.closest('[data-toggle="children"]'));
|
|
this[state.isOpen ? 'collapse' : 'expand'](state.id, dontStore);
|
|
});
|
|
}
|
|
|
|
collapse(elements, dontStore = false) {
|
|
if (typeof elements === 'string') {
|
|
elements = $(`[data-nav-id="${elements}"]`).find('[data-toggle="children"]');
|
|
}
|
|
|
|
elements = $(elements || this.elements);
|
|
elements.each((index, element) => {
|
|
element = $(element);
|
|
let state = this.getState(element);
|
|
|
|
if (state.isOpen) {
|
|
state.children.hide();
|
|
state.icon.removeClass('children-open').addClass('children-closed');
|
|
if (!dontStore) { delete this.session[state.id]; }
|
|
}
|
|
});
|
|
|
|
if (!dontStore) { this.save(); }
|
|
}
|
|
|
|
expand(elements, dontStore = false) {
|
|
if (typeof elements === 'string') {
|
|
let element = $(`[data-nav-id="${elements}"]`);
|
|
let parents = element.parents('[data-nav-id]');
|
|
|
|
// loop back through parents, we don't want to expand an hidden child
|
|
if (parents.length) {
|
|
parents = parents.find('[data-toggle="children"]:first');
|
|
parents = parents.add(element.find('[data-toggle="children"]:first'));
|
|
return this.expand(parents, dontStore);
|
|
}
|
|
|
|
elements = element.find('[data-toggle="children"]:first');
|
|
}
|
|
|
|
elements = $(elements || this.elements);
|
|
elements.each((index, element) => {
|
|
element = $(element);
|
|
let state = this.getState(element);
|
|
|
|
if (!state.isOpen) {
|
|
state.children.show();
|
|
state.icon.removeClass('children-closed').addClass('children-open');
|
|
if (!dontStore) { this.session[state.id] = 1; }
|
|
}
|
|
});
|
|
|
|
if (!dontStore) { this.save(); }
|
|
}
|
|
|
|
restore() {
|
|
this.collapse(null, true);
|
|
|
|
Object.keys(this.session).forEach((key) => {
|
|
this.expand(key, 'no-store');
|
|
});
|
|
}
|
|
|
|
save() {
|
|
return sessionStorage.setItem(sessionKey, JSON.stringify(this.session));
|
|
}
|
|
|
|
getState(element) {
|
|
element = $(element);
|
|
|
|
return {
|
|
id: element.closest('[data-nav-id]').data('nav-id'),
|
|
children: element.closest('li.page-item').find('ul:first'),
|
|
icon: element.find('.page-icon'),
|
|
get isOpen() { return this.icon.hasClass('children-open'); }
|
|
};
|
|
}
|
|
}
|
|
|
|
let Instance = new PagesTree('[data-toggle="children"]');
|
|
export { Instance };
|