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

Fixes and improvements related to components

Browse Source
This commit is contained in:
Mo Bitar
2020-04-15 19:17:08 -05:00
parent 1280c2ec52
commit 407e3ea0d8
21 changed files with 276 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/directives/functional/infiniteScroll.ts
View File

@@ -8,7 +8,7 @@ export function infiniteScroll() {
const element = elem[0];
scopeAny.paginate = debounce(() => {
scope.$apply(attrs.infiniteScroll);
}, 100);
}, 10);
scopeAny.onScroll = () => {
if (
scope.$eval(attrs.canLoad) &&

28
app/assets/javascripts/directives/views/componentModal.ts
View File

@@ -1,10 +1,10 @@
import { WebApplication } from '@/ui_models/application';
import { SNComponent } from 'snjs';
import { SNComponent, LiveItem } from 'snjs';
import { WebDirective } from './../../types';
import template from '%/directives/component-modal.pug';
type ComponentModalScope = {
component: SNComponent
export type ComponentModalScope = {
componentUuid: string
callback: () => void
onDismiss: (component: SNComponent) => void
application: WebApplication
@@ -12,16 +12,34 @@ type ComponentModalScope = {
export class ComponentModalCtrl implements ComponentModalScope {
$element: JQLite
component!: SNComponent
componentUuid!: string
callback!: () => void
onDismiss!: (component: SNComponent) => void
application!: WebApplication
liveComponent!: LiveItem<SNComponent>
component!: SNComponent
/* @ngInject */
constructor($element: JQLite) {
this.$element = $element;
}
$onInit() {
this.liveComponent = new LiveItem(
this.componentUuid,
this.application,
(component) => {
this.component = component;
}
);
this.application.componentGroup.activateComponent(this.component);
}
$onDestroy() {
this.application.componentGroup.deactivateComponent(this.component);
this.liveComponent.deinit();
}
dismiss() {
this.onDismiss && this.onDismiss(this.component);
this.callback && this.callback();
@@ -41,7 +59,7 @@ export class ComponentModal extends WebDirective {
this.controllerAs = 'ctrl';
this.bindToController = true;
this.scope = {
component: '=',
componentUuid: '=',
callback: '=',
onDismiss: '&',
application: '='

53
app/assets/javascripts/directives/views/componentView.ts
View File

@@ -30,7 +30,6 @@ class ComponentViewCtrl implements ComponentViewScope {
private cleanUpOn: () => void
private unregisterComponentHandler!: () => void
private unregisterDesktopObserver!: () => void
private didRegisterObservers = false
private issueLoading = false
public reloading = false
private expired = false
@@ -74,7 +73,6 @@ class ComponentViewCtrl implements ComponentViewScope {
$onInit() {
this.liveComponent = new LiveItem(this.componentUuid, this.application);
this.loadComponent();
this.registerComponentHandlers();
this.registerPackageUpdateObserver();
}
@@ -83,6 +81,13 @@ class ComponentViewCtrl implements ComponentViewScope {
return this.liveComponent?.item;
}
public onIframeInit() {
/** Perform in timeout required so that dynamic iframe id is set (based on ctrl values) */
this.$timeout(() => {
this.loadComponent();
});
}
private loadComponent() {
if (!this.component) {
throw 'Component view is missing component';
@@ -91,7 +96,7 @@ class ComponentViewCtrl implements ComponentViewScope {
throw 'Component view component must be active';
}
const iframe = this.application.componentManager!.iframeForComponent(
this.component
this.componentUuid
);
if (!iframe) {
return;
@@ -103,7 +108,8 @@ class ComponentViewCtrl implements ComponentViewScope {
this.loadTimeout = this.$timeout(() => {
this.handleIframeLoadTimeout();
}, MaxLoadThreshold);
iframe.onload = (event) => {
iframe.onload = () => {
this.reloadStatus();
this.handleIframeLoad(iframe);
};
}
@@ -111,8 +117,8 @@ class ComponentViewCtrl implements ComponentViewScope {
private registerPackageUpdateObserver() {
this.unregisterDesktopObserver = this.application.getDesktopService()
.registerUpdateObserver((component: SNComponent) => {
if (component === this.component && component.active) {
this.reloadComponent();
if (component.uuid === this.component.uuid && component.active) {
this.reloadIframe();
}
});
}
@@ -129,25 +135,26 @@ class ComponentViewCtrl implements ComponentViewScope {
});
}
private reloadIframe() {
this.$timeout(() => {
this.reloading = true;
this.$timeout(() => {
this.reloading = false;
});
})
}
private onVisibilityChange() {
if (document.visibilityState === 'hidden') {
return;
}
if (this.issueLoading) {
this.reloadComponent();
this.reloadIframe();
}
}
public async reloadComponent() {
this.componentValid = false;
await this.application.componentManager!.reloadComponent(this.component);
this.reloadStatus();
}
public reloadStatus(doManualReload = true) {
this.reloading = true;
const component = this.component;
const previouslyValid = this.componentValid;
const offlineRestricted = component.offlineOnly && !isDesktopApplication();
const hasUrlError = function () {
if (isDesktopApplication()) {
@@ -157,9 +164,11 @@ class ComponentViewCtrl implements ComponentViewScope {
}
}();
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) {
this.application.componentManager!.setReadonlyStateForComponent(component, true);
this.application.componentManager!
.setReadonlyStateForComponent(component, this.expired);
}
this.componentValid = !offlineRestricted && !hasUrlError;
if (!this.componentValid) {
@@ -172,17 +181,9 @@ class ComponentViewCtrl implements ComponentViewScope {
} else {
this.error = undefined;
}
if (this.componentValid !== previouslyValid) {
if (this.componentValid) {
this.application.componentManager!.reloadComponent(component);
}
}
if (this.expired && doManualReload) {
this.$rootScope.$broadcast('reload-ext-dat');
}
this.$timeout(() => {
this.reloading = false;
}, 500);
}
private async handleIframeLoadTimeout() {
@@ -191,7 +192,7 @@ class ComponentViewCtrl implements ComponentViewScope {
this.issueLoading = true;
if (!this.didAttemptReload) {
this.didAttemptReload = true;
this.reloadComponent();
this.reloadIframe();
} else {
document.addEventListener(
VisibilityChangeKey,

5
app/assets/javascripts/services/nativeExtManager.ts
View File

@@ -1,4 +1,4 @@
import { isDesktopApplication, dictToArray } from '@/utils';
import { isDesktopApplication } from '@/utils';
import {
SNPredicate,
ContentType,
@@ -7,7 +7,8 @@ import {
ComponentAction,
FillItemContent,
ComponentMutator,
Copy
Copy,
dictToArray
} from 'snjs';
import { PayloadContent } from '@/../../../../snjs/dist/@types/protocol/payloads/generator';
import { ComponentPermission } from '@/../../../../snjs/dist/@types/models/app/component';

2
app/assets/javascripts/services/themeManager.ts
View File

@@ -92,7 +92,7 @@ export class ThemeManager extends ApplicationService {
const activeThemes = this.application!.componentManager!.getActiveThemes();
for (const theme of activeThemes) {
if (theme) {
this.application!.componentManager!.deregisterComponent(theme);
this.application!.componentManager!.deregisterComponent(theme.uuid);
}
}
this.activeThemes = [];

4
app/assets/javascripts/types.ts
View File

@@ -27,10 +27,6 @@ export interface PermissionsModalScope extends Partial<ng.IScope> {
callback: (approved: boolean) => void
}
export interface ModalComponentScope extends Partial<ng.IScope> {
component: SNComponent
}
export type PanelPuppet = {
onReady?: () => void
ready?: boolean

25
app/assets/javascripts/ui_models/component_group.ts
View File

@@ -1,6 +1,6 @@
import { dictToArray } from '../utils';
import { SNComponent, ComponentArea, removeFromArray } from 'snjs';
import { SNComponent, ComponentArea, removeFromArray, addIfUnique } from 'snjs';
import { WebApplication } from './application';
import { UuidString } from '@/../../../../snjs/dist/@types/types';
/** Areas that only allow a single component to be active */
const SingleComponentAreas = [
@@ -13,7 +13,7 @@ export class ComponentGroup {
private application: WebApplication
changeObservers: any[] = []
activeComponents: Partial<Record<string, SNComponent>> = {}
activeComponents: UuidString[] = []
constructor(application: WebApplication) {
@@ -27,12 +27,12 @@ export class ComponentGroup {
public deinit() {
(this.application as any) = undefined;
for (const component of this.allActiveComponents()) {
this.componentManager.deregisterComponent(component);
this.componentManager.deregisterComponent(component.uuid);
}
}
async activateComponent(component: SNComponent) {
if (this.activeComponents[component.uuid]) {
if (this.activeComponents.includes(component.uuid)) {
return;
}
if (SingleComponentAreas.includes(component.area)) {
@@ -41,17 +41,17 @@ export class ComponentGroup {
await this.deactivateComponent(currentActive, false);
}
}
this.activeComponents[component.uuid] = component;
await this.componentManager.activateComponent(component);
addIfUnique(this.activeComponents, component.uuid);
await this.componentManager.activateComponent(component.uuid);
this.notifyObservers();
}
async deactivateComponent(component: SNComponent, notify = true) {
if (!this.activeComponents[component.uuid]) {
if (!this.activeComponents.includes(component.uuid)) {
return;
}
delete this.activeComponents[component.uuid];
await this.componentManager.deactivateComponent(component);
removeFromArray(this.activeComponents, component.uuid);
await this.componentManager.deactivateComponent(component.uuid);
if(notify) {
this.notifyObservers();
}
@@ -69,8 +69,7 @@ export class ComponentGroup {
}
activeComponentsForArea(area: ComponentArea) {
const all = dictToArray(this.activeComponents);
return all.filter((c) => c.area === area);
return this.allActiveComponents().filter((c) => c.area === area);
}
allComponentsForArea(area: ComponentArea) {
@@ -78,7 +77,7 @@ export class ComponentGroup {
}
private allActiveComponents() {
return dictToArray(this.activeComponents);
return this.application.getAll(this.activeComponents) as SNComponent[];
}

4
app/assets/javascripts/utils.ts
View File

@@ -11,10 +11,6 @@ export function isNullOrUndefined(value: any) {
return value === null || value === undefined;
}
export function dictToArray<T>(dict: Record<any, T>) {
return Object.keys(dict).map((key) => dict[key]!);
}
export function getPlatformString() {
try {
const platform = navigator.platform.toLowerCase();

4
app/assets/javascripts/views/abstract/pure_view_ctrl.ts
View File

@@ -7,7 +7,7 @@ export type CtrlProps = Partial<Record<string, any>>
export class PureViewCtrl {
$timeout: ng.ITimeoutService
/** Passed through templates */
application?: WebApplication
application!: WebApplication
props: CtrlProps = {}
state: CtrlState = {}
private unsubApp: any
@@ -33,7 +33,7 @@ export class PureViewCtrl {
this.unsubState();
this.unsubApp = undefined;
this.unsubState = undefined;
this.application = undefined;
(this.application as any) = undefined;
if (this.stateTimeout) {
this.$timeout.cancel(this.stateTimeout);
}

13
app/assets/javascripts/views/application/application_view.ts
View File

@@ -1,4 +1,5 @@
import { WebDirective, PermissionsModalScope, ModalComponentScope } from '@/types';
import { ComponentModalScope } from './../../directives/views/componentModal';
import { WebDirective, PermissionsModalScope } from '@/types';
import { getPlatformString } from '@/utils';
import template from './application-view.pug';
import { AppStateEvent } from '@/services/state';
@@ -52,7 +53,7 @@ class ApplicationViewCtrl extends PureViewCtrl {
this.$location = undefined;
this.$rootScope = undefined;
this.$compile = undefined;
this.application = undefined;
(this.application as any) = undefined;
window.removeEventListener('dragover', this.onDragOver, true);
window.removeEventListener('drop', this.onDragDrop, true);
(this.onDragDrop as any) = undefined;
@@ -219,10 +220,12 @@ class ApplicationViewCtrl extends PureViewCtrl {
}
openModalComponent(component: SNComponent) {
const scope = this.$rootScope!.$new(true) as ModalComponentScope;
scope.component = component;
const scope = this.$rootScope!.$new(true) as Partial<ComponentModalScope>;
scope.componentUuid = component.uuid;
scope.application = this.application;
const el = this.$compile!(
"<component-modal component='component' class='sk-modal'></component-modal>"
"<component-modal application='application' component-uuid='componentUuid' "
+ "class='sk-modal'></component-modal>"
)(scope as any);
angular.element(document.body).append(el);
}

2
app/assets/javascripts/views/editor/editor_view.ts
View File

@@ -1111,7 +1111,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
this.application.componentManager!.setComponentHidden(component, false);
await this.associateComponentWithCurrentNote(component);
if (!component.active) {
this.application.componentManager!.activateComponent(component);
this.application.componentManager!.activateComponent(component.uuid);
}
this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.EditorStack);
} else {

4
app/assets/javascripts/views/footer/footer-view.pug
View File

@@ -30,9 +30,9 @@
.sk-app-bar-item-column(ng-click='ctrl.selectRoom(room)')
.sk-label {{room.name}}
component-modal(
component='room',
component-uuid='room.uuid',
ng-if='ctrl.roomShowState[room.uuid]',
on-dismiss='ctrl.onRoomDismiss()',
on-dismiss='ctrl.onRoomDismiss(room)',
application='ctrl.application'
)
.center

1
app/assets/templates/directives/component-modal.pug
View File

@@ -11,6 +11,7 @@
| {{ctrl.component.name}}
a.sk-a.info.close-button(ng-click="ctrl.dismiss()") Close
component-view.component-view(
ng-if='ctrl.component.active'
component-uuid="ctrl.component.uuid",
application='ctrl.application'
)

9
app/assets/templates/directives/component-view.pug
View File

@@ -4,7 +4,7 @@
.sk-app-bar-item
.sk-label.warning There was an issue loading {{ctrl.component.name}}.
.right
.sk-app-bar-item(ng-click='ctrl.reloadComponent()')
.sk-app-bar-item(ng-click='ctrl.reloadIframe()')
.sk-button.info
.sk-label Reload
.sn-component(ng-if='ctrl.expired')
@@ -74,10 +74,11 @@
| version of the app.
| Ensure you are running at least version 2.1 on all platforms.
iframe(
data-component-id='{{ctrl.component.uuid}}',
data-component-id='{{ctrl.componentUuid}}',
frameborder='0',
ng-attr-id='component-iframe-{{ctrl.component.uuid}}',
ng-if='ctrl.component && ctrl.componentValid',
ng-init='ctrl.onIframeInit()'
ng-attr-id='component-iframe-{{ctrl.componentUuid}}',
ng-if='ctrl.componentUuid && !ctrl.reloading && ctrl.componentValid',
ng-src='{{ctrl.getUrl() | trusted}}',
sandbox='allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms'
)

13
dist/@types/app/assets/javascripts/directives/views/componentModal.d.ts vendored
View File

@@ -1,23 +1,26 @@
/// <reference types="angular" />
import { WebApplication } from '@/ui_models/application';
import { SNComponent } from 'snjs';
import { SNComponent, LiveItem } from 'snjs';
import { WebDirective } from './../../types';
declare type ComponentModalScope = {
component: SNComponent;
export declare type ComponentModalScope = {
componentUuid: string;
callback: () => void;
onDismiss: (component: SNComponent) => void;
application: WebApplication;
};
export declare class ComponentModalCtrl implements ComponentModalScope {
$element: JQLite;
component: SNComponent;
componentUuid: string;
callback: () => void;
onDismiss: (component: SNComponent) => void;
application: WebApplication;
liveComponent: LiveItem<SNComponent>;
component: SNComponent;
constructor($element: JQLite);
$onInit(): void;
$onDestroy(): void;
dismiss(): void;
}
export declare class ComponentModal extends WebDirective {
constructor();
}
export {};

3
dist/@types/app/assets/javascripts/types.d.ts vendored
View File

@@ -28,9 +28,6 @@ export interface PermissionsModalScope extends Partial<ng.IScope> {
permissionsString: string;
callback: (approved: boolean) => void;
}
export interface ModalComponentScope extends Partial<ng.IScope> {
component: SNComponent;
}
export declare type PanelPuppet = {
onReady?: () => void;
ready?: boolean;

8
dist/@types/app/assets/javascripts/ui_models/component_group.d.ts vendored
View File

@@ -1,15 +1,15 @@
import { SNComponent, ComponentArea } from 'snjs';
import { WebApplication } from './application';
import { UuidString } from '@/../../../../snjs/dist/@types/types';
export declare class ComponentGroup {
private application;
changeObservers: any[];
activeComponents: Partial<Record<string, SNComponent>>;
activeComponents: UuidString[];
constructor(application: WebApplication);
get componentManager(): import("../../../../../snjs/dist/@types").SNComponentManager;
deinit(): void;
registerComponentHandler(): void;
activateComponent(component: SNComponent): Promise<void>;
deactivateComponent(component: SNComponent): Promise<void>;
deactivateComponent(component: SNComponent, notify?: boolean): Promise<void>;
deactivateComponentForArea(area: ComponentArea): Promise<void>;
activeComponentForArea(area: ComponentArea): SNComponent;
activeComponentsForArea(area: ComponentArea): SNComponent[];
@@ -18,6 +18,6 @@ export declare class ComponentGroup {
/**
* Notifies observer when the active editor has changed.
*/
addChangeObserver(callback: any): void;
addChangeObserver(callback: () => void): () => void;
private notifyObservers;
}

1
dist/@types/app/assets/javascripts/utils.d.ts vendored
View File

@@ -1,6 +1,5 @@
export declare function getParameterByName(name: string, url: string): string | null;
export declare function isNullOrUndefined(value: any): boolean;
export declare function dictToArray<T>(dict: Record<any, T>): NonNullable<T>[];
export declare function getPlatformString(): string;
export declare function dateToLocalizedString(date: Date): string;
/** Via https://davidwalsh.name/javascript-debounce-function */

2
dist/@types/app/assets/javascripts/views/abstract/pure_view_ctrl.d.ts vendored
View File

@@ -6,7 +6,7 @@ export declare type CtrlProps = Partial<Record<string, any>>;
export declare class PureViewCtrl {
$timeout: ng.ITimeoutService;
/** Passed through templates */
application?: WebApplication;
application: WebApplication;
props: CtrlProps;
state: CtrlState;
private unsubApp;

355
dist/javascripts/app.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/javascripts/app.js.map vendored
View File

File diff suppressed because one or more lines are too long