improve action-button

olton · Feb 27, 2025 · 03226cb · 03226cb
1 parent f55c8da
commit 03226cb
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 16 deletions.
diff --git a/__html__/action-button.html b/__html__/action-button.html
@@ -18,7 +18,7 @@
 
 <div class="d-flex flex-center h-100">
     <div data-role="action-button">
-        <button class="main-action" onclick="$(this).toggleClass('active')">
+        <button class="main-action">
             <span class="icon"><span class="mif-git"></span></span>
         </button>
         <ul class="actions">

diff --git a/lib/metro.all.js b/lib/metro.all.js
@@ -11543,11 +11543,13 @@
       },
       _createEvents: function() {
         const that = this, element2 = this.element, o2 = this.options;
-        element2.on(Metro2.events.click, ".actions li, .actions button", function() {
+        element2.on(Metro2.events.click, ".actions li, .actions button", function(e) {
           that._fireEvent("action-click", { action: this });
         });
-        element2.on(Metro2.events.click, ".action-button", function() {
-          that._fireEvent("click");
+        element2.on(Metro2.events.click, ".main-action", function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          $3(this).toggleClass("active");
         });
       },
       changeAttribute: function(attr, newValue) {
@@ -11556,6 +11558,11 @@
         this.element.remove();
       }
     });
+    $3(document).on("click", function(e) {
+      $3("[data-role-actionbutton]").each((i3, el) => {
+        $3(el).children("button").removeClass("active");
+      });
+    });
   })(Metro, Dom);
 
   // source/components/dialog/dialog.js

diff --git a/lib/metro.all.js.map b/lib/metro.all.js.map
diff --git a/lib/metro.js b/lib/metro.js
@@ -11543,11 +11543,13 @@
       },
       _createEvents: function() {
         const that = this, element2 = this.element, o2 = this.options;
-        element2.on(Metro2.events.click, ".actions li, .actions button", function() {
+        element2.on(Metro2.events.click, ".actions li, .actions button", function(e) {
           that._fireEvent("action-click", { action: this });
         });
-        element2.on(Metro2.events.click, ".action-button", function() {
-          that._fireEvent("click");
+        element2.on(Metro2.events.click, ".main-action", function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          $3(this).toggleClass("active");
         });
       },
       changeAttribute: function(attr, newValue) {
@@ -11556,6 +11558,11 @@
         this.element.remove();
       }
     });
+    $3(document).on("click", function(e) {
+      $3("[data-role-actionbutton]").each((i3, el) => {
+        $3(el).children("button").removeClass("active");
+      });
+    });
   })(Metro, Dom);
 
   // source/components/dialog/dialog.js

diff --git a/lib/metro.js.map b/lib/metro.js.map
diff --git a/source/components/action-button/action-button.js b/source/components/action-button/action-button.js
@@ -49,12 +49,14 @@
 
         _createEvents: function(){
             const that = this, element = this.element, o = this.options;
-            element.on(Metro.events.click, ".actions li, .actions button", function(){
+            element.on(Metro.events.click, ".actions li, .actions button", function(e){
                 that._fireEvent("action-click", {action: this});
             })
 
-            element.on(Metro.events.click, ".action-button", function(){
-                that._fireEvent("click");
+            element.on(Metro.events.click, ".main-action", function(e){
+                e.preventDefault();
+                e.stopPropagation();
+                $(this).toggleClass("active");
             });
         },
 
@@ -65,4 +67,10 @@
             this.element.remove();
         }
     });
+
+    $(document).on("click", function(e) {
+        $("[data-role-actionbutton]").each((i, el) => {
+            $(el).children("button").removeClass("active");
+        })
+    });
 }(Metro, Dom));