ng-material-floating-button - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

bower.json

 {
   "name": "ng-material-floating-button",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "homepage": "https://github.com/nobitagit/ng-material-floating-button",
@@ -5,0 +5,0 @@ "authors": [

CHANGELOG.md

@@ -0,1 +1,5 @@
+## v0.6.0
+
+ * Added directive `mfb-button-close` to share close menu functionality (see [pull request #38](https://github.com/nobitagit/ng-material-floating-button/pull/38) ).
+
 ## v0.5.1
@@ -2,0 +6,0 @@

package.json

 {
   "name": "ng-material-floating-button",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "angular directive for material floating buttons",
@@ -5,0 +5,0 @@ "main": [

README.md

@@ -256,2 +256,13 @@ ng-material-floating-button
 ```
+
+#### `mfb-button-close` attribute
+
+When using the toggling method click ```<ul mfb-menu toggling-method="click">``` only the main button toggles the menu. If you want your secondary buttons to close the menu as well you can use the ```mfb-button-close``` attribute on your ```mfb-button```.
+
+That way if your ```mfb-button``` opens a modal or something else that loses focus, your menu will close.
+
+```html
+<button mfb-button mfb-button-close>Closes the menu</button>
+```
+
 <a name="custom-tpls"></a>
@@ -258,0 +269,0 @@ ### Customising templates

src/mfb-directive.js

@@ -1,2 +0,2 @@
-+(function(window, angular, undefined){
++(function(window, angular, undefined) {
 
@@ -9,60 +9,73 @@ 'use strict';
     $templateCache.put('ng-mfb-menu-default.tpl.html',
-    '<ul class="mfb-component--{{position}} mfb-{{effect}}"' +
-    '    data-mfb-toggle="{{togglingMethod}}" data-mfb-state="{{menuState}}">' +
-    '  <li class="mfb-component__wrap">' +
-    '    <a ng-click="clicked()" ng-mouseenter="hovered()" ng-mouseleave="hovered()"' +
-    '       ng-attr-data-mfb-label="{{label}}" class="mfb-component__button--main">' +
-    '     <i class="mfb-component__main-icon--resting {{resting}}"></i>' +
-    '     <i class="mfb-component__main-icon--active {{active}}"></i>' +
-    '    </a>' +
-    '    <ul class="mfb-component__list" ng-transclude>' +
-    '    </ul>' +
-    '</li>' +
-    '</ul>'
+      '<ul class="mfb-component--{{position}} mfb-{{effect}}"' +
+      '    data-mfb-toggle="{{togglingMethod}}" data-mfb-state="{{menuState}}">' +
+      '  <li class="mfb-component__wrap">' +
+      '    <a ng-click="clicked()" ng-mouseenter="hovered()" ng-mouseleave="hovered()"' +
+      '       ng-attr-data-mfb-label="{{label}}" class="mfb-component__button--main">' +
+      '     <i class="mfb-component__main-icon--resting {{resting}}"></i>' +
+      '     <i class="mfb-component__main-icon--active {{active}}"></i>' +
+      '    </a>' +
+      '    <ul class="mfb-component__list" ng-transclude>' +
+      '    </ul>' +
+      '</li>' +
+      '</ul>'
     );
 
     $templateCache.put('ng-mfb-menu-md.tpl.html',
-    '<ul class="mfb-component--{{position}} mfb-{{effect}}"' +
-    '    data-mfb-toggle="{{togglingMethod}}" data-mfb-state="{{menuState}}">' +
-    '  <li class="mfb-component__wrap">' +
-    '    <a ng-click="clicked()" ng-mouseenter="hovered()" ng-mouseleave="hovered()"' +
-    '       style="background: transparent; box-shadow: none;"' +
-    '       ng-attr-data-mfb-label="{{label}}" class="mfb-component__button--main">' +
-    '     <md-button class="md-fab md-primary" aria-label={{label}} style="position:relative; margin: 0; padding:0;">' +
-    '       <md-icon style="left: 0; position: relative;" md-svg-icon="{{resting}}"' +
-    '         class="mfb-component__main-icon--resting"></md-icon>' +
-    '       <md-icon style="position:relative;" md-svg-icon="{{active}}"' +
-    '         class="mfb-component__main-icon--active"></md-icon>' +
-    '     </md-button>' +
-    '    </a>' +
-    '    <ul class="mfb-component__list" ng-transclude>' +
-    '    </ul>' +
-    '</li>' +
-    '</ul>'
+      '<ul class="mfb-component--{{position}} mfb-{{effect}}"' +
+      '    data-mfb-toggle="{{togglingMethod}}" data-mfb-state="{{menuState}}">' +
+      '  <li class="mfb-component__wrap">' +
+      '    <a ng-click="clicked()" ng-mouseenter="hovered()" ng-mouseleave="hovered()"' +
+      '       style="background: transparent; box-shadow: none;"' +
+      '       ng-attr-data-mfb-label="{{label}}" class="mfb-component__button--main">' +
+      '     <md-button class="md-fab md-primary" aria-label={{label}} style="position:relative; margin: 0; padding:0;">' +
+      '       <md-icon style="left: 0; position: relative;" md-svg-icon="{{resting}}"' +
+      '         class="mfb-component__main-icon--resting"></md-icon>' +
+      '       <md-icon style="position:relative;" md-svg-icon="{{active}}"' +
+      '         class="mfb-component__main-icon--active"></md-icon>' +
+      '     </md-button>' +
+      '    </a>' +
+      '    <ul class="mfb-component__list" ng-transclude>' +
+      '    </ul>' +
+      '</li>' +
+      '</ul>'
     );
 
     $templateCache.put('ng-mfb-button-default.tpl.html',
-    '<li>' +
-    '  <a data-mfb-label="{{label}}" class="mfb-component__button--child">' +
-    '    <i class="mfb-component__child-icon {{icon}}">' +
-    '    </i>' +
-    '  </a>' +
-    '</li>'
+      '<li>' +
+      '  <a data-mfb-label="{{label}}" class="mfb-component__button--child">' +
+      '    <i class="mfb-component__child-icon {{icon}}">' +
+      '    </i>' +
+      '  </a>' +
+      '</li>'
     );
 
     $templateCache.put('ng-mfb-button-md.tpl.html',
-    '<li>' +
-    '  <a href="" data-mfb-label="{{label}}" class="mfb-component__button--child" ' +
-    '     style="background: transparent; box-shadow: none;">' +
-    '     <md-button style="margin: 0;" class="md-fab md-primary" aria-label={{label}}>' +
-    //'       <md-icon md-svg-src="img/icons/android.svg"></md-icon>' +
-    '       <md-icon md-svg-icon="{{icon}}"></md-icon>' +
-    '     </md-button>' +
-    '  </a>' +
-    '</li>'
+      '<li>' +
+      '  <a href="" data-mfb-label="{{label}}" class="mfb-component__button--child" ' +
+      '     style="background: transparent; box-shadow: none;">' +
+      '     <md-button style="margin: 0;" class="md-fab md-primary" aria-label={{label}}>' +
+      //'       <md-icon md-svg-src="img/icons/android.svg"></md-icon>' +
+      '       <md-icon md-svg-icon="{{icon}}"></md-icon>' +
+      '     </md-button>' +
+      '  </a>' +
+      '</li>'
     );
   }]);
 
-  mfb.directive('mfbMenu', ['$timeout',function($timeout){
+  mfb.directive('mfbButtonClose', function($log) {
     return {
+      restrict: 'A',
+      require: '^mfbMenu',
+      link: function($scope, $element, $attrs, mfbMenuController) {
+        $element.bind('click', function() {
+          mfbMenuController.close();
+        });
+      },
+    };
+
+  });
+
+  mfb.directive('mfbMenu', ['$timeout', function($timeout) {
+    return {
       restrict: 'EA',
@@ -84,58 +97,50 @@ transclude: true,
       },
-      link: function(scope, elem, attrs) {
-
+      controller: function($scope, $attrs) {
         var openState = 'open',
-            closedState = 'closed';
+          closedState = 'closed';
 
-        /**
-         * Check if we're on a touch-enabled device.
-         * Requires Modernizr to run, otherwise simply returns false
-         */
-        function _isTouchDevice(){
-          return window.Modernizr && Modernizr.touch;
-        }
+        // Attached toggle, open and close to the controller to give other directive access them
+        // directives such as mfbButtonClose
+        this.toggle = toggle;
+        this.close = close;
+        this.open = open;
 
-        function _isHoverActive(){
-          return scope.togglingMethod === 'hover';
-        }
+        $scope.clicked = clicked;
+        $scope.hovered = hovered;
 
         /**
-         * Convert the toggling method to 'click'.
-         * This is used when 'hover' is selected by the user
-         * but a touch device is enabled.
+         * Set the state to user-defined value. Fallback to closed if no
+         * value is passed from the outside.
          */
-        function useClick(){
-          scope.$apply(function(){
-            scope.togglingMethod = 'click';
-          });
+        //$scope.menuState = $attrs.menuState || closedState;
+        if (!$scope.menuState) {
+          $scope.menuState = closedState;
         }
-        /**
-         * Invert the current state of the menu.
-         */
-        function flipState() {
-          scope.menuState = scope.menuState === openState ? closedState : openState;
-        }
 
         /**
-         * Set the state to user-defined value. Fallback to closed if no
-         * value is passed from the outside.
+         * If on touch device AND 'hover' method is selected:
+         * wait for the digest to perform and then change hover to click.
          */
-        //scope.menuState = attrs.menuState || closedState;
-        if(!scope.menuState){
-          scope.menuState = closedState;
+        if (_isTouchDevice() && _isHoverActive()) {
+          $timeout(useClick);
         }
 
-        scope.clicked = function() {
+        $attrs.$observe('menuState', function() {
+          $scope.currentState = $scope.menuState;
+        });
+
+        function clicked() {
           // If there is a main action, let's fire it
-          if (scope.mainAction) {
-            scope.mainAction();
+          if ($scope.mainAction) {
+            $scope.mainAction();
           }
 
-          if(!_isHoverActive()){
-            flipState();
+          if (!_isHoverActive()) {
+            toggle();
           }
         };
-        scope.hovered = function() {
-          if(_isHoverActive()){
-            //flipState();
+
+        function hovered() {
+          if (_isHoverActive()) {
+            //toggle();
           }
@@ -145,13 +150,42 @@ };
         /**
-         * If on touch device AND 'hover' method is selected:
-         * wait for the digest to perform and then change hover to click.
+         * Invert the current state of the menu.
          */
-        if ( _isTouchDevice() && _isHoverActive() ){
-          $timeout(useClick);
+        function toggle() {
+          if ($scope.menuState === openState) {
+            close();
+          } else {
+            open();
+          }
         }
 
-        attrs.$observe('menuState', function(){
-          scope.currentState = scope.menuState;
-        });
+        function open() {
+          $scope.menuState = openState;
+        }
 
+        function close() {
+          $scope.menuState = closedState;
+        }
+
+        /**
+         * Check if we're on a touch-enabled device.
+         * Requires Modernizr to run, otherwise simply returns false
+         */
+        function _isTouchDevice() {
+          return window.Modernizr && Modernizr.touch;
+        }
+
+        function _isHoverActive() {
+          return $scope.togglingMethod === 'hover';
+        }
+
+        /**
+         * Convert the toggling method to 'click'.
+         * This is used when 'hover' is selected by the user
+         * but a touch device is enabled.
+         */
+        function useClick() {
+          $scope.$apply(function() {
+            $scope.togglingMethod = 'click';
+          });
+        }
       }
@@ -161,4 +195,3 @@ };
 
-
-  mfb.directive('mfbButton', [function(){
+  mfb.directive('mfbButton', [function() {
     return {
@@ -165,0 +198,0 @@ require: '^mfbMenu',

No alert changes

Improved metrics

Total package byte prevSize

145008

increased by1.23%

Number of package files

30

increased by3.45%

Lines of code

1288

increased by2.22%

Number of lines in readme file

291

increased by3.93%

No dependency changes