Skip to content

Commit

Permalink
have only one dropdown open at a time, fix #8
Browse files Browse the repository at this point in the history
  • Loading branch information
@jseppi
jseppi committed Aug 25, 2014
1 parent aeb529d commit 5f3a975
Show file tree
Hide file tree
Showing 7 changed files with 139 additions and 47 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
58 changes: 44 additions & 14 deletions dist/angular-dropdowns.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
angular.module('ngDropdowns', []).directive('dropdownSelect', [
'$document', function($document) {
'DropdownService', function(DropdownService) {
return {
restrict: 'A',
replace: true,
Expand All @@ -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);
Expand All @@ -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);
});
}
],
Expand Down Expand Up @@ -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 = "<ul class='dropdown'>\n <li ng-repeat='item in dropdownMenu'\n class='dropdown-item'\n dropdown-item-label='labelField'\n dropdown-menu-item='item'>\n </li>\n</ul>";
return {
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
});
}
]
Expand All @@ -116,4 +115,35 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [
template: "<li ng-class='{divider: dropdownMenuItem.divider}'>\n <a href='' class='dropdown-item'\n ng-if='!dropdownMenuItem.divider'\n ng-href='{{dropdownMenuItem.href}}'\n ng-click='selectItem()'>\n {{dropdownMenuItem[dropdownItemLabel]}}\n </a>\n</li>"
};
}
]).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;
}
]);
2 changes: 1 addition & 1 deletion dist/angular-dropdowns.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<link rel="stylesheet" href="css/dropdowns.css">
<link rel="stylesheet" href="css/page.css">
<script type="text/javascript" src="lib/angular-1.1.5/angular.js"></script>
<script type="text/javascript" src="dist/angular-dropdowns.min.js"></script>
<script type="text/javascript" src="scripts/dropdowns.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</head>
<body ng-app="app" style="margin-top:50px;">
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
58 changes: 44 additions & 14 deletions scripts/dropdowns.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
angular.module('ngDropdowns', []).directive('dropdownSelect', [
'$document', function($document) {
'DropdownService', function(DropdownService) {
return {
restrict: 'A',
replace: true,
Expand All @@ -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);
Expand All @@ -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);
});
}
],
Expand Down Expand Up @@ -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 = "<ul class='dropdown'>\n <li ng-repeat='item in dropdownMenu'\n class='dropdown-item'\n dropdown-item-label='labelField'\n dropdown-menu-item='item'>\n </li>\n</ul>";
return {
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
});
}
]
Expand All @@ -116,4 +115,35 @@ angular.module('ngDropdowns', []).directive('dropdownSelect', [
template: "<li ng-class='{divider: dropdownMenuItem.divider}'>\n <a href='' class='dropdown-item'\n ng-if='!dropdownMenuItem.divider'\n ng-href='{{dropdownMenuItem.href}}'\n ng-click='selectItem()'>\n {{dropdownMenuItem[dropdownItemLabel]}}\n </a>\n</li>"
};
}
]).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;
}
]);
62 changes: 47 additions & 15 deletions src/dropdowns.coffee
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
angular.module('ngDropdowns', [])
.directive('dropdownSelect', ['$document', ($document) ->
.directive('dropdownSelect', ['DropdownService', (DropdownService) ->
return {
restrict: 'A'
replace: true
Expand All @@ -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
)

Expand Down Expand Up @@ -77,7 +78,7 @@ angular.module('ngDropdowns', [])
}

])
.directive('dropdownMenu', ['$parse', '$compile', '$document', ($parse, $compile, $document) ->
.directive('dropdownMenu', ['$parse', '$compile', 'DropdownService', ($parse, $compile, DropdownService) ->

template = """
<ul class='dropdown'>
Expand All @@ -98,7 +99,6 @@ angular.module('ngDropdowns', [])
dropdownOnchange: '&'

controller: ['$scope', '$element', '$attrs', ($scope, $element, $attrs) ->

$scope.labelField = if $attrs.dropdownItemLabel? then $attrs.dropdownItemLabel else 'text'

$template = angular.element(template)
Expand All @@ -115,21 +115,22 @@ angular.module('ngDropdowns', [])
$wrap.append($element)
$wrap.append(tpl)

DropdownService.register(tpl)

this.select = (selected) ->
if selected != $scope.dropdownModel
angular.copy(selected, $scope.dropdownModel)
$scope.dropdownOnchange({ selected: selected })
return

body = $document.find("body")
body.bind("click", () ->
tpl.removeClass('active')
$element.bind("click", (event) ->
event.stopPropagation()
DropdownService.toggleActive(tpl)
return
)

$element.bind("click", (event) ->
event.stopPropagation()
tpl.toggleClass('active')
$scope.$on('$destroy', () ->
DropdownService.unregister(tpl)
return
)

Expand Down Expand Up @@ -164,5 +165,36 @@ angular.module('ngDropdowns', [])
</a>
</li>"""
}
])
.factory('DropdownService', ['$document', ($document) ->
service = {}

_dropdowns = []

body = $document.find('body')
body.bind('click', () ->
angular.forEach(_dropdowns, (el) ->
el.removeClass('active')
return
)
)

service.register = (ddEl) ->
_dropdowns.push ddEl
return

service.unregister = (ddEl) ->
index = _dropdowns.indexOf(ddEl)
_dropdowns.splice(index, -1) if index > -1
return

service.toggleActive = (ddEl) ->
angular.forEach(_dropdowns, (el) ->
el.removeClass('active') if el isnt ddEl
return
)
ddEl.toggleClass('active')
return

return service
])

0 comments on commit 5f3a975

Please sign in to comment.