From 4c4e4f14ffcddf24149e5028d541a78714cfa0b6 Mon Sep 17 00:00:00 2001
From: Pedro Silva <p.silva@inpsyde.com>
Date: Thu, 7 Sep 2023 16:56:10 +0100
Subject: [PATCH] Add hide/show/enable/disable triggers to button helpers

---
 .../js/modules/Helper/ButtonDisabler.js       | 29 +++++++++++++++++--
 .../resources/js/modules/Helper/Hiding.js     | 24 +++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js b/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js
index ae7f3665c..b05a4dc70 100644
--- a/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js
+++ b/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js
@@ -9,6 +9,24 @@ const getElement = (selectorOrElement) => {
     return selectorOrElement;
 }
 
+const triggerEnabled = (selectorOrElement, element) => {
+    jQuery(document).trigger('ppcp-enabled', {
+        'handler': 'ButtonsDisabler.setEnabled',
+        'action': 'enable',
+        'selector': selectorOrElement,
+        'element': element
+    });
+}
+
+const triggerDisabled = (selectorOrElement, element) => {
+    jQuery(document).trigger('ppcp-disabled', {
+        'handler': 'ButtonsDisabler.setEnabled',
+        'action': 'disable',
+        'selector': selectorOrElement,
+        'element': element
+    });
+}
+
 export const setEnabled = (selectorOrElement, enable, form = null) => {
     const element = getElement(selectorOrElement);
 
@@ -17,7 +35,8 @@ export const setEnabled = (selectorOrElement, enable, form = null) => {
     }
 
     if (enable) {
-        jQuery(element).css({
+        jQuery(element).removeClass('ppcp-disabled')
+            .css({
                 'cursor': '',
                 '-webkit-filter': '',
                 'filter': '',
@@ -25,8 +44,12 @@ export const setEnabled = (selectorOrElement, enable, form = null) => {
             .off('mouseup')
             .find('> *')
             .css('pointer-events', '');
+
+        triggerEnabled(selectorOrElement, element);
+
     } else {
-        jQuery(element).css({
+        jQuery(element).addClass('ppcp-disabled')
+            .css({
                 'cursor': 'not-allowed',
                 '-webkit-filter': 'grayscale(100%)',
                 'filter': 'grayscale(100%)',
@@ -44,6 +67,8 @@ export const setEnabled = (selectorOrElement, enable, form = null) => {
             })
             .find('> *')
             .css('pointer-events', 'none');
+
+        triggerDisabled(selectorOrElement, element);
     }
 };
 
diff --git a/modules/ppcp-button/resources/js/modules/Helper/Hiding.js b/modules/ppcp-button/resources/js/modules/Helper/Hiding.js
index 96836de0c..9ffd5a031 100644
--- a/modules/ppcp-button/resources/js/modules/Helper/Hiding.js
+++ b/modules/ppcp-button/resources/js/modules/Helper/Hiding.js
@@ -9,6 +9,24 @@ const getElement = (selectorOrElement) => {
     return selectorOrElement;
 }
 
+const triggerHidden = (handler, selectorOrElement, element) => {
+    jQuery(document).trigger('ppcp-hidden', {
+        'handler': handler,
+        'action': 'hide',
+        'selector': selectorOrElement,
+        'element': element
+    });
+}
+
+const triggerShown = (handler, selectorOrElement, element) => {
+    jQuery(document).trigger('ppcp-shown', {
+        'handler': handler,
+        'action': 'show',
+        'selector': selectorOrElement,
+        'element': element
+    });
+}
+
 export const isVisible = (element) => {
     return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
 }
@@ -27,14 +45,18 @@ export const setVisible = (selectorOrElement, show, important = false) => {
         }
 
         element.style.setProperty('display', 'none', important ? 'important' : '');
+        triggerHidden('Hiding.setVisible', selectorOrElement, element);
+
     } else {
         if (currentValue === 'none') {
             element.style.removeProperty('display');
+            triggerShown('Hiding.setVisible', selectorOrElement, element);
         }
 
         // still not visible (if something else added display: none in CSS)
         if (!isVisible(element)) {
             element.style.setProperty('display', 'block');
+            triggerShown('Hiding.setVisible', selectorOrElement, element);
         }
     }
 };
@@ -47,8 +69,10 @@ export const setVisibleByClass = (selectorOrElement, show, hiddenClass) => {
 
     if (show) {
         element.classList.remove(hiddenClass);
+        triggerShown('Hiding.setVisibleByClass', selectorOrElement, element);
     } else {
         element.classList.add(hiddenClass);
+        triggerHidden('Hiding.setVisibleByClass', selectorOrElement, element);
     }
 };