web themes

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

@@ -1,11 +1,12 @@
 class BaseCtrl {
-  constructor(syncManager, dbManager) {
+  constructor($scope, syncManager, dbManager, $timeout) {
     dbManager.openDatabase(null, function(){
       // new database, delete syncToken so that items can be refetched entirely from server
       syncManager.clearSyncToken();
       syncManager.sync();
     })
   }
+
 }
 
 angular.module('app.frontend').controller('BaseCtrl', BaseCtrl);

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

@@ -1,5 +1,5 @@
 angular.module('app.frontend')
-.controller('HomeCtrl', function ($scope, $location, $rootScope, $timeout, modelManager, syncManager, authManager) {
+.controller('HomeCtrl', function ($scope, $location, $rootScope, $timeout, modelManager, syncManager, authManager, themeManager) {
 
     function urlParam(key) {
       return $location.search()[key];
@@ -34,6 +34,7 @@ angular.module('app.frontend')
 
     syncManager.loadLocalItems(function(items) {
       $scope.allTag.didLoad = true;
+      themeManager.activateInitialTheme();
       $scope.$apply();
 
       syncManager.sync(null);

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

@@ -0,0 +1,30 @@
+class Theme extends Item {
+
+  constructor(json_obj) {
+    super(json_obj);
+  }
+
+  mapContentToLocalProperties(contentObject) {
+    super.mapContentToLocalProperties(contentObject)
+    this.url = contentObject.url;
+    this.name = contentObject.name;
+  }
+
+  structureParams() {
+    var params = {
+      url: this.url,
+      name: this.name,
+    };
+
+    _.merge(params, super.structureParams());
+    return params;
+  }
+
+  toJSON() {
+    return {uuid: this.uuid}
+  }
+
+  get content_type() {
+    return "SN|Theme";
+  }
+}

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