tree.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. import $ from 'jquery';
  2. import '../utils/storage';
  3. const sessionKey = 'grav:admin:pages';
  4. if (!sessionStorage.getItem(sessionKey)) {
  5. sessionStorage.setItem(sessionKey, '{}');
  6. }
  7. export default class PagesTree {
  8. constructor(query, elements = undefined) {
  9. this.query = query;
  10. this.elements = $(elements !== undefined ? elements : this.query);
  11. this.session = JSON.parse(sessionStorage.getItem(sessionKey) || '{}');
  12. if (!this.elements.length) { return; }
  13. this.restore();
  14. this.elements.find('.page-icon').on('click', (event) => this.toggle(event.target));
  15. this.elements.data('tree_init', 1);
  16. $('[data-page-toggleall]').on('click', (event) => {
  17. let element = $(event.target).closest('[data-page-toggleall]');
  18. let action = element.data('page-toggleall');
  19. this[action]();
  20. });
  21. }
  22. reload() {
  23. const elements = $(this.query).filter((index, element) => !$(element).data('tree_init'));
  24. if (!elements.length) { return; }
  25. this.constructor(this.query, elements);
  26. }
  27. toggle(elements, dontStore = false) {
  28. if (typeof elements === 'string') {
  29. elements = $(`[data-nav-id="${elements}"]`).find('[data-toggle="children"]');
  30. }
  31. elements = $(elements || this.elements);
  32. elements.each((index, element) => {
  33. element = $(element);
  34. let state = this.getState(element.closest('[data-toggle="children"]'));
  35. this[state.isOpen ? 'collapse' : 'expand'](state.id, dontStore);
  36. });
  37. }
  38. collapse(elements, dontStore = false) {
  39. if (typeof elements === 'string') {
  40. elements = $(`[data-nav-id="${elements}"]`).find('[data-toggle="children"]');
  41. }
  42. elements = $(elements || this.elements);
  43. elements.each((index, element) => {
  44. element = $(element);
  45. let state = this.getState(element);
  46. if (state.isOpen) {
  47. state.children.hide();
  48. state.icon.removeClass('children-open').addClass('children-closed');
  49. if (!dontStore) { delete this.session[state.id]; }
  50. }
  51. });
  52. if (!dontStore) { this.save(); }
  53. }
  54. expand(elements, dontStore = false) {
  55. if (typeof elements === 'string') {
  56. let element = $(`[data-nav-id="${elements}"]`);
  57. let parents = element.parents('[data-nav-id]');
  58. // loop back through parents, we don't want to expand an hidden child
  59. if (parents.length) {
  60. parents = parents.find('[data-toggle="children"]:first');
  61. parents = parents.add(element.find('[data-toggle="children"]:first'));
  62. return this.expand(parents, dontStore);
  63. }
  64. elements = element.find('[data-toggle="children"]:first');
  65. }
  66. elements = $(elements || this.elements);
  67. elements.each((index, element) => {
  68. element = $(element);
  69. let state = this.getState(element);
  70. if (!state.isOpen) {
  71. state.children.show();
  72. state.icon.removeClass('children-closed').addClass('children-open');
  73. if (!dontStore) { this.session[state.id] = 1; }
  74. }
  75. });
  76. if (!dontStore) { this.save(); }
  77. }
  78. restore() {
  79. this.collapse(null, true);
  80. Object.keys(this.session).forEach((key) => {
  81. this.expand(key, 'no-store');
  82. });
  83. }
  84. save() {
  85. return sessionStorage.setItem(sessionKey, JSON.stringify(this.session));
  86. }
  87. getState(element) {
  88. element = $(element);
  89. return {
  90. id: element.closest('[data-nav-id]').data('nav-id'),
  91. children: element.closest('li.page-item').find('ul:first'),
  92. icon: element.find('.page-icon'),
  93. get isOpen() { return this.icon.hasClass('children-open'); }
  94. };
  95. }
  96. }
  97. let Instance = new PagesTree('[data-toggle="children"]');
  98. export { Instance };