├── .gitignore
├── index.js
├── focusIf.min.js
├── gulpfile.js
├── karma.conf.js
├── bower.json
├── focusIf.js
├── LICENSE
├── package.json
├── README.md
└── focusIf.spec.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | require('./focusIf');
2 | module.exports = 'focus-if';
3 | 


--------------------------------------------------------------------------------
/focusIf.min.js:
--------------------------------------------------------------------------------
1 | !function(){"use strict";function c(c){function u(u,f,t){function n(f){f&&c(function(){i.focus()},u.$eval(t.focusDelay)||0)}var i=f[0];t.focusIf?u.$watch(t.focusIf,n):n(!0)}return{restrict:"A",link:u}}angular.module("focus-if",[]).directive("focusIf",c),c.$inject=["$timeout"]}();


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | var gulp = require('gulp'),
 3 |   ngAnnotate = require('gulp-ng-annotate'),
 4 |   uglify = require('gulp-uglify'),
 5 |   rename = require('gulp-rename');
 6 | 
 7 | gulp.task('default', function() {
 8 |   return gulp.src('focusIf.js')
 9 |     .pipe(ngAnnotate())
10 |     .pipe(uglify())
11 |     .pipe(rename({suffix: '.min'}))
12 |     .pipe(gulp.dest('.'));
13 | });
14 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(config) {
 2 |   config.set({
 3 |     files: [
 4 |       'node_modules/angular/angular.min.js',
 5 |       'node_modules/angular-mocks/angular-mocks.js',
 6 |       'focusIf.js',
 7 |       'focusIf.spec.js'
 8 |     ],
 9 |     frameworks: [
10 |       'jasmine'
11 |     ],
12 |     browsers: [
13 |       'PhantomJS'
14 |     ],
15 |     reporters: [
16 |       'spec'
17 |     ],
18 |     preprocessors: {
19 |       'app/**/!(*spec).js': ['coverage']
20 |     },
21 |     coverageReporter: {
22 |       type: 'text'
23 |     }
24 |   });
25 | };
26 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-focus-if",
 3 |   "homepage": "https://github.com/hiebj/ng-focus-if",
 4 |   "authors": [
 5 |     "Jonathan Hieb"
 6 |   ],
 7 |   "description": "AngularJS directive that will trigger focus on an element under specified conditions",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git://github.com/hiebj/ng-focus-if.git"
11 |   },
12 |   "main": "focusIf.js",
13 |   "keywords": [
14 |     "angular",
15 |     "angularjs",
16 |     "directive",
17 |     "focus-if",
18 |     "autofocus",
19 |     "focus",
20 |     "delay"
21 |   ],
22 |   "license": "MIT",
23 |   "ignore": [
24 |     "**/.*",
25 |     "node_modules",
26 |     "bower_components",
27 |     "test",
28 |     "tests"
29 |   ],
30 |   "dependencies": {
31 |     "angular": "1.x"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/focusIf.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |     'use strict';
 3 |     angular
 4 |         .module('focus-if', [])
 5 |         .directive('focusIf', focusIf);
 6 | 
 7 |     focusIf.$inject = ['$timeout'];
 8 | 
 9 |     function focusIf($timeout) {
10 |         function link($scope, $element, $attrs) {
11 |             var dom = $element[0];
12 |             if ($attrs.focusIf) {
13 |                 $scope.$watch($attrs.focusIf, focus);
14 |             } else {
15 |                 focus(true);
16 |             }
17 |             function focus(condition) {
18 |                 if (condition) {
19 |                     $timeout(function() {
20 |                         dom.focus();
21 |                     }, $scope.$eval($attrs.focusDelay) || 0);
22 |                 }
23 |             }
24 |         }
25 |         return {
26 |             restrict: 'A',
27 |             link: link
28 |         };
29 |     }
30 | })();
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Jonathan Hieb
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-focus-if",
 3 |   "version": "1.0.7",
 4 |   "description": "AngularJS directive that will trigger focus on an element under specified conditions",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/hiebj/ng-focus-if.git"
 8 |   },
 9 |   "main": "index.js",
10 |   "author": "Jonathan Hieb",
11 |   "keywords": [
12 |     "angular",
13 |     "angularjs",
14 |     "directive",
15 |     "focus-if",
16 |     "autofocus",
17 |     "focus",
18 |     "delay"
19 |   ],
20 |   "license": "MIT",
21 |   "devDependencies": {
22 |     "angular": "^1.4.2",
23 |     "angular-mocks": "^1.4.2",
24 |     "gulp": "^3.9.0",
25 |     "gulp-cli": "^1.1.0",
26 |     "gulp-ng-annotate": "^2.0.0",
27 |     "gulp-rename": "^1.2.2",
28 |     "gulp-uglify": "^1.2.0",
29 |     "jasmine-core": "^2.3.4",
30 |     "karma": "^1.0.0",
31 |     "karma-cli": "^1.0.0",
32 |     "karma-coverage": "^1.0.0",
33 |     "karma-jasmine": "^1.0.2",
34 |     "karma-phantomjs-launcher": "^1.0.0",
35 |     "karma-spec-reporter": "^0.0.26",
36 |     "phantomjs-prebuilt": "^2.1.4"
37 |   },
38 |   "scripts": {
39 |     "gulp": "gulp",
40 |     "test": "karma start --single-run",
41 |     "coverage": "karma start --reporters coverage --single-run"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ng-focus-if
 2 | [![Bower version][bower-image]][github-url]
 3 | [![NPM version][npm-image]][npm-url]
 4 | [![Downloads][downloads-image]][npm-url]
 5 | [![devDependency Status][david-image]][david-url]
 6 | [![GitHub stars][stars-image]][github-url]
 7 | 
 8 | An attribute directive that will trigger focus on an element under specified conditions. It can also be used as a cross-browser replacement for the `autofocus` attribute.
 9 | 
10 | View a live demo on [Plnkr][plnkr-url].
11 | 
12 | It is available through NPM:
13 | 
14 | ```text
15 | npm install ng-focus-if
16 | ```
17 | 
18 | Or, via bower:
19 | 
20 | ```text
21 | bower install ng-focus-if --save
22 | ```
23 | 
24 | ## Usage
25 | 
26 | Include `focusIf.min.js` in your build or directly with a `<script>` tag and require the module in your module definition:
27 | 
28 | ```js
29 | angular  
30 |     .module('App', [  
31 |         'focus-if',  
32 |         ... // other dependencies  
33 |     ]);
34 | ```
35 | 
36 | To immediately focus an element upon rendering (similar to [input][mdn-input-url] `autofocus`):
37 | 
38 | ```html
39 | <input focus-if />
40 | ```
41 | 
42 | To focus an element when a specified Angular [expression][expression-url] becomes [truthy][truthy-url]:
43 | 
44 | ```html
45 | <input focus-if="focusInput" />
46 | ```
47 | 
48 | To focus an element after a specified delay upon rendering:
49 | 
50 | ```html
51 | <input focus-if focus-delay="500" />
52 | ```
53 | 
54 | To focus an element after a specified delay when a specified Angular expression becomes truthy:
55 | 
56 | ```html
57 | <input focus-if="focusInput" focus-delay="500" />
58 | ```
59 | 
60 | **Caveat: apply focus multiple times**
61 | 
62 | Like any other Angular directive using a `$watch` callback, this directive depends on Angular's model change detection, which can cause trouble when trying to apply focus more than once. Users looking to apply focus to a given element multiple times may find [this thread][change-detection-url] useful.
63 | 
64 | [bower-image]: https://img.shields.io/bower/v/ng-focus-if.svg
65 | [github-url]: https://github.com/hiebj/ng-focus-if/stargazers
66 | [npm-image]: http://img.shields.io/npm/v/ng-focus-if.svg
67 | [npm-url]: https://npmjs.org/package/ng-focus-if
68 | [downloads-image]: http://img.shields.io/npm/dm/ng-focus-if.svg
69 | [david-image]: https://david-dm.org/hiebj/ng-focus-if/dev-status.svg
70 | [david-url]: https://david-dm.org/hiebj/ng-focus-if#info=devDependencies
71 | [stars-image]: https://img.shields.io/github/stars/hiebj/ng-focus-if.svg?style=social
72 | [plnkr-url]: http://plnkr.co/edit/MJS3zRk079Mu72o5A9l6?p=preview
73 | [mdn-input-url]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input 
74 | [expression-url]: https://docs.angularjs.org/guide/expression
75 | [truthy-url]: https://developer.mozilla.org/en-US/docs/Glossary/Truthy
76 | [change-detection-url]: https://github.com/hiebj/ng-focus-if/issues/22#issuecomment-226221602
77 | 


--------------------------------------------------------------------------------
/focusIf.spec.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 |     'use strict';
  3 |     describe('Directive: focus-if [A]', function() {
  4 |         var $scope,
  5 |             $compile,
  6 |             $timeout,
  7 |             $document,
  8 |             tpl = '<input type="text" focus-if="{{watchProperty}}" focus-delay="{{delay}}" />',
  9 |             element;
 10 | 
 11 |         beforeEach(module('focus-if'));
 12 | 
 13 |         beforeEach(function() {
 14 |             jasmine.addMatchers({
 15 |                 toHaveFocus: function() {
 16 |                     return {
 17 |                         compare: function(dom) {
 18 |                             var focused;
 19 |                             if (!(dom instanceof Node)) {
 20 |                                 dom = dom[0];
 21 |                             }
 22 |                             focused = dom == document.activeElement;
 23 |                             return {
 24 |                                 pass: focused,
 25 |                                 message: focused ? 'Expected ' + dom + ' not to have focus'
 26 |                                     : 'Expected ' + dom + ' to have focus'
 27 |                             };
 28 |                         }
 29 |                     };
 30 |                 }
 31 |             });
 32 |         });
 33 | 
 34 |         beforeEach(inject(function($rootScope, _$compile_, _$timeout_, _$document_) {
 35 |             $scope = $rootScope.$new();
 36 |             $compile = _$compile_;
 37 |             $timeout = _$timeout_;
 38 |             $document = _$document_;
 39 |         }));
 40 | 
 41 |         afterEach(function() {
 42 |             element.remove();
 43 |         });
 44 | 
 45 |         describe('<input focus-if>', function() {
 46 |             it('should have focus immediately', onLinkTest);
 47 |         });
 48 | 
 49 |         describe('<input focus-if focus-delay="500">', function() {
 50 |             it('should have focus after 500ms', function() {
 51 |                 $scope.delay = 500;
 52 |                 onLinkTest();
 53 |             });
 54 |         });
 55 | 
 56 |         function onLinkTest() {
 57 |             compile();
 58 |             flush();
 59 |             expect(element).toHaveFocus();
 60 |         }
 61 | 
 62 |         function compile() {
 63 |             element = $compile(tpl)($scope);
 64 |             angular.element($document[0].body).append(element);
 65 |         }
 66 | 
 67 |         function flush() {
 68 |             $timeout.flush(($scope.delay || 0) - 1);
 69 |             expect(element).not.toHaveFocus();
 70 |             $timeout.flush(1);
 71 |         }
 72 | 
 73 |         describe('<input focus-if="watchProperty">', function() {
 74 |             beforeEach(watchBeforeEach);
 75 |             it('should not have focus immediately when $scope.watchProperty is falsy', falsyWatchTest);
 76 |             it('should have focus immediately when $scope.watchProperty is truthy', truthyWatchTest);
 77 |         });
 78 | 
 79 |         describe('<input focus-if="watchProperty" focus-delay="500">', function() {
 80 |             beforeEach(function() {
 81 |                 $scope.delay = 500;
 82 |                 watchBeforeEach();
 83 |             });
 84 |             it('should not have focus after 500ms when $scope.focus-if is falsy', falsyWatchTest);
 85 |             it('should have focus after 500ms when $scope.focus-if is truthy', truthyWatchTest);
 86 |         });
 87 | 
 88 |         function watchBeforeEach() {
 89 |             $scope.watchProperty = 'focus';
 90 |             $scope.focus = false;
 91 |             compile();
 92 |         }
 93 | 
 94 |         function falsyWatchTest() {
 95 |             $timeout.verifyNoPendingTasks();
 96 |             expect(element).not.toHaveFocus();
 97 |         }
 98 | 
 99 |         function truthyWatchTest() {
100 |             falsyWatchTest();
101 |             $scope.focus = true;
102 |             $scope.$digest();
103 |             flush();
104 |             expect(element).toHaveFocus();
105 |         }
106 |     });
107 | })();
108 | 


--------------------------------------------------------------------------------