Editor stack associate/disassociate

2018-01-10 12:57:51 -06:00
parent ae29e502cb
commit 5db97b0a4c
6 changed files with 85 additions and 91 deletions
--- 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();
+    }



--- 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;
--- 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);
      }
    }

--- 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);
      })
    }

--- 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
--- 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