\
94 |
",
101 |
102 | link: function(scope, element, attrs, AccordionController) {
103 |
104 | // set up active
105 | scope.active = attrs.open === 'true';
106 |
107 | // Add the accordion to the controller
108 | AccordionController.add_accordion(scope);
109 |
110 | // Click handler
111 | scope.click_on_accordion_tab = function(){
112 |
113 | // class all first of all
114 | AccordionController.closeAll(scope);
115 |
116 | // Swap the active state
117 | scope.active = !scope.active;
118 |
119 | // Add animation to the accordion group content
120 | element.children().last().slideToggle();
121 | };
122 | }
123 | };
124 | });
--------------------------------------------------------------------------------
/src/accordion/docs/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/angularify/angular-semantic-ui/6ac38e0bc5c91b084fae8defecb9e3e9ed74c3a8/src/accordion/docs/.gitkeep
--------------------------------------------------------------------------------
/src/accordion/docs/controllers.js:
--------------------------------------------------------------------------------
1 | var App = angular.module('AccordionApp', ['angularify.semantic.accordion']);
2 |
3 | function RootCtrl ($scope) {
4 |
5 | }
--------------------------------------------------------------------------------
/src/accordion/docs/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | \
95 | \
96 | {{ title }} \
97 |
\
98 | \
99 |
\
100 | Some text in first tab
12 |Some text in second tab
15 |
11 | Alex
12 |
13 |0xAX
14 |
15 |User
16 |
17 |isActive
18 |
19 | ```
20 |
21 | `checkbox` - can have following properties:
22 |
23 | * `class / ng-class`: - `standard` || `slider` || `toggle` || `large` || `huge` || `undefined` - the style of checkbox;
24 | * `checked` - `true` || `false`, checked checkbox or not;
25 | - `disabled` - `disabled`, optional if the checkbox is disabled or not;
26 | * `ng-model` - angular model.
27 |
28 | Contribution
29 | -------------------------------
30 |
31 | 1. Fork main [repository](https://github.com/angularify/angular-semantic-ui).
32 | 2. Make changes.
33 | 3. Create issue.
34 | 4. Send pull request.
35 | 5. Thank you.
36 |
37 | TODO
38 | -------------------------------
39 |
40 | 1. Add radio-button.
41 |
--------------------------------------------------------------------------------
/src/checkbox/checkbox.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('angularify.semantic.checkbox', [])
4 | .directive('checkbox', function() {
5 | return {
6 | restrict: 'E',
7 | replace: true,
8 | transclude: true,
9 | scope: {
10 | checked: '&?',
11 | disabled: '&?',
12 | ngModel: '=ngModel'
13 | },
14 | controller: function() {
15 | var vm = this;
16 |
17 | // TODO: assert this is usefull ?
18 | // if(angular.isUndefined(vm.ngModel)) { vm.ngModel = !!vm.ngModel; }
19 |
20 | if(angular.isFunction(vm.checked)) { vm.ngModel = !!vm.checked(); }
21 |
22 | vm.toggle = function() {
23 | if(angular.isFunction(vm.disabled) && vm.disabled()) return;
24 | vm.ngModel = !vm.ngModel;
25 | }
26 | },
27 | controllerAs: 'vm',
28 | bindToController: true,
29 | require: 'ngModel',
30 | template: '13 |
15 |
17 |
' +
31 | '' +
32 | '' +
33 | '
',
34 | link: function() { }
35 | };
36 | });
37 |
--------------------------------------------------------------------------------
/src/checkbox/docs/controllers.js:
--------------------------------------------------------------------------------
1 | var checkBoxApp = angular.module('checkBoxApp', ['angularify.semantic.checkbox']);
2 |
3 | checkBoxApp.controller('RootCtrl', function() { });
4 |
5 |
--------------------------------------------------------------------------------
/src/checkbox/docs/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 13 |
15 |
17 |
11 | Hello
12 |
13 |
14 |
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 | `dimmer` - can have following attributes:
30 |
31 | * `ng-model` - angular model;
32 | * `show` - is current dimmer showed.
33 |
34 | Contribution
35 | -------------------------------
36 |
37 | 1. Fork main [repository](https://github.com/angularify/angular-semantic-ui).
38 | 2. Make changes.
39 | 3. Create issue.
40 | 4. Send pull request.
41 | 5. Thank you.
42 |
43 | TODO
44 | -------------------------------
45 |
46 | 1. add duration;
47 | 2. add animation;
48 | 3. add different dimmer types.
--------------------------------------------------------------------------------
/src/dimmer/dimmer.js:
--------------------------------------------------------------------------------
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: "" +
15 | "
",
19 | link : function(scope, element, attrs, ngModel) {
20 |
21 | if (scope.show == true) {
22 | scope.dimmer_class = 'ui page active dimmer';
23 | }
24 | else {
25 | scope.show = false;
26 | scope.dimmer_class = 'ui page disable 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 | scope.dimmer_class = 'ui page dimmer';
43 | else
44 | scope.dimmer_class = 'ui page active dimmer';
45 | });
46 | }
47 | };
48 | });
49 |
--------------------------------------------------------------------------------
/src/dimmer/docs/controllers.js:
--------------------------------------------------------------------------------
1 | var dimmerApp = angular.module('dimmerApp', ['angularify.semantic.dimmer']);
2 | dimmerApp.controller('RootCtrl', RootCtrl);
3 |
4 | function RootCtrl($scope) {
5 | $scope.dimmer = function(){
6 | $scope.show_dimmer = true;
7 | };
8 | }
--------------------------------------------------------------------------------
/src/dimmer/docs/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | " +
16 | "" +
17 | "
" +
18 | "
10 | Hello
11 |
12 |
13 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/dimmer/test/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/angularify/angular-semantic-ui/6ac38e0bc5c91b084fae8defecb9e3e9ed74c3a8/src/dimmer/test/.gitkeep
--------------------------------------------------------------------------------
/src/dropdown/README.md:
--------------------------------------------------------------------------------
1 | angularify.semantic.dropdown
2 | ===============================
3 |
4 | `angularify.semantic.dropdown` - dropdown directive for angular.js.
5 |
6 | Usage
7 | -------------------------------
8 |
9 | ```html
10 | Basic
10 | 11 |With ng-repeat
23 | 24 |With ng-repeat and key/value objects
33 | 34 |' +
63 | '
',
68 | link: function(scope, element, attrs, DropDownController) {
69 | scope.dropdown_class = 'ui selection dropdown';
70 | scope.menu_class = 'menu transition hidden';
71 | scope.text_class = 'default text';
72 | scope.original_title = scope.title;
73 |
74 | if (scope.open === 'true') {
75 | scope.is_open = true;
76 | scope.dropdown_class = scope.dropdown_class + ' active visible';
77 | scope.menu_class = scope.menu_class + ' visible';
78 | } else {
79 | scope.is_open = false;
80 | }
81 |
82 | /*
83 | * Watch for ng-model changing
84 | */
85 | scope.element = element;
86 | scope.$watch('model', function (value) {
87 | // update title or reset the original title if its empty
88 | DropDownController.update_title(value);
89 | });
90 |
91 | /*
92 | * Click handler
93 | */
94 | element.bind('click', function() {
95 | if (scope.is_open === false) {
96 | scope.$apply(function() {
97 | scope.dropdown_class = 'ui selection dropdown active visible';
98 | scope.menu_class = 'menu transition visible';
99 | });
100 | } else {
101 | scope.$apply(function() {
102 | scope.dropdown_class = 'ui selection dropdown';
103 | scope.menu_class = 'menu transition hidden';
104 | });
105 | }
106 | scope.is_open = !scope.is_open;
107 | });
108 | }
109 | };
110 | })
111 |
112 | .directive('dropdownGroup', function() {
113 | return {
114 | restrict: 'AE',
115 | replace: true,
116 | transclude: true,
117 | require: '^dropdown',
118 | scope: {
119 | title: '=title',
120 | value: '=value'
121 | },
122 | template: '{{ title }}
' +
64 | '' +
65 | '' +
67 | '{{ item_title }}
',
123 | link: function(scope, element, attrs, DropDownController) {
124 |
125 | // Check if title= was set... if not take the contents of the dropdown-group tag
126 | // title= is for dynamic variables from something like ng-repeat {{variable}}
127 | if (scope.title === undefined) {
128 | scope.item_title = attrs.title || element.children()[0].innerHTML;
129 | } else {
130 | scope.item_title = scope.title;
131 | }
132 | if (scope.value === undefined) {
133 | scope.item_value = attrs.value || scope.item_title;
134 | } else {
135 | scope.item_value = scope.value;
136 | }
137 |
138 | // Keep this option
139 | DropDownController.add_option(scope.item_title, scope.item_value);
140 |
141 | //
142 | // Menu item click handler
143 | //
144 | element.bind('click', function() {
145 | DropDownController.update_model(scope.item_title, scope.item_value);
146 | });
147 |
148 | scope.$on('$destroy', function(){
149 | DropDownController.remove_option(scope.item_title, scope.item_value);
150 | });
151 |
152 | }
153 | };
154 | });
--------------------------------------------------------------------------------
/src/dropdown/test/dropdown.spec.js:
--------------------------------------------------------------------------------
1 | describe('dropdown', function () {
2 | var element, $scope;
3 |
4 | beforeEach(module('angularify.semantic.dropdown'));
5 |
6 | beforeEach(inject(function($rootScope, $compile) {
7 | element = angular.element(
8 | '' +
9 | '' +
10 | '' +
13 | '{{ title }}' +
14 | ' ' +
15 | ' ' +
16 | '
');
17 |
18 | scope = $rootScope;
19 | scope.dropdown_model = '';
20 | scope.dropdown_items = {};
21 | $compile(element)(scope);
22 | scope.$digest();
23 | }));
24 |
25 | it('should create element with default header', inject(function($compile, $rootScope) {
26 | var header = element.find('div.dropdown > div');
27 | expect(header.eq(0).text()).toBe('No value');
28 | }));
29 |
30 | it('should have right amount of options', inject(function($compile, $rootScope) {
31 | var items = element.find('.menu > div.item');
32 | expect(items.length).toBe(0);
33 |
34 | scope.$apply(function() {
35 | scope.dropdown_items = [{'item1': 'Cool item1'}, {'item2': 'Cool item2'}];
36 | });
37 |
38 | items = element.find('.menu > div.item');
39 | expect(items.length).toBe(2);
40 |
41 | }));
42 |
43 | it('should change model value when user choose option', inject(function($compile, $rootScope) {
44 | scope.$apply(function() {
45 | scope.dropdown_items = {'item1': 'Cool item1',
46 | 'item2': 'Cool item2'};
47 | });
48 |
49 | var dropdown = element.find('.dropdown');
50 | dropdown.click();
51 |
52 | var option1 = element.find('.menu > div.item').eq(0);
53 | option1.click()
54 | expect(scope.dropdown_model).toBe('item1');
55 |
56 | }));
57 |
58 | it('should change element header when user choose option', inject(function($compile, $rootScope) {
59 | scope.$apply(function() {
60 | scope.dropdown_items = {'item1': 'Cool item1',
61 | 'item2': 'Cool item2'};
62 | });
63 |
64 | var dropdown = element.find('.dropdown');
65 | dropdown.click();
66 |
67 | var option1 = element.find('.menu > div.item').eq(0);
68 | option1.click()
69 |
70 | var header = element.find('div.dropdown > div');
71 | expect(header.eq(0).text()).toBe('Cool item1');
72 |
73 | }));
74 |
75 | });
76 |
--------------------------------------------------------------------------------
/src/modal/README.md:
--------------------------------------------------------------------------------
1 | angularify.semantic.modal
2 | ===============================
3 |
4 | `angularify.semantic.modal` - modal window directive for angular.js.
5 |
6 | Usage
7 | -------------------------------
8 |
9 | ```html
10 |
13 | Change Your Homepage
14 |
15 |
16 |
23 |
17 |
18 |
19 |
20 |
22 | Are you sure you want to change your homepage to Poodle.com?
21 |
24 |
34 |
35 |
13 | Profile Picture
14 |
15 |
16 |
25 |
17 | 
18 |
19 |
20 |
24 | We've auto-chosen a profile image for you.
21 | We've grabbed the following image from the gravatar image associated with your registered e-mail address.
22 |Is it okay to use this photo?
23 |
26 |
29 |
33 |
34 | ' + title +'
' + content + '
' +
17 | '' +
18 | '' +
19 | '' +
20 | '' +
21 | '' +
22 | '
',
23 | link: function(scope, element, attrs){
24 | if (scope.model == undefined)
25 | scope.model = 0;
26 |
27 | if (scope.model < 1 && scope.model > 5)
28 | scope.model = 0;
29 |
30 | // is rating already checked
31 | var checked = false;
32 |
33 | //
34 | // Set up icon type
35 | //
36 | if (scope.type == undefined)
37 | scope.type = 'star';
38 |
39 | //
40 | // Set up size
41 | //
42 | if (scope.size == undefined)
43 | scope.div_class = 'ui rating ' + scope.type;
44 | else if (scope.size == 'small')
45 | scope.div_class = 'ui small ' + scope.type + ' rating';
46 | else if (scope.size == 'large')
47 | scope.div_class = 'ui large ' + scope.type + ' rating';
48 | else if (scope.size == 'huge')
49 | scope.div_class = 'ui huge ' + scope.type + ' rating';
50 |
51 | //
52 | // set up icon class
53 | //
54 | scope.icon_class = 'icon';
55 |
56 | //
57 | // Handle mouse enter
58 | //
59 | scope.mouse_enter = function(icon_index){
60 | if (checked == true)
61 | return;
62 |
63 | var i = 1;
64 | for (i; i <= icon_index; i++){
65 | document.getElementById(scope.id + i).className = 'icon active';
66 | }
67 |
68 | return;
69 | };
70 |
71 | //
72 | // Handle mouse leave
73 | //
74 | scope.mouse_leave = function(icon_index){
75 | if (checked == true)
76 | return;
77 |
78 | var i = 1;
79 | for (i; i <= 5; i++){
80 | document.getElementById(scope.id + i).className = 'icon';
81 | }
82 |
83 | return;
84 | };
85 |
86 | //
87 | // Handle click
88 | //
89 | scope.click = function(icon_index, mode){
90 | var i = 1;
91 | for (i; i <= icon_index; i++){
92 | document.getElementById(scope.id + i).className = 'icon active';
93 | }
94 |
95 | if (icon_index !== 0)
96 | checked = true;
97 |
98 | return;
99 | };
100 |
101 | //
102 | // Watch for model
103 | //
104 | scope.$watch('model', function(val){
105 | scope.click(val);
106 | });
107 | }
108 | };
109 | });
110 |
--------------------------------------------------------------------------------
/src/rating/test/rating.spec.js:
--------------------------------------------------------------------------------
1 | describe('rating', function () {
2 | var $scope;
3 |
4 | beforeEach(module('angularify.semantic.rating'));
5 |
6 | beforeEach(inject(function ($rootScope) {
7 | $scope = $rootScope;
8 | }));
9 | });
10 |
--------------------------------------------------------------------------------
/src/sidebar/README.md:
--------------------------------------------------------------------------------
1 | angularify.semantic.sidebar
2 | ===============================
3 |
4 | `angularify.semantic.sidebar` - sidebar directive for angular.js.
5 |
6 | Usage
7 | -------------------------------
8 |
9 | ```html
10 |
13 |
14 | Sidebar
15 | Links and items
16 |
17 |
18 | Links and items
16 |
29 |
30 |
31 | ```
32 |
33 | ```javascript
34 | angular
35 | .module('sidebarApp', ['angularify.semantic.sidebar'])
36 | .controller('RootCtrl', RootCtrl);
37 |
38 | function RootCtrl ($scope) {
39 | $scope.isOpen = false;
40 | }
41 | ```
42 | `
12 |
13 | Sidebar
14 | Links and items
15 |
16 |
17 | Links and items
15 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/src/sidebar/sidebar.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular
4 | .module('angularify.semantic.sidebar', [])
5 | .directive('sidebar', sidebar)
6 | .directive('sidebarLink', sidebarLink)
7 | .directive('sidebarItem', sidebarItem)
8 | .directive('sidebarItemGroup', sidebarItemGroup);
9 |
10 | function sidebar() {
11 | return {
12 | restrict: 'E',
13 | replace: true,
14 | transclude: true,
15 | template: '',
17 | scope: {
18 | buttonClass: '@'
19 | },
20 | link: function (scope, element, attrs) {
21 | element.sidebar('attach events', scope.buttonClass, 'show');
22 | }
23 | };
24 | }
25 |
26 | function sidebarItemGroup() {
27 | return {
28 | restrict: 'E',
29 | replace: true,
30 | transclude: true,
31 | template: '' +
32 | '
',
35 | scope: {
36 | title: '@'
37 | }
38 | };
39 | }
40 |
41 | function sidebarItem() {
42 | return {
43 | restrict: 'E',
44 | replace: true,
45 | transclude: true,
46 | template: ''
47 | };
48 | }
49 |
50 | function sidebarLink() {
51 | return {
52 | restrict: 'E',
53 | replace: true,
54 | template: '' +
55 | '' +
56 | '{{ title }}' +
57 | '',
58 | scope: {
59 | title: '@',
60 | icon: '@',
61 | href: '@'
62 | }
63 | };
64 | }
--------------------------------------------------------------------------------
/src/sidebar/test/sidebar.spec.js:
--------------------------------------------------------------------------------
1 | describe('sidebar', function () {
2 | var $scope;
3 |
4 | beforeEach(module('angularify.semantic.sidebar'));
5 |
6 | beforeEach(inject(function ($rootScope) {
7 | $scope = $rootScope;
8 | }));
9 | });
--------------------------------------------------------------------------------
/src/wizard/README.md:
--------------------------------------------------------------------------------
1 | angularify.semantic.wizard
2 | ===============================
3 |
4 | `angularify.semantic.wizard` - wizard/steps directive for angular.js.
5 |
6 | CREDIT
7 | --------------------
8 |
9 | This Wizard is a port of the angular-wizard by mgonto from [github](https://github.com/mgonto/angular-wizard)
10 |
11 | Usage
12 | --------------------
13 | ```html
14 | {{ title }}
' +
33 | '' +
34 | 'Step 1
17 | 23 |Step 2
26 | 33 |Wizard
10 | 11 | 14 | 15 | 18 | 19 |Step 1
22 | 28 |Step 2
31 | 37 |Step 3
40 | 47 |Step 1
Step 2
Step 3
Step 1
' +
128 | '
',
136 | link: function(scope, element, attrs, WizardController) {
137 | if (scope.fullwidth === 'true') {
138 | var widthmatrix = {
139 | 0: '',
140 | 1: 'one',
141 | 2: 'two',
142 | 3: 'three',
143 | 4: 'four',
144 | 5: 'five',
145 | 6: 'six',
146 | 7: 'seven',
147 | 8: 'eight',
148 | 9: 'nine',
149 | 10: 'ten'
150 | };
151 | scope.stepsLength = widthmatrix[scope.steps.length];
152 | }
153 |
154 | }
155 | };
156 | })
157 | .directive('wizardPane', function() {
158 | return {
159 | restrict: 'EA',
160 | replace: true,
161 | transclude: true,
162 | require: '^wizard',
163 | controller: 'WizardController',
164 | scope: {
165 | title: '@'
166 | },
167 | template: '',
168 | link: function(scope, element, attrs, WizardController) {
169 | WizardController.addStep(scope);
170 | }
171 | };
172 | });
173 |
174 | function wizardButtonDirective(action) {
175 | angular.module('angularify.semantic.wizard')
176 | .directive(action, function () {
177 | return {
178 | restrict: 'A',
179 | replace: false,
180 | require: '^wizard',
181 | link: function ($scope, $element, $attrs, wizard) {
182 | $scope.noMargin = { margin: 0 };
183 | $element.on('click', function (e) {
184 | e.preventDefault();
185 | $scope.$apply(function () {
186 | $scope.$eval($attrs[action]);
187 | wizard[action.replace('wz', '').toLowerCase()]();
188 | });
189 | });
190 | }
191 | };
192 | });
193 | }
194 |
195 | wizardButtonDirective('wzNext');
196 | wizardButtonDirective('wzPrevious');
197 | wizardButtonDirective('wzFinish');
198 | wizardButtonDirective('wzCancel');
199 |
--------------------------------------------------------------------------------
' +
129 | '
' +
133 | '' +
134 | '' +
135 | '' +
130 | '{{step.title}}' +
131 | '
' +
132 | '