fix button group

olton · Mar 13, 2018 · 447ba52 · 447ba52
1 parent 4fa977f
commit 447ba52
Show file tree

Hide file tree

Showing 23 changed files with 147 additions and 71 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+### 4.0.7
++ [x] Button group: fix it
+
 ### 4.0.6
 + [x] Dialog: fix method `Metro.dialog.toggle()`
 + [x] Notify: increase `z-index` for default container

diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ It's an independent project with its ongoing development made possible entirely
 <br>
 <hr>
 
-## Current Version 4.0.6
+## Current Version 4.0.7
 
 ### Status
 [![Build Status](https://travis-ci.org/olton/Metro-UI-CSS.svg?branch=master)](https://travis-ci.org/olton/Metro-UI-CSS)

diff --git a/build/css/maps/metro.css.map b/build/css/maps/metro.css.map
diff --git a/build/css/metro-all.css b/build/css/metro-all.css
@@ -16405,6 +16405,10 @@ a.split-button a.split {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+.button-group .active {
+  background-color: #989898;
+  color: #ffffff;
+}
 .expand-button {
   width: 2.5rem;
   height: 2.5rem;

diff --git a/build/css/metro-all.min.css b/build/css/metro-all.min.css
diff --git a/build/css/metro.css b/build/css/metro.css
@@ -16405,6 +16405,10 @@ a.split-button a.split {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+.button-group .active {
+  background-color: #989898;
+  color: #ffffff;
+}
 .expand-button {
   width: 2.5rem;
   height: 2.5rem;

diff --git a/build/css/metro.min.css b/build/css/metro.min.css
diff --git a/build/js/metro.js b/build/js/metro.js
@@ -1,5 +1,5 @@
 /*!
- * Metro 4 Components Library v4.0.6 build @@build-beta (https://metroui.org.ua)
+ * Metro 4 Components Library v4.0.7 build 618-beta (https://metroui.org.ua)
  * Copyright 2018 Sergey Pimenov
  * Licensed under MIT
  */
@@ -71,7 +71,7 @@ var isTouch = (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (
 
 var Metro = {
 
-    version: "@@version-@@build@@status",
+    version: "4.0.7-618-beta",
     isTouchable: isTouch,
     fullScreenEnabled: document.fullscreenEnabled,
     sheet: null,
@@ -4311,8 +4311,8 @@ var Audio = {
 };
 
 Metro.plugin('audio', Audio);
-// Source: js/plugins/buttons-group.js
-var ButtonsGroup = {
+// Source: js/plugins/button-group.js
+var ButtonGroup = {
     init: function( options, elem ) {
         this.options = $.extend( {}, this.options, options );
         this.elem  = elem;
@@ -4327,7 +4327,7 @@ var ButtonsGroup = {
 
     options: {
         targets: "button",
-        clsActive: "bg-gray",
+        clsActive: "active",
         mode: Metro.groupMode.ONE,
         onButtonClick: Metro.noop,
         onButtonsGroupCreate: Metro.noop
@@ -4358,10 +4358,27 @@ var ButtonsGroup = {
 
     _createGroup: function(){
         var that = this, element = this.element, o = this.options;
+        var cls, buttons, buttons_active, id = Utils.elementId("button-group");
 
-        if (o.mode === Metro.groupMode.ONE && element.find(o.clsActive).length === 0) {
-            $(element.find(o.targets)[0]).addClass(o.clsActive);
+        if (element.attr("id") === undefined) {
+            element.attr("id", id);
         }
+
+        element.addClass("button-group");
+
+        buttons = element.find( o.targets );
+        buttons_active = element.find( "." + o.clsActive );
+
+        if (o.mode === Metro.groupMode.ONE && buttons_active.length === 0) {
+            $(buttons[0]).addClass(o.clsActive);
+        }
+
+        if (o.mode === Metro.groupMode.ONE && buttons_active.length > 1) {
+            buttons.removeClass(o.clsActive);
+            $(buttons[0]).addClass(o.clsActive);
+        }
+
+        element.find( "." + o.clsActive ).addClass("js-active");
     },
 
     _createEvents: function(){
@@ -4370,17 +4387,17 @@ var ButtonsGroup = {
         element.on(Metro.events.click, o.targets, function(){
             var el = $(this);
 
-            Utils.exec(o.onButtonClick, [el]);
+            Utils.exec(o.onButtonClick, [el], this);
 
             if (o.mode === Metro.groupMode.ONE && el.hasClass(o.clsActive)) {
                 return ;
             }
 
             if (o.mode === Metro.groupMode.ONE) {
-                element.find(o.targets).removeClass(o.clsActive);
-                el.addClass(o.clsActive);
+                element.find(o.targets).removeClass(o.clsActive).removeClass("js-active");
+                el.addClass(o.clsActive).addClass("js-active");
             } else {
-                el.toggleClass(o.clsActive);
+                el.toggleClass(o.clsActive).toggleClass("js-active");
             }
 
         });
@@ -4393,12 +4410,12 @@ var ButtonsGroup = {
     destroy: function(){
         var element = this.element, o = this.options;
         element.off(Metro.events.click, o.targets);
-        element.find(o.targets).removeClass(o.clsActive);
+        element.find(o.targets).removeClass(o.clsActive).removeClass("js-active");
     }
 
 };
 
-Metro.plugin('buttonsGroup', ButtonsGroup);
+Metro.plugin('buttongroup', ButtonGroup);
 // Source: js/plugins/calendar.js
 var Calendar = {
     init: function( options, elem ) {

diff --git a/build/js/metro.min.js b/build/js/metro.min.js
diff --git a/build/js/metro.min.js.map b/build/js/metro.min.js.map
diff --git a/docs/buttons.html b/docs/buttons.html
@@ -1006,61 +1006,60 @@ <h3 id="_breadcrumbs">Breadcrumbs</h3>
                     &lt;/ul&gt;
                 </code></pre>
 
-                <h3 id="_buttons_group">Buttons group</h3>
+                <h3 id="_buttons_group">Button group</h3>
                 <p>
-                    If you need to create buttons group, you can use role <code>buttonsGroup</code>.
-                    To create group add attribute <code>data-role="buttonsGroup"</code> to buttons container.
+                    To create group add attribute <code>data-role="buttongroup"</code> to buttons container.
                     To setup mode of toggle, use attribute <code>data-mode="..."</code> with one of values: <code>one</code> (default) or <code>multi</code>.
-                    Also you can set own classes to style active state with attribute <code>data-cla-active="..."</code>. The default value for this attribute <code>.bg-gray</code>.
+                    Also you can set own classes to style active state with attribute <code>data-cls-active="..."</code>. The default value for this attribute <code>active</code>.
                 </p>
 
                 <div class="example">
                     <div class="row">
                         <div class="cell-md-4">
                             <h6>Default (one state)</h6>
-                            <div data-role="buttonsGroup">
+                            <div data-role="buttongroup">
                                 <button class="button">1</button>
                                 <button class="button">2</button>
-                                <button class="button">3</button>
+                                <button class="button active">3</button>
                             </div>
                         </div>
                         <div class="cell-md-4">
                             <h6>Multi state</h6>
-                            <div data-role="buttonsGroup" data-mode="multi" data-cls-active="bg-red fg-white">
+                            <div data-role="buttongroup" data-mode="multi" data-cls-active="bg-red fg-white">
                                 <button class="button">1</button>
                                 <button class="button">2</button>
                                 <button class="button">3</button>
                             </div>
                         </div>
                         <div class="cell-md-4">
                             <h6>Toolbar example</h6>
-                            <div class="toolbar" data-role="buttonsGroup" data-mode="multi">
+                            <div class="toolbar" data-role="buttongroup" data-mode="multi">
                                 <button class="tool-button rounded"><span class="mif-bold"></span></button>
                                 <button class="tool-button rounded"><span class="mif-italic"></span></button>
                                 <button class="tool-button rounded"><span class="mif-underline"></span></button>
                             </div>
-                            <div class="toolbar" data-role="buttonsGroup">
+                            <div class="toolbar" data-role="buttongroup">
                                 <button class="tool-button rounded"><span class="mif-sort-asc"></span></button>
                                 <button class="tool-button rounded"><span class="mif-sort-desc"></span></button>
                             </div>
                         </div>
                     </div>
                 </div>
                 <pre><code class="html">
-                    &lt;div data-role="buttonsGroup"&gt;
+                    &lt;div data-role="buttongroup"&gt;
                         &lt;button class="button"&gt;1&lt;/button&gt;
                         &lt;button class="button"&gt;2&lt;/button&gt;
-                        &lt;button class="button"&gt;3&lt;/button&gt;
+                        &lt;button class="button active"&gt;3&lt;/button&gt;
                     &lt;/div&gt;
 
-                    &lt;div data-role="buttonsGroup" data-mode="multi"
+                    &lt;div data-role="buttongroup" data-mode="multi"
                         data-cls-active="bg-red fg-white"&gt;
                         &lt;button class="button"&gt;1&lt;/button&gt;
                         &lt;button class="button"&gt;2&lt;/button&gt;
                         &lt;button class="button"&gt;3&lt;/button&gt;
                     &lt;/div&gt;
 
-                    &lt;div class="toolbar" data-role="buttonsGroup"
+                    &lt;div class="toolbar" data-role="buttongroup"
                         data-mode="multi"&gt;
                         &lt;button class="tool-button rounded"&gt;
                             &lt;span class="mif-bold"&gt;&lt;/span&gt;
@@ -1072,7 +1071,7 @@ <h6>Toolbar example</h6>
                             &lt;span class="mif-underline"&gt;&lt;/span&gt;
                         &lt;/button&gt;
                     &lt;/div&gt;
-                    &lt;div class="toolbar" data-role="buttonsGroup"&gt;
+                    &lt;div class="toolbar" data-role="buttongroup"&gt;
                         &lt;button class="tool-button rounded"&gt;
                             &lt;span class="mif-sort-asc"&gt;&lt;/span&gt;
                         &lt;/button&gt;
@@ -1082,11 +1081,11 @@ <h6>Toolbar example</h6>
                     &lt;/div&gt;
                 </code></pre>
                 <p>
-                    For <code>buttons group</code> you can use two events: <code>data-on-buttons-group-create</code> and <code>data-on-button-click</code>.
+                    For <code>button group</code> you can use two events: <code>data-on-button-group-create</code> and <code>data-on-button-click</code>.
                 </p>
                 <pre><code class="html">
                     &lt;div class="toolbar"
-                        data-role="buttonsGroup"
+                        data-role="buttongroup"
                         data-on-button-click="console.log(arguments);"&gt;
                     ...
                     &lt;/div&gt;
@@ -1095,14 +1094,14 @@ <h6>Toolbar example</h6>
                     if you use <code>&lt;span&gt;</code> or <code>&lt;a&gt;</code> tags for creating buttons, you must specify this with attribute <code>data-targets="..."</code>
                 </p>
                 <div class="example d-flex flex-justify-center">
-                    <div data-role="buttonsGroup" data-targets="button, a, span">
+                    <div data-role="buttongroup" data-targets="button, a, span">
                         <button class="button">1</button>
                         <a class="button">2</a>
                         <span class="button">3</span>
                     </div>
                 </div>
                 <pre><code class="html">
-                    &lt;div data-role="buttonsGroup" data-targets="button, a, span"&gt;
+                    &lt;div data-role="buttongroup" data-targets="button, a, span"&gt;
                         &lt;button class="button"&gt;1&lt;/button&gt;
                         &lt;a class="button"&gt;2&lt;/a&gt;
                         &lt;span class="button"&gt;3&lt;/span&gt;

diff --git a/docs/metro/css/maps/metro.css.map b/docs/metro/css/maps/metro.css.map
diff --git a/docs/metro/css/metro-all.css b/docs/metro/css/metro-all.css
@@ -16405,6 +16405,10 @@ a.split-button a.split {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+.button-group .active {
+  background-color: #989898;
+  color: #ffffff;
+}
 .expand-button {
   width: 2.5rem;
   height: 2.5rem;

diff --git a/docs/metro/css/metro-all.min.css b/docs/metro/css/metro-all.min.css
diff --git a/docs/metro/css/metro.css b/docs/metro/css/metro.css
@@ -16405,6 +16405,10 @@ a.split-button a.split {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+.button-group .active {
+  background-color: #989898;
+  color: #ffffff;
+}
 .expand-button {
   width: 2.5rem;
   height: 2.5rem;

diff --git a/docs/metro/css/metro.min.css b/docs/metro/css/metro.min.css
diff --git a/docs/metro/js/metro.js b/docs/metro/js/metro.js
@@ -1,5 +1,5 @@
 /*!
- * Metro 4 Components Library v4.0.6 build @@build-beta (https://metroui.org.ua)
+ * Metro 4 Components Library v4.0.7 build 618-beta (https://metroui.org.ua)
  * Copyright 2018 Sergey Pimenov
  * Licensed under MIT
  */
@@ -71,7 +71,7 @@ var isTouch = (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (
 
 var Metro = {
 
-    version: "@@version-@@build@@status",
+    version: "4.0.7-618-beta",
     isTouchable: isTouch,
     fullScreenEnabled: document.fullscreenEnabled,
     sheet: null,
@@ -4311,8 +4311,8 @@ var Audio = {
 };
 
 Metro.plugin('audio', Audio);
-// Source: js/plugins/buttons-group.js
-var ButtonsGroup = {
+// Source: js/plugins/button-group.js
+var ButtonGroup = {
     init: function( options, elem ) {
         this.options = $.extend( {}, this.options, options );
         this.elem  = elem;
@@ -4327,7 +4327,7 @@ var ButtonsGroup = {
 
     options: {
         targets: "button",
-        clsActive: "bg-gray",
+        clsActive: "active",
         mode: Metro.groupMode.ONE,
         onButtonClick: Metro.noop,
         onButtonsGroupCreate: Metro.noop
@@ -4358,10 +4358,27 @@ var ButtonsGroup = {
 
     _createGroup: function(){
         var that = this, element = this.element, o = this.options;
+        var cls, buttons, buttons_active, id = Utils.elementId("button-group");
 
-        if (o.mode === Metro.groupMode.ONE && element.find(o.clsActive).length === 0) {
-            $(element.find(o.targets)[0]).addClass(o.clsActive);
+        if (element.attr("id") === undefined) {
+            element.attr("id", id);
         }
+
+        element.addClass("button-group");
+
+        buttons = element.find( o.targets );
+        buttons_active = element.find( "." + o.clsActive );
+
+        if (o.mode === Metro.groupMode.ONE && buttons_active.length === 0) {
+            $(buttons[0]).addClass(o.clsActive);
+        }
+
+        if (o.mode === Metro.groupMode.ONE && buttons_active.length > 1) {
+            buttons.removeClass(o.clsActive);
+            $(buttons[0]).addClass(o.clsActive);
+        }
+
+        element.find( "." + o.clsActive ).addClass("js-active");
     },
 
     _createEvents: function(){
@@ -4370,17 +4387,17 @@ var ButtonsGroup = {
         element.on(Metro.events.click, o.targets, function(){
             var el = $(this);
 
-            Utils.exec(o.onButtonClick, [el]);
+            Utils.exec(o.onButtonClick, [el], this);
 
             if (o.mode === Metro.groupMode.ONE && el.hasClass(o.clsActive)) {
                 return ;
             }
 
             if (o.mode === Metro.groupMode.ONE) {
-                element.find(o.targets).removeClass(o.clsActive);
-                el.addClass(o.clsActive);
+                element.find(o.targets).removeClass(o.clsActive).removeClass("js-active");
+                el.addClass(o.clsActive).addClass("js-active");
             } else {
-                el.toggleClass(o.clsActive);
+                el.toggleClass(o.clsActive).toggleClass("js-active");
             }
 
         });
@@ -4393,12 +4410,12 @@ var ButtonsGroup = {
     destroy: function(){
         var element = this.element, o = this.options;
         element.off(Metro.events.click, o.targets);
-        element.find(o.targets).removeClass(o.clsActive);
+        element.find(o.targets).removeClass(o.clsActive).removeClass("js-active");
     }
 
 };
 
-Metro.plugin('buttonsGroup', ButtonsGroup);
+Metro.plugin('buttongroup', ButtonGroup);
 // Source: js/plugins/calendar.js
 var Calendar = {
     init: function( options, elem ) {

diff --git a/docs/metro/js/metro.min.js b/docs/metro/js/metro.min.js
diff --git a/docs/metro/js/metro.min.js.map b/docs/metro/js/metro.min.js.map