wiki-grav/plugins/admin/themes/grav/app/pages/tree.js

126 lines
4.0 KiB
JavaScript
Raw Permalink Normal View History

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 };