init

user/plugins/admin/themes/grav/app/pages/tree.js

@@ -0,0 +1,125 @@
+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 };