better extension ui

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

@@ -0,0 +1,23 @@
+class Extension extends Item {
+  constructor(json) {
+      _.merge(this, json);
+
+      this.actions = this.actions.map(function(action){
+        return new Action(action);
+      })
+  }
+}
+
+class Action {
+  constructor(json) {
+      _.merge(this, json);
+
+      var comps = this.type.split(":");
+      if(comps.length > 0) {
+        this.repeatable = true;
+        this.repeatType = comps[0]; // 'watch' or 'poll'
+        this.repeatVerb = comps[1]; // http verb
+        this.repeatFrequency = comps[2];
+      }
+  }
+}

app/assets/javascripts/app/services/extensionManager.js

@@ -1,27 +1,3 @@
-class Extension {
-  constructor(json) {
-      _.merge(this, json);
-
-      this.actions = this.actions.map(function(action){
-        return new Action(action);
-      })
-  }
-}
-
-class Action {
-  constructor(json) {
-      _.merge(this, json);
-
-      var comps = this.type.split(":");
-      if(comps.length > 0) {
-        this.repeatable = true;
-        this.repeatType = comps[0]; // 'watch' or 'poll'
-        this.repeatVerb = comps[1]; // http verb
-        this.repeatFrequency = comps[2];
-      }
-  }
-}
-
 class ExtensionManager {
 
   constructor(Restangular, modelManager) {
@@ -29,6 +5,7 @@ class ExtensionManager {
       this.modelManager = modelManager;
       this.extensions = [];
       this.enabledRepeatActions = [];
+      this.enabledRepeatActionUrls = localStorage.getItem("enabled_ext_urls") || [];
   }
 
   addExtension(url) {
@@ -45,11 +22,6 @@ class ExtensionManager {
 
   registerExtension(extension) {
       this.extensions.push(extension);
-      for(var action of extension.actions) {
-        if(action.repeatable) {
-          this.enableRepeatAction(action);
-        }
-      }
       console.log("registered extensions", this.extensions);
   }
 
@@ -64,12 +36,27 @@ class ExtensionManager {
     }
   }
 
+  isRepeatActionEnabled(action) {
+    return this.enabledRepeatActionUrls.includes(action.url);
+  }
+
+  disableRepeatAction(action, extension) {
+    console.log("Disabling action", action);
+    _.pull(this.enabledRepeatActionUrls, action.url);
+    _.pull(this.enabledRepeatActions, action);
+    this.modelManager.removeItemObserver(action.url);
+    console.assert(this.isRepeatActionEnabled(action) == false);
+  }
+
   enableRepeatAction(action, extension) {
     console.log("Enabling repeat action", action);
+
+    this.enabledRepeatActionUrls.push(action.url);
     this.enabledRepeatActions.push(action);
+
     if(action.repeatType == "watch") {
       for(var structure of action.structures) {
-        this.modelManager.watchItemType(structure.type, function(changedItems){
+        this.modelManager.addItemObserver(action.url, structure.type, function(changedItems){
           this.triggerWatchAction(action, changedItems);
         }.bind(this))
       }
@@ -95,7 +82,7 @@ class ExtensionManager {
       })
       request.post().then(function(response){
         console.log("watch action response", response);
-        action.lastExecuted =  new Date();
+        action.lastExecuted = new Date();
       })
     }
   }

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

@@ -23,10 +23,12 @@ class ModelManager extends ItemManager {
     })
   }
 
-  watchItemType(type, callback) {
+  addItemObserver(id, type, callback) {
-    console.log("Watching item type", type, "callback:", callback);
+    this.changeObservers.push({id: id, type: type, callback: callback});
-    this.changeObservers.push({type: type, callback: callback});
+  }
-    console.log("Change observers", this.changeObservers);
+
+  removeItemObserver(id) {
+    _.remove(this.changeObservers, _.find(this.changeObservers, {id: id}));
   }
 
   addDirtyItems(items) {

app/assets/stylesheets/app/_header.scss

@@ -278,14 +278,51 @@ Extensions
 
   .extension {
     margin-bottom: 18px;
+    background-color: #ededed;
+    padding: 10px;
+    color: black;
+
     > .name {
       font-weight: bold;
+      font-size: 16px;
+      margin-bottom: 2px;
+    }
+
+    > .subtitle {
+      font-size: 14px;
+      margin-bottom: 10px;
     }
 
     > .actions {
+      margin-top: 15px;
+      font-size: 14px;
+
       .action {
-        font-weight: bold;
+        margin-bottom: 10px;
+
+        > .name {
+          font-weight: bold;
+        }
+
+        > .execute {
+          a {
+            color: $blue-color;
+          }
+          font-weight: bold;
+          margin-bottom: 3px;
+          font-size: 12px;
+        }
+
+        > .execute-type {
+          font-size: 12px;
+        }
+
+        > .last-run {
+          opacity: 0.5;
+          font-size: 12px;
+        }
       }
+
     }
   }
 

app/assets/stylesheets/app/_main.scss

@@ -3,6 +3,7 @@ $secondary-text-color: rgba($main-text-color, 0.8);
 $bg-color: #e3e3e3;
 $selection-color: $bg-color;
 $selected-text-color: black;
+$blue-color: #086dd6;
 
 @mixin MQ-Small() {
   @media (max-width: $screen-xs-max) {

app/assets/stylesheets/app/_notes.scss

@@ -53,8 +53,6 @@
     }
   }
 
-  $note-selection-color: #086dd6;
-
   .note {
     width: 100%;
     padding: 15px;
@@ -75,13 +73,9 @@
     }
 
     &.selected {
-      background-color: $note-selection-color;
+      background-color: $blue-color;
       color: white;
     }
 
-    // &:hover:not(.selected) {
-    //   background-color: $note-selection-color;
-    //   color: white;
-    // }
   }
 }

app/assets/templates/frontend/header.html.haml

@@ -91,18 +91,28 @@
               .registered-extensions{"ng-if" => "ctrl.extensionManager.extensions.length"}
                 .extension{"ng-repeat" => "extension in ctrl.extensionManager.extensions"}
                   .name {{extension.name}}
-                  Actions
+                  .subtitle Available Actions
-                  %ul.actions
+                  .actions
-                    %li.action{"ng-repeat" => "action in extension.actions"}
+                    .action{"ng-repeat" => "action in extension.actions"}
-                      %a{"ng-click" => "ctrl.selectedAction(action, extension)"} {{action.label}}
+                      .name {{action.label}}
-
+                      .execute
+                        %a{"ng-click" => "ctrl.selectedAction(action, extension)"}
+                          %span{"ng-if" => "action.repeatable"}
+                            %span{"ng-if" => "ctrl.extensionManager.isRepeatActionEnabled(action)", "ng-click" => "ctrl.extensionManager.disableRepeatAction(action, extension)"} Disable
+                            %span{"ng-if" => "!ctrl.extensionManager.isRepeatActionEnabled(action)", "ng-click" => "ctrl.extensionManager.enableRepeatAction(action, extension)"} Enable
+                          %span{"ng-if" => "!action.repeatable"}
+                            Perform Action
+                      .execute-type{"ng-if" => "action.repeatable"}
+                        This is a repeat action.
+                      .last-run{"ng-if" => "action.lastExecuted"}
+                        Last executed {{action.lastExecuted | appDate}}
 
               %a{"ng-click" => "ctrl.toggleExtensionForm()"} Add new extension
               %form.extension-form{"ng-if" => "ctrl.showNewExtensionForm"}
                 .form-tag.has-feedback
                   %input.form-control{:autofocus => 'autofocus', :name => 'url', :placeholder => 'Extension URL', :required => true, :type => 'text', 'ng-model' => 'ctrl.newExtensionData.url'}
                 %button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
-                  %span.ladda-label{"ng-click" => "ctrl.submitNewExtensionForm()"} Get Extension
+                  %span.ladda-label{"ng-click" => "ctrl.submitNewExtensionForm()"} Add Extension
 
         .item
           %a{"href" => "https://standardnotes.org", "target" => "_blank"}

vendor/assets/javascripts/transpiled.js

@@ -1428,28 +1428,68 @@ var Item = function () {
 }();
 
 ;
-var Note = function (_Item) {
+var Extension = function (_Item) {
-  _inherits(Note, _Item);
+  _inherits(Extension, _Item);
 
-  function Note(json_obj) {
+  function Extension(json_obj) {
-    _classCallCheck(this, Note);
+    _classCallCheck(this, Extension);
 
-    var _this3 = _possibleConstructorReturn(this, (Note.__proto__ || Object.getPrototypeOf(Note)).call(this, json_obj));
+    var _this3 = _possibleConstructorReturn(this, (Extension.__proto__ || Object.getPrototypeOf(Extension)).call(this, json_obj));
 
-    if (!_this3.tags) {
+    if (!_this3.notes) {
-      _this3.tags = [];
+      _this3.notes = [];
     }
 
     if (!_this3.content.title) {
       _this3.content.title = "";
     }
-
-    if (!_this3.content.text) {
-      _this3.content.text = "";
-    }
     return _this3;
   }
 
+  _createClass(Extension, [{
+    key: 'updateReferencesLocalMapping',
+    value: function updateReferencesLocalMapping() {
+      _get(Extension.prototype.__proto__ || Object.getPrototypeOf(Extension.prototype), 'updateReferencesLocalMapping', this).call(this);
+      this.notes = this.referencesMatchingContentType("Note");
+    }
+  }, {
+    key: 'referencesAffectedBySharingChange',
+    value: function referencesAffectedBySharingChange() {
+      return this.referencesMatchingContentType("Note");
+    }
+  }, {
+    key: 'content_type',
+    get: function get() {
+      return "Tag";
+    }
+  }]);
+
+  return Extension;
+}(Item);
+
+;
+var Note = function (_Item2) {
+  _inherits(Note, _Item2);
+
+  function Note(json_obj) {
+    _classCallCheck(this, Note);
+
+    var _this4 = _possibleConstructorReturn(this, (Note.__proto__ || Object.getPrototypeOf(Note)).call(this, json_obj));
+
+    if (!_this4.tags) {
+      _this4.tags = [];
+    }
+
+    if (!_this4.content.title) {
+      _this4.content.title = "";
+    }
+
+    if (!_this4.content.text) {
+      _this4.content.text = "";
+    }
+    return _this4;
+  }
+
   _createClass(Note, [{
     key: 'updateReferencesLocalMapping',
     value: function updateReferencesLocalMapping() {
@@ -1527,22 +1567,22 @@ var Note = function (_Item) {
 }(Item);
 
 ;
-var Tag = function (_Item2) {
+var Tag = function (_Item3) {
-  _inherits(Tag, _Item2);
+  _inherits(Tag, _Item3);
 
   function Tag(json_obj) {
     _classCallCheck(this, Tag);
 
-    var _this4 = _possibleConstructorReturn(this, (Tag.__proto__ || Object.getPrototypeOf(Tag)).call(this, json_obj));
+    var _this5 = _possibleConstructorReturn(this, (Tag.__proto__ || Object.getPrototypeOf(Tag)).call(this, json_obj));
 
-    if (!_this4.notes) {
+    if (!_this5.notes) {
-      _this4.notes = [];
+      _this5.notes = [];
     }
 
-    if (!_this4.content.title) {
+    if (!_this5.content.title) {
-      _this4.content.title = "";
+      _this5.content.title = "";
     }
-    return _this4;
+    return _this5;
   }
 
   _createClass(Tag, [{
@@ -2470,30 +2510,6 @@ angular.module('app.frontend').directive('typewrite', ['$timeout', function ($ti
   };
 }]);
 ;
-var Extension = function Extension(json) {
-  _classCallCheck(this, Extension);
-
-  _.merge(this, json);
-
-  this.actions = this.actions.map(function (action) {
-    return new Action(action);
-  });
-};
-
-var Action = function Action(json) {
-  _classCallCheck(this, Action);
-
-  _.merge(this, json);
-
-  var comps = this.type.split(":");
-  if (comps.length > 0) {
-    this.repeatable = true;
-    this.repeatType = comps[0]; // 'watch' or 'poll'
-    this.repeatVerb = comps[1]; // http verb
-    this.repeatFrequency = comps[2];
-  }
-};
-
 var ExtensionManager = function () {
   function ExtensionManager(Restangular, modelManager) {
     _classCallCheck(this, ExtensionManager);
@@ -2502,6 +2518,7 @@ var ExtensionManager = function () {
     this.modelManager = modelManager;
     this.extensions = [];
     this.enabledRepeatActions = [];
+    this.enabledRepeatActionUrls = localStorage.getItem("enabled_ext_urls") || [];
   }
 
   _createClass(ExtensionManager, [{
@@ -2520,33 +2537,6 @@ var ExtensionManager = function () {
     key: 'registerExtension',
     value: function registerExtension(extension) {
       this.extensions.push(extension);
-      var _iteratorNormalCompletion3 = true;
-      var _didIteratorError3 = false;
-      var _iteratorError3 = undefined;
-
-      try {
-        for (var _iterator3 = extension.actions[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
-          var action = _step3.value;
-
-          if (action.repeatable) {
-            this.enableRepeatAction(action);
-          }
-        }
-      } catch (err) {
-        _didIteratorError3 = true;
-        _iteratorError3 = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion3 && _iterator3.return) {
-            _iterator3.return();
-          }
-        } finally {
-          if (_didIteratorError3) {
-            throw _iteratorError3;
-          }
-        }
-      }
-
       console.log("registered extensions", this.extensions);
     }
   }, {
@@ -2561,35 +2551,52 @@ var ExtensionManager = function () {
         }.bind(this));
       }
     }
+  }, {
+    key: 'isRepeatActionEnabled',
+    value: function isRepeatActionEnabled(action) {
+      return this.enabledRepeatActionUrls.includes(action.url);
+    }
+  }, {
+    key: 'disableRepeatAction',
+    value: function disableRepeatAction(action, extension) {
+      console.log("Disabling action", action);
+      _.pull(this.enabledRepeatActionUrls, action.url);
+      _.pull(this.enabledRepeatActions, action);
+      this.modelManager.removeItemObserver(action.url);
+      console.assert(this.isRepeatActionEnabled(action) == false);
+    }
   }, {
     key: 'enableRepeatAction',
     value: function enableRepeatAction(action, extension) {
       console.log("Enabling repeat action", action);
+
+      this.enabledRepeatActionUrls.push(action.url);
       this.enabledRepeatActions.push(action);
+
       if (action.repeatType == "watch") {
-        var _iteratorNormalCompletion4 = true;
+        var _iteratorNormalCompletion3 = true;
-        var _didIteratorError4 = false;
+        var _didIteratorError3 = false;
-        var _iteratorError4 = undefined;
+        var _iteratorError3 = undefined;
 
         try {
-          for (var _iterator4 = action.structures[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+          for (var _iterator3 = action.structures[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
-            var structure = _step4.value;
+            var structure = _step3.value;
 
-            this.modelManager.watchItemType(structure.type, function (changedItems) {
+            this.modelManager.addItemObserver(action.url, structure.type, function (changedItems) {
               this.triggerWatchAction(action, changedItems);
             }.bind(this));
           }
         } catch (err) {
-          _didIteratorError4 = true;
+          _didIteratorError3 = true;
-          _iteratorError4 = err;
+          _iteratorError3 = err;
         } finally {
           try {
-            if (!_iteratorNormalCompletion4 && _iterator4.return) {
+            if (!_iteratorNormalCompletion3 && _iterator3.return) {
-              _iterator4.return();
+              _iterator3.return();
             }
           } finally {
-            if (_didIteratorError4) {
+            if (_didIteratorError3) {
-              throw _iteratorError4;
+              throw _iteratorError3;
             }
           }
         }
@@ -2662,13 +2669,13 @@ var ItemManager = function () {
     key: 'mapResponseItemsToLocalModelsOmittingFields',
     value: function mapResponseItemsToLocalModelsOmittingFields(items, omitFields) {
       var models = [];
-      var _iteratorNormalCompletion5 = true;
+      var _iteratorNormalCompletion4 = true;
-      var _didIteratorError5 = false;
+      var _didIteratorError4 = false;
-      var _iteratorError5 = undefined;
+      var _iteratorError4 = undefined;
 
       try {
-        for (var _iterator5 = items[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
+        for (var _iterator4 = items[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
-          var json_obj = _step5.value;
+          var json_obj = _step4.value;
 
           json_obj = _.omit(json_obj, omitFields || []);
           var item = this.findItem(json_obj["uuid"]);
@@ -2688,16 +2695,16 @@ var ItemManager = function () {
           models.push(item);
         }
       } catch (err) {
-        _didIteratorError5 = true;
+        _didIteratorError4 = true;
-        _iteratorError5 = err;
+        _iteratorError4 = err;
       } finally {
         try {
-          if (!_iteratorNormalCompletion5 && _iterator5.return) {
+          if (!_iteratorNormalCompletion4 && _iterator4.return) {
-            _iterator5.return();
+            _iterator4.return();
           }
         } finally {
-          if (_didIteratorError5) {
+          if (_didIteratorError4) {
-            throw _iteratorError5;
+            throw _iteratorError4;
           }
         }
       }
@@ -2814,13 +2821,13 @@ var ModelManager = function (_ItemManager) {
   function ModelManager() {
     _classCallCheck(this, ModelManager);
 
-    var _this5 = _possibleConstructorReturn(this, (ModelManager.__proto__ || Object.getPrototypeOf(ModelManager)).call(this));
+    var _this6 = _possibleConstructorReturn(this, (ModelManager.__proto__ || Object.getPrototypeOf(ModelManager)).call(this));
 
-    _this5.notes = [];
+    _this6.notes = [];
-    _this5.tags = [];
+    _this6.tags = [];
-    _this5.dirtyItems = [];
+    _this6.dirtyItems = [];
-    _this5.changeObservers = [];
+    _this6.changeObservers = [];
-    return _this5;
+    return _this6;
   }
 
   _createClass(ModelManager, [{
@@ -2840,11 +2847,14 @@ var ModelManager = function (_ItemManager) {
       });
     }
   }, {
-    key: 'watchItemType',
+    key: 'addItemObserver',
-    value: function watchItemType(type, callback) {
+    value: function addItemObserver(id, type, callback) {
-      console.log("Watching item type", type, "callback:", callback);
+      this.changeObservers.push({ id: id, type: type, callback: callback });
-      this.changeObservers.push({ type: type, callback: callback });
+    }
-      console.log("Change observers", this.changeObservers);
+  }, {
+    key: 'removeItemObserver',
+    value: function removeItemObserver(id) {
+      _.remove(this.changeObservers, _.find(this.changeObservers, { id: id }));
     }
   }, {
     key: 'addDirtyItems',
@@ -2860,13 +2870,13 @@ var ModelManager = function (_ItemManager) {
     key: 'clearDirtyItems',
     value: function clearDirtyItems() {
       console.log("Clearing dirty items", this.dirtyItems);
-      var _iteratorNormalCompletion6 = true;
+      var _iteratorNormalCompletion5 = true;
-      var _didIteratorError6 = false;
+      var _didIteratorError5 = false;
-      var _iteratorError6 = undefined;
+      var _iteratorError5 = undefined;
 
       try {
-        for (var _iterator6 = this.changeObservers[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) {
+        for (var _iterator5 = this.changeObservers[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
-          var observer = _step6.value;
+          var observer = _step5.value;
 
           var changedItems = this.dirtyItems.filter(function (item) {
             return item.content_type == observer.type;
@@ -2875,16 +2885,16 @@ var ModelManager = function (_ItemManager) {
           observer.callback(changedItems);
         }
       } catch (err) {
-        _didIteratorError6 = true;
+        _didIteratorError5 = true;
-        _iteratorError6 = err;
+        _iteratorError5 = err;
       } finally {
         try {
-          if (!_iteratorNormalCompletion6 && _iterator6.return) {
+          if (!_iteratorNormalCompletion5 && _iterator5.return) {
-            _iterator6.return();
+            _iterator5.return();
           }
         } finally {
-          if (_didIteratorError6) {
+          if (_didIteratorError5) {
-            throw _iteratorError6;
+            throw _iteratorError5;
           }
         }
       }