add button hover actions

GTFB · Oct 8, 2022 · 807b8b0 · 807b8b0
1 parent 5f92876
commit 807b8b0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/resources/modules/editor/src/js/classes/elements/Button.js b/resources/modules/editor/src/js/classes/elements/Button.js
@@ -176,6 +176,8 @@ class Button extends BaseElement {
 
     actionsControllers(this);
 
+    actionsControllers(this, 'Hover Actions', 'hover_');
+
     //</editor-fold>
 
     this.startControlSection('position_section', {

diff --git a/resources/modules/editor/src/js/components/widgets/ButtonWidget.js b/resources/modules/editor/src/js/components/widgets/ButtonWidget.js
@@ -152,6 +152,27 @@ class ButtonWidget extends Component {
     actionsManager.unregisterWidgetActions(this.props.element.getId());
   }
 
+  onMouseEnter = async (e) => {
+    e.persist();
+    if (isEditor()) {
+      e.preventDefault();
+    } else if (this.props.element.getResponsiveLockedSetting("hover_actions", null, []).length) {
+      e.preventDefault();
+      e.stopPropagation();
+      const actionsManager = (
+        await import(/* webpackChunkName: 'ActionsManager' */
+          "../../../../../front-app/src/js/classes/modules/ActionsManager.js"
+        )
+      ).default;
+      await actionsManager.callAllWidgetActions(
+        this.props.element.getIdForAction(),
+        'click',
+        this.props.element.getLockedSettings("hover_actions", []),
+        this.props.element
+      );
+    }
+  }
+
   /**
    * Клик по кнопке
    * @param e
@@ -604,6 +625,7 @@ class ButtonWidget extends Component {
 
     let button = <button
       onClick={this.onClick}
+      onMouseEnter={this.onMouseEnter}
       className={classes}
       id={this.state.settings.position_css_id}
       title={tooltip || null}
@@ -662,6 +684,7 @@ class ButtonWidget extends Component {
           <a
             href={url}
             onClick={this.onClick}
+            onMouseEnter={this.onMouseEnter}
             className={classes}
             target={target}
             title={tooltip || null}
@@ -672,7 +695,7 @@ class ButtonWidget extends Component {
         );
       } else {
         link = (
-          <Link to={url} href={url} onClick={this.onClick} target={target} className={classes} title={tooltip || null}>
+          <Link to={url} href={url} onClick={this.onClick} onMouseEnter={this.onMouseEnter} target={target} className={classes} title={tooltip || null}>
             {" "}
             {buttonInner}
           </Link>