From 565cb3a790e2e707e6b4c03e51e318c71555fa2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Sun, 31 Jul 2022 22:07:27 +0200 Subject: [PATCH] Implement sidebar collapse with stimulus. --- .../common/hide_sidebar_controller.js | 73 +++++++++++++++++++ assets/js/app.js | 1 - assets/js/sidebar.js | 60 --------------- templates/_sidebar.html.twig | 45 ------------ templates/base.html.twig | 9 ++- 5 files changed, 79 insertions(+), 109 deletions(-) create mode 100644 assets/controllers/common/hide_sidebar_controller.js delete mode 100644 assets/js/sidebar.js diff --git a/assets/controllers/common/hide_sidebar_controller.js b/assets/controllers/common/hide_sidebar_controller.js new file mode 100644 index 00000000..dbeb8073 --- /dev/null +++ b/assets/controllers/common/hide_sidebar_controller.js @@ -0,0 +1,73 @@ +import {Controller} from "@hotwired/stimulus"; + +const STORAGE_KEY = 'hide_sidebar'; + +export default class extends Controller { + /** + * The element representing the sidebar which can be hidden. + * @type {HTMLElement} + * @private + */ + _sidebar; + + /** + * The element of the container which is expanded to the full width. + * @type {HTMLElement} + * @private + */ + _container; + + /** + * The button which toggles the sidebar. + * @private + */ + _toggle_button; + + _hidden = false; + + connect() { + this._sidebar = document.getElementById('fixed-sidebar'); + this._container = document.getElementById('main'); + this._toggle_button = this.element; + + //Make the state persistent over reloads + if(localStorage.getItem(STORAGE_KEY) === 'true') { + sidebarHide(); + } + } + + hideSidebar() { + this._sidebar.classList.add('d-none'); + + this._container.classList.remove(...['col-md-9', 'col-lg-10', 'offset-md-3', 'offset-lg-2']); + this._container.classList.add('col-12'); + + //Change button icon + this._toggle_button.innerHTML = ''; + + localStorage.setItem(STORAGE_KEY, 'true'); + this._hidden = true; + } + + showSidebar() { + this._sidebar.classList.remove('d-none'); + + this._container.classList.remove('col-12'); + this._container.classList.add(...['col-md-9', 'col-lg-10', 'offset-md-3', 'offset-lg-2']); + + + //Change button icon + this._toggle_button.innerHTML = ''; + + localStorage.setItem(STORAGE_KEY, 'false'); + this._hidden = false; + } + + toggleSidebar() { + if(this._hidden) { + this.showSidebar(); + } else { + this.hideSidebar(); + } + } +} \ No newline at end of file diff --git a/assets/js/app.js b/assets/js/app.js index 3dc91240..283cde23 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -40,7 +40,6 @@ import '@fortawesome/fontawesome-free/css/all.css' require('bootstrap'); -import "./sidebar" import "./datatables"; import "./error_handler"; import "./tab_remember"; diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js deleted file mode 100644 index 606bdc6b..00000000 --- a/assets/js/sidebar.js +++ /dev/null @@ -1,60 +0,0 @@ -'use strict'; - -import "patternfly-bootstrap-treeview/src/css/bootstrap-treeview.css" -import "patternfly-bootstrap-treeview"; - -class SidebarHelper { - constructor() { - this.BASE = $("body").data("base-url"); - //If path doesn't end with slash, add it. - if(this.BASE[this.BASE.length - 1] !== '/') { - this.BASE = this.BASE + '/'; - } - console.info("Base path is " + this.BASE); - - this.registerSidebarHideButton(); - //this.fillTrees(); - } - - registerSidebarHideButton() - { - let $sidebar = $("#fixed-sidebar"); - let $container = $("#main"); - let $toggler = $('#sidebar-toggle-button'); - - function sidebarHide() { - $sidebar.hide(); - $container.removeClass('col-md-9 col-lg-10 offset-md-3 offset-lg-2'); - $container.addClass('col-12'); - $toggler.html(''); - $toggler.data('hidden', true); - localStorage.setItem('sidebarHidden', 'true'); - } - function sidebarShow() { - let $sidebar = $("#fixed-sidebar"); - $sidebar.show(); - let $container = $("#main"); - $container.removeClass('col-12'); - $container.addClass('col-md-9 col-lg-10 offset-md-3 offset-lg-2'); - $toggler.html(''); - $toggler.data('hidden', false); - localStorage.setItem('sidebarHidden', 'false'); - } - - //Make the state persistent over reloads - if(localStorage.getItem('sidebarHidden') === 'true') { - sidebarHide(); - } - - //Register handler - $toggler.click(function() { - if($(this).data('hidden')) { - sidebarShow(); - } else { - sidebarHide(); - } - }); - } -} - -export default new SidebarHelper(); \ No newline at end of file diff --git a/templates/_sidebar.html.twig b/templates/_sidebar.html.twig index 5aeb1a3c..b95ef13f 100644 --- a/templates/_sidebar.html.twig +++ b/templates/_sidebar.html.twig @@ -6,49 +6,4 @@ {{ tree.treeview_sidebar('sidebar-panel-1', 'categories') }} {{ tree.treeview_sidebar('sidebar-panel-2', 'devices') }} {{ tree.treeview_sidebar('sidebar-panel-3', 'tools') }} - - {#
  • -
    - -
      - {{ _self.sidebar_dropdown('tree-categories') }} -
    - -
    - -
    -
    • -
  • -
    - - -
      - {{ _self.sidebar_dropdown('tree-devices') }} -
    - -
    - -
    -
    • - -
  • -
    - - -
      - {{ _self.sidebar_dropdown('tree-tools') }} -
    - - - -
    - -
    -
    • #} \ No newline at end of file diff --git a/templates/base.html.twig b/templates/base.html.twig index a7ec1300..07638c9d 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -82,9 +82,6 @@
    -
    {# Here will be the real content be injected#} @@ -112,6 +109,12 @@ + {# Must be outside of the sidebar or it will be hidden too #} + + {% endblock %}