[TypeScript] Convert directives (#396)

* Convert directives to TypeScript.

* FormDirective uses ValidationService type.

src/popup/app/app.js

@@ -20,6 +20,7 @@ require('../../scripts/u2f.js');
 require('../less/libs.less');
 require('../less/popup.less');
 
+import DirectivesModule from './directives/directives.module';
 import ComponentsModule from './components/components.module';
 import ToolsModule from './tools/tools.module';
 import ServicesModule from './services/services.module';
@@ -78,7 +79,7 @@ angular
         'angulartics',
         'angulartics.google.analytics',
 
-        'bit.directives',
+        DirectivesModule,
         ComponentsModule,
         ServicesModule,
 
@@ -92,11 +93,6 @@ angular
     ]);
 
 require('./config');
-require('./directives/directivesModule.js');
-require('./directives/formDirective.js');
-require('./directives/stopClickDirective.js');
-require('./directives/stopPropDirective.js');
-require('./directives/fallbackSrcDirective.js');
 require('./global/globalModule.js');
 require('./global/mainController.js');
 require('./global/tabsController.js');

src/popup/app/directives/directives.module.ts

@@ -0,0 +1,16 @@
+import * as angular from 'angular';
+
+import { FallbackSrcDirective } from './fallback-src.directive';
+import { FormDirective } from './form.directive';
+import { StopClickDirective } from './stop-click.directive';
+import { StopPropDirective } from './stop-prop.directive';
+
+export default angular
+    .module('bit.directives', [])
+
+    .directive('fallbackSrc', FallbackSrcDirective)
+    .directive('stopClick', StopClickDirective)
+    .directive('stopProp', StopPropDirective)
+    .directive('form', FormDirective)
+
+    .name;

src/popup/app/directives/directivesModule.js

@@ -1,2 +0,0 @@
-angular
-    .module('bit.directives', []);

src/popup/app/directives/fallback-src.directive.ts

@@ -0,0 +1,7 @@
+export function FallbackSrcDirective() {
+    return (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
+        element[0].addEventListener('error', (e: any) => {
+            e.target.src = attrs.fallbackSrc;
+        });
+    };
+}

src/popup/app/directives/fallbackSrcDirective.js

@@ -1,10 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('fallbackSrc', function () {
-        return function (scope, element, attrs) {
-            element[0].addEventListener('error', function (e) {
-                e.target.src = attrs.fallbackSrc;
-            });
-        };
-    });

src/popup/app/directives/form.directive.ts

@@ -0,0 +1,31 @@
+import { ValidationService } from '../services/validation.service';
+
+export function FormDirective($rootScope: ng.IRootScopeService, validationService: ValidationService) {
+    return {
+        require: 'form',
+        restrict: 'A',
+        link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes,
+               formCtrl: ng.IFormController) => {
+            const watchPromise = attrs.bitForm || null;
+            if (watchPromise) {
+                scope.$watch(watchPromise, formSubmitted.bind(null, formCtrl, scope));
+            }
+        },
+    };
+
+    function formSubmitted(form: any, scope: ng.IScope, promise: any) {
+        if (!promise || !promise.then) {
+            return;
+        }
+
+        // start loading
+        form.$loading = true;
+
+        promise.then((response: any) => {
+            form.$loading = false;
+        }, (reason: any) => {
+            form.$loading = false;
+            validationService.showError(reason);
+        });
+    }
+}

src/popup/app/directives/formDirective.js

@@ -1,31 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('bitForm', function ($rootScope, validationService) {
-        return {
-            require: 'form',
-            restrict: 'A',
-            link: function (scope, element, attrs, formCtrl) {
-                var watchPromise = attrs.bitForm || null;
-                if (watchPromise) {
-                    scope.$watch(watchPromise, formSubmitted.bind(null, formCtrl, scope));
-                }
-            }
-        };
-
-        function formSubmitted(form, scope, promise) {
-            if (!promise || !promise.then) {
-                return;
-            }
-
-            // start loading
-            form.$loading = true;
-
-            promise.then(function success(response) {
-                form.$loading = false;
-            }, function failure(reason) {
-                form.$loading = false;
-                validationService.showError(reason);
-            });
-        }
-    });

src/popup/app/directives/stop-click.directive.ts

@@ -0,0 +1,8 @@
+export function StopClickDirective() {
+    // ref: https://stackoverflow.com/a/14165848/1090359
+    return (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
+        element[0].addEventListener('click', (e) => {
+            e.preventDefault();
+        });
+    };
+}

src/popup/app/directives/stop-prop.directive.ts

@@ -0,0 +1,7 @@
+export function StopPropDirective() {
+    return (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
+        element[0].addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+    };
+}

src/popup/app/directives/stopClickDirective.js

@@ -1,11 +0,0 @@
-angular
-    .module('bit.directives')
-
-    // ref: https://stackoverflow.com/a/14165848/1090359
-    .directive('stopClick', function () {
-        return function (scope, element, attrs) {
-            element[0].addEventListener('click', function (e) {
-                e.preventDefault();
-            });
-        };
-    });

src/popup/app/directives/stopPropDirective.js

@@ -1,10 +0,0 @@
-angular
-    .module('bit.directives')
-
-    .directive('stopProp', function () {
-        return function (scope, element, attrs) {
-            element[0].addEventListener('click', function (e) {
-                e.stopPropagation();
-            });
-        };
-    });

src/popup/app/services/services.module.ts

@@ -2,7 +2,7 @@ import * as angular from 'angular';
 import AuthService from './auth.service';
 import * as backgroundServices from './background.service';
 import StateService from './state.service';
-import ValidationService from './validation.service';
+import { ValidationService } from './validation.service';
 
 export default angular
     .module('bit.services', ['toastr'])

src/popup/app/services/validation.service.ts

@@ -1,6 +1,6 @@
 import * as angular from 'angular';
 
-class ValidationService {
+export class ValidationService {
     constructor(private toastr: any, private i18nService: any) {
     }
 
@@ -28,5 +28,3 @@ class ValidationService {
     }
 
 }
-
-export default ValidationService;