Skip to content

Commit fbaeecf

Browse files
author
0xAX
committed
dimmer added
1 parent e407774 commit fbaeecf

File tree

8 files changed

+125
-5
lines changed

8 files changed

+125
-5
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ Directives
88

99
* [accordion](https://github.com/angularify/angular-semantic-ui/tree/master/src/accordion)
1010
* [checkbox](https://github.com/angularify/angular-semantic-ui/tree/master/src/checkbox)
11+
* [dimmer](https://github.com/angularify/angular-semantic-ui/tree/master/src/dimmer)
1112

1213
Building
1314
----------------------

‎src/angularify.semantic.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
angular.module('angularify.semantic', [
2-
'angularify.semantic.accordion',
3-
'angularify.semantic.checkbox'
4-
]);
1+
angular.module('angularify.semantic', ['angularify.semantic.accordion',
2+
'angularify.semantic.checkbox',
3+
'angularify.semantic.dimmer']);

‎src/checkbox/checkbox.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ angular.module('angularify.semantic.checkbox', [])
77
restrict: 'E',
88
replace: true,
99
transclude: true,
10-
require:"ngModel",
1110
scope :{
1211
type: "@",
1312
size: "@",

‎src/dimmer/README.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
angularify.semantic.dimmer
2+
===============================
3+
4+
`angularify.semantic.dimmer` - dimmer directive for angular.js.
5+
6+
Usage
7+
-------------------------------
8+
9+
```html
10+
<div id="content">
11+
<page-dimmer ng-model="show_dimmer" show="true">Hello</page-dimmer>
12+
</div>
13+
14+
<div class="ui button" ng-click="dimmer()">
15+
Open dimmer
16+
</div>
17+
```
18+
19+
```javascript
20+
var dimmerApp = angular.module('dimmerApp', ['angularify.semantic.dimmer']);
21+
22+
function RootCtrl ($scope) {
23+
$scope.dimmer = function(){
24+
$scope.show_dimmer = true;
25+
}
26+
}
27+
```
28+
29+
Contribution
30+
-------------------------------
31+
32+
1. Fork main [repository](https://github.com/angularify/angular-semantic-ui).
33+
2. Make changes.
34+
3. Create issue.
35+
4. Send pull request.
36+
5. Thank you.
37+
38+
TODO
39+
-------------------------------
40+
41+
1. add duration;
42+
2. add animation;
43+
3. add different dimmer types.

‎src/dimmer/dimmer.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
'use strict';
2+
3+
angular.module('angularify.semantic.dimmer', [])
4+
5+
.directive("pageDimmer", function () {
6+
return {
7+
restrict: 'E',
8+
replace: true,
9+
transclude: true,
10+
scope : {
11+
show : "=?",
12+
model: '=ngModel'
13+
},
14+
template: "<div class=\"{{dimmer_class}}\" ng-click=\"click_on_dimmer()\">" +
15+
"<div class=\"content\">" +
16+
"<div class=\"center\" ng-transclude></div>" +
17+
"</div>" +
18+
"</div>",
19+
link : function(scope, element, attrs, ngModel) {
20+
21+
if (scope.show == false && scope.show == undefined){
22+
scope.show = false;
23+
scope.dimmer_class = 'ui page dimmer';
24+
}
25+
else if (scope.show == true) {
26+
scope.dimmer_class = 'ui page active dimmer';
27+
}
28+
29+
//
30+
// Click on dimmer handler
31+
//
32+
scope.click_on_dimmer = function(){
33+
scope.model = false;
34+
scope.dimmer_class = 'ui page dimmer';
35+
}
36+
37+
//
38+
// Watch for the ng-model changing
39+
//
40+
scope.$watch('model', function(val){
41+
if (val == false || val == undefined)
42+
return;
43+
else
44+
scope.dimmer_class = 'ui page active dimmer';
45+
});
46+
}
47+
};
48+
});

‎src/dimmer/docs/controllers.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
var dimmerApp = angular.module('dimmerApp', ['angularify.semantic.dimmer']);
2+
3+
function RootCtrl ($scope) {
4+
$scope.dimmer = function(){
5+
$scope.show_dimmer = true;
6+
}
7+
}
8+

‎src/dimmer/docs/demo.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE HTML>
2+
<html ng-app="dimmerApp">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Semantic UI + Angular.JS</title>
6+
<link href="../../../bower_components/semantic/build/packaged/css/semantic.min.css" rel="stylesheet" type="text/css" />
7+
</head>
8+
<body ng-controller="RootCtrl">
9+
<div id="content">
10+
<page-dimmer ng-model="show_dimmer" show="true">Hello</page-dimmer>
11+
</div>
12+
13+
<div class="ui button" ng-click="dimmer()">
14+
Open dimmer
15+
</div>
16+
17+
<script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
18+
<script src="../../angularify.semantic.js" type="text/javascript"></script>
19+
<script src="../dimmer.js" type="text/javascript"></script>
20+
<script src="controllers.js" type="text/javascript"></script>
21+
</body>
22+
</html>

‎src/dimmer/test/.gitkeep‎

Whitespace-only changes.

0 commit comments

Comments
 (0)