feat(dropdown): support programatic trigger, toggle callback & esc key

src/dropdown/docs/demo.html

@@ -0,0 +1,50 @@
+
+<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>

src/dropdown/docs/demo.js

@@ -0,0 +1,21 @@
+function DropdownCtrl($scope) {
+  $scope.items = [
+    'The first choice!',
+    '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;
+  };
+}

src/dropdown/docs/readme.md

@@ -0,0 +1,4 @@
+
+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.

src/dropdown/dropdown.js

@@ -0,0 +1,108 @@
+angular.module('ui.bootstrap.dropdown', [])
+
+.constant('dropdownConfig', {
+  openClass: 'open'
+})
+
+.service('dropdownService', ['$document', function($document) {
+  var self = this, openScope = null;
+
+  this.open = function( dropdownScope ) {
+    if ( !openScope ) {
+      $document.bind('click', closeDropdown);
+      $document.bind('keydown', escapeKeyBind);
+    }
+
+    if ( openScope && openScope !== dropdownScope ) {
+        openScope.isOpen = false;
+    }
+
+    openScope = dropdownScope;
+  };
+
+  this.close = function( dropdownScope ) {
+    if ( openScope === dropdownScope ) {
+      openScope = null;
+      $document.unbind('click', closeDropdown);
+      $document.unbind('keydown', escapeKeyBind);
+    }
+  };
+
+  var closeDropdown = function() {
+    openScope.$apply(function() {
+      openScope.isOpen = false;
+    });
+  };
+
+  var escapeKeyBind = function( evt ) {
+    if ( evt.which === 27 ) {
+      closeDropdown();
+    }
+  };
+}])
+
+.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',
+    controller: 'DropdownController',
+    scope: {
+      isOpen: '=?',
+      onToggle: '&'
+    },
+    link: function(scope, element, attrs, dropdownCtrl) {
+      dropdownCtrl.init( element );
+    }
+  };
+})
+
+.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 ( !element.hasClass('disabled') && !element.prop('disabled') ) {
+          scope.$apply(function() {
+            dropdownCtrl.toggle();
+          });
+        }
+      });
+    }
+  };
+});

src/dropdown/test/dropdown.spec.js

@@ -0,0 +1,194 @@
+describe('dropdownToggle', function() {
+  var $compile, $rootScope, $document, element;
+
+  beforeEach(module('ui.bootstrap.dropdown'));
+
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_) {
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+    $document = _$document_;
+  }));
+
+  var clickDropdownToggle = function(elm) {
+    elm = elm || element;
+    elm.find('a').click();
+  };
+
+  var triggerKeyDown = function (element, keyCode) {
+    var e = $.Event('keydown');
+    e.which = keyCode;
+    element.trigger(e);
+  };
+
+  describe('basic', function() {
+    function dropdown() {
+      return $compile('<li class="dropdown"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+    }
+
+    beforeEach(function() {
+      element = dropdown();
+    });
+
+    it('should toggle on `a` click', function() {
+      expect(element.hasClass('open')).toBe(false);
+      clickDropdownToggle();
+      expect(element.hasClass('open')).toBe(true);
+      clickDropdownToggle();
+      expect(element.hasClass('open')).toBe(false);
+    });
+
+    it('should close on document click', function() {
+      clickDropdownToggle();
+      expect(element.hasClass('open')).toBe(true);
+      $document.click();
+      expect(element.hasClass('open')).toBe(false);
+    });
+
+    it('should close on escape key', function() {
+      clickDropdownToggle();
+      triggerKeyDown($document, 27);
+      expect(element.hasClass('open')).toBe(false);
+    });
+
+    it('should not close on backspace key', function() {
+      clickDropdownToggle();
+      triggerKeyDown($document, 8);
+      expect(element.hasClass('open')).toBe(true);
+    });
+
+    it('should close on $location change', function() {
+      clickDropdownToggle();
+      expect(element.hasClass('open')).toBe(true);
+      $rootScope.$broadcast('$locationChangeSuccess');
+      $rootScope.$apply();
+      expect(element.hasClass('open')).toBe(false);
+    });
+
+    it('should only allow one dropdown to be open at once', function() {
+      var elm1 = dropdown();
+      var elm2 = dropdown();
+      expect(elm1.hasClass('open')).toBe(false);
+      expect(elm2.hasClass('open')).toBe(false);
+
+      clickDropdownToggle( elm1 );
+      expect(elm1.hasClass('open')).toBe(true);
+      expect(elm2.hasClass('open')).toBe(false);
+
+      clickDropdownToggle( elm2 );
+      expect(elm1.hasClass('open')).toBe(false);
+      expect(elm2.hasClass('open')).toBe(true);
+    });
+
+    it('should not toggle if the element has `disabled` class', function() {
+      var elm = $compile('<li class="dropdown"><a class="disabled" dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      clickDropdownToggle( elm );
+      expect(elm.hasClass('open')).toBe(false);
+    });
+
+    it('should not toggle if the element is disabled', function() {
+      var elm = $compile('<li class="dropdown"><button disabled="disabled" dropdown-toggle></button><ul><li>Hello</li></ul></li>')($rootScope);
+      elm.find('button').click();
+      expect(elm.hasClass('open')).toBe(false);
+    });
+
+    // issue 270
+    it('executes other document click events normally', function() {
+      var checkboxEl = $compile('<input type="checkbox" ng-click="clicked = true" />')($rootScope);
+      $rootScope.$digest();
+
+      expect(element.hasClass('open')).toBe(false);
+      expect($rootScope.clicked).toBeFalsy();
+
+      clickDropdownToggle();
+      expect(element.hasClass('open')).toBe(true);
+      expect($rootScope.clicked).toBeFalsy();
+
+      checkboxEl.click();
+      expect($rootScope.clicked).toBeTruthy();
+    });
+  });
+
+  describe('without trigger', function() {
+    beforeEach(function() {
+      $rootScope.isopen = true;
+      element = $compile('<li class="dropdown" is-open="isopen"><ul><li>Hello</li></ul></li>')($rootScope);
+      $rootScope.$digest();
+    });
+
+    it('should be open initially', function() {
+      expect(element.hasClass('open')).toBe(true);
+    });
+
+    it('should toggle when `is-open` changes', function() {
+      $rootScope.isopen = false;
+      $rootScope.$digest();
+      expect(element.hasClass('open')).toBe(false);
+    });
+  });
+
+  describe('`is-open`', function() {
+    beforeEach(function() {
+      $rootScope.isopen = true;
+      element = $compile('<li class="dropdown" is-open="isopen"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      $rootScope.$digest();
+    });
+
+    it('should be open initially', function() {
+      expect(element.hasClass('open')).toBe(true);
+    });
+
+    it('should change `is-open` binding when toggles', function() {
+      clickDropdownToggle();
+      expect($rootScope.isopen).toBe(false);
+    });
+
+    it('should toggle when `is-open` changes', function() {
+      $rootScope.isopen = false;
+      $rootScope.$digest();
+      expect(element.hasClass('open')).toBe(false);
+    });
+  });
+
+  describe('`on-toggle`', function() {
+    beforeEach(function() {
+      $rootScope.toggleHandler = jasmine.createSpy('toggleHandler');
+      element = $compile('<li class="dropdown" on-toggle="toggleHandler(open)"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      $rootScope.$digest();
+    });
+
+    it('should be called initially', function() {
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
+    });
+
+    it('should call it correctly when toggles', function() {
+      clickDropdownToggle();
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
+
+      clickDropdownToggle();
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('`on-toggle` with initially open', function() {
+    beforeEach(function() {
+      $rootScope.toggleHandler = jasmine.createSpy('toggleHandler');
+      $rootScope.isopen = true;
+      element = $compile('<li class="dropdown" on-toggle="toggleHandler(open)" is-open="isopen"><a dropdown-toggle></a><ul><li>Hello</li></ul></li>')($rootScope);
+      $rootScope.$digest();
+    });
+
+    it('should be called initially with true', function() {
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
+    });
+
+    it('should call it correctly when toggles', function() {
+      $rootScope.isopen = false;
+      $rootScope.$digest();
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
+
+      $rootScope.isopen = true;
+      $rootScope.$digest();
+      expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
+    });
+  });
+});