From f5ccc2207637bb8cced9c6b9923d2a6a535c1d73 Mon Sep 17 00:00:00 2001 From: Oscar Hinton Date: Sat, 25 Nov 2017 14:02:22 +0100 Subject: [PATCH] [TypeScript] Convert directives (#396) * Convert directives to TypeScript. * FormDirective uses ValidationService type. --- src/popup/app/app.js | 8 ++--- src/popup/app/directives/directives.module.ts | 16 ++++++++++ src/popup/app/directives/directivesModule.js | 2 -- .../app/directives/fallback-src.directive.ts | 7 +++++ .../app/directives/fallbackSrcDirective.js | 10 ------ src/popup/app/directives/form.directive.ts | 31 +++++++++++++++++++ src/popup/app/directives/formDirective.js | 31 ------------------- .../app/directives/stop-click.directive.ts | 8 +++++ .../app/directives/stop-prop.directive.ts | 7 +++++ .../app/directives/stopClickDirective.js | 11 ------- src/popup/app/directives/stopPropDirective.js | 10 ------ src/popup/app/services/services.module.ts | 2 +- src/popup/app/services/validation.service.ts | 4 +-- 13 files changed, 73 insertions(+), 74 deletions(-) create mode 100644 src/popup/app/directives/directives.module.ts delete mode 100644 src/popup/app/directives/directivesModule.js create mode 100644 src/popup/app/directives/fallback-src.directive.ts delete mode 100644 src/popup/app/directives/fallbackSrcDirective.js create mode 100644 src/popup/app/directives/form.directive.ts delete mode 100644 src/popup/app/directives/formDirective.js create mode 100644 src/popup/app/directives/stop-click.directive.ts create mode 100644 src/popup/app/directives/stop-prop.directive.ts delete mode 100644 src/popup/app/directives/stopClickDirective.js delete mode 100644 src/popup/app/directives/stopPropDirective.js diff --git a/src/popup/app/app.js b/src/popup/app/app.js index 8d493f1d93b..a41b20d7285 100644 --- a/src/popup/app/app.js +++ b/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'); diff --git a/src/popup/app/directives/directives.module.ts b/src/popup/app/directives/directives.module.ts new file mode 100644 index 00000000000..1ab46d2e26e --- /dev/null +++ b/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; diff --git a/src/popup/app/directives/directivesModule.js b/src/popup/app/directives/directivesModule.js deleted file mode 100644 index ca42509753e..00000000000 --- a/src/popup/app/directives/directivesModule.js +++ /dev/null @@ -1,2 +0,0 @@ -angular - .module('bit.directives', []); diff --git a/src/popup/app/directives/fallback-src.directive.ts b/src/popup/app/directives/fallback-src.directive.ts new file mode 100644 index 00000000000..8a8a540dcc4 --- /dev/null +++ b/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; + }); + }; +} diff --git a/src/popup/app/directives/fallbackSrcDirective.js b/src/popup/app/directives/fallbackSrcDirective.js deleted file mode 100644 index 83cb78537b3..00000000000 --- a/src/popup/app/directives/fallbackSrcDirective.js +++ /dev/null @@ -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; - }); - }; - }); diff --git a/src/popup/app/directives/form.directive.ts b/src/popup/app/directives/form.directive.ts new file mode 100644 index 00000000000..b279ca0a7e3 --- /dev/null +++ b/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); + }); + } +} diff --git a/src/popup/app/directives/formDirective.js b/src/popup/app/directives/formDirective.js deleted file mode 100644 index 0a89eda74fa..00000000000 --- a/src/popup/app/directives/formDirective.js +++ /dev/null @@ -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); - }); - } - }); diff --git a/src/popup/app/directives/stop-click.directive.ts b/src/popup/app/directives/stop-click.directive.ts new file mode 100644 index 00000000000..34cac772e82 --- /dev/null +++ b/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(); + }); + }; +} diff --git a/src/popup/app/directives/stop-prop.directive.ts b/src/popup/app/directives/stop-prop.directive.ts new file mode 100644 index 00000000000..6f161341c6f --- /dev/null +++ b/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(); + }); + }; +} diff --git a/src/popup/app/directives/stopClickDirective.js b/src/popup/app/directives/stopClickDirective.js deleted file mode 100644 index e6e07d4737a..00000000000 --- a/src/popup/app/directives/stopClickDirective.js +++ /dev/null @@ -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(); - }); - }; - }); diff --git a/src/popup/app/directives/stopPropDirective.js b/src/popup/app/directives/stopPropDirective.js deleted file mode 100644 index 42c6b75b64c..00000000000 --- a/src/popup/app/directives/stopPropDirective.js +++ /dev/null @@ -1,10 +0,0 @@ -angular - .module('bit.directives') - - .directive('stopProp', function () { - return function (scope, element, attrs) { - element[0].addEventListener('click', function (e) { - e.stopPropagation(); - }); - }; - }); diff --git a/src/popup/app/services/services.module.ts b/src/popup/app/services/services.module.ts index 535b9974c31..846a085918f 100644 --- a/src/popup/app/services/services.module.ts +++ b/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']) diff --git a/src/popup/app/services/validation.service.ts b/src/popup/app/services/validation.service.ts index 21b61e83432..747c151c56e 100644 --- a/src/popup/app/services/validation.service.ts +++ b/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;