web themes

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

@@ -7,10 +7,12 @@ class GlobalExtensionsMenu {
     };
   }
 
-  controller($scope, extensionManager, syncManager) {
+  controller($scope, extensionManager, syncManager, modelManager, themeManager) {
     'ngInject';
 
     $scope.extensionManager = extensionManager;
+    $scope.themeManager = themeManager;
+    $scope.state = {showDataExts: true, showThemes: true};
 
     $scope.toggleExtensionForm = function() {
       $scope.newExtensionData = {};
@@ -64,6 +66,19 @@ class GlobalExtensionsMenu {
         extensionManager.refreshExtensionsFromServer();
       }
     }
+
+    $scope.submitTheme = function() {
+      themeManager.submitTheme($scope.state.themeUrl);
+    }
+
+    $scope.deleteTheme = function(theme) {
+      if(confirm("Are you sure you want to delete this theme?")) {
+        themeManager.deactivateTheme(theme);
+        modelManager.setItemToBeDeleted(theme);
+        syncManager.sync();
+      }
+    }
+
   }
 
 }

app/assets/javascripts/app/services/modelManager.js

@@ -8,7 +8,7 @@ class ModelManager {
     this.itemChangeObservers = [];
     this.items = [];
     this._extensions = [];
-    this.acceptableContentTypes = ["Note", "Tag", "Extension", "SN|Editor"];
+    this.acceptableContentTypes = ["Note", "Tag", "Extension", "SN|Editor", "SN|Theme"];
   }
 
   get allItems() {
@@ -130,7 +130,9 @@ class ModelManager {
       item = new Extension(json_obj);
     } else if(json_obj.content_type == "SN|Editor") {
       item = new Editor(json_obj);
-    } else {
+    } else if(json_obj.content_type == "SN|Theme") {
+      item = new Theme(json_obj);
+    }  else {
       item = new Item(json_obj);
     }
 
@@ -255,7 +257,6 @@ class ModelManager {
       _.pull(this.tags, item);
     } else if(item.content_type == "Note") {
       _.pull(this.notes, item);
-
     } else if(item.content_type == "Extension") {
       _.pull(this._extensions, item);
     }

app/assets/javascripts/app/services/themeManager.js

@@ -0,0 +1,82 @@
+class ThemeManager {
+
+  constructor(modelManager, syncManager) {
+      this.syncManager = syncManager;
+      this.modelManager = modelManager;
+  }
+
+  get themes() {
+    return this.modelManager.itemsForContentType("SN|Theme");
+  }
+
+  get activeTheme() {
+    var activeThemeId = localStorage.getItem("activeTheme");
+    if(!activeThemeId) {
+      return null;
+    }
+
+    var theme = _.find(this.themes, {uuid: activeThemeId});
+    return theme;
+  }
+
+  activateInitialTheme() {
+    var theme = this.activeTheme;
+    if(theme) {
+      this.activateTheme(theme);
+    }
+  }
+
+  submitTheme(url) {
+    var name = this.displayNameForThemeFile(this.fileNameFromPath(url));
+    var theme = this.modelManager.createItem({content_type: "SN|Theme", url: url, name: name});
+    this.modelManager.addItem(theme);
+    theme.setDirty(true);
+    this.syncManager.sync();
+  }
+
+  activateTheme(theme) {
+    var activeTheme = this.activeTheme;
+    if(activeTheme) {
+      this.deactivateTheme(activeTheme);
+    }
+
+    var link = document.createElement("link");
+    link.href = theme.url;
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    link.media = "screen,print";
+    link.id = theme.uuid;
+    document.getElementsByTagName("head")[0].appendChild(link);
+    localStorage.setItem("activeTheme", theme.uuid);
+  }
+
+  deactivateTheme(theme) {
+    localStorage.removeItem("activeTheme");
+    var element = document.getElementById(theme.uuid);
+    if(element) {
+      element.disabled = true;
+      element.parentNode.removeChild(element);
+    }
+  }
+
+  isThemeActive(theme) {
+    return localStorage.getItem("activeTheme") === theme.uuid;
+  }
+
+  fileNameFromPath(filePath) {
+    return filePath.replace(/^.*[\\\/]/, '');
+  }
+
+  capitalizeString(string) {
+    return string.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
+  }
+
+  displayNameForThemeFile(fileName) {
+    let name = fileName.split(".")[0];
+    let cleaned = name.split("-").join(" ");
+    return this.capitalizeString(cleaned);
+  }
+
+}
+
+angular.module('app.frontend').service('themeManager', ThemeManager);