├── .gitignore
├── .jshintrc
├── LICENSE
├── README.md
├── bower.json
├── dist
├── angular-disable-all.js
└── angular-disable-all.min.js
├── gulpfile.js
├── package.json
├── samples
├── disableAllSample.js
└── index.html
├── src
└── disable-all.js
└── test
├── .jshintrc
└── karma.conf.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Windows
2 | ##################
3 |
4 | Thumbs.db
5 | ehthumbs.db
6 | Desktop.ini
7 | $RECYCLE.BIN/
8 |
9 | # OSX
10 | ##################
11 |
12 | .DS_Store
13 | .AppleDouble
14 | .LSOverride
15 | Icon
16 | ._*
17 | .Spotlight-V100
18 | .Trashes
19 | *.swp
20 | *.swo
21 | *.log
22 |
23 | # Common
24 | ##################
25 |
26 | .idea/
27 |
28 | # Project
29 | ##################
30 |
31 | bower_components/
32 | node_modules/
33 | reports/
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "node": false,
3 | "browser": true,
4 | "esnext": true,
5 | "bitwise": true,
6 | "camelcase": false,
7 | "curly": false,
8 | "eqeqeq": true,
9 | "immed": true,
10 | "indent": 4,
11 | "latedef": false,
12 | "newcap": true,
13 | "noarg": true,
14 | "quotmark": "single",
15 | "regexp": true,
16 | "undef": true,
17 | "unused": true,
18 | "strict": false,
19 | "globalstrict": true,
20 | "trailing": true,
21 | "smarttabs": true,
22 | "globals": {
23 | "angular": true,
24 | "console": true
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "{}"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright {yyyy} {name of copyright owner}
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
203 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | disable-all directive for AngularJS
2 | ========================
3 |
4 | This directive allows to disable a given element and all buttons, inputs and other form controls will be disabled.
5 |
6 | Open samples/index.html to see the example how to use this directive.
7 |
8 | **Installation**
9 |
10 | 1. Run `bower install angular-disable-all --save`
11 |
12 | * (or add manually into your bower.json dependencies and run bower-install)
13 | * (or download ZIP from github and extract files in the case if you don't use bower)
14 |
15 | 2. Include `bower_components/angular-disable-all/dist/angular-disable-all.js` in your `index.html` file
16 |
17 | 3. Add a new dependency in your module
18 | ```javascript
19 | angular.module('yourApp', ['disableAll', ...])
20 | ```
21 |
22 | **How to use it**
23 |
24 | Lets say you have a div with a form and inputs and buttons inside:
25 |
26 | ```html
27 |
38 | ```
39 |
40 | **Note:** The ```skip-disable``` directive allow you to exclude a DOM element of the ```disable-all``` directive.
41 |
42 | You can also specify boolean variable to `disable-all`, directive will watch it and disable / enable div when variable changes.
43 |
44 | ```html
45 |
46 |
47 |
51 |
52 |
53 | ```
54 |
55 | **TODO-s (for contributors)**:
56 |
57 | * refactor some parts of code and make it easier to understand and maintain
58 | * better documentation and more examples if possible
59 | * cover sources with unit-tests
60 | * research in performance optimizations
61 | * search for bugs and fix them
62 | * star this project and get people to know about this plugin in angular community
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-disable-all",
3 | "description": "Angular directive that allows to disable any element (for example DIV) content (inputs, buttons, etc.) and disable clicks on the given element",
4 | "version": "0.0.2",
5 | "keywords": ["disable-all", "angular-disable-all"],
6 | "authors": [
7 | { "name": "Umed Khudoiberdiev", "email": "info@zar.tj" }
8 | ],
9 | "repository": {
10 | "type": "git",
11 | "url": "git://github.com/PLEEROCK/angular-disable-all.git"
12 | },
13 | "main": [
14 | "./dist/angular-disable-all.js"
15 | ],
16 | "ignore": [
17 | ".gitignore",
18 | ".jshintrc",
19 | "package.json",
20 | "gulpfile.js",
21 | "node_modules",
22 | "bower_components",
23 | "src",
24 | "reports",
25 | "samples",
26 | "test"
27 | ],
28 | "dependencies": {
29 | "angular": ">= 1.0.8"
30 | },
31 | "devDependencies": {
32 | "angular-mocks": ">= 1.0.8",
33 | "angular-scenario": ">= 1.0.8"
34 | }
35 | }
--------------------------------------------------------------------------------
/dist/angular-disable-all.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Umed Khudoiberdiev
3 | */
4 | (function(angular, undefined) {
5 | 'use strict';
6 |
7 | /**
8 | * @ngdoc module
9 | * @name disableAll
10 | * @description
11 | * This module represents a disable-all directive which allows you to disable any element in the DOM.
12 | */
13 | angular.module('disableAll', []);
14 |
15 | /**
16 | * @ngdoc directive
17 | * @name skipDisable
18 | * @restrict A
19 | * @description
20 | * This directive allows you to do not disable the element even if it's under the disableAll directive
21 | */
22 | angular.module('disableAll').directive('skipDisable', skipDisableDirective);
23 |
24 | /**
25 | * @ngInject
26 | */
27 | function skipDisableDirective() {
28 | return {
29 | restrict: 'A'
30 | };
31 | }
32 |
33 |
34 | /**
35 | * @ngdoc directive
36 | * @name disableAll
37 | * @restrict A
38 | * @description
39 | * This directive allows you to disable any element in the DOM. Directive turns off all clicks, disables
40 | * inputs, buttons and textareas in the given element scope.
41 | */
42 | angular.module('disableAll').directive('disableAll', disableAllDirective);
43 |
44 | /**
45 | * @ngInject
46 | */
47 | function disableAllDirective() {
48 | return {
49 | restrict: 'A',
50 | link: function (scope, element, attrs) {
51 | var disabledElement = (attrs.disableElementId) ? document.getElementById(attrs.disableElementId) : element[0];
52 | var childNodeLength = element[0].childNodes.length;
53 |
54 | // Watch on DOM changement
55 | scope.$watch(function () {
56 | return element[0].childNodes.length;
57 | }, function(newValue, oldValue) {
58 | if (newValue !== oldValue) {
59 | toggleDisableAll(disabledElement, attrs.disableAll);
60 | }
61 | });
62 |
63 | // Watch on DisableAll attribute value
64 | scope.$watch(attrs.disableAll, function (isDisabled) {
65 | toggleDisableAll(disabledElement, isDisabled);
66 | });
67 |
68 | scope.$on('$destroy', function() {
69 | enableAll(disabledElement);
70 | });
71 | }
72 | };
73 | }
74 |
75 | var toggleDisableAll = function(element, isDisabled) {
76 | if (isDisabled) {
77 | disableAll(element);
78 | }
79 | else {
80 | enableAll(element);
81 | }
82 | }
83 |
84 | /**
85 | * Disables everything in the given element.
86 | *
87 | * @param {HTMLElement} element
88 | */
89 | var disableAll = function(element) {
90 | angular.element(element).addClass('disable-all');
91 | element.style.color = 'gray';
92 | disableElements(element.getElementsByTagName('input'));
93 | disableElements(element.getElementsByTagName('button'));
94 | disableElements(element.getElementsByTagName('textarea'));
95 | disableElements(element.getElementsByTagName('select'));
96 | element.addEventListener('click', preventDefault, true);
97 | };
98 |
99 | /**
100 | * Enables everything in the given element.
101 | *
102 | * @param {HTMLElement} element
103 | */
104 | var enableAll = function(element) {
105 | angular.element(element).removeClass('disable-all');
106 | element.style.color = 'inherit';
107 | enableElements(element.getElementsByTagName('input'));
108 | enableElements(element.getElementsByTagName('button'));
109 | enableElements(element.getElementsByTagName('textarea'));
110 | enableElements(element.getElementsByTagName('select'));
111 | element.removeEventListener('click', preventDefault, true);
112 | };
113 |
114 | /**
115 | * Callback used to prevent user clicks.
116 | *
117 | * @param {Event} event
118 | * @returns {boolean}
119 | */
120 | var preventDefault = function(event) {
121 | for (var i = 0; i < event.target.attributes.length; i++) {
122 | var atts = event.target.attributes[i];
123 | if(atts.name === "skip-disable"){
124 | return true;
125 | }
126 | }
127 | event.stopPropagation();
128 | event.preventDefault();
129 | return false;
130 | };
131 |
132 | /**
133 | * Disables given elements.
134 | *
135 | * @param {Array.|NodeList} elements List of dom elements that must be disabled
136 | */
137 | var disableElements = function(elements) {
138 | var len = elements.length;
139 | for (var i = 0; i < len; i++) {
140 | var shouldDisable = true;
141 | for (var j = 0; j < elements[i].attributes.length; j++) {
142 | var atts = elements[i].attributes[j];
143 | if(atts.name === "skip-disable"){
144 | shouldDisable = false;
145 | continue;
146 | }
147 | }
148 | if (shouldDisable && elements[i].disabled === false) {
149 | elements[i].disabled = true;
150 | elements[i].disabledIf = true;
151 | }
152 | }
153 | };
154 |
155 | /**
156 | * Enables given elements.
157 | *
158 | * @param {Array.|NodeList} elements List of dom elements that must be enabled
159 | */
160 | var enableElements = function(elements) {
161 | var len = elements.length;
162 | for (var i = 0; i < len; i++) {
163 | if (elements[i].disabled === true && elements[i].disabledIf === true) {
164 | elements[i].disabled = false;
165 | elements[i].disabledIf = null;
166 | }
167 | }
168 | };
169 |
170 | })(angular);
171 |
--------------------------------------------------------------------------------
/dist/angular-disable-all.min.js:
--------------------------------------------------------------------------------
1 | !function(e){"use strict";function t(){return{restrict:"A"}}function l(){return{restrict:"A",link:function(e,t,l){{var n=l.disableElementId?document.getElementById(l.disableElementId):t[0];t[0].childNodes.length}e.$watch(function(){return t[0].childNodes.length},function(e,t){e!==t&&a(n,l.disableAll)}),e.$watch(l.disableAll,function(e){a(n,e)}),e.$on("$destroy",function(){i(n)})}}}e.module("disableAll",[]),e.module("disableAll").directive("skipDisable",t),e.module("disableAll").directive("disableAll",l);var a=function(e,t){t?n(e):i(e)},n=function(t){e.element(t).addClass("disable-all"),t.style.color="gray",r(t.getElementsByTagName("input")),r(t.getElementsByTagName("button")),r(t.getElementsByTagName("textarea")),r(t.getElementsByTagName("select")),t.addEventListener("click",s,!0)},i=function(t){e.element(t).removeClass("disable-all"),t.style.color="inherit",d(t.getElementsByTagName("input")),d(t.getElementsByTagName("button")),d(t.getElementsByTagName("textarea")),d(t.getElementsByTagName("select")),t.removeEventListener("click",s,!0)},s=function(e){for(var t=0;tl;l++){for(var a=!0,n=0;nl;l++)e[l].disabled===!0&&e[l].disabledIf===!0&&(e[l].disabled=!1,e[l].disabledIf=null)}}(angular);
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var concat = require('gulp-concat');
3 | var rename = require('gulp-rename');
4 | var uglify = require('gulp-uglify');
5 | var angularFilesort = require('gulp-angular-filesort');
6 | var karma = require('karma').server;
7 | var ngAnnotate = require('gulp-ng-annotate');
8 | var jshint = require('gulp-jshint');
9 | var del = require('del');
10 | var filesize = require('gulp-filesize');
11 |
12 | // task to clean up destination directory to prepare a new fresh build
13 | gulp.task('clean', function(cb) {
14 | del(['dist/**'], cb);
15 | });
16 |
17 | // prepare dist: concatenate and minify scripts
18 | gulp.task('scripts', function() {
19 | return gulp.src(['src/**/*.js'])
20 | .pipe(angularFilesort())
21 | .pipe(concat('angular-disable-all.js'))
22 | .pipe(gulp.dest('dist'))
23 | .pipe(filesize())
24 | .pipe(rename({ suffix: '.min' }))
25 | .pipe(ngAnnotate())
26 | .pipe(uglify())
27 | .pipe(gulp.dest('dist'))
28 | .pipe(filesize());
29 | });
30 |
31 | // run tests with karma
32 | gulp.task('test', function (done) {
33 | karma.start({
34 | configFile: __dirname + '/test/karma.conf.js',
35 | singleRun: true
36 | }, done);
37 | });
38 |
39 | // run jshint checks
40 | gulp.task('lint', function () {
41 | return gulp.src('src/**/*.js')
42 | .pipe(jshint())
43 | .pipe(jshint.reporter('jshint-stylish'));
44 |
45 | });
46 |
47 | // default Task
48 | gulp.task('default', ['clean'], function() {
49 | gulp.start('scripts');
50 | });
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-disable-all",
3 | "version": "0.0.1",
4 | "dependencies": {},
5 | "devDependencies": {
6 | "del": "~1.1.0",
7 | "gulp": "~3.8.10",
8 | "gulp-concat": "~2.4.2",
9 | "gulp-rename": "~1.2.0",
10 | "gulp-uglify": "~1.0.2",
11 | "gulp-angular-filesort": "~1.0.4",
12 | "gulp-ng-annotate": "~0.4.2",
13 | "gulp-jshint": "~1.9.0",
14 | "gulp-filesize": "~0.0.6",
15 | "jshint-stylish": "~1.0.0",
16 | "karma": "~0.12.28",
17 | "karma-ng-html2js-preprocessor": "~0.1",
18 | "karma-phantomjs-launcher": "~0.1.2",
19 | "karma-coverage": "~0.2.0",
20 | "karma-angular-filesort": "~0.1.0",
21 | "chai": "^1.10.0",
22 | "mocha": "^2.1.0",
23 | "karma-mocha": "^0.1.10",
24 | "sinon": "^1.12.2",
25 | "sinon-chai": "^2.6.0"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/samples/disableAllSample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Sample that shows how disable-all directive works.
3 | *
4 | * @author Umed Khudoiberdiev
5 | */
6 | (function() {
7 | 'use strict';
8 |
9 | /**
10 | * @ngdoc module
11 | * @name disableAllSample
12 | */
13 | angular.module('disableAllSample', ['disableAll'])
14 | .controller('ctrl', function($timeout) {
15 | var _self = this;
16 |
17 | // some async init method
18 | $timeout(function() {
19 | _self.initialized = true;
20 | }, 10);
21 | });
22 |
23 | })();
--------------------------------------------------------------------------------
/samples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | disable-all sample
6 |
7 |
8 |
9 |
10 |
11 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
Simple usage:
24 |
50 |
51 |
52 |
53 |
Simple usage with bind variable:
54 |
55 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
Bind disabling to element on another DOM level
86 |
87 | Wow this is another element!
88 |
89 |
90 |
114 |
115 |
116 |
117 |
118 |
Custom styles
119 |
120 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
Simple usage with async DOM change:
151 |
179 |
180 |
181 |
--------------------------------------------------------------------------------
/src/disable-all.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Umed Khudoiberdiev
3 | */
4 | (function(angular, undefined) {
5 | 'use strict';
6 |
7 | /**
8 | * @ngdoc module
9 | * @name disableAll
10 | * @description
11 | * This module represents a disable-all directive which allows you to disable any element in the DOM.
12 | */
13 | angular.module('disableAll', []);
14 |
15 | /**
16 | * @ngdoc directive
17 | * @name skipDisable
18 | * @restrict A
19 | * @description
20 | * This directive allows you to do not disable the element even if it's under the disableAll directive
21 | */
22 | angular.module('disableAll').directive('skipDisable', skipDisableDirective);
23 |
24 | /**
25 | * @ngInject
26 | */
27 | function skipDisableDirective() {
28 | return {
29 | restrict: 'A'
30 | };
31 | }
32 |
33 |
34 | /**
35 | * @ngdoc directive
36 | * @name disableAll
37 | * @restrict A
38 | * @description
39 | * This directive allows you to disable any element in the DOM. Directive turns off all clicks, disables
40 | * inputs, buttons and textareas in the given element scope.
41 | */
42 | angular.module('disableAll').directive('disableAll', disableAllDirective);
43 |
44 | /**
45 | * @ngInject
46 | */
47 | function disableAllDirective() {
48 | return {
49 | restrict: 'A',
50 | link: function (scope, element, attrs) {
51 | var disabledElement = (attrs.disableElementId) ? document.getElementById(attrs.disableElementId) : element[0];
52 | var childNodeLength = element[0].childNodes.length;
53 |
54 | // Watch on DOM changement
55 | scope.$watch(function () {
56 | return element[0].childNodes.length;
57 | }, function(newValue, oldValue) {
58 | if (newValue !== oldValue) {
59 | toggleDisableAll(disabledElement, attrs.disableAll);
60 | }
61 | });
62 |
63 | // Watch on DisableAll attribute value
64 | scope.$watch(attrs.disableAll, function (isDisabled) {
65 | toggleDisableAll(disabledElement, isDisabled);
66 | });
67 |
68 | scope.$on('$destroy', function() {
69 | enableAll(disabledElement);
70 | });
71 | }
72 | };
73 | }
74 |
75 | var toggleDisableAll = function(element, isDisabled) {
76 | if (isDisabled) {
77 | disableAll(element);
78 | }
79 | else {
80 | enableAll(element);
81 | }
82 | }
83 |
84 | /**
85 | * Disables everything in the given element.
86 | *
87 | * @param {HTMLElement} element
88 | */
89 | var disableAll = function(element) {
90 | angular.element(element).addClass('disable-all');
91 | element.style.color = 'gray';
92 | disableElements(element.getElementsByTagName('input'));
93 | disableElements(element.getElementsByTagName('button'));
94 | disableElements(element.getElementsByTagName('textarea'));
95 | disableElements(element.getElementsByTagName('select'));
96 | element.addEventListener('click', preventDefault, true);
97 | };
98 |
99 | /**
100 | * Enables everything in the given element.
101 | *
102 | * @param {HTMLElement} element
103 | */
104 | var enableAll = function(element) {
105 | angular.element(element).removeClass('disable-all');
106 | element.style.color = 'inherit';
107 | enableElements(element.getElementsByTagName('input'));
108 | enableElements(element.getElementsByTagName('button'));
109 | enableElements(element.getElementsByTagName('textarea'));
110 | enableElements(element.getElementsByTagName('select'));
111 | element.removeEventListener('click', preventDefault, true);
112 | };
113 |
114 | /**
115 | * Callback used to prevent user clicks.
116 | *
117 | * @param {Event} event
118 | * @returns {boolean}
119 | */
120 | var preventDefault = function(event) {
121 | for (var i = 0; i < event.target.attributes.length; i++) {
122 | var atts = event.target.attributes[i];
123 | if(atts.name === "skip-disable"){
124 | return true;
125 | }
126 | }
127 | event.stopPropagation();
128 | event.preventDefault();
129 | return false;
130 | };
131 |
132 | /**
133 | * Disables given elements.
134 | *
135 | * @param {Array.|NodeList} elements List of dom elements that must be disabled
136 | */
137 | var disableElements = function(elements) {
138 | var len = elements.length;
139 | for (var i = 0; i < len; i++) {
140 | var shouldDisable = true;
141 | for (var j = 0; j < elements[i].attributes.length; j++) {
142 | var atts = elements[i].attributes[j];
143 | if(atts.name === "skip-disable"){
144 | shouldDisable = false;
145 | continue;
146 | }
147 | }
148 | if (shouldDisable && elements[i].disabled === false) {
149 | elements[i].disabled = true;
150 | elements[i].disabledIf = true;
151 | }
152 | }
153 | };
154 |
155 | /**
156 | * Enables given elements.
157 | *
158 | * @param {Array.|NodeList} elements List of dom elements that must be enabled
159 | */
160 | var enableElements = function(elements) {
161 | var len = elements.length;
162 | for (var i = 0; i < len; i++) {
163 | if (elements[i].disabled === true && elements[i].disabledIf === true) {
164 | elements[i].disabled = false;
165 | elements[i].disabledIf = null;
166 | }
167 | }
168 | };
169 |
170 | })(angular);
171 |
--------------------------------------------------------------------------------
/test/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "node": true,
3 | "browser": true,
4 | "esnext": true,
5 | "bitwise": true,
6 | "camelcase": true,
7 | "curly": true,
8 | "eqeqeq": true,
9 | "immed": true,
10 | "indent": 2,
11 | "latedef": true,
12 | "newcap": true,
13 | "noarg": true,
14 | "quotmark": "single",
15 | "regexp": true,
16 | "undef": true,
17 | "unused": true,
18 | "strict": true,
19 | "trailing": true,
20 | "smarttabs": true,
21 | "globals": {
22 | "after": false,
23 | "afterEach": false,
24 | "angular": false,
25 | "before": false,
26 | "beforeEach": false,
27 | "browser": false,
28 | "describe": false,
29 | "expect": false,
30 | "inject": false,
31 | "it": false,
32 | "jasmine": false,
33 | "spyOn": false
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/test/karma.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function (config) {
4 | config.set({
5 | // base path, that will be used to resolve files and exclude
6 | basePath: '../',
7 |
8 | // testing framework to use (jasmine/mocha/qunit/...)
9 | frameworks: ['mocha', 'angular-filesort'],
10 | reporters: ['dots', 'coverage'],
11 |
12 | // list of files / patterns to load in the browser
13 | files: [
14 | 'node_modules/chai/chai.js',
15 | 'node_modules/sinon-chai/lib/sinon-chai.js',
16 | 'node_modules/sinon/pkg/sinon.js',
17 | 'bower_components/angular/angular.js',
18 | 'bower_components/angular-mocks/angular-mocks.js',
19 | 'bower_components/angular-sanitize/angular-sanitize.js',
20 | 'src/**/*.js',
21 | 'test/mock/**/*.js',
22 | 'test/spec/**/*.js'
23 | ],
24 |
25 | // sort these files in a proper way, so karma can run angular test in a proper way
26 | angularFilesort: {
27 | whitelist: [
28 | 'src/**/*.js'
29 | ]
30 | },
31 |
32 | preprocessors: {
33 | 'src/**/*.js': 'coverage'
34 | },
35 |
36 | coverageReporter: {
37 | reporters: [
38 | {type: 'html', dir: __dirname + '/../reports/coverage/'},
39 | {type: 'text-summary'}
40 | ]
41 | },
42 |
43 | // list of files / patterns to exclude
44 | exclude: [],
45 |
46 | // web server port
47 | port: 8080,
48 |
49 | // enable / disable watching file and executing tests whenever any file changes
50 | autoWatch: false,
51 |
52 | browsers: ['PhantomJS'],
53 |
54 | singleRun: false
55 | });
56 | };
57 |
--------------------------------------------------------------------------------