From b109675e64754f5c99e5b891ef088a5273eba9f8 Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Sun, 12 Apr 2020 18:06:44 -0500 Subject: [PATCH] More directive TS --- app/assets/javascripts/application.ts | 7 +-- .../directives/views/componentModal.js | 36 ------------- .../directives/views/componentModal.ts | 50 +++++++++++++++++++ .../directives/views/{index.js => index.ts} | 0 .../views/{inputModal.js => inputModal.ts} | 26 +++++++--- .../views/{menuRow.js => menuRow.ts} | 12 +++-- app/assets/javascripts/types.ts | 3 +- .../templates/directives/input-modal.pug | 1 - 8 files changed, 85 insertions(+), 50 deletions(-) delete mode 100644 app/assets/javascripts/directives/views/componentModal.js create mode 100644 app/assets/javascripts/directives/views/componentModal.ts rename app/assets/javascripts/directives/views/{index.js => index.ts} (100%) rename app/assets/javascripts/directives/views/{inputModal.js => inputModal.ts} (51%) rename app/assets/javascripts/directives/views/{menuRow.js => menuRow.ts} (77%) diff --git a/app/assets/javascripts/application.ts b/app/assets/javascripts/application.ts index f6b846289..9dc3c4748 100644 --- a/app/assets/javascripts/application.ts +++ b/app/assets/javascripts/application.ts @@ -1,3 +1,4 @@ +import { InputModalScope } from './directives/views/inputModal'; import { PasswordWizardType, PasswordWizardScope } from './types'; import { Environment, @@ -226,7 +227,7 @@ export class WebApplication extends SNApplication { } presentPasswordModal(callback: () => void) { - const scope: any = this.scope!.$new(true); + const scope = this.scope!.$new(true) as InputModalScope; scope.type = "password"; scope.title = "Decryption Assistance"; scope.message = `Unable to decrypt this item with your current keys. @@ -234,8 +235,8 @@ export class WebApplication extends SNApplication { scope.callback = callback; const el = this.$compile!( `` - )(scope); + title='title' callback='callback()'>` + )(scope as any); angular.element(document.body).append(el); } diff --git a/app/assets/javascripts/directives/views/componentModal.js b/app/assets/javascripts/directives/views/componentModal.js deleted file mode 100644 index ef277014c..000000000 --- a/app/assets/javascripts/directives/views/componentModal.js +++ /dev/null @@ -1,36 +0,0 @@ -import template from '%/directives/component-modal.pug'; - -export class ComponentModalCtrl { - /* @ngInject */ - constructor($element) { - this.$element = $element; - } - - dismiss() { - if(this.onDismiss) { - this.onDismiss(this.component); - } - this.callback && this.callback(); - const elem = this.$element; - const scope = elem.scope(); - scope.$destroy(); - elem.remove(); - } -} - -export class ComponentModal { - constructor() { - this.restrict = 'E'; - this.template = template; - this.controller = ComponentModalCtrl; - this.controllerAs = 'ctrl'; - this.bindToController = true; - this.scope = { - show: '=', - component: '=', - callback: '=', - onDismiss: '&', - application: '=' - }; - } -} diff --git a/app/assets/javascripts/directives/views/componentModal.ts b/app/assets/javascripts/directives/views/componentModal.ts new file mode 100644 index 000000000..a884ec645 --- /dev/null +++ b/app/assets/javascripts/directives/views/componentModal.ts @@ -0,0 +1,50 @@ +import { WebApplication } from './../../application'; +import { SNComponent } from 'snjs'; +import { WebDirective } from './../../types'; +import template from '%/directives/component-modal.pug'; + +type ComponentModalScope = { + component: SNComponent + callback: () => void + onDismiss: (component: SNComponent) => void + application: WebApplication +} + +export class ComponentModalCtrl implements ComponentModalScope { + $element: JQLite + component!: SNComponent + callback!: () => void + onDismiss!: (component: SNComponent) => void + application!: WebApplication + + /* @ngInject */ + constructor($element: JQLite) { + this.$element = $element; + } + + dismiss() { + this.onDismiss && this.onDismiss(this.component); + this.callback && this.callback(); + const elem = this.$element; + const scope = elem.scope(); + scope.$destroy(); + elem.remove(); + } +} + +export class ComponentModal extends WebDirective { + constructor() { + super(); + this.restrict = 'E'; + this.template = template; + this.controller = ComponentModalCtrl; + this.controllerAs = 'ctrl'; + this.bindToController = true; + this.scope = { + component: '=', + callback: '=', + onDismiss: '&', + application: '=' + }; + } +} diff --git a/app/assets/javascripts/directives/views/index.js b/app/assets/javascripts/directives/views/index.ts similarity index 100% rename from app/assets/javascripts/directives/views/index.js rename to app/assets/javascripts/directives/views/index.ts diff --git a/app/assets/javascripts/directives/views/inputModal.js b/app/assets/javascripts/directives/views/inputModal.ts similarity index 51% rename from app/assets/javascripts/directives/views/inputModal.js rename to app/assets/javascripts/directives/views/inputModal.ts index f9147c7a8..4c97d487b 100644 --- a/app/assets/javascripts/directives/views/inputModal.js +++ b/app/assets/javascripts/directives/views/inputModal.ts @@ -1,11 +1,25 @@ +import { WebDirective } from './../../types'; import template from '%/directives/input-modal.pug'; -class InputModalCtrl { +export interface InputModalScope extends Partial { + type: string + title: string + message: string + callback: (value: string) => void +} + +class InputModalCtrl implements InputModalScope { + + $element: JQLite + type!: string + title!: string + message!: string + callback!: (value: string) => void + formData = { input: '' } /* @ngInject */ - constructor($element) { + constructor($element: JQLite) { this.$element = $element; - this.formData = {}; } dismiss() { @@ -16,13 +30,14 @@ class InputModalCtrl { } submit() { - this.callback()(this.formData.input); + this.callback(this.formData.input); this.dismiss(); } } -export class InputModal { +export class InputModal extends WebDirective { constructor() { + super(); this.restrict = 'E'; this.template = template; this.controller = InputModalCtrl; @@ -32,7 +47,6 @@ export class InputModal { type: '=', title: '=', message: '=', - placeholder: '=', callback: '&' }; } diff --git a/app/assets/javascripts/directives/views/menuRow.js b/app/assets/javascripts/directives/views/menuRow.ts similarity index 77% rename from app/assets/javascripts/directives/views/menuRow.js rename to app/assets/javascripts/directives/views/menuRow.ts index 6d5373654..1df264576 100644 --- a/app/assets/javascripts/directives/views/menuRow.js +++ b/app/assets/javascripts/directives/views/menuRow.ts @@ -1,8 +1,13 @@ +import { WebDirective } from './../../types'; import template from '%/directives/menu-row.pug'; class MenuRowCtrl { - onClick($event) { + disabled!: boolean + action!: () => void + buttonAction!: () => void + + onClick($event: Event) { if(this.disabled) { return; } @@ -10,7 +15,7 @@ class MenuRowCtrl { this.action(); } - clickAccessoryButton($event) { + clickAccessoryButton($event: Event) { if(this.disabled) { return; } @@ -19,8 +24,9 @@ class MenuRowCtrl { } } -export class MenuRow { +export class MenuRow extends WebDirective { constructor() { + super(); this.restrict = 'E'; this.transclude = true; this.template = template; diff --git a/app/assets/javascripts/types.ts b/app/assets/javascripts/types.ts index b28acd376..8a9a9b493 100644 --- a/app/assets/javascripts/types.ts +++ b/app/assets/javascripts/types.ts @@ -6,7 +6,8 @@ export class WebDirective implements ng.IDirective { restrict?: string; replace?: boolean scope?: boolean | { [boundProperty: string]: string }; - template?: string | ((tElement: any, tAttrs: any) => string); + template?: string | ((tElement: any, tAttrs: any) => string) + transclude?: boolean } export enum PasswordWizardType { diff --git a/app/assets/templates/directives/input-modal.pug b/app/assets/templates/directives/input-modal.pug index e6c0ded10..ec3c43e66 100644 --- a/app/assets/templates/directives/input-modal.pug +++ b/app/assets/templates/directives/input-modal.pug @@ -15,7 +15,6 @@ form(ng-submit="ctrl.submit()") input.sk-input.contrast( ng-model="ctrl.formData.input" - placeholder="{{ctrl.placeholder}}" should-focus="true" sn-autofocus="true" type="{{ctrl.type}}"