inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-07-03 04:00:57 +00:00
Code Activity

Complete refactoring of part sidebar

Browse Source
This commit is contained in:
Oliver
2021-10-29 00:20:39 +11:00
parent f542bdc19f
commit f0fe7f2d5c
9 changed files with 213 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
InvenTree/templates/js/dynamic/nav.js
View File

@ -2,8 +2,7 @@
*/
/* exported
attachNavCallbacks,
enableNavbar,
enableSidebar,
initNavTree,
loadTree,
onPanelLoad,
@ -19,7 +18,7 @@
* The 'id' of the .nav-toggle element should be of the form "select-<x>",
* and point to a matching "panel-<x>"
*/
function attachNavCallbacks(options={}) {
function attachNavCallbacksX(options={}) {
$('.nav-toggle').click(function() {
var el = $(this);
@ -44,18 +43,18 @@ function attachNavCallbacks(options={}) {
}
}
function activatePanel(panelName, options={}) {
var panelClass = options.name || 'unknown';
/*
* Activate (display) the selected panel
*/
function activatePanel(label, panel_name, options={}) {
// First, cause any other panels to "fade out"
$('.panel-visible').hide();
$('.panel-visible').removeClass('panel-visible');
// Find the target panel
var panel = `#panel-${panelName}`;
var select = `#select-${panelName}`;
var panel = `#panel-${panel_name}`;
var select = `#select-${panel_name}`;
// Check that the selected panel (and select) exist
if ($(panel).length && $(select).length) {
@ -63,22 +62,22 @@ function activatePanel(panelName, options={}) {
} else {
// Either the select or the panel are not displayed!
// Iterate through the available 'select' elements until one matches
panelName = null;
panel_name = null;
$('.nav-toggle').each(function() {
var panel_name = $(this).attr('id').replace('select-', '');
$('.sidebar-selector').each(function() {
var name = $(this).attr('id').replace('select-', '');
if ($(`#panel-${panel_name}`).length && (panelName == null)) {
panelName = panel_name;
if ($(`#panel-${name}`).length && (panel_name == null)) {
panel_name = name;
}
panel = `#panel-${panelName}`;
select = `#select-${panelName}`;
panel = `#panel-${panel_name}`;
select = `#select-${panel_name}`;
});
}
// Save the selected panel
localStorage.setItem(`inventree-selected-panel-${panelClass}`, panelName);
localStorage.setItem(`inventree-selected-panel-${label}`, panel_name);
// Display the panel
$(panel).addClass('panel-visible');
@ -93,9 +92,9 @@ function activatePanel(panelName, options={}) {
$('.list-group-item').removeClass('active');
// Find the associated selector
var selectElement = `#select-${panelName}`;
var selector = `#select-${panel_name}`;
$(selectElement).parent('.list-group-item').addClass('active');
$(selector).addClass('active');
}
@ -271,10 +270,90 @@ function initNavTree(options) {
}
/**
* Enable support for sidebar on this page
*/
function enableSidebar(label, options) {
// Enable callbacks for sidebar buttons
$('.sidebar-selector').click(function() {
var el = $(this);
// Find the matching panel element to display
var panel_name = el.attr('id').replace('select-', '');
activatePanel(label, panel_name, options);
});
/* Look for a "default" panel to initialize for this page
*
* - First preference = URL parameter e.g. ?display=part-stock
* - Second preference = local storage
* - Third preference = default
*/
var selected_panel = $.urlParam('display') || localStorage.getItem(`inventree-selected-panel-${label}`) || options.default;
if (selected_panel) {
activatePanel(label, selected_panel);
} else {
// Find the "first" available panel (according to the sidebar)
var selector = $('.sidebar-selector').first();
var panel_name = selector.attr('id').replace('select-', '');
activatePanel(label, panel_name);
}
// Add callback to "collapse" and "expand" the sidebar
$('#sidebar-toggle').click(function() {
// By default, the menu is "expanded"
var state = localStorage.getItem(`inventree-menu-state-${label}`) || 'expanded';
// We wish to "toggle" the state!
setSidebarState(label, state == "expanded" ? "collapsed" : "expanded");
});
// Set the initial state (default = expanded)
var state = localStorage.getItem(`inventree-menu-state-${label}`) || 'expanded';
setSidebarState(label, state);
// Finally, show the sidebar
$('#sidebar').show();
}
/*
* Set the "toggle" state of the sidebar
*/
function setSidebarState(label, state) {
if (state == "collapsed") {
$('.sidebar-item-text').animate({
opacity: 0.0,
}, 100, function() {
$('.sidebar-item-text').hide();
$('#sidebar-toggle-icon').removeClass('fa-chevron-left').addClass('fa-chevron-right');
});
} else {
$('.sidebar-item-text').show();
$('#sidebar-toggle-icon').removeClass('fa-chevron-right').addClass('fa-chevron-left');
$('.sidebar-item-text').animate({
opacity: 1.0,
}, 100);
}
// Save the state of this sidebar
localStorage.setItem(`inventree-menu-state-${label}`, state);
}
/**
* Handle left-hand icon menubar display
*/
function enableNavbar(options) {
function enableNavbarX(options) {
var resize = true;