make the plugin repository configurable

blurymind · Mar 27, 2024 · c8bec68 · c8bec68
1 parent bd5e53a
commit c8bec68
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 30 deletions.
diff --git a/src/index.html b/src/index.html
@@ -582,6 +582,16 @@ <h3>Settings</h3>
                 event: { change: app.workspace.updateArrows }">
               </select>
             </div>
+
+            <div class="settings-item">
+              <label class="settings-label" for="throttle-threshold">External Plugins Gist ID</label>
+              <div class="slidecontainer settings-value">
+                <input type="input" class="settings-value" placeholder="Load plugins from a gist" data-bind="value: app.settings.gistPluginsFile, event: { change: app.setGistPluginsFile }">
+              </div>
+              <button data-bind="click: function () { window.open('https://gist.github.com/','_blank','resizable=yes') }">New</button>
+              <button data-bind="click: function () { window.open('https://gist.github.com/2ff124dc94f936e8f7d96632f559aecb','_blank','resizable=yes') }">Examples</button>
+            </div> <!-- settgins-item -->
+
           </div> <!-- settgins-column -->
         </div> <!-- settgins-row -->
       </div> <!-- settgins-form -->

diff --git a/src/js/classes/app.js b/src/js/classes/app.js
@@ -74,6 +74,11 @@ export var App = function(name, version) {
     self.mustRefreshNodes.notifySubscribers();
   };
 
+  this.setGistPluginsFile = function(gistFile, e) {
+    const newValue = e ? e.target.value : gistFile;
+    app.settings.gistPluginsFile(newValue);
+  };
+
   this.setFiletypeVersion = function(typeVersion, e) {
     const filetypeVersion = e ? e.target.value : typeVersion;
     self.filetypeVersion = filetypeVersion;

diff --git a/src/js/classes/settings.js b/src/js/classes/settings.js
@@ -45,6 +45,14 @@ export const Settings = function(app) {
               .pop()
           : null,
     });
+    app.setGistPluginsFile(
+      self.gistPluginsFile() !== null
+        ? self
+            .gistPluginsFile()
+            .split('/')
+            .pop()
+        : null
+    );
   };
 
   this.validateGridSize = function() {
@@ -87,6 +95,10 @@ export const Settings = function(app) {
     .observable(storage.getItem('gistFile'))
     .extend({ persist: 'gistFile' });
 
+  this.gistPluginsFile = ko
+    .observable(storage.getItem('gistPluginsFile'))
+    .extend({ persist: 'gistPluginsFile' });
+
   // Spellcheck enabled
   this.spellcheckEnabled = ko
     .observable(

diff --git a/src/public/plugins/index.js b/src/public/plugins/index.js
@@ -253,7 +253,7 @@ export var Plugins = function(app) {
     onKeyUp,
     onKeyDown,
     onLoad,
-  }
+  };
   // Todo these are not being cached by the PWA - needs fixing
   // Todo these should also be optional when building - exclude for build-tiny
   // plugin initiation
@@ -265,37 +265,41 @@ export var Plugins = function(app) {
   });
 
   // register plugins stored on a gist - todo cache all this
-  app.gists.get('2ff124dc94f936e8f7d96632f559aecb').then(gist => {
-    const gistFiles = gist.body.files;
-    console.log({ gistFiles });
-    Object.values(gistFiles).forEach(gistFile => {
-      if (gistFile.language === 'JavaScript') {
-        console.log({ gistFile });
-        try {
-          importModuleWeb(gistFile.content, gistFile.filename).then(
-            importedPlugin => {
-              const newPlugin = importedPlugin(pluginApiMethods);
-              newPlugin.name = newPlugin.name || gistFile.filename;
-              console.log({ newPlugin }, 'loaded from ', gistFile.raw_url);
-              if ('dependencies' in newPlugin) {
-                newPlugin.dependencies.forEach(dependency => {
-                  const scriptEle = document.createElement('script');
-                  scriptEle.setAttribute('src', dependency);
-                  document.body.appendChild(scriptEle);
-                  scriptEle.addEventListener('load', () => {
-                    console.log('File loaded', dependency);
-                  });
+  if (app.settings.gistPluginsFile() !== null) {
+    app.gists.get(app.settings.gistPluginsFile()).then(gist => {
+      const gistFiles = gist.body.files;
+      console.log({ gistFiles });
+      Object.values(gistFiles).forEach(gistFile => {
+        if (gistFile.language === 'JavaScript') {
+          console.log({ gistFile });
+          try {
+            importModuleWeb(gistFile.content, gistFile.filename).then(
+              importedPlugin => {
+                const newPlugin = importedPlugin(pluginApiMethods);
+                newPlugin.name = newPlugin.name || gistFile.filename;
+                console.log({ newPlugin }, 'loaded from ', gistFile.raw_url);
+                if ('dependencies' in newPlugin) {
+                  newPlugin.dependencies.forEach(dependency => {
+                    const scriptEle = document.createElement('script');
+                    scriptEle.setAttribute('src', dependency);
+                    document.body.appendChild(scriptEle);
+                    scriptEle.addEventListener('load', () => {
+                      console.log('File loaded', dependency);
+                    });
 
-                  scriptEle.addEventListener('error', ev => {
-                    console.log('Error on loading file', ev);
+                    scriptEle.addEventListener('error', ev => {
+                      console.log('Error on loading file', ev);
+                    });
                   });
-                });
+                }
+                registerPlugin(newPlugin);
               }
-              registerPlugin(newPlugin);
-            }
-          );
-        } catch (e) {console.error(gistFile.filename, "Plugin failed to load", e)}
-      }
+            );
+          } catch (e) {
+            console.error(gistFile.filename, 'Plugin failed to load', e);
+          }
+        }
+      });
     });
-  });
+  }
 };