From 82e4433ec1f23c19aacf42f0709ec4edcedab6a6 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Wed, 5 Jun 2024 23:59:49 +0300 Subject: [PATCH 1/3] Changed the flip panel control "data-flip-control-object" (skin.js) Do not "slideToggle" for a button that has the 'data-on-click-true' attribute. This means that control occurs in the function specified in the 'data-on-click-true' attribute. --- web/skins/classic/js/skin.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js index 149e3ed67..bdbb79616 100644 --- a/web/skins/classic/js/skin.js +++ b/web/skins/classic/js/skin.js @@ -339,13 +339,15 @@ if ( currentView != 'none' && currentView != 'login' ) { if (typeof safeFunc[nameFunc] === 'function') safeFunc[nameFunc](); }); } - obj.slideToggle("fast", function() { - if (nameFuncAfterComplet) { - $j.each(nameFuncAfterComplet.split(' '), function(i, nameFunc) { - if (typeof safeFunc[nameFunc] === 'function') safeFunc[nameFunc](); - }); - } - }); + if (!_this_.attr('data-on-click-true')) { + obj.slideToggle("fast", function() { + if (nameFuncAfterComplet) { + $j.each(nameFuncAfterComplet.split(' '), function(i, nameFunc) { + if (typeof safeFunc[nameFunc] === 'function') safeFunc[nameFunc](); + }); + } + }); + } if (nameFuncAfter) { $j.each(nameFuncAfter.split(' '), function(i, nameFunc) { if (typeof safeFunc[nameFunc] === 'function') safeFunc[nameFunc](); From 730c3b5161d2eea4fb437eec190d971379f29505 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Fri, 14 Jun 2024 19:29:17 +0300 Subject: [PATCH 2/3] 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. --- web/skins/classic/js/skin.js | 69 ++++++++++++++++++++++-------------- 1 file changed, 42 insertions(+), 27 deletions(-) diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js index c08bc43a3..6d04fe62d 100644 --- a/web/skins/classic/js/skin.js +++ b/web/skins/classic/js/skin.js @@ -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,20 +352,24 @@ if ( currentView != 'none' && currentView != 'login' ) { obj.wrap('
'); } - 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 + 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.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'); } - obj.removeClass('hidden-shift'); } }); @@ -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); From b1a35c339eca46cff93bab8b19b5f944ecca0d59 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Fri, 14 Jun 2024 19:35:45 +0300 Subject: [PATCH 3/3] Chore: Fix extra space & lost semicolon (skin.js) --- web/skins/classic/js/skin.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js index 6d04fe62d..f62a0b9d9 100644 --- a/web/skins/classic/js/skin.js +++ b/web/skins/classic/js/skin.js @@ -344,7 +344,7 @@ if ( currentView != 'none' && currentView != 'login' ) { $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 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')); @@ -354,7 +354,7 @@ if ( currentView != 'none' && currentView != 'login' ) { // 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 (objIconButton.is('[class~="material-icons"]')) { // use material-icons if (stateIcon == 'hidden') { objIconButton.html(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! @@ -362,10 +362,10 @@ if ( currentView != 'none' && currentView != 'login' ) { objIconButton.html(objIconButton.attr('data-icon-visible')); obj.removeClass('hidden-shift'); } - } else if (objIconButton.is('[class*="fa-"]')) { //use Font Awesome + } 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! + 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');