From 5db97b0a4c7930a473e9d9dbf221f4ceb553267a Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Wed, 10 Jan 2018 12:57:51 -0600 Subject: [PATCH] Editor stack associate/disassociate --- .../app/frontend/controllers/editor.js | 112 ++++++++++-------- .../app/services/componentManager.js | 32 ----- .../directives/views/componentView.js | 1 - .../services/directives/views/editorMenu.js | 10 +- .../frontend/directives/editor-menu.html.haml | 14 ++- .../templates/frontend/editor.html.haml | 7 +- 6 files changed, 85 insertions(+), 91 deletions(-) diff --git a/app/assets/javascripts/app/frontend/controllers/editor.js b/app/assets/javascripts/app/frontend/controllers/editor.js index 79af1fa4f..9e9415a62 100644 --- a/app/assets/javascripts/app/frontend/controllers/editor.js +++ b/app/assets/javascripts/app/frontend/controllers/editor.js @@ -103,28 +103,42 @@ angular.module('app.frontend') } } - this.selectEditor = function(editor) { - this.showEditorMenu = false; + this.onEditorMenuClick = function() { + // App bar menu item click + this.showEditorMenu = !this.showEditorMenu; + this.showMenu = false; + this.showExtensions = false; + } - if(editor) { - this.note.setAppDataItem("prefersPlainEditor", false); - this.note.setDirty(true); - componentManager.associateComponentWithItem(editor, this.note); - } else { - // Note prefers plain editor - if(this.selectedEditor) { - componentManager.disassociateComponentWithItem(this.selectedEditor, this.note); + this.editorMenuOnSelect = function(component) { + if(!component || component.area == "editor-editor") { + // if plain editor or other editor + this.showEditorMenu = false; + var editor = component; + if(editor) { + this.note.setAppDataItem("prefersPlainEditor", false); + this.note.setDirty(true); + componentManager.associateComponentWithItem(editor, this.note); + } else { + // Note prefers plain editor + if(this.selectedEditor) { + this.disableComponentForCurrentItem(this.selectedEditor); + } + this.note.setAppDataItem("prefersPlainEditor", true); + this.note.setDirty(true); + syncManager.sync(); + + $timeout(() => { + this.reloadFont(); + }) } - this.note.setAppDataItem("prefersPlainEditor", true); - this.note.setDirty(true); - syncManager.sync(); - $timeout(() => { - this.reloadFont(); - }) + this.selectedEditor = editor; + } else if(component.area == "editor-stack") { + // If component stack item + this.toggleStackComponentForCurrentItem(component); } - this.selectedEditor = editor; }.bind(this) this.hasAvailableExtensions = function() { @@ -467,51 +481,53 @@ angular.module('app.frontend') }.bind(this)}); this.reloadComponentContext = function() { - for(var component of this.componentStack) { - componentManager.setEventFlowForComponent(component, component.isActiveForItem(this.note)); - } - componentManager.contextItemDidChangeInArea("note-tags"); componentManager.contextItemDidChangeInArea("editor-stack"); componentManager.contextItemDidChangeInArea("editor-editor"); - } - let alertKey = "displayed-component-disable-alert"; - this.disableComponentForCurrentItem = function(component, showAlert) { - componentManager.disassociateComponentWithItem(component, this.note); - componentManager.setEventFlowForComponent(component, 0); - if(showAlert && !storageManager.getItem(alertKey)) { - alert("This component will be disabled for this note. You can re-enable this component in the 'Menu' of the editor pane."); - storageManager.setItem(alertKey, true); - } - } - - this.hasDisabledStackComponents = function() { - for(var component of this.componentStack) { - if(component.ignoreEvents) { - return true; + var stack = componentManager.componentsForArea("editor-stack"); + for(var component of stack) { + var activeForItem = component.isActiveForItem(this.note); + if(activeForItem) { + if(!component.active) { + componentManager.activateComponent(component); + } + } else { + if(component.active) { + componentManager.deactivateComponent(component); + } } } - - return false; } - this.restoreDisabledStackComponents = function() { - var relevantComponents = this.componentStack.filter(function(component){ - return component.ignoreEvents; - }) - - componentManager.enableComponentsForItem(relevantComponents, this.note); - - for(var component of relevantComponents) { - componentManager.setEventFlowForComponent(component, true); - componentManager.contextItemDidChangeInArea("editor-stack"); + this.toggleStackComponentForCurrentItem = function(component) { + if(component.isActiveForItem(this.note)) { + this.disableComponentForCurrentItem(component); + } else { + this.enableComponentForCurrentItem(component); } } + this.disableComponentForCurrentItem = function(component) { + componentManager.deactivateComponent(component); + _.pull(component.associatedItemIds, this.note.uuid); + if(component.disassociatedItemIds.indexOf(this.note.uuid) !== -1) { + return; + } + component.disassociatedItemIds.push(this.note.uuid); + component.setDirty(true); + syncManager.sync(); + } + this.enableComponentForCurrentItem = function(component) { + componentManager.activateComponent(component); + componentManager.contextItemDidChangeInArea("editor-stack"); + _.pull(component.disassociatedItemIds, this.note.uuid); + component.setDirty(true); + syncManager.sync(); + } diff --git a/app/assets/javascripts/app/services/componentManager.js b/app/assets/javascripts/app/services/componentManager.js index 916e44df6..29a1ec549 100644 --- a/app/assets/javascripts/app/services/componentManager.js +++ b/app/assets/javascripts/app/services/componentManager.js @@ -601,12 +601,6 @@ class ComponentManager { } sendMessageToComponent(component, message) { - if(component.ignoreEvents && message.action !== "component-registered") { - if(this.loggingEnabled) { - console.log("Component disabled for current item, not sending any messages.", component.name); - } - return; - } if(this.loggingEnabled) { console.log("Web|sendMessageToComponent", component, message); } @@ -686,7 +680,6 @@ class ComponentManager { } deactivateComponent(component) { - console.log("Deactivating component", component); var didChange = component.active != false; component.active = false; component.sessionKey = null; @@ -726,19 +719,6 @@ class ComponentManager { return component.active; } - disassociateComponentWithItem(component, item) { - _.pull(component.associatedItemIds, item.uuid); - - if(component.disassociatedItemIds.indexOf(item.uuid) !== -1) { - return; - } - - component.disassociatedItemIds.push(item.uuid); - - component.setDirty(true); - this.syncManager.sync(); - } - associateComponentWithItem(component, item) { _.pull(component.disassociatedItemIds, item.uuid); @@ -752,18 +732,6 @@ class ComponentManager { this.syncManager.sync(); } - enableComponentsForItem(components, item) { - for(var component of components) { - _.pull(component.disassociatedItemIds, item.uuid); - component.setDirty(true); - } - this.syncManager.sync(); - } - - setEventFlowForComponent(component, on) { - component.ignoreEvents = !on; - } - iframeForComponent(component) { for(var frame of document.getElementsByTagName("iframe")) { var componentId = frame.dataset.componentId; diff --git a/app/assets/javascripts/app/services/directives/views/componentView.js b/app/assets/javascripts/app/services/directives/views/componentView.js index f6ddf5db7..a3ac65527 100644 --- a/app/assets/javascripts/app/services/directives/views/componentView.js +++ b/app/assets/javascripts/app/services/directives/views/componentView.js @@ -54,7 +54,6 @@ class ComponentView { if(component) { componentManager.activateComponent(component); - componentManager.setEventFlowForComponent(component, 1); } } diff --git a/app/assets/javascripts/app/services/directives/views/editorMenu.js b/app/assets/javascripts/app/services/directives/views/editorMenu.js index 63a95af1c..0e6b4fc81 100644 --- a/app/assets/javascripts/app/services/directives/views/editorMenu.js +++ b/app/assets/javascripts/app/services/directives/views/editorMenu.js @@ -15,17 +15,19 @@ class EditorMenu { $scope.formData = {}; $scope.editors = componentManager.componentsForArea("editor-editor"); + $scope.stack = componentManager.componentsForArea("editor-stack"); $scope.isDesktop = isDesktopApplication(); $scope.defaultEditor = $scope.editors.filter((e) => {return e.isDefaultEditor()})[0]; - $scope.selectEditor = function($event, editor) { - if(editor) { - editor.conflict_of = null; // clear conflict if applicable + $scope.selectComponent = function($event, component) { + $event.stopPropagation(); + if(component) { + component.conflict_of = null; // clear conflict if applicable } $timeout(() => { - $scope.callback()(editor); + $scope.callback()(component); }) } diff --git a/app/assets/templates/frontend/directives/editor-menu.html.haml b/app/assets/templates/frontend/directives/editor-menu.html.haml index 6324f53f4..49e222f67 100644 --- a/app/assets/templates/frontend/directives/editor-menu.html.haml +++ b/app/assets/templates/frontend/directives/editor-menu.html.haml @@ -3,9 +3,9 @@ .section .header %h4.title Note Editor - %menu-row{"title" => "'Plain Editor'", "circle" => "selectedEditor == null && 'success'", "ng-click" => "selectEditor($event, null)"} + %menu-row{"title" => "'Plain Editor'", "circle" => "selectedEditor == null && 'success'", "ng-click" => "selectComponent($event, null)"} - %menu-row{"ng-repeat" => "editor in editors", "ng-click" => "selectEditor($event, editor)", "title" => "editor.name", + %menu-row{"ng-repeat" => "editor in editors", "ng-click" => "selectComponent($event, editor)", "title" => "editor.name", "circle" => "selectedEditor === editor && 'success'", "has-button" => "selectedEditor == editor || defaultEditor == editor", "button-text" => "defaultEditor == editor ? 'Undefault' : 'Set Default'", "button-action" => "toggleDefaultForEditor(editor)", "button-class" => "defaultEditor == editor ? 'warning' : 'info'"} @@ -17,3 +17,13 @@ %a.no-decoration{"ng-if" => "editors.length == 0", "href" => "https://standardnotes.org/extensions", "target" => "blank"} %menu-row{"title" => "'Download More Editors'", "ng-click" => "moreEditors()"} + .section + .header + %h4.title Editor Stack + %menu-row{"ng-repeat" => "component in stack", "ng-click" => "selectComponent($event, component)", "title" => "component.name", + "circle" => "component.active ? 'success' : 'danger'"} + .row + .column + %strong.red.medium{"ng-if" => "component.conflict_of"} Conflicted copy + .sublabel{"ng-if" => "component.local_url"} + Available Offline diff --git a/app/assets/templates/frontend/editor.html.haml b/app/assets/templates/frontend/editor.html.haml index 45a54105f..cb2ac39c1 100644 --- a/app/assets/templates/frontend/editor.html.haml +++ b/app/assets/templates/frontend/editor.html.haml @@ -25,16 +25,15 @@ %menu-row{"title" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"} %menu-row{"title" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"} %menu-row{"title" => "'Delete'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"} - %menu-row{"ng-if" => "ctrl.hasDisabledComponents()", "title" => "'Restore Disabled Components'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledComponents()"} - .section{"ng-if" => "!ctrl.editor"} + .section{"ng-if" => "!ctrl.selectedEditor"} .header %h4.title Display %menu-row{"title" => "'Monospace Font'", "circle" => "ctrl.monospaceFont ? 'success' : 'default'", "ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleKey('monospaceFont')"} - .item{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;", "ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"} + .item{"ng-click" => "ctrl.onEditorMenuClick()", "ng-class" => "{'selected' : ctrl.showEditorMenu}", "click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"} .label Editor - %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectEditor", "selected-editor" => "ctrl.selectedEditor"} + %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.editorMenuOnSelect", "selected-editor" => "ctrl.selectedEditor"} .item{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;", "ng-class" => "{'selected' : ctrl.showExtensions}", "ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"} .label Actions