Move to using only javascript; switch build to gulp

.editorconfig

@@ -0,0 +1,9 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# 2 space indentation
+[*.js]
+indent_style = space
+indent_size = 2

.jshintrc

@@ -0,0 +1,24 @@
+{
+  "node": true,
+  "browser": true,
+  "bitwise": true,
+  "camelcase": true,
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "indent": 2,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "quotmark": false,
+  "regexp": true,
+  "undef": true,
+  "unused": true,
+  "strict": true,
+  "trailing": false,
+  "smarttabs": true,
+  "white": false,
+  "globals": {
+    "angular": false
+  }
+}

Gruntfile.coffee

@@ -2,16 +2,7 @@ path = require 'path'
 
 # Build configurations.
 module.exports = (grunt) ->
-  grunt.initConfig
-    # Deletes Compiled script directory
-    # These directories should be deleted before subsequent builds.
-    # These directories are not committed to source control.
-    clean:
-      working:
-        scripts: [
-          './scripts/*'
-        ]
-
+  grunt.initConfig      
     # Compile CoffeeScript (.coffee) files to JavaScript (.js).
     coffee:
       src:
@@ -71,8 +62,6 @@ module.exports = (grunt) ->
   # Register grunt tasks supplied by grunt-contrib-*.
   # Referenced in package.json.
   # https://github.com/gruntjs/grunt-contrib
-  grunt.loadNpmTasks 'grunt-contrib-clean'
-  grunt.loadNpmTasks 'grunt-contrib-coffee'
   grunt.loadNpmTasks 'grunt-contrib-watch'
   grunt.loadNpmTasks 'grunt-contrib-copy'
   grunt.loadNpmTasks 'grunt-contrib-uglify'
@@ -86,7 +75,6 @@ module.exports = (grunt) ->
   # Enter the following command at the command line to execute this build task:
   # grunt test
   grunt.registerTask 'test', [
-    'clean:working'
     'default'
     'karma'
   ]
@@ -95,16 +83,6 @@ module.exports = (grunt) ->
   # Enter the following command at the command line to execute this build task:
   # grunt
   grunt.registerTask 'default', [
-    'coffee:src'
     'copy:dist'
     'uglify:dist'
   ]
-
-
-  # Compiles the app with non-optimized build settings and watches changes.
-  # Enter the following command at the command line to execute this build task:
-  # grunt dev
-  grunt.registerTask 'dev', [
-    'coffee:src'
-    'watch'
-  ]

README.md

@@ -1,14 +1,12 @@
-angular-dropdowns
-=================
+# angular-dropdowns
 
-Dropdown directives for AngularJS (1.1.5, 1.2.x).
+Dropdown directives for AngularJS (1.1.5+, 1.2.x).
 
 Includes both a select-style dropdown and a menu-style dropdown.  The menu-style dropdown attaches to an existing element (button, link, div, etc), whereas the select-style dropdown replaces the element it is attached to.
 
 See examples: http://jsfiddle.net/jseppi/cTzun/3/embedded/result/
 
-Usage
------
+## Usage
 
 Include `ngDropdowns` in your module dependencies:
 
@@ -96,19 +94,25 @@ You can specify a function to call upon dropdown value change by specifying the
 </div>
 ```
 
-Contributors
----------
+## Contributors
+
 * [@jseppi](http://github.com/jseppi)
 * [@alexisbg](http://github.com/alexisbg)
 * [@elishacook](http://github.com/elishacook)
 * [@dinodsaurus](https://github.com/dinodsaurus)
 
-License
----------
+## Developing
+
+Pull requests are welcome!
+
+Run `npm install` to get all the development dependencies.
+
+Run `gulp` to build the output files.
+
+## License
+
 [MIT](http://jseppi.mit-license.org/license.html)
 
+## Credits
 
-Credits
--------------
 Styling based on http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
-

angular-dropdowns.js

@@ -0,0 +1,214 @@
+/**
+ * @license MIT http://jseppi.mit-license.org/license.html
+*/
+'use strict';
+var dd = angular.module('ngDropdowns', []);
+
+dd.directive('dropdownSelect', ['DropdownService', '$window',
+  function (DropdownService, $window) {
+    return {
+      restrict: 'A',
+      replace: true,
+      scope: {
+        dropdownSelect: '=',
+        dropdownModel: '=',
+        dropdownOnchange: '&'
+      },
+
+      controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
+        $scope.labelField = $attrs.dropdownItemLabel || 'text';
+
+        DropdownService.register($element);
+
+        this.select = function (selected) {
+          if (selected !== $scope.dropdownModel) {
+            angular.copy(selected, $scope.dropdownModel);
+          }
+          $scope.dropdownOnchange({
+            selected: selected
+          });
+        };
+
+        var $clickEvent = ('ontouchstart' in $window ? 'touchend' : 'click');
+        $element.bind($clickEvent, function (event) {
+          event.stopPropagation();
+          DropdownService.toggleActive($element);
+        });
+
+        $scope.$on('$destroy', function () {
+          DropdownService.unregister($element);
+        });
+      }],
+
+      template: "<div class='wrap-dd-select'>" + 
+        "    <span class='selected'>{{dropdownModel[labelField]}}</span>" + 
+        "    <ul class='dropdown'>" + 
+        "        <li ng-repeat='item in dropdownSelect'" + 
+        "            class='dropdown-item'" + 
+        "            dropdown-select-item='item'" + 
+        "            dropdown-item-label='labelField'>" + 
+        "        </li>" + 
+        "    </ul>" + 
+        "</div>"
+    };
+  }
+]);
+
+dd.directive('dropdownSelectItem', [
+  function () {
+    return {
+      require: '^dropdownSelect',
+      replace: true,
+      scope: {
+        dropdownItemLabel: '=',
+        dropdownSelectItem: '='
+      },
+
+      link: function (scope, element, attrs, dropdownSelectCtrl) {
+        scope.selectItem = function () {
+          if (scope.dropdownSelectItem.href) {
+            return;
+          }
+          dropdownSelectCtrl.select(scope.dropdownSelectItem);
+        };
+      },
+
+      template: "<li ng-class='{divider: dropdownSelectItem.divider}'>" + 
+        "    <a href='' class='dropdown-item'" + 
+        "        ng-if='!dropdownSelectItem.divider'" + 
+        "        ng-href='{{dropdownSelectItem.href}}'" + 
+        "        ng-click='selectItem()'>" + 
+        "        {{dropdownSelectItem[dropdownItemLabel]}}" + 
+        "    </a>" + 
+        "</li>"
+    };
+  }
+]);
+
+dd.directive('dropdownMenu', ['$parse', '$compile', 'DropdownService', '$window',
+  function ($parse, $compile, DropdownService, $window) {
+
+    var template = "<ul class='dropdown'>" + 
+      "    <li ng-repeat='item in dropdownMenu'" + 
+      "        class='dropdown-item'" + 
+      "        dropdown-item-label='labelField'" + 
+      "        dropdown-menu-item='item'>" + 
+      "    </li>" + 
+      "</ul>";
+
+    return {
+      restrict: 'A',
+      replace: false,
+      scope: {
+        dropdownMenu: '=',
+        dropdownModel: '=',
+        dropdownOnchange: '&'
+      },
+
+      controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
+        $scope.labelField = $attrs.dropdownItemLabel || 'text';
+
+        var $clickEvent = ('ontouchstart' in $window ? 'touchend' : 'click');
+        var $template = angular.element(template);
+        // Attach this controller to the element's data
+        $template.data('$dropdownMenuController', this);
+
+        var tpl = $compile($template)($scope);
+        var $wrap = angular.element("<div class='wrap-dd-menu'></div>");
+
+        $element.replaceWith($wrap);
+        $wrap.append($element);
+        $wrap.append(tpl);
+
+        DropdownService.register(tpl);
+
+        this.select = function (selected) {
+          if (selected !== $scope.dropdownModel) {
+            angular.copy(selected, $scope.dropdownModel);
+          }
+          $scope.dropdownOnchange({
+            selected: selected
+          });
+        };
+
+        $element.bind($clickEvent, function (event) {
+          event.stopPropagation();
+          DropdownService.toggleActive(tpl);
+        });
+
+        $scope.$on('$destroy', function () {
+          DropdownService.unregister(tpl);
+        });
+      }]
+    };
+  }
+]);
+
+dd.directive('dropdownMenuItem', [
+  function () {
+    return {
+      require: '^dropdownMenu',
+      replace: true,
+      scope: {
+        dropdownMenuItem: '=',
+        dropdownItemLabel: '='
+      },
+
+      link: function (scope, element, attrs, dropdownMenuCtrl) {
+        scope.selectItem = function () {
+          if (scope.dropdownMenuItem.href) {
+            return;
+          }
+          dropdownMenuCtrl.select(scope.dropdownMenuItem);
+        };
+      },
+
+      template: "<li ng-class='{divider: dropdownMenuItem.divider}'>" + 
+        "    <a href='' class='dropdown-item'" + 
+        "        ng-if='!dropdownMenuItem.divider'" + 
+        "        ng-href='{{dropdownMenuItem.href}}'" + 
+        "        ng-click='selectItem()'>" + 
+        "        {{dropdownMenuItem[dropdownItemLabel]}}" + 
+        "    </a>" + 
+        "</li>"
+    };
+  }
+]);
+
+dd.factory('DropdownService', ['$document',
+  function ($document) {
+    var body = $document.find('body'),
+        service = {},
+        _dropdowns = [];
+
+    body.bind('click', function () {
+      return angular.forEach(_dropdowns, function (el) {
+        el.removeClass('active');
+      });
+    });
+
+    service.register = function (ddEl) {
+      _dropdowns.push(ddEl);
+    };
+
+    service.unregister = function (ddEl) {
+      var index;
+      index = _dropdowns.indexOf(ddEl);
+      if (index > -1) {
+        _dropdowns.splice(index, 1);
+      }
+    };
+
+    service.toggleActive = function (ddEl) {
+      angular.forEach(_dropdowns, function (el) {
+        if (el !== ddEl) {
+          el.removeClass('active');
+        }
+      });
+
+      ddEl.toggleClass('active');
+    };
+
+    return service;
+  }
+]);

bower.json

@@ -1,14 +1,14 @@
 {
   "name": "angular-dropdowns",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "homepage": "https://github.com/jseppi/angular-dropdowns",
   "authors": [
     "James Seppi"
   ],
   "description": "AngularJS Dropdown Directives",
   "main": [
     "dist/angular-dropdowns.js",
-    "css/dropdowns.css"
+    "dist/angular-dropdowns.css"
   ],
   "keywords": [
     "angular",