rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

More directive TS

Browse Source
This commit is contained in:
Mo Bitar
2020-04-12 21:08:58 -05:00
parent 96db1cfd82
commit de99bc6739
3 changed files with 66 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
app/assets/javascripts/directives/views/componentView.js → app/assets/javascripts/directives/views/componentView.ts
View File

@@ -1,3 +1,6 @@
import { WebApplication } from '@/application';
import { SNComponent } from 'snjs';
import { WebDirective } from './../../types';
import template from '%/directives/component-view.pug'; import template from '%/directives/component-view.pug';
import { isDesktopApplication } from '../../utils'; import { isDesktopApplication } from '../../utils';
/** /**
@@ -8,16 +11,43 @@ const MAX_LOAD_THRESHOLD = 4000;
const VISIBILITY_CHANGE_LISTENER_KEY = 'visibilitychange'; const VISIBILITY_CHANGE_LISTENER_KEY = 'visibilitychange';
class ComponentViewCtrl { interface ComponentViewScope {
component: SNComponent
onLoad?: (component: SNComponent) => void
manualDealloc: boolean
application: WebApplication
}
class ComponentViewCtrl implements ComponentViewScope {
$rootScope: ng.IRootScopeService
$timeout: ng.ITimeoutService
componentValid = true
cleanUpOn: () => void
unregisterComponentHandler!: () => void
component!: SNComponent
onLoad?: (component: SNComponent) => void
manualDealloc = false
application!: WebApplication
unregisterDesktopObserver!: () => void
didRegisterObservers = false
lastComponentValue?: SNComponent
issueLoading = false
reloading = false
expired = false
loading = false
didAttemptReload = false
error: 'offline-restricted' | 'url-missing' | undefined
loadTimeout: any
/* @ngInject */ /* @ngInject */
constructor( constructor(
$scope, $scope: ng.IScope,
$rootScope, $rootScope: ng.IRootScopeService,
$timeout, $timeout: ng.ITimeoutService,
) { ) {
this.$rootScope = $rootScope; this.$rootScope = $rootScope;
this.$timeout = $timeout; this.$timeout = $timeout;
this.componentValid = true;
this.cleanUpOn = $scope.$on('ext-reload-complete', () => { this.cleanUpOn = $scope.$on('ext-reload-complete', () => {
this.reloadStatus(false); this.reloadStatus(false);
}); });
@@ -28,9 +58,9 @@ class ComponentViewCtrl {
$onDestroy() { $onDestroy() {
this.cleanUpOn(); this.cleanUpOn();
this.cleanUpOn = null; (this.cleanUpOn as any) = undefined;
this.unregisterComponentHandler(); this.unregisterComponentHandler();
this.unregisterComponentHandler = null; (this.unregisterComponentHandler as any) = undefined;
if (this.component && !this.manualDealloc) { if (this.component && !this.manualDealloc) {
/* application and componentManager may be destroyed if this onDestroy is part of /* application and componentManager may be destroyed if this onDestroy is part of
the entire application being destroyed rather than part of just a single component the entire application being destroyed rather than part of just a single component
@@ -40,19 +70,19 @@ class ComponentViewCtrl {
} }
} }
this.unregisterDesktopObserver(); this.unregisterDesktopObserver();
this.unregisterDesktopObserver = null; (this.unregisterDesktopObserver as any) = undefined;
document.removeEventListener( document.removeEventListener(
VISIBILITY_CHANGE_LISTENER_KEY, VISIBILITY_CHANGE_LISTENER_KEY,
this.onVisibilityChange this.onVisibilityChange
); );
this.component = null; (this.component as any) = undefined;
this.onLoad = null; this.onLoad = undefined;
this.application = null; (this.application as any) = undefined;
this.onVisibilityChange = null; (this.onVisibilityChange as any) = undefined;
} }
$onChanges() { $onChanges() {
if(!this.didRegisterObservers) { if (!this.didRegisterObservers) {
this.didRegisterObservers = true; this.didRegisterObservers = true;
this.registerComponentHandlers(); this.registerComponentHandlers();
this.registerPackageUpdateObserver(); this.registerPackageUpdateObserver();
@@ -61,22 +91,21 @@ class ComponentViewCtrl {
const oldComponent = this.lastComponentValue; const oldComponent = this.lastComponentValue;
this.lastComponentValue = newComponent; this.lastComponentValue = newComponent;
if (oldComponent && oldComponent !== newComponent) { if (oldComponent && oldComponent !== newComponent) {
this.application.componentManager.deregisterComponent( this.application.componentManager!.deregisterComponent(
oldComponent oldComponent
); );
} }
if (newComponent && newComponent !== oldComponent) { if (newComponent && newComponent !== oldComponent) {
this.application.componentManager.registerComponent( this.application.componentManager!.registerComponent(
newComponent newComponent
).then(() => { )
this.reloadStatus(); this.reloadStatus();
});
} }
} }
registerPackageUpdateObserver() { registerPackageUpdateObserver() {
this.unregisterDesktopObserver = this.application.getDesktopService() this.unregisterDesktopObserver = this.application.getDesktopService()
.registerUpdateObserver((component) => { .registerUpdateObserver((component: SNComponent) => {
if (component === this.component && component.active) { if (component === this.component && component.active) {
this.reloadComponent(); this.reloadComponent();
} }
@@ -84,7 +113,7 @@ class ComponentViewCtrl {
} }
registerComponentHandlers() { registerComponentHandlers() {
this.unregisterComponentHandler = this.application.componentManager.registerHandler({ this.unregisterComponentHandler = this.application.componentManager!.registerHandler({
identifier: 'component-view-' + Math.random(), identifier: 'component-view-' + Math.random(),
areas: [this.component.area], areas: [this.component.area],
activationHandler: (component) => { activationHandler: (component) => {
@@ -97,7 +126,7 @@ class ComponentViewCtrl {
}, },
actionHandler: (component, action, data) => { actionHandler: (component, action, data) => {
if (action === 'set-size') { if (action === 'set-size') {
this.application.componentManager.handleSetSizeEvent(component, data); this.application.componentManager!.handleSetSizeEvent(component, data);
} }
} }
}); });
@@ -114,7 +143,7 @@ class ComponentViewCtrl {
async reloadComponent() { async reloadComponent() {
this.componentValid = false; this.componentValid = false;
await this.application.componentManager.reloadComponent(this.component); await this.application.componentManager!.reloadComponent(this.component);
this.reloadStatus(); this.reloadStatus();
} }
@@ -131,9 +160,9 @@ class ComponentViewCtrl {
} }
}(); }();
this.expired = component.valid_until && component.valid_until <= new Date(); this.expired = component.valid_until && component.valid_until <= new Date();
const readonlyState = this.application.componentManager.getReadonlyStateForComponent(component); const readonlyState = this.application.componentManager!.getReadonlyStateForComponent(component);
if (!readonlyState.lockReadonly) { if (!readonlyState.lockReadonly) {
this.application.componentManager.setReadonlyStateForComponent(component, true); this.application.componentManager!.setReadonlyStateForComponent(component, true);
} }
this.componentValid = !offlineRestricted && !hasUrlError; this.componentValid = !offlineRestricted && !hasUrlError;
if (!this.componentValid) { if (!this.componentValid) {
@@ -144,11 +173,11 @@ class ComponentViewCtrl {
} else if (hasUrlError) { } else if (hasUrlError) {
this.error = 'url-missing'; this.error = 'url-missing';
} else { } else {
this.error = null; this.error = undefined;
} }
if (this.componentValid !== previouslyValid) { if (this.componentValid !== previouslyValid) {
if (this.componentValid) { if (this.componentValid) {
this.application.componentManager.reloadComponent(component, true); this.application.componentManager!.reloadComponent(component);
} }
} }
if (this.expired && doManualReload) { if (this.expired && doManualReload) {
@@ -164,7 +193,7 @@ class ComponentViewCtrl {
if (!this.component || !this.component.active) { if (!this.component || !this.component.active) {
return; return;
} }
const iframe = this.application.componentManager.iframeForComponent( const iframe = this.application.componentManager!.iframeForComponent(
this.component this.component
); );
if (!iframe) { if (!iframe) {
@@ -199,27 +228,27 @@ class ComponentViewCtrl {
} }
} }
async handleIframeLoad(iframe) { async handleIframeLoad(iframe: HTMLIFrameElement) {
let desktopError = false; let desktopError = false;
if (isDesktopApplication()) { if (isDesktopApplication()) {
try { try {
/** Accessing iframe.contentWindow.origin only allowed in desktop app. */ /** Accessing iframe.contentWindow.origin only allowed in desktop app. */
if (!iframe.contentWindow.origin || iframe.contentWindow.origin === 'null') { if (!iframe.contentWindow!.origin || iframe.contentWindow!.origin === 'null') {
desktopError = true; desktopError = true;
} }
} catch (e) { } } catch (e) { }
} }
this.$timeout.cancel(this.loadTimeout); this.$timeout.cancel(this.loadTimeout);
await this.application.componentManager.registerComponentWindow( await this.application.componentManager!.registerComponentWindow(
this.component, this.component,
iframe.contentWindow iframe.contentWindow!
); );
const avoidFlickerTimeout = 7; const avoidFlickerTimeout = 7;
this.$timeout(() => { this.$timeout(() => {
this.loading = false; this.loading = false;
// eslint-disable-next-line no-unneeded-ternary // eslint-disable-next-line no-unneeded-ternary
this.issueLoading = desktopError ? true : false; this.issueLoading = desktopError ? true : false;
this.onLoad && this.onLoad(this.component); this.onLoad && this.onLoad(this.component!);
}, avoidFlickerTimeout); }, avoidFlickerTimeout);
} }
@@ -228,14 +257,14 @@ class ComponentViewCtrl {
} }
getUrl() { getUrl() {
const url = this.application.componentManager.urlForComponent(this.component); const url = this.application.componentManager!.urlForComponent(this.component);
this.component.runningLocally = (url === this.component.local_url);
return url; return url;
} }
} }
export class ComponentView { export class ComponentView extends WebDirective {
constructor() { constructor() {
super();
this.restrict = 'E'; this.restrict = 'E';
this.template = template; this.template = template;
this.scope = { this.scope = {

11
app/assets/javascripts/directives/views/editorMenu.js
View File

@@ -72,17 +72,6 @@ class EditorMenuCtrl extends PureCtrl {
defaultEditor: null defaultEditor: null
}); });
} }
shouldDisplayRunningLocallyLabel(component) {
if(!component.runningLocally) {
return false;
}
if(component === this.selectedEditor) {
return true;
} else {
return false;
}
}
} }
export class EditorMenu { export class EditorMenu {

5
app/assets/templates/directives/editor-menu.pug
View File

@@ -19,14 +19,11 @@
label='editor.name', label='editor.name',
) )
.sk-menu-panel-column( .sk-menu-panel-column(
ng-if='editor.content.conflict_of || self.shouldDisplayRunningLocallyLabel(editor)' ng-if='editor.content.conflict_of'
) )
.info( .info(
ng-if='editor.content.conflict_of' ng-if='editor.content.conflict_of'
) Conflicted copy ) Conflicted copy
.sk-sublabel(
ng-if='self.shouldDisplayRunningLocallyLabel(editor)'
) Running Locally
a.no-decoration( a.no-decoration(
href='https://standardnotes.org/extensions', href='https://standardnotes.org/extensions',
ng-if='self.state.editors.length == 0', ng-if='self.state.editors.length == 0',