mirror of
https://github.com/Part-DB/Part-DB-server.git
synced 2025-06-29 05:00:08 +02:00
Implement sidebar collapse with stimulus.
This commit is contained in:
Jan Böhmer
parent
ab179a8b71
commit
565cb3a790
5 changed files with 79 additions and 109 deletions
73
assets/controllers/common/hide_sidebar_controller.js
Normal file
73
assets/controllers/common/hide_sidebar_controller.js
Normal file
|
|
@ -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 = '<i class="fas fa-angle-right"></i>';
|
||||||
|
|
||||||
|
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 = '<i class="fas fa-angle-left"></i>';
|
||||||
|
|
||||||
|
localStorage.setItem(STORAGE_KEY, 'false');
|
||||||
|
this._hidden = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleSidebar() {
|
||||||
|
if(this._hidden) {
|
||||||
|
this.showSidebar();
|
||||||
|
} else {
|
||||||
|
this.hideSidebar();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -40,7 +40,6 @@ import '@fortawesome/fontawesome-free/css/all.css'
|
||||||
|
|
||||||
require('bootstrap');
|
require('bootstrap');
|
||||||
|
|
||||||
import "./sidebar"
|
|
||||||
import "./datatables";
|
import "./datatables";
|
||||||
import "./error_handler";
|
import "./error_handler";
|
||||||
import "./tab_remember";
|
import "./tab_remember";
|
||||||
|
|
|
||||||
|
|
@ -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('<i class="fas fa-angle-right"></i>');
|
|
||||||
$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('<i class="fas fa-angle-left"></i>');
|
|
||||||
$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();
|
|
||||||
|
|
@ -6,49 +6,4 @@
|
||||||
{{ tree.treeview_sidebar('sidebar-panel-1', 'categories') }}
|
{{ tree.treeview_sidebar('sidebar-panel-1', 'categories') }}
|
||||||
{{ tree.treeview_sidebar('sidebar-panel-2', 'devices') }}
|
{{ tree.treeview_sidebar('sidebar-panel-2', 'devices') }}
|
||||||
{{ tree.treeview_sidebar('sidebar-panel-3', 'tools') }}
|
{{ tree.treeview_sidebar('sidebar-panel-3', 'tools') }}
|
||||||
|
|
||||||
{# <li id="treeBox-categories">
|
|
||||||
<div class="input-group input-group-sm mb-2 mt-1">
|
|
||||||
<button class="btn btn-light dropdown-toggle" type="button"
|
|
||||||
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
|
|
||||||
><span class="sidebar-title" id="tree-categories-title">{% trans %}category.labelp{% endtrans %}</span></button>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdownCat">
|
|
||||||
{{ _self.sidebar_dropdown('tree-categories') }}
|
|
||||||
</ul>
|
|
||||||
<input type="search" class="form-control bg-light border-0" id="tree-category-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="tree-categories" data-tree-search="#tree-category-search"></div>
|
|
||||||
</li>
|
|
||||||
<li id="treeBox-devices" class="d-sm-none d-md-block">
|
|
||||||
<div class="input-group input-group-sm mb-2 mt-2">
|
|
||||||
<button class="btn btn-light dropdown-toggle" type="button"
|
|
||||||
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
|
|
||||||
><span class="sidebar-title" id="tree-devices-title">{% trans %}device.labelp{% endtrans %}</span></button>
|
|
||||||
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdownDev">
|
|
||||||
{{ _self.sidebar_dropdown('tree-devices') }}
|
|
||||||
</ul>
|
|
||||||
<input type="search" class="form-control bg-light border-0" id="tree-devices-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="tree-devices" data-tree-search="#tree-devices-search"></div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li id="treeBox-tools">
|
|
||||||
<div class="input-group input-group-sm mb-2 mt-2">
|
|
||||||
<button class="btn btn-light dropdown-toggle" type="button"
|
|
||||||
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
|
|
||||||
><span class="sidebar-title" id="tree-tools-title">{% trans %}tools.label{% endtrans %}</span></button>
|
|
||||||
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="dropdownTools">
|
|
||||||
{{ _self.sidebar_dropdown('tree-tools') }}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<input type="search" class="form-control bg-light border-0" id="tree-tools-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="tree-tools" data-tree-search="#tree-tools-search"></div>
|
|
||||||
</li> #}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -82,9 +82,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-9 col-lg-10 offset-md-3 offset-lg-2 ps-0" id="main">
|
<div class="col-md-9 col-lg-10 offset-md-3 offset-lg-2 ps-0" id="main">
|
||||||
<button class="btn btn-outline-dark btn-sm p-0" type="button" id="sidebar-toggle-button" title="{% trans %}sidebar.big.toggle{% endtrans %}">
|
|
||||||
<i class="fas fa-angle-left"></i>
|
|
||||||
</button>
|
|
||||||
<div class="container-fluid me-0 pe-0" id="content-container">
|
<div class="container-fluid me-0 pe-0" id="content-container">
|
||||||
<turbo-frame id="content" data-turbo-action="advance">
|
<turbo-frame id="content" data-turbo-action="advance">
|
||||||
{# Here will be the real content be injected#}
|
{# Here will be the real content be injected#}
|
||||||
|
|
@ -112,6 +109,12 @@
|
||||||
<i class="fas fa-angle-up fa-fw"></i>
|
<i class="fas fa-angle-up fa-fw"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{# Must be outside of the sidebar or it will be hidden too #}
|
||||||
|
<button class="btn btn-outline-dark btn-sm p-0" type="button" id="sidebar-toggle-button" title="{% trans %}sidebar.big.toggle{% endtrans %}"
|
||||||
|
{{ stimulus_controller('common/hide_sidebar') }} {{ stimulus_action('common/hide_sidebar', 'toggleSidebar') }}>
|
||||||
|
<i class="fas fa-angle-left"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue