Skip to content

Commit c1c64ff

Browse files
jspdownjspdown
committed
Merge pull request #43 from dszczyt/master
Checkbox code refactoring
2 parents 2795554 + 14b22ec commit c1c64ff

10 files changed

+145
-190
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@
3232
],
3333
"dependencies": {
3434
"angular": "latest",
35-
"angular-mocks" : "latest",
3635
"semantic": "latest"
3736
},
3837
"devDependencies": {
38+
"angular-mocks" : "latest"
3939
}
4040
}

‎dist/angular-semantic-ui.js

+21-86
Original file line numberDiff line numberDiff line change
@@ -135,105 +135,40 @@ angular.module('angularify.semantic.accordion', [])
135135
'use strict';
136136

137137
angular.module('angularify.semantic.checkbox', [])
138-
139138
.directive('checkbox', function() {
140139
return {
141140
restrict: 'E',
142141
replace: true,
143142
transclude: true,
144143
scope: {
145-
type: "@",
146-
size: "@",
147-
checked: "@",
148-
disabled: "@",
149-
model: '=ngModel'
144+
checked: '&?',
145+
disabled: '&?',
146+
ngModel: '=ngModel'
150147
},
151-
template: "<div class=\"{{checkbox_class}}\">" +
152-
"<input type=\"checkbox\">" +
153-
"<label ng-click=\"click_on_checkbox()\" ng-transclude></label>" +
154-
"</div>",
155-
link: function(scope, element, attrs, ngModel) {
148+
controller: function() {
149+
var vm = this;
156150

157-
//
158-
// set up checkbox class and type
159-
//
160-
if (scope.type == 'standard' || scope.type === undefined) {
161-
scope.type = 'standard';
162-
scope.checkbox_class = 'ui checkbox';
163-
} else if (scope.type == 'slider') {
164-
scope.type = 'slider';
165-
scope.checkbox_class = 'ui slider checkbox';
166-
} else if (scope.type == 'toggle') {
167-
scope.type = 'toggle';
168-
scope.checkbox_class = 'ui toggle checkbox';
169-
} else {
170-
scope.type = 'standard';
171-
scope.checkbox_class = 'ui checkbox';
172-
}
173-
174-
//
175-
// set checkbox size
176-
//
177-
if (scope.size == 'large') {
178-
scope.checkbox_class = scope.checkbox_class + ' large';
179-
} else if (scope.size == 'huge') {
180-
scope.checkbox_class = scope.checkbox_class + ' huge';
181-
}
151+
// TODO: assert this is usefull ?
152+
// if(angular.isUndefined(vm.ngModel)) { vm.ngModel = !!vm.ngModel; }
182153

183-
//
184-
// set checked/unchecked
185-
//
186-
if (scope.checked == 'false' || scope.checked === undefined) {
187-
scope.checked = false;
188-
} else {
189-
scope.checked = true;
190-
element.children()[0].setAttribute('checked', '');
191-
}
154+
if(angular.isFunction(vm.checked)) { vm.ngModel = !!vm.checked(); }
192155

193-
//
194-
// check if the parameter disabled is available
195-
//
196-
if (scope.disabled == 'disabled') {
197-
scope.checkbox_class += ' disabled';
156+
vm.toggle = function() {
157+
if(angular.isFunction(vm.disabled) && vm.disabled()) return;
158+
vm.ngModel = !vm.ngModel;
198159
}
199-
200-
//
201-
// Click handler
202-
//
203-
element.bind('click', function() {
204-
scope.$apply(function() {
205-
if (scope.disabled === undefined) {
206-
if (scope.checked === true) {
207-
scope.checked = true;
208-
scope.model = false;
209-
element.children()[0].removeAttribute('checked');
210-
} else {
211-
scope.checked = true;
212-
scope.model = true;
213-
element.children()[0].setAttribute('checked', 'true');
214-
}
215-
}
216-
});
217-
});
218-
219-
//
220-
// Watch for ng-model
221-
//
222-
scope.$watch('model', function(val) {
223-
if (val === undefined)
224-
return;
225-
226-
if (val === true) {
227-
scope.checked = true;
228-
element.children()[0].setAttribute('checked', 'true');
229-
} else {
230-
scope.checked = false;
231-
element.children()[0].removeAttribute('checked');
232-
}
233-
});
234-
}
160+
},
161+
controllerAs: 'vm',
162+
bindToController: true,
163+
require: 'ngModel',
164+
template: '<div class="ui checkbox">' +
165+
'<input type="checkbox" ng-model="vm.ngModel" ng-disabled="vm.disabled()"/>' +
166+
'<label ng-click="vm.toggle()" ng-transclude></label>' +
167+
'</div>',
168+
link: function() { }
235169
};
236170
});
171+
237172
'use strict';
238173

239174
angular.module('angularify.semantic.dimmer', [])

‎dist/angular-semantic-ui.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎karma.conf.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,4 @@ logLevel = LOG_INFO
2828

2929
autoWatch = false;
3030

31-
singleRun = false;
31+
singleRun = false;

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,4 @@
4040
"semver": "~2.2.0",
4141
"shelljs": "~0.2.0"
4242
}
43-
}
43+
}

‎src/checkbox/README.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ Usage
2020

2121
`checkbox` - can have following properties:
2222

23-
* `type`: - `standard` || `slider` || `toggle` || `undefined` - the type of checkbox;
24-
* `size`: - `large` || `huge` || `undefined` - the size of the current checkbox;
23+
* `class / ng-class`: - `standard` || `slider` || `toggle` || `large` || `huge` || `undefined` - the style of checkbox;
2524
* `checked` - `true` || `false`, checked checkbox or not;
2625
- `disabled` - `disabled`, optional if the checkbox is disabled or not;
2726
* `ng-model` - angular model.

‎src/checkbox/checkbox.js

+21-87
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,36 @@
11
'use strict';
22

33
angular.module('angularify.semantic.checkbox', [])
4-
54
.directive('checkbox', function() {
65
return {
76
restrict: 'E',
87
replace: true,
98
transclude: true,
109
scope: {
11-
type: "@",
12-
size: "@",
13-
checked: "@",
14-
disabled: "@",
15-
model: '=ngModel'
10+
checked: '&?',
11+
disabled: '&?',
12+
ngModel: '=ngModel'
1613
},
17-
template: "<div class=\"{{checkbox_class}}\">" +
18-
"<input type=\"checkbox\">" +
19-
"<label ng-click=\"click_on_checkbox()\" ng-transclude></label>" +
20-
"</div>",
21-
link: function(scope, element, attrs, ngModel) {
14+
controller: function() {
15+
var vm = this;
2216

23-
//
24-
// set up checkbox class and type
25-
//
26-
if (scope.type == 'standard' || scope.type === undefined) {
27-
scope.type = 'standard';
28-
scope.checkbox_class = 'ui checkbox';
29-
} else if (scope.type == 'slider') {
30-
scope.type = 'slider';
31-
scope.checkbox_class = 'ui slider checkbox';
32-
} else if (scope.type == 'toggle') {
33-
scope.type = 'toggle';
34-
scope.checkbox_class = 'ui toggle checkbox';
35-
} else {
36-
scope.type = 'standard';
37-
scope.checkbox_class = 'ui checkbox';
38-
}
17+
// TODO: assert this is usefull ?
18+
// if(angular.isUndefined(vm.ngModel)) { vm.ngModel = !!vm.ngModel; }
3919

40-
//
41-
// set checkbox size
42-
//
43-
if (scope.size == 'large') {
44-
scope.checkbox_class = scope.checkbox_class + ' large';
45-
} else if (scope.size == 'huge') {
46-
scope.checkbox_class = scope.checkbox_class + ' huge';
47-
}
48-
49-
//
50-
// set checked/unchecked
51-
//
52-
if (scope.checked == 'false' || scope.checked === undefined) {
53-
scope.checked = false;
54-
} else {
55-
scope.checked = true;
56-
element.children()[0].setAttribute('checked', '');
57-
}
20+
if(angular.isFunction(vm.checked)) { vm.ngModel = !!vm.checked(); }
5821

59-
//
60-
// check if the parameter disabled is available
61-
//
62-
if (scope.disabled == 'disabled') {
63-
scope.checkbox_class += ' disabled';
22+
vm.toggle = function() {
23+
if(angular.isFunction(vm.disabled) && vm.disabled()) return;
24+
vm.ngModel = !vm.ngModel;
6425
}
65-
66-
//
67-
// Click handler
68-
//
69-
element.bind('click', function() {
70-
scope.$apply(function() {
71-
if (scope.disabled === undefined) {
72-
if (scope.checked === true) {
73-
scope.checked = true;
74-
scope.model = false;
75-
element.children()[0].removeAttribute('checked');
76-
} else {
77-
scope.checked = true;
78-
scope.model = true;
79-
element.children()[0].setAttribute('checked', 'true');
80-
}
81-
}
82-
});
83-
});
84-
85-
//
86-
// Watch for ng-model
87-
//
88-
scope.$watch('model', function(val) {
89-
if (val === undefined)
90-
return;
91-
92-
if (val === true) {
93-
scope.checked = true;
94-
element.children()[0].setAttribute('checked', 'true');
95-
} else {
96-
scope.checked = false;
97-
element.children()[0].removeAttribute('checked');
98-
}
99-
});
100-
}
26+
},
27+
controllerAs: 'vm',
28+
bindToController: true,
29+
require: 'ngModel',
30+
template: '<div class="ui checkbox">' +
31+
'<input type="checkbox" ng-model="vm.ngModel" ng-disabled="vm.disabled()"/>' +
32+
'<label ng-click="vm.toggle()" ng-transclude></label>' +
33+
'</div>',
34+
link: function() { }
10135
};
102-
});
36+
});

‎src/checkbox/docs/controllers.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
var checkBoxApp = angular.module('checkBoxApp', ['angularify.semantic.checkbox']);
22

3-
function RootCtrl ($scope) {
4-
5-
}
3+
checkBoxApp.controller('RootCtrl', function() { });
64

‎src/checkbox/docs/demo.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="utf-8" />
66
<title>Semantic UI + Angular.JS</title>
7-
<link href="../../../bower_components/semantic/build/packaged/css/semantic.min.css" rel="stylesheet" type="text/css" />
7+
<link href="../../../bower_components/semantic/dist/semantic.min.css" rel="stylesheet" type="text/css" />
88
</head>
99

1010
<body ng-controller="RootCtrl">
@@ -14,7 +14,7 @@
1414
<br/>
1515
<checkbox ng-model="cc">User</checkbox>
1616
<br/>
17-
<checkbox disabled="disabled" ng-model="dd">User</checkbox>
17+
<checkbox disabled="true" ng-model="dd">User</checkbox>
1818

1919
<script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
2020
<script src="../../angularify.semantic.js" type="text/javascript"></script>
@@ -23,4 +23,4 @@
2323

2424
</body>
2525

26-
</html>
26+
</html>

0 commit comments

Comments
 (0)