ZoneMinder
/
zoneminder
mirror of https://github.com/ZoneMinder/zoneminder.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Changing the icon control for the hide/show panel button (skin.js) 

+ Part of the code for controlling the icon of the button to hide/show the panel has been moved to the "changeButtonIcon" function
+ Added support for the "data-initial-state-icon" attribute to make it possible not to use cookies when initially opening a page.
pull/4068/head
IgorA100 2024-06-14 19:29:17 +03:00 committed by GitHub
parent 576dc6a652
commit 730c3b5161
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 42 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
web/skins/classic/js/skin.js
View File

@ -313,22 +313,7 @@ if ( currentView != 'none' && currentView != 'login' ) {
const objIconButton = _this_.find("i");
const obj = $j(_this_.attr('data-flip-сontrol-object'));
if ( obj.is(":visible") && !obj.hasClass("hidden-shift")) {
if (objIconButton.is('[class~="material-icons"]')) { // use material-icons
objIconButton.html(objIconButton.attr('data-icon-hidden'));
} else if (objIconButton.is('[class*="fa-"]')) { //use Font Awesome
objIconButton.removeClass(objIconButton.attr('data-icon-visible')).addClass(objIconButton.attr('data-icon-hidden'));
}
setCookie('zmFilterBarFlip'+_this_.attr('data-flip-сontrol-object'), 'hidden');
} else { //hidden
obj.removeClass('hidden-shift').addClass('hidden'); //It is necessary to make the block invisible both for JS and for humans
if (objIconButton.is('[class~="material-icons"]')) { // use material-icons
objIconButton.html(objIconButton.attr('data-icon-visible'));
} else if (objIconButton.is('[class*="fa-"]')) { //use Font Awesome
objIconButton.removeClass(objIconButton.attr('data-icon-hidden')).addClass(objIconButton.attr('data-icon-visible'));
}
setCookie('zmFilterBarFlip'+_this_.attr('data-flip-сontrol-object'), 'visible');
}
changeButtonIcon(_this_, objIconButton);
const nameFuncBefore = _this_.attr('data-flip-сontrol-run-before-func') ? _this_.attr('data-flip-сontrol-run-before-func') : null;
const nameFuncAfter = _this_.attr('data-flip-сontrol-run-after-func') ? _this_.attr('data-flip-сontrol-run-after-func') : null;
@ -356,9 +341,10 @@ if ( currentView != 'none' && currentView != 'login' ) {
});
// Manage visible filter bar & control button (after document ready)
$j("[data-flip-сontrol-object]").each(function() { //let's go through all objects and set icons
$j("[data-flip-сontrol-object]").each(function() { //let's go through all objects (buttons) and set icons
const _this_ = $j(this);
const сookie = getCookie('zmFilterBarFlip'+_this_.attr('data-flip-сontrol-object'));
const initialStateIcon = _this_.attr('data-initial-state-icon') //"visible"=Opened block , "hidden"=Closed block or "undefined"=use cookie
const objIconButton = _this_.find("i");
const obj = $j(_this_.attr('data-flip-сontrol-object'));
@ -366,21 +352,25 @@ if ( currentView != 'none' && currentView != 'login' ) {
obj.wrap('<div style="display: block"></div>');
}
if (сookie == 'hidden') {
// initialStateIcon takes priority. If there is no cookie, we assume that it is 'visible'
const stateIcon = (initialStateIcon) ? initialStateIcon : ((сookie == 'hidden') ? 'hidden' : 'visible');
if (objIconButton.is('[class~="material-icons"]')) { // use material-icons
if (stateIcon == 'hidden') {
objIconButton.html(objIconButton.attr('data-icon-hidden'));
} else if (objIconButton.is('[class*="fa-"]')) { //use Font Awesome
objIconButton.addClass(objIconButton.attr('data-icon-hidden'));
}
obj.addClass('hidden-shift'); //To prevent jerking when running the "Chosen" script, it is necessary to make the block visible to JS, but invisible to humans!
} else { //no cookies or opened.
if (objIconButton.is('[class~="material-icons"]')) { // use material-icons
} else {
objIconButton.html(objIconButton.attr('data-icon-visible'));
} else if (objIconButton.is('[class*="fa-"]')) { //use Font Awesome
objIconButton.addClass(objIconButton.attr('data-icon-visible'));
}
obj.removeClass('hidden-shift');
}
} else if (objIconButton.is('[class*="fa-"]')) { //use Font Awesome
if (stateIcon == 'hidden') {
objIconButton.addClass(objIconButton.attr('data-icon-hidden'));
obj.addClass('hidden-shift'); //To prevent jerking when running the "Chosen" script, it is necessary to make the block visible to JS, but invisible to humans!
} else {
objIconButton.addClass(objIconButton.attr('data-icon-visible'));
obj.removeClass('hidden-shift');
}
}
});
// Manage the web console filter bar minimize chevron
@ -419,6 +409,31 @@ if ( currentView != 'none' && currentView != 'login' ) {
applyChosen();
});
/*
* params{visibility: null "visible" or "hidden"} - state of the panel before pressing button
*/
function changeButtonIcon(pressedBtn, target, params) {
const visibility = (!params) ? null : params.visibility;
const objIconButton = pressedBtn.find("i");
const obj = $j(pressedBtn.attr('data-flip-сontrol-object'));
if ((visibility == "visible") || (obj.is(":visible") && !obj.hasClass("hidden-shift"))) {
if (objIconButton.is('[class~="material-icons"]')) { // use material-icons
objIconButton.html(objIconButton.attr('data-icon-hidden'));
} else if (objIconButton.is('[class*="fa-"]')) { //use Font Awesome
objIconButton.removeClass(objIconButton.attr('data-icon-visible')).addClass(objIconButton.attr('data-icon-hidden'));
}
setCookie('zmFilterBarFlip'+pressedBtn.attr('data-flip-сontrol-object'), 'hidden');
} else { //hidden
obj.removeClass('hidden-shift').addClass('hidden'); //It is necessary to make the block invisible both for JS and for humans
if (objIconButton.is('[class~="material-icons"]')) { // use material-icons
objIconButton.html(objIconButton.attr('data-icon-visible'));
} else if (objIconButton.is('[class*="fa-"]')) { //use Font Awesome
objIconButton.removeClass(objIconButton.attr('data-icon-hidden')).addClass(objIconButton.attr('data-icon-visible'));
}
setCookie('zmFilterBarFlip'+pressedBtn.attr('data-flip-сontrol-object'), 'visible');
}
}
// After retieving modal html via Ajax, this will insert it into the DOM
function insertModalHtml(name, html) {
let modal = $j('#' + name);