Skip to content

Commit 42d7d2b

Browse files
author
0xAX
committed
modal directive added
1 parent 0c107c1 commit 42d7d2b

File tree

8 files changed

+159
-2
lines changed

8 files changed

+159
-2
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Directives
1010
* [checkbox](https://github.com/angularify/angular-semantic-ui/tree/master/src/checkbox)
1111
* [dimmer](https://github.com/angularify/angular-semantic-ui/tree/master/src/dimmer)
1212
* [dropdown](https://github.com/angularify/angular-semantic-ui/tree/master/src/dropdown)
13+
* [modal](https://github.com/angularify/angular-semantic-ui/tree/master/src/modal)
1314

1415
Building
1516
----------------------

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/angularify.semantic.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
angular.module('angularify.semantic', ['angularify.semantic.accordion',
22
'angularify.semantic.checkbox',
33
'angularify.semantic.dimmer',
4-
'angularify.semantic.dropdown']);
4+
'angularify.semantic.dropdown',
5+
'angularify.semantic.modal']);

‎src/modal/README.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
angularify.semantic.modal
2+
===============================
3+
4+
`angularify.semantic.modal` - modal window directive for angular.js.
5+
6+
Usage
7+
-------------------------------
8+
9+
```html
10+
<modal ng-model="show_modal">
11+
<i class="close icon" ng-click="close_modal()"></i>
12+
<div class="header">
13+
Change Your Homepage
14+
</div>
15+
<div class="content">
16+
<div class="left">
17+
<i class="home icon"></i>
18+
</div>
19+
<div class="right">
20+
<p>Are you sure you want to change your homepage to <b>Poodle.com</b>?</p>
21+
</div>
22+
</div>
23+
<div class="actions">
24+
<div class="two fluid ui buttons">
25+
<div class="ui negative labeled icon button">
26+
<i class="remove icon"></i>
27+
No
28+
</div>
29+
<div class="ui positive right labeled icon button">
30+
Yes
31+
<i class="checkmark icon"></i>
32+
</div>
33+
</div>
34+
</div>
35+
</modal>
36+
```
37+
38+
and js:
39+
40+
```javascript
41+
function RootCtrl ($scope) {
42+
$scope.show_modal = true;
43+
44+
$scope.close_modal = function(){
45+
$scope.show_modal = false;
46+
}
47+
}
48+
```
49+
50+
Contribution
51+
-------------------------------
52+
53+
1. Fork main [repository](https://github.com/angularify/angular-semantic-ui).
54+
2. Make changes.
55+
3. Create issue.
56+
4. Send pull request.
57+
5. Thank you.
58+
59+
TODO
60+
-------------------------------
61+
62+
1. Add different dropdown types.

‎src/modal/docs/controllers.js‎

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

‎src/modal/docs/demo.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE HTML>
2+
<html ng-app="modalApp">
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+
<modal ng-model="show_modal">
10+
<i class="close icon" ng-click="close_modal()"></i>
11+
<div class="header">
12+
Change Your Homepage
13+
</div>
14+
<div class="content">
15+
<div class="left">
16+
<i class="home icon"></i>
17+
</div>
18+
<div class="right">
19+
<p>Are you sure you want to change your homepage to <b>Poodle.com</b>?</p>
20+
</div>
21+
</div>
22+
<div class="actions">
23+
<div class="two fluid ui buttons">
24+
<div class="ui negative labeled icon button">
25+
<i class="remove icon"></i>
26+
No
27+
</div>
28+
<div class="ui positive right labeled icon button">
29+
Yes
30+
<i class="checkmark icon"></i>
31+
</div>
32+
</div>
33+
</div>
34+
</modal>
35+
<script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
36+
<script src="../../angularify.semantic.js" type="text/javascript"></script>
37+
<script src="../modal.js" type="text/javascript"></script>
38+
<script src="controllers.js" type="text/javascript"></script>
39+
</body>
40+
</html>

‎src/modal/modal.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
'use strict';
2+
3+
angular.module('angularify.semantic.modal', [])
4+
5+
.directive('modal', function () {
6+
return {
7+
restrict: "E",
8+
replace: true,
9+
transclude: true,
10+
scope: {
11+
model: '=ngModel'
12+
},
13+
template: "<div class=\"{{ modal_class }}\">" +
14+
"<div class=\"ui test modal transition visible active\" style=\"margin-top: -189px;\" ng-transclude>" +
15+
"</div>" +
16+
"</div>",
17+
link: function (scope, element, attrs) {
18+
if (scope.model == true) {
19+
scope.modal_class = 'ui dimmer page active';
20+
} else{
21+
scope.model = false;
22+
scope.modal_class = 'ui dimmer page';
23+
}
24+
25+
scope.$watch('model', function (val) {
26+
if (scope.model == true) {
27+
scope.modal_class = 'ui dimmer page active';
28+
} else{
29+
scope.model = false;
30+
scope.modal_class = 'ui dimmer page';
31+
}
32+
});
33+
}
34+
}
35+
});

‎src/modal/test/modal.spec.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
describe('modal', function () {
2+
var $scope;
3+
4+
beforeEach(module('angularify.semantic.modal'));
5+
6+
beforeEach(inject(function ($rootScope) {
7+
$scope = $rootScope;
8+
}));
9+
});

0 commit comments

Comments
 (0)