Wip

app/assets/javascripts/app/frontend/controllers/tags.js

@@ -38,6 +38,8 @@ angular.module('app.frontend')
 
     var initialLoad = true;
 
+    this.componentManager = componentManager;
+
     componentManager.registerHandler({identifier: "tags", areas: ["tags-list"], activationHandler: function(component){
       this.component = component;
 

app/assets/javascripts/app/frontend/models/app/component.js

@@ -21,11 +21,14 @@ class Component extends Item {
     this.url = content.url;
     this.name = content.name;
 
+    this.package_info = content.package_info;
+
     // the location in the view this component is located in. Valid values are currently tags-list, note-tags, and editor-stack`
     this.area = content.area;
 
     this.permissions = content.permissions;
     this.active = content.active;
+    this.local = content.local;
 
     // custom data that a component can store in itself
     this.componentData = content.componentData || {};
@@ -42,8 +45,10 @@ class Component extends Item {
       url: this.url,
       name: this.name,
       area: this.area,
+      package_info: this.package_info,
       permissions: this.permissions,
       active: this.active,
+      local: this.local,
       componentData: this.componentData,
       disassociatedItemIds: this.disassociatedItemIds,
       associatedItemIds: this.associatedItemIds,

app/assets/javascripts/app/frontend/models/app/theme.js

@@ -8,12 +8,14 @@ class Theme extends Item {
     super.mapContentToLocalProperties(content)
     this.url = content.url;
     this.name = content.name;
+    this.local = content.local;
   }
 
   structureParams() {
     var params = {
       url: this.url,
       name: this.name,
+      local: this.local
     };
 
     _.merge(params, super.structureParams());

app/assets/javascripts/app/services/componentManager.js

@@ -3,12 +3,13 @@ let ClientDataDomain = "org.standardnotes.sn.components";
 
 class ComponentManager {
 
-  constructor($rootScope, modelManager, syncManager, themeManager, $timeout, $compile) {
+  constructor($rootScope, modelManager, syncManager, desktopManager, themeManager, $timeout, $compile) {
     this.$compile = $compile;
     this.$rootScope = $rootScope;
     this.modelManager = modelManager;
     this.syncManager = syncManager;
     this.themeManager = themeManager;
+    this.desktopManager = desktopManager;
     this.timeout = $timeout;
     this.streamObservers = [];
     this.contextStreamObservers = [];
@@ -42,6 +43,10 @@ class ComponentManager {
       }
 
       var syncedComponents = allItems.filter(function(item){return item.content_type === "SN|Component" });
+
+      // Ensure any component in our data is installed by the system
+      this.desktopManager.syncComponentsInstallation(syncedComponents);
+
       for(var component of syncedComponents) {
         var activeComponent = _.find(this.activeComponents, {uuid: component.uuid});
         if(component.active && !component.deleted && !activeComponent) {
@@ -191,19 +196,20 @@ class ComponentManager {
 
     /**
     Possible Messages:
-    set-size
-    stream-items
-    stream-context-item
-    save-items
-    select-item
-    associate-item
-    deassociate-item
-    clear-selection
-    create-item
-    delete-items
-    set-component-data
-    save-context-client-data
-    get-context-client-data
+      set-size
+      stream-items
+      stream-context-item
+      save-items
+      select-item
+      associate-item
+      deassociate-item
+      clear-selection
+      create-item
+      delete-items
+      set-component-data
+      save-context-client-data
+      get-context-client-data
+      install-local-component
     */
 
     if(message.action === "stream-items") {
@@ -274,6 +280,17 @@ class ComponentManager {
       });
     }
 
+    else if(message.action === "install-local-component") {
+      console.log("Received install-local-component event");
+      this.desktopManager.installOfflineComponentFromData(message.data, (response) => {
+        console.log("componentManager: installed component:", response);
+        var component = this.modelManager.mapResponseItemsToLocalModels([response], ModelManager.MappingSourceComponentRetrieved)[0];
+        // Save updated URL
+        component.setDirty(true);
+        this.syncManager.sync();
+      })
+    }
+
     for(let handler of this.handlers) {
       if(handler.areas.includes(component.area)) {
         this.timeout(function(){
@@ -585,6 +602,14 @@ class ComponentManager {
     component.ignoreEvents = !on;
   }
 
+  urlForComponent(component) {
+    if(isDesktopApplication() && component.local && component.url.startsWith("sn://")) {
+      return component.url.replace("sn://", this.desktopManager.getApplicationDataPath() + "/");
+    } else {
+      return component.url;
+    }
+  }
+
   iframeForComponent(component) {
     for(var frame of document.getElementsByTagName("iframe")) {
       var componentId = frame.dataset.componentId;

app/assets/javascripts/app/services/desktopManager.js

@@ -8,6 +8,8 @@ class DesktopManager {
     this.authManager = authManager;
     this.$rootScope = $rootScope;
 
+    this.isDesktop = isDesktopApplication();
+
     $rootScope.$on("initial-data-loaded", () => {
       this.dataLoaded = true;
       if(this.dataLoadHandler) {
@@ -22,6 +24,47 @@ class DesktopManager {
     })
   }
 
+  /* Can handle components and themes */
+  installOfflineComponentFromData(componentData, callback) {
+    this.componentInstallationHandler(componentData, (installedComponent) => {
+      componentData.content.url = installedComponent.content.url;
+      componentData.content.local = true;
+      callback(componentData);
+    });
+  }
+
+  getApplicationDataPath() {
+    console.assert(this.applicationDataPath, "applicationDataPath is null");
+    return this.applicationDataPath;
+  }
+
+  /* Sending a component in its raw state is really slow for the desktop app */
+  convertComponentForTransmission(component) {
+    return new ItemParams(component).paramsForExportFile();
+  }
+
+  // All `components` should be installed
+  syncComponentsInstallation(components) {
+    if(!this.isDesktop) return;
+    var data = components.map((component) => {
+      return this.convertComponentForTransmission(component);
+    })
+    this.installationSyncHandler(data);
+  }
+
+  /* Used to resolve "sn://" */
+  desktop_setApplicationDataPath(path) {
+    this.applicationDataPath = path;
+  }
+
+  desktop_setComponentInstallationSyncHandler(handler) {
+    this.installationSyncHandler = handler;
+  }
+
+  desktop_setOfflineComponentInstallationHandler(handler) {
+    this.componentInstallationHandler = handler;
+  }
+
   desktop_setInitialDataLoadHandler(handler) {
     this.dataLoadHandler = handler;
     if(this.dataLoaded) {

app/assets/javascripts/app/services/directives/views/editorMenu.js

@@ -16,10 +16,16 @@ class EditorMenu {
 
     $scope.editors = componentManager.componentsForArea("editor-editor");
 
+    $scope.isDesktop = isDesktopApplication();
+
     $scope.selectEditor = function($event, editor) {
       if(editor) {
         editor.conflict_of = null; // clear conflict if applicable
       }
+      if(editor.local && !isDesktopApplication()) {
+        alert("This editor is installed ")
+        return;
+      }
       $scope.callback()(editor);
     }
 

app/assets/javascripts/app/services/directives/views/roomBar.js

@@ -7,10 +7,9 @@ class RoomBar {
     };
   }
 
-  controller($rootScope, $scope, extensionManager, syncManager, modelManager, componentManager, $timeout) {
+  controller($rootScope, $scope, desktopManager, syncManager, modelManager, componentManager, $timeout) {
     'ngInject';
 
-    $scope.extensionManager = extensionManager;
     $scope.componentManager = componentManager;
 
     $rootScope.$on("initial-data-loaded", () => {
@@ -20,8 +19,48 @@ class RoomBar {
       })
     });
 
+    componentManager.registerHandler({identifier: "roomBar", areas: ["rooms"], activationHandler: function(component){
+      if(component.active) {
+        $timeout(function(){
+          var iframe = componentManager.iframeForComponent(component);
+          if(iframe) {
+            iframe.onload = function() {
+              componentManager.registerComponentWindow(component, iframe.contentWindow);
+            }.bind(this);
+          }
+        }.bind(this));
+      }
+    }.bind(this), actionHandler: function(component, action, data){
+      if(action === "set-size") {
+        console.log("Set size event", data);
+        var setSize = function(element, size) {
+          var widthString = typeof size.width === 'string' ? size.width : `${data.width}px`;
+          var heightString = typeof size.height === 'string' ? size.height : `${data.height}px`;
+          element.setAttribute("style", `width:${widthString}; height:${heightString}; `);
+        }
+
+        if(data.type === "content") {
+          var iframe = componentManager.iframeForComponent(component);
+          var width = data.width;
+          var height = data.height;
+          iframe.width  = width;
+          iframe.height = height;
+
+          setSize(iframe, data);
+        } else {
+          var container = document.getElementById("room-" + component.uuid);
+          setSize(container, data);
+        }
+      }
+    }.bind(this)});
+
     $scope.selectRoom = function(room) {
-      
+      room.show = !room.show;
+      if(room.show) {
+        this.componentManager.activateComponent(room);
+      } else {
+        this.componentManager.deactivateComponent(room);
+      }
     }
 
   }