Skip to content

Commit f6aa052

Browse files
0xAX0xAX
committed
Merge pull request #17 from jspdown/master
Make dropdown openable
2 parents dbb2aff + b08bcda commit f6aa052

File tree

4 files changed

+83
-54
lines changed

4 files changed

+83
-54
lines changed

‎src/dropdown/docs/controllers.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
1-
var dropdownApp = angular.module('dropdownApp', ['angularify.semantic.dropdown']);
1+
2+
angular
3+
.module('dropdownApp', ['angularify.semantic.dropdown'])
4+
.controller('RootCtrl', RootCtrl);
25

36
function RootCtrl ($scope) {
47
$scope.dropdown_model = 'item3';
8+
9+
$scope.dropdown_repeat_model = 'item1';
10+
$scope.dropdown_items = [
11+
'item1',
12+
'item2',
13+
'item3',
14+
'item4'
15+
];
516
}
617

‎src/dropdown/docs/demo.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,33 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>Semantic UI + Angular.JS</title>
6-
<link href="../../../bower_components/semantic/build/packaged/css/semantic.min.css" rel="stylesheet" type="text/css" />
6+
<link href="../../../bower_components/semantic/dist/semantic.min.css" rel="stylesheet" type="text/css" />
77
</head>
88
<body ng-controller="RootCtrl">
9-
<dropdown title="my dropdown" ng-model="dropdown_model" open="true">
9+
<h2>Basic</h2>
10+
11+
<dropdown title="my dropdown" ng-model="dropdown_model" open="false">
1012
<dropdown-group>item1</dropdown-group>
1113
<dropdown-group>item2</dropdown-group>
1214
<dropdown-group>item3</dropdown-group>
1315
<dropdown-group>item4</dropdown-group>
1416
</dropdown>
17+
18+
<p class="ui info message">
19+
Current selection is: {{ dropdown_model }}
20+
</p>
21+
22+
<h2>With ng-repeat</h2>
23+
24+
<dropdown title="my dropdown" ng-model="dropdown_repeat_model" open="false">
25+
<dropdown-group title="item" ng-repeat="item in dropdown_items">{{ item }}</dropdown-group>
26+
</dropdown>
27+
28+
<p class="ui info message">
29+
Current selection is: {{ dropdown_repeat_model }}
30+
</p>
1531
<script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
16-
<script src="../../angularify.semantic.js" type="text/javascript"></script>
1732
<script src="../dropdown.js" type="text/javascript"></script>
1833
<script src="controllers.js" type="text/javascript"></script>
1934
</body>
20-
</html>
35+
</html>

‎src/dropdown/dropdown.js‎

Lines changed: 49 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
'use strict';
22

3-
angular.module('angularify.semantic.dropdown', ['ngSanitize'])
3+
angular.module('angularify.semantic.dropdown', [])
44
.controller('DropDownController', ['$scope',
5-
function($scope) {
5+
function ($scope) {
66
$scope.items = [];
77

8-
this.add_item = function(scope) {
8+
this.add_item = function (scope) {
99
$scope.items.push(scope);
1010

1111
scope.$on('$destroy', function(event) {
@@ -15,23 +15,22 @@ angular.module('angularify.semantic.dropdown', ['ngSanitize'])
1515
return $scope.items;
1616
};
1717

18-
this.remove_item = function(scope) {
18+
this.remove_item = function (scope) {
1919
var index = $scope.items.indexOf(scope);
2020
if (index !== -1)
2121
$scope.items.splice(index, 1);
2222
};
2323

24-
this.update_title = function(title) {
25-
var i = 0;
26-
for (i in $scope.items) {
24+
this.update_title = function (title) {
25+
for (var i in $scope.items) {
2726
$scope.items[i].title = title;
2827
}
2928
};
3029

3130
}
3231
])
3332

34-
.directive('dropdown', function() {
33+
.directive('dropdown', function () {
3534
return {
3635
restrict: 'E',
3736
replace: true,
@@ -42,63 +41,69 @@ angular.module('angularify.semantic.dropdown', ['ngSanitize'])
4241
open: '@',
4342
model: '=ngModel'
4443
},
45-
template: '<div class="{{dropdown_class}}">' + '<div class="default text">{{title}}</div>' + '<i class="dropdown icon"></i>' + '<div class="menu" ng-transclude>' + '</div>' + '</div>',
46-
link: function(scope, element, attrs, DropDownController) {
44+
template: '<div class="{{ dropdown_class }}">' +
45+
'<div class="default text">{{ title }}</div>' +
46+
'<i class="dropdown icon"></i>' +
47+
'<div class="{{ menu_class }}" ng-transclude>' +
48+
'</div>' +
49+
'</div>',
50+
link: function (scope, element, attrs, DropDownController) {
4751
scope.dropdown_class = 'ui selection dropdown';
52+
scope.menu_class = 'menu transition hidden';
53+
scope.original_title = scope.title;
4854

4955
if (scope.open === 'true') {
50-
scope.open = true;
56+
scope.is_open = true;
5157
scope.dropdown_class = scope.dropdown_class + ' active visible';
58+
scope.menu_class = scope.menu_class + ' visible';
5259
} else {
53-
scope.open = false;
60+
scope.is_open = false;
5461
}
5562
DropDownController.add_item(scope);
5663

57-
//
58-
// Watch for title changing
59-
//
60-
scope.$watch('title', function(val) {
61-
if (val === undefined)
62-
return;
63-
64-
if (val === scope.title)
64+
/*
65+
* Watch for title changing
66+
*/
67+
scope.$watch('title', function (val, oldVal) {
68+
if (val === undefined || val === oldVal || val === scope.original_title)
6569
return;
6670

6771
scope.model = val;
6872
});
6973

70-
//
71-
// Watch for ng-model changing
72-
//
73-
scope.$watch('model', function(val) {
74-
// update title
74+
/*
75+
* Watch for ng-model changing
76+
*/
77+
scope.$watch('model', function (val) {
78+
// update title or reset the original title if its empty
7579
scope.model = val;
76-
DropDownController.update_title(val);
80+
DropDownController.update_title(val || scope.original_title);
7781
});
7882

79-
//
80-
// Click handler
81-
//
82-
element.bind('click', function() {
83-
84-
if (scope.open === false) {
85-
scope.open = true;
86-
scope.$apply(function() {
83+
/*
84+
* Click handler
85+
*/
86+
element.bind('click', function () {
87+
if (scope.is_open === false) {
88+
scope.$apply(function () {
8789
scope.dropdown_class = 'ui selection dropdown active visible';
90+
scope.menu_class = 'menu transition visible';
8891
});
8992
} else {
90-
scope.open = false;
91-
scope.model = scope.title
92-
scope.$apply(function() {
93+
if (scope.title !== scope.original_title)
94+
scope.model = scope.title;
95+
scope.$apply(function () {
9396
scope.dropdown_class = 'ui selection dropdown';
97+
scope.menu_class = 'menu transition hidden';
9498
});
9599
}
100+
scope.is_open =! scope.is_open;
96101
});
97102
}
98103
};
99104
})
100105

101-
.directive('dropdownGroup', function() {
106+
.directive('dropdownGroup', function () {
102107
return {
103108
restrict: 'AE',
104109
replace: true,
@@ -107,24 +112,22 @@ angular.module('angularify.semantic.dropdown', ['ngSanitize'])
107112
scope: {
108113
title: '=title'
109114
},
110-
template: '<div class="item" ng-transclude >{{title}}</div>',
111-
link: function(scope, element, attrs, DropDownController) {
115+
template: '<div class="item" ng-transclude >{{ item_title }}</div>',
116+
link: function (scope, element, attrs, DropDownController) {
112117

113118
// Check if title= was set... if not take the contents of the dropdown-group tag
114119
// title= is for dynamic variables from something like ng-repeat {{variable}}
115-
var title;
116120
if (scope.title === undefined) {
117-
title = scope.title;
121+
scope.item_title = element.children()[0].innerHTML;
118122
} else {
119-
title = element.children()[0].innerHTML;
123+
scope.item_title = scope.title;
120124
}
121125

122126
//
123127
// Menu item click handler
124128
//
125-
element.bind('click', function() {
126-
127-
DropDownController.update_title(scope.title);
129+
element.bind('click', function () {
130+
DropDownController.update_title(scope.item_title);
128131
});
129132
}
130133
};

‎src/dropdown/test/dropdown.spec.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ describe('dropdown', function () {
99

1010
describe('controller', function () {
1111
var ctrl, $element, $attrs;
12-
12+
1313
beforeEach(inject(function($controller) {
1414
$attrs = {}; $element = {};
1515
ctrl = $controller('DropDownController', { $scope: $scope });
@@ -41,6 +41,6 @@ describe('dropdown', function () {
4141
ctrl.update_title('title');
4242
expect(scope.title).toBe('title');
4343
})
44-
});
44+
});
4545
});
46-
});
46+
});

0 commit comments

Comments
 (0)