feat(dropdownToggle): support programmatic trigger & toggle callback

Closes #270 Closes #284 Closes #1447
angular-ui · Jan 21, 2014 · ae31079 · ae31079
1 parent 745246e
commit ae31079
Show file tree

Hide file tree

Showing 5 changed files with 310 additions and 104 deletions.
diff --git a/src/dropdownToggle/docs/demo.html b/src/dropdownToggle/docs/demo.html
@@ -1,10 +1,50 @@
-<li class="dropdown" ng-controller="DropdownCtrl">
-  <a class="dropdown-toggle">
-    Click me for a dropdown, yo!
-  </a>
-  <ul class="dropdown-menu">
-    <li ng-repeat="choice in items">
-      <a>{{choice}}</a>
-    </li>
-  </ul>
-</li>
+
+<div ng-controller="DropdownCtrl">
+    <!-- Simple dropdown -->
+    <span class="dropdown" on-toggle="toggled(open)">
+      <a class="dropdown-toggle">
+        Click me for a dropdown, yo!
+      </a>
+      <ul class="dropdown-menu">
+        <li ng-repeat="choice in items">
+          <a>{{choice}}</a>
+        </li>
+      </ul>
+    </span>
+
+    <!-- Single button -->
+    <div class="btn-group" dropdown is-open="status.isopen">
+      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+        Button dropdown <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu" role="menu">
+        <li><a href="#">Action</a></li>
+        <li><a href="#">Another action</a></li>
+        <li><a href="#">Something else here</a></li>
+        <li class="divider"></li>
+        <li><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+
+    <!-- Split button -->
+    <div class="btn-group" dropdown>
+      <button type="button" class="btn btn-danger">Action</button>
+      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
+        <span class="caret"></span>
+        <span class="sr-only">Split button!</span>
+      </button>
+      <ul class="dropdown-menu" role="menu">
+        <li><a href="#">Action</a></li>
+        <li><a href="#">Another action</a></li>
+        <li><a href="#">Something else here</a></li>
+        <li class="divider"></li>
+        <li><a href="#">Separated link</a></li>
+      </ul>
+    </div>
+
+    <hr />
+    <p>
+        <button type="button" class="btn btn-default btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
+    </p>
+
+</div>
diff --git a/src/dropdownToggle/docs/demo.js b/src/dropdownToggle/docs/demo.js
@@ -4,4 +4,18 @@ function DropdownCtrl($scope) {
     'And another choice for you.',
     'but wait! A third!'
   ];
+
+  $scope.status = {
+    isopen: false
+  };
+
+  $scope.toggled = function(open) {
+    console.log('Dropdown is now: ', open);
+  };
+
+  $scope.toggleDropdown = function($event) {
+    $event.preventDefault();
+    $event.stopPropagation();
+    $scope.status.isopen = !$scope.status.isopen;
+  };
 }
diff --git a/src/dropdownToggle/docs/readme.md b/src/dropdownToggle/docs/readme.md
@@ -1,2 +1,4 @@
 
-DropdownToggle is a simple directive which will toggle a dropdown link on click.  Simply put it on the `<a>` tag of the toggler-element, and it will find the nearest dropdown menu and toggle it when the `<a dropdown-toggle>` is clicked.
+Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.
+You can either use `is-open` to toggle or add inside a `<a dropdown-toggle>` element to toggle it when is clicked.
+There is also the `on-toggle(open)` optional expression fired when dropdown changes state.
diff --git a/src/dropdownToggle/dropdownToggle.js b/src/dropdownToggle/dropdownToggle.js
@@ -1,52 +1,100 @@
-/*
- * dropdownToggle - Provides dropdown menu functionality in place of bootstrap js
- * @restrict class or attribute
- * @example:
-   <li class="dropdown">
-     <a class="dropdown-toggle">My Dropdown Menu</a>
-     <ul class="dropdown-menu">
-       <li ng-repeat="choice in dropChoices">
-         <a ng-href="{{choice.href}}">{{choice.text}}</a>
-       </li>
-     </ul>
-   </li>
- */
-
-angular.module('ui.bootstrap.dropdownToggle', []).directive('dropdownToggle', ['$document', function ($document) {
-  var openElement = null,
-      closeMenu   = angular.noop;
+angular.module('ui.bootstrap.dropdownToggle', [])
+
+.constant('dropdownConfig', {
+  openClass: 'open'
+})
+
+.service('dropdownService', ['$document', function($document) {
+  var self = this, openScope = null;
+
+  this.open = function( dropdownScope ) {
+    if ( !openScope ) {
+      $document.bind('click', closeDropdown);
+    }
+
+    if ( openScope && openScope !== dropdownScope ) {
+        openScope.isOpen = false;
+    }
+
+    openScope = dropdownScope;
+  };
+
+  this.close = function( dropdownScope ) {
+    if ( openScope === dropdownScope ) {
+      openScope = null;
+      $document.unbind('click', closeDropdown);
+    }
+  };
+
+  var closeDropdown = function() {
+    openScope.$apply(function() {
+      openScope.isOpen = false;
+    });
+  };
+}])
+
+.controller('DropdownController', ['$scope', '$attrs', 'dropdownConfig', 'dropdownService', function($scope, $attrs, dropdownConfig, dropdownService) {
+  var self = this, openClass = dropdownConfig.openClass;
+
+  this.init = function( element ) {
+    self.$element = element;
+    $scope.isOpen = angular.isDefined($attrs.isOpen) ? $scope.$parent.$eval($attrs.isOpen) : false;
+  };
+
+  this.toggle = function( open ) {
+    return $scope.isOpen = arguments.length ? !!open : !$scope.isOpen;
+  };
+
+  $scope.$watch('isOpen', function( value ) {
+    self.$element.toggleClass( openClass, value );
+
+    if ( value ) {
+      dropdownService.open( $scope );
+    } else {
+      dropdownService.close( $scope );
+    }
+
+    $scope.onToggle({ open: !!value });
+  });
+
+  $scope.$on('$locationChangeSuccess', function() {
+    $scope.isOpen = false;
+  });
+}])
+
+.directive('dropdown', function() {
   return {
     restrict: 'CA',
-    link: function(scope, element, attrs) {
-      scope.$on('$locationChangeSuccess', function() { closeMenu(); });
-      element.parent().bind('click', function() { closeMenu(); });
-      element.bind('click', function (event) {
+    controller: 'DropdownController',
+    scope: {
+      isOpen: '=?',
+      onToggle: '&'
+    },
+    link: function(scope, element, attrs, dropdownCtrl) {
+      dropdownCtrl.init( element );
+    }
+  };
+})
 
-        var elementWasOpen = (element === openElement);
+.directive('dropdownToggle', function() {
+  return {
+    restrict: 'CA',
+    require: '?^dropdown',
+    link: function(scope, element, attrs, dropdownCtrl) {
+      if ( !dropdownCtrl ) {
+        return;
+      }
 
+      element.bind('click', function(event) {
         event.preventDefault();
         event.stopPropagation();
 
-        if (!!openElement) {
-          closeMenu();
-        }
-
-        if (!elementWasOpen && !element.hasClass('disabled') && !element.prop('disabled')) {
-          element.parent().addClass('open');
-          openElement = element;
-          closeMenu = function (event) {
-            if (event) {
-              event.preventDefault();
-              event.stopPropagation();
-            }
-            $document.unbind('click', closeMenu);
-            element.parent().removeClass('open');
-            closeMenu = angular.noop;
-            openElement = null;
-          };
-          $document.bind('click', closeMenu);
+        if ( !element.hasClass('disabled') && !element.prop('disabled') ) {
+          scope.$apply(function() {
+            dropdownCtrl.toggle();
+          });
         }
       });
     }
   };
-}]);
+});