diff --git a/bower.json b/bower.json index e23eb16..8bd2018 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-dropdowns", - "version": "0.1.1", + "version": "0.2.0", "homepage": "https://github.com/jseppi/angular-dropdowns", "authors": [ "James Seppi" diff --git a/dist/angular-dropdowns.js b/dist/angular-dropdowns.js index e2a9d58..e9649e0 100644 --- a/dist/angular-dropdowns.js +++ b/dist/angular-dropdowns.js @@ -1,5 +1,5 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ - '$document', function($document) { + 'DropdownService', function(DropdownService) { return { restrict: 'A', replace: true, @@ -10,8 +10,8 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ }, controller: [ '$scope', '$element', '$attrs', function($scope, $element, $attrs) { - var body; $scope.labelField = $attrs.dropdownItemLabel != null ? $attrs.dropdownItemLabel : 'text'; + DropdownService.register($element); this.select = function(selected) { if (selected !== $scope.dropdownModel) { angular.copy(selected, $scope.dropdownModel); @@ -20,13 +20,12 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ selected: selected }); }; - body = $document.find("body"); - body.bind("click", function() { - $element.removeClass('active'); - }); $element.bind('click', function(event) { event.stopPropagation(); - $element.toggleClass('active'); + DropdownService.toggleActive($element); + }); + $scope.$on('$destroy', function() { + DropdownService.unregister($element); }); } ], @@ -54,7 +53,7 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ }; } ]).directive('dropdownMenu', [ - '$parse', '$compile', '$document', function($parse, $compile, $document) { + '$parse', '$compile', 'DropdownService', function($parse, $compile, DropdownService) { var template; template = ""; return { @@ -67,7 +66,7 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ }, controller: [ '$scope', '$element', '$attrs', function($scope, $element, $attrs) { - var $template, $wrap, body, tpl; + var $template, $wrap, tpl; $scope.labelField = $attrs.dropdownItemLabel != null ? $attrs.dropdownItemLabel : 'text'; $template = angular.element(template); $template.data('$dropdownMenuController', this); @@ -76,6 +75,7 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ $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); @@ -84,13 +84,12 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ selected: selected }); }; - body = $document.find("body"); - body.bind("click", function() { - tpl.removeClass('active'); - }); $element.bind("click", function(event) { event.stopPropagation(); - tpl.toggleClass('active'); + DropdownService.toggleActive(tpl); + }); + $scope.$on('$destroy', function() { + DropdownService.unregister(tpl); }); } ] @@ -116,4 +115,35 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ template: "
  • \n \n {{dropdownMenuItem[dropdownItemLabel]}}\n \n
    • " }; } +]).factory('DropdownService', [ + '$document', function($document) { + var body, service, _dropdowns; + service = {}; + _dropdowns = []; + body = $document.find('body'); + 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; + } ]); diff --git a/dist/angular-dropdowns.min.js b/dist/angular-dropdowns.min.js index 0f4875b..b9768f1 100644 --- a/dist/angular-dropdowns.min.js +++ b/dist/angular-dropdowns.min.js @@ -1 +1 @@ -angular.module("ngDropdowns",[]).directive("dropdownSelect",["$document",function(a){return{restrict:"A",replace:!0,scope:{dropdownSelect:"=",dropdownModel:"=",dropdownOnchange:"&"},controller:["$scope","$element","$attrs",function(b,c,d){var e;b.labelField=null!=d.dropdownItemLabel?d.dropdownItemLabel:"text",this.select=function(a){a!==b.dropdownModel&&angular.copy(a,b.dropdownModel),b.dropdownOnchange({selected:a})},e=a.find("body"),e.bind("click",function(){c.removeClass("active")}),c.bind("click",function(a){a.stopPropagation(),c.toggleClass("active")})}],template:"
    \n {{dropdownModel[labelField]}}\n \n
    "}}]).directive("dropdownSelectItem",[function(){return{require:"^dropdownSelect",replace:!0,scope:{dropdownItemLabel:"=",dropdownSelectItem:"="},link:function(a,b,c,d){a.selectItem=function(){a.dropdownSelectItem.href||d.select(a.dropdownSelectItem)}},template:"
  • \n \n {{dropdownSelectItem[dropdownItemLabel]}}\n \n
    • "}}]).directive("dropdownMenu",["$parse","$compile","$document",function(a,b,c){var d;return d="",{restrict:"A",replace:!1,scope:{dropdownMenu:"=",dropdownModel:"=",dropdownOnchange:"&"},controller:["$scope","$element","$attrs",function(a,e,f){var g,h,i,j;a.labelField=null!=f.dropdownItemLabel?f.dropdownItemLabel:"text",g=angular.element(d),g.data("$dropdownMenuController",this),j=b(g)(a),h=angular.element("
    "),e.replaceWith(h),h.append(e),h.append(j),this.select=function(b){b!==a.dropdownModel&&angular.copy(b,a.dropdownModel),a.dropdownOnchange({selected:b})},i=c.find("body"),i.bind("click",function(){j.removeClass("active")}),e.bind("click",function(a){a.stopPropagation(),j.toggleClass("active")})}]}}]).directive("dropdownMenuItem",[function(){return{require:"^dropdownMenu",replace:!0,scope:{dropdownMenuItem:"=",dropdownItemLabel:"="},link:function(a,b,c,d){a.selectItem=function(){a.dropdownMenuItem.href||d.select(a.dropdownMenuItem)}},template:"
  • \n \n {{dropdownMenuItem[dropdownItemLabel]}}\n \n
    • "}}]); \ No newline at end of file +angular.module("ngDropdowns",[]).directive("dropdownSelect",["DropdownService",function(a){return{restrict:"A",replace:!0,scope:{dropdownSelect:"=",dropdownModel:"=",dropdownOnchange:"&"},controller:["$scope","$element","$attrs",function(b,c,d){b.labelField=null!=d.dropdownItemLabel?d.dropdownItemLabel:"text",a.register(c),this.select=function(a){a!==b.dropdownModel&&angular.copy(a,b.dropdownModel),b.dropdownOnchange({selected:a})},c.bind("click",function(b){b.stopPropagation(),a.toggleActive(c)}),b.$on("$destroy",function(){a.unregister(c)})}],template:"
    \n {{dropdownModel[labelField]}}\n \n
    "}}]).directive("dropdownSelectItem",[function(){return{require:"^dropdownSelect",replace:!0,scope:{dropdownItemLabel:"=",dropdownSelectItem:"="},link:function(a,b,c,d){a.selectItem=function(){a.dropdownSelectItem.href||d.select(a.dropdownSelectItem)}},template:"
  • \n \n {{dropdownSelectItem[dropdownItemLabel]}}\n \n
    • "}}]).directive("dropdownMenu",["$parse","$compile","DropdownService",function(a,b,c){var d;return d="",{restrict:"A",replace:!1,scope:{dropdownMenu:"=",dropdownModel:"=",dropdownOnchange:"&"},controller:["$scope","$element","$attrs",function(a,e,f){var g,h,i;a.labelField=null!=f.dropdownItemLabel?f.dropdownItemLabel:"text",g=angular.element(d),g.data("$dropdownMenuController",this),i=b(g)(a),h=angular.element("
    "),e.replaceWith(h),h.append(e),h.append(i),c.register(i),this.select=function(b){b!==a.dropdownModel&&angular.copy(b,a.dropdownModel),a.dropdownOnchange({selected:b})},e.bind("click",function(a){a.stopPropagation(),c.toggleActive(i)}),a.$on("$destroy",function(){c.unregister(i)})}]}}]).directive("dropdownMenuItem",[function(){return{require:"^dropdownMenu",replace:!0,scope:{dropdownMenuItem:"=",dropdownItemLabel:"="},link:function(a,b,c,d){a.selectItem=function(){a.dropdownMenuItem.href||d.select(a.dropdownMenuItem)}},template:"
  • \n \n {{dropdownMenuItem[dropdownItemLabel]}}\n \n
    • "}}]).factory("DropdownService",["$document",function(a){var b,c,d;return c={},d=[],b=a.find("body"),b.bind("click",function(){return angular.forEach(d,function(a){a.removeClass("active")})}),c.register=function(a){d.push(a)},c.unregister=function(a){var b;b=d.indexOf(a),b>-1&&d.splice(b,-1)},c.toggleActive=function(a){angular.forEach(d,function(b){b!==a&&b.removeClass("active")}),a.toggleClass("active")},c}]); \ No newline at end of file diff --git a/index.html b/index.html index 508e95b..741d4b5 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + diff --git a/package.json b/package.json index 96abb31..2ce8f83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-dropdowns", - "version": "0.0.0", + "version": "0.2.0", "author": { "name": "James Seppi", "url": "http://www.github.com/jseppi" diff --git a/scripts/dropdowns.js b/scripts/dropdowns.js index e2a9d58..e9649e0 100644 --- a/scripts/dropdowns.js +++ b/scripts/dropdowns.js @@ -1,5 +1,5 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ - '$document', function($document) { + 'DropdownService', function(DropdownService) { return { restrict: 'A', replace: true, @@ -10,8 +10,8 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ }, controller: [ '$scope', '$element', '$attrs', function($scope, $element, $attrs) { - var body; $scope.labelField = $attrs.dropdownItemLabel != null ? $attrs.dropdownItemLabel : 'text'; + DropdownService.register($element); this.select = function(selected) { if (selected !== $scope.dropdownModel) { angular.copy(selected, $scope.dropdownModel); @@ -20,13 +20,12 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ selected: selected }); }; - body = $document.find("body"); - body.bind("click", function() { - $element.removeClass('active'); - }); $element.bind('click', function(event) { event.stopPropagation(); - $element.toggleClass('active'); + DropdownService.toggleActive($element); + }); + $scope.$on('$destroy', function() { + DropdownService.unregister($element); }); } ], @@ -54,7 +53,7 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ }; } ]).directive('dropdownMenu', [ - '$parse', '$compile', '$document', function($parse, $compile, $document) { + '$parse', '$compile', 'DropdownService', function($parse, $compile, DropdownService) { var template; template = ""; return { @@ -67,7 +66,7 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ }, controller: [ '$scope', '$element', '$attrs', function($scope, $element, $attrs) { - var $template, $wrap, body, tpl; + var $template, $wrap, tpl; $scope.labelField = $attrs.dropdownItemLabel != null ? $attrs.dropdownItemLabel : 'text'; $template = angular.element(template); $template.data('$dropdownMenuController', this); @@ -76,6 +75,7 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ $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); @@ -84,13 +84,12 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ selected: selected }); }; - body = $document.find("body"); - body.bind("click", function() { - tpl.removeClass('active'); - }); $element.bind("click", function(event) { event.stopPropagation(); - tpl.toggleClass('active'); + DropdownService.toggleActive(tpl); + }); + $scope.$on('$destroy', function() { + DropdownService.unregister(tpl); }); } ] @@ -116,4 +115,35 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [ template: "
  • \n \n {{dropdownMenuItem[dropdownItemLabel]}}\n \n
    • " }; } +]).factory('DropdownService', [ + '$document', function($document) { + var body, service, _dropdowns; + service = {}; + _dropdowns = []; + body = $document.find('body'); + 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; + } ]); diff --git a/src/dropdowns.coffee b/src/dropdowns.coffee index 892d8af..de96d32 100644 --- a/src/dropdowns.coffee +++ b/src/dropdowns.coffee @@ -1,5 +1,5 @@ angular.module('ngDropdowns', []) -.directive('dropdownSelect', ['$document', ($document) -> +.directive('dropdownSelect', ['DropdownService', (DropdownService) -> return { restrict: 'A' replace: true @@ -12,21 +12,22 @@ angular.module('ngDropdowns', []) $scope.labelField = if $attrs.dropdownItemLabel? then $attrs.dropdownItemLabel else 'text' + DropdownService.register($element) + this.select = (selected) -> if selected != $scope.dropdownModel angular.copy(selected, $scope.dropdownModel) $scope.dropdownOnchange({ selected: selected }) return - body = $document.find("body") - body.bind("click", () -> - $element.removeClass('active') + $element.bind('click', (event) -> + event.stopPropagation() + DropdownService.toggleActive($element) return ) - $element.bind('click', (event) -> - event.stopPropagation() - $element.toggleClass('active') + $scope.$on('$destroy', () -> + DropdownService.unregister($element) return ) @@ -77,7 +78,7 @@ angular.module('ngDropdowns', []) } ]) -.directive('dropdownMenu', ['$parse', '$compile', '$document', ($parse, $compile, $document) -> +.directive('dropdownMenu', ['$parse', '$compile', 'DropdownService', ($parse, $compile, DropdownService) -> template = """