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

Fixes issue with components in revision preview not iframe loading, misc css/html updates

Browse Source
This commit is contained in:
Mo Bitar
2018-12-17 09:52:25 -06:00
parent 363fb7bd7f
commit 2f20e92af1
12 changed files with 73 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/app/controllers/editor.js
View File

@@ -613,7 +613,9 @@ angular.module('app')
this.reloadComponentContext();
}
}, contextRequestHandler: (component) => {
return this.note;
if(component == this.selectedEditor || this.componentStack.includes(component)) {
return this.note;
}
}, focusHandler: (component, focused) => {
if(component.isEditor() && focused) {
this.closeAllMenus();

6
app/assets/javascripts/app/controllers/home.js
View File

@@ -208,7 +208,7 @@ angular.module('app')
modelManager.setItemToBeDeleted(tag);
syncManager.sync().then(() => {
// force scope tags to update on sub directives
$scope.safeApply();
$rootScope.safeApply();
});
}
}
@@ -230,7 +230,7 @@ angular.module('app')
Shared Callbacks
*/
$scope.safeApply = function(fn) {
$rootScope.safeApply = function(fn) {
var phase = this.$root.$$phase;
if(phase == '$apply' || phase == '$digest')
this.$eval(fn);
@@ -262,7 +262,7 @@ angular.module('app')
// when deleting items while ofline, we need to explictly tell angular to refresh UI
setTimeout(function () {
$rootScope.notifyDelete();
$scope.safeApply();
$rootScope.safeApply();
}, 50);
} else {
$timeout(() => {

14
app/assets/javascripts/app/directives/views/componentView.js
View File

@@ -94,7 +94,6 @@ class ComponentView {
}
}, 3500);
iframe.onload = (event) => {
// console.log("iframe loaded for component", component.name, "cancelling load timeout", $scope.loadTimeout);
$timeout.cancel($scope.loadTimeout);
componentManager.registerComponentWindow(component, iframe.contentWindow);
@@ -141,7 +140,11 @@ class ComponentView {
$scope.reloadComponent = function() {
console.log("Reloading component", $scope.component);
componentManager.reloadComponent($scope.component);
// force iFrame to deinit, allows new one to be created
$scope.componentValid = false;
componentManager.reloadComponent($scope.component).then(() => {
$scope.reloadStatus();
});
}
$scope.reloadStatus = function(doManualReload = true) {
@@ -160,7 +163,11 @@ class ComponentView {
$scope.expired = component.valid_until && component.valid_until <= new Date();
component.readonly = $scope.expired;
// Here we choose our own readonly state based on custom logic. However, if a parent
// wants to implement their own readonly logic, they can lock it.
if(!component.lockReadonly) {
component.readonly = $scope.expired;
}
$scope.componentValid = !offlineRestricted && !urlError;
@@ -234,7 +241,6 @@ class ComponentView {
}
$scope.$on("$destroy", function() {
// console.log("Deregistering handler", $scope.identifier, $scope.component.name);
$scope.destroy();
});
}

35
app/assets/javascripts/app/directives/views/revisionPreviewModal.js
View File

@@ -13,7 +13,7 @@ class RevisionPreviewModal {
$scope.el = el;
}
controller($scope, modelManager, syncManager, componentManager) {
controller($scope, modelManager, syncManager, componentManager, $timeout) {
'ngInject';
$scope.dismiss = function() {
@@ -31,29 +31,32 @@ class RevisionPreviewModal {
// Set UUID to editoForNote can find proper editor,
// but then generate new uuid for note as not to save changes to original, if editor makes changes.
$scope.note.uuid = $scope.uuid;
let editor = componentManager.editorForNote($scope.note);
let editorForNote = componentManager.editorForNote($scope.note);
$scope.note.uuid = SFJS.crypto.generateUUIDSync();
if(editor) {
if(editorForNote) {
// Create temporary copy, as a lot of componentManager is uuid based,
// so might interfere with active editor. Be sure to copy only the content, as the
// top level editor object has non-copyable properties like .window, which cannot be transfered
$scope.editor = new SNComponent({content: editor.content});
$scope.editor.readonly = true;
$scope.identifier = $scope.editor.uuid;
let editorCopy = new SNComponent({content: editorForNote.content});
editorCopy.readonly = true;
editorCopy.lockReadonly = true;
$scope.identifier = editorCopy.uuid;
componentManager.registerHandler({identifier: $scope.identifier, areas: ["editor-editor"],
contextRequestHandler: (component) => {
if(component == $scope.editor) {
return $scope.note;
contextRequestHandler: (component) => {
if(component == $scope.editor) {
return $scope.note;
}
},
componentForSessionKeyHandler: (key) => {
if(key == $scope.editor.sessionKey) {
return $scope.editor;
}
}
},
componentForSessionKeyHandler: (key) => {
if(key == $scope.editor.sessionKey) {
return $scope.editor;
}
}
});
});
$scope.editor = editorCopy;
}

36
app/assets/javascripts/app/services/componentManager.js
View File

@@ -299,6 +299,9 @@ class ComponentManager {
for(let handler of this.handlers) {
if(handler.componentForSessionKeyHandler) {
component = handler.componentForSessionKeyHandler(key);
if(component) {
break;
}
}
}
}
@@ -881,25 +884,29 @@ class ComponentManager {
}
/* Performs func in timeout, but syncronously, if used `await waitTimeout` */
async waitTimeout(func) {
return new Promise((resolve, reject) => {
this.timeout(() => {
func();
resolve();
});
})
}
// No longer used. See comment in activateComponent.
// async waitTimeout(func) {
// return new Promise((resolve, reject) => {
// this.timeout(() => {
// func();
// resolve();
// });
// })
// }
async activateComponent(component, dontSync = false) {
var didChange = component.active != true;
component.active = true;
for(var handler of this.handlers) {
for(let handler of this.handlers) {
if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
// We want to run the handler in a $timeout so the UI updates, but we also don't want it to run asyncronously
// so that the steps below this one are run before the handler. So we run in a waitTimeout.
await this.waitTimeout(() => {
// Update 12/18: We were using this.waitTimeout previously, however, that caused the iframe.onload callback to never be called
// for some reason for iframes on desktop inside the revision-preview-modal. So we'll use safeApply instead. I'm not quite sure
// where the original "so the UI updates" comment applies to, but we'll have to keep an eye out to see if this causes problems somewhere else.
this.$rootScope.safeApply(() => {
handler.activationHandler && handler.activationHandler(component);
})
}
@@ -926,7 +933,8 @@ class ComponentManager {
for(let handler of this.handlers) {
if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
await this.waitTimeout(() => {
// See comment in activateComponent regarding safeApply and awaitTimeout
this.$rootScope.safeApply(() => {
handler.activationHandler && handler.activationHandler(component);
})
}
@@ -960,7 +968,8 @@ class ComponentManager {
for(let handler of this.handlers) {
if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
await this.waitTimeout(() => {
// See comment in activateComponent regarding safeApply and awaitTimeout
this.$rootScope.safeApply(() => {
handler.activationHandler && handler.activationHandler(component);
})
}
@@ -986,7 +995,8 @@ class ComponentManager {
component.active = true;
for(var handler of this.handlers) {
if(handler.areas.includes(component.area) || handler.areas.includes("*")) {
await this.waitTimeout(() => {
// See comment in activateComponent regarding safeApply and awaitTimeout
this.$rootScope.safeApply(() => {
handler.activationHandler && handler.activationHandler(component);
})
}