fix url linking and add extra buttons

blurymind · Aug 31, 2024 · 0ae779f · 0ae779f
1 parent b76004b
commit 0ae779f
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 27 deletions.
diff --git a/src/public/plugins/index.js b/src/public/plugins/index.js
@@ -252,13 +252,16 @@ export var Plugins = function (app) {
   const isGistTokenInvalid = () => {
     return app.data.storage.getIsTokenInvalid();
   }
-  const urlParams = new URLSearchParams(window.location.href.split('?')[1]);
-  const gistPluginsId = urlParams.get('gistPlugins');
-  const gistPluginsFileUrl = urlParams.get('pluginFile');
+  // const urlParams = new URLSearchParams(window.location.href.split('?')[1]);
+  const url = new URL(window.location.href);
+  const urlParams = url.searchParams;
+  console.log({urlParams, url})
+  const getGistPluginsId = () => urlParams.get('gistPlugins') || app.settings.gistPluginsFile();
+  const getGistPluginsFileUrl = () => urlParams.get('pluginFile');
   const pluginModeUrl = urlParams.get('mode');
 
   const updateUrlParams = (key, value) => {
-    const url = new URL(window.location.href);
+    console.log("updateUrlParams", {key, value})
     if (value) {
       url.searchParams.set(key, value);
     } else {
@@ -269,9 +272,8 @@ export var Plugins = function (app) {
   this.rawUrls = {};
   const getGistPluginFiles = () => {
     return new Promise((resolve) => {
-      const gistId = gistPluginsId || app.settings.gistPluginsFile();
       app.data.storage
-        .getGist(gistId)
+        .getGist(getGistPluginsId())
         .then(({ filesInGist }) => {
           const promises = Object.values(filesInGist)
             .filter(gistFile => gistFile.language === 'JavaScript' || gistFile.filename.endsWith(".js"))
@@ -287,7 +289,6 @@ export var Plugins = function (app) {
   };
 
   const getGistPluginFile = (fileName) => {
-    const gistId = gistPluginsId || app.settings.gistPluginsFile();
     const rawUrl = this.rawUrls[fileName]
     if (!rawUrl) return Promise.resolve('');
     return app.data.storage.getGistFileFromRawUrl(rawUrl);
@@ -322,7 +323,7 @@ export var Plugins = function (app) {
   }
 
   const deleteGistPlugin = (fileName) => {
-    return app.data.storage.deleteGistFile(gistPluginsId || app.settings.gistPluginsFile(), fileName);
+    return app.data.storage.deleteGistFile(getGistPluginsId(), fileName);
   }
 
   const getExtensionScriptData = (fileContents) => {
@@ -523,7 +524,8 @@ export var Plugins = function (app) {
     isGistTokenInvalid,
     urlParams,
     updateUrlParams,
-    gistPluginsFileUrl,
+    getGistPluginsFileUrl,
+    getGistPluginsId,
     pluginModeUrl,
     getPluginsList,
     deleteGistPlugin,

diff --git a/src/public/plugins/plugin-editor.js b/src/public/plugins/plugin-editor.js
@@ -146,9 +146,10 @@ export var PluginEditor = function ({
   getGistPluginFile,
   saveGistPlugin,
   isGistTokenInvalid,
-  gistPluginsFileUrl,
-  pluginModeUrl,
+  getGistPluginsFileUrl,
   urlParams,
+  pluginModeUrl,
+  getGistPluginsId,
   updateUrlParams,
   getPluginsList,
   deleteGistPlugin,
@@ -226,7 +227,14 @@ export var PluginEditor = function ({
   this.onDownloadPreview = () => {
     app.data.storage.downloadContent(document.getElementById('plugin-output-previewer').srcdoc, 'output.html');
   }
-  this.onSetPluginEditMode = mode => {
+  this.onCopyLink = () => {
+    window.navigator.clipboard.writeText(window.location.href);
+    ToastWc.show({ type: 'success', content: `Copied ${window.location.href} to clipboard!`, time: 3000 })
+  }
+  this.onOpenGistLink = () => {
+    window.open(`https://gist.github.com/${getGistPluginsId()}`, "_blank");
+  }
+  this.onSetPluginEditMode = (mode) => {
     this.mode = mode;
     setPluginStore(self.name, 'pluginEditMode', mode);
     document
@@ -245,13 +253,16 @@ export var PluginEditor = function ({
       mode === 'commit' ? 'block' : 'none';
     document.getElementById('plugin-differ-commit').style.display =
       mode === 'commit' ? 'block' : 'none';
+    document.getElementById('plugin-differ-link').style.display =
+      mode === 'commit' ? 'block' : 'none';
     document.getElementById('plugin-output-previewer').style.height =
       mode === 'test' ? HEIGHT : '0vh';
     document.getElementById('plugin-output-previewer').style.position = mode === 'test' ? 'relative' : 'absolute';
     //allow-same-origin allow-scripts allow-pointer-lock allow-forms allow-popups allow-top-navigation
     document.getElementById('plugin-output-previewer').sandbox = mode === 'test' ? `allow-scripts allow-modals allow-same-origin`: `allow-scripts allow-same-origin`;
 
     document.getElementById('plugin-output-downloader').style.display =  mode === 'test' ? 'block' : 'none';
+    document.getElementById('plugin-output-linker').style.display =  mode === 'test' ? 'block' : 'none';
 
     updateUrlParams('mode', mode);
     this.onSetEditingFile();
@@ -314,6 +325,7 @@ export var PluginEditor = function ({
         let fileContents = this.volatilePlugins[this.editingFile].content;
         this.editor.setValue(fileContents);
         this.editor.clearSelection();
+        console.log("update plugins file::" ,  this.editingFile)
         updateUrlParams('pluginFile', this.editingFile);
 
         if (this.mode === 'commit') {
@@ -421,8 +433,20 @@ export var PluginEditor = function ({
           >
             Save to Gist
           </button>
+          <button id="plugin-differ-link" style="position: absolute;
+            right: 170px;
+            bottom: 17px;
+            padding-left: 9px;
+            padding-right: 9px;
+            border-radius: 0.9rem;
+            display: block;"
+            onclick="app.plugins.${self.name
+        }.onOpenGistLink()"
+          >
+            Open target gist
+          </button>
         </div>
-        
+
         <div>
           <div style="position: absolute;
               right: calc(50vw - 65px);
@@ -442,6 +466,21 @@ export var PluginEditor = function ({
         }.onFormatCode()" id="edit-plugin-code-buttons">format</button>
           </div>
 
+          <div style="position: absolute;
+              right: calc(50vw + 80px);
+              bottom: 3px;
+              z-index: 999;
+              padding-left: 9px;
+              padding-right: 9px;
+              border-radius: 0.9rem;">
+            <button id="plugin-output-linker"
+              onclick="app.plugins.${self.name
+            }.onCopyLink()"
+            >
+              Copy link
+            </button>
+          </div>
+
           <iframe id="plugin-output-previewer" style="height: ${HEIGHT}; width: 100%; border: none;">
         </div>
       </div>
@@ -463,7 +502,6 @@ export var PluginEditor = function ({
         }
       },
       onAfterClose: () => {
-        updateUrlParams('pluginFile', '');
         window.removeEventListener("previewErrors",this.onErrorsInPreview);
         this.hasTestedOnce = false;
       },
@@ -528,16 +566,17 @@ export var PluginEditor = function ({
             // const contentChanged = this.differ.getEditors().left.getValue() !== this.differ.getEditors().right.getValue()
             // document.getElementById('plugin-differ-commit').className = contentChanged ? "" : "disabled"
           });
-        const localVariables = getPluginStore(self.name);
-        this.onSetPluginEditMode(localVariables.pluginEditMode || this.mode);
-        // initialize data on both editor and differ from url
-        if(gistPluginsFileUrl) {
-          setTimeout(() => {
+        setTimeout(() => {
+          const localVariables = getPluginStore(self.name);
+          console.log("Open plugins file  "+ getGistPluginsFileUrl())
+          if(getGistPluginsFileUrl()) {
             // ?gistPlugins=2ff124dc94f936e8f7d96632f559aecb&pluginFile=yarn-output-pixi-bunnies.js&mode=test
-            this.onUpdatePluginsList(gistPluginsFileUrl);
-            this.onSetEditingFile(gistPluginsFileUrl);
-          }, 400)
-        }
+            this.onUpdatePluginsList(getGistPluginsFileUrl()).then(()=> {
+              this.onSetPluginEditMode(localVariables.pluginEditMode || this.mode, getGistPluginsFileUrl());
+              updateUrlParams('gistPlugins', getGistPluginsId());
+            });
+          }
+        }, 400)
       },
       preConfirm: () => {
         setPluginStore(self.name, 'pluginEditorOpen', false);
@@ -548,9 +587,8 @@ export var PluginEditor = function ({
   onLoad(() => {
     getPluginsList(false).then(volatilePlugins => {
       this.volatilePlugins = volatilePlugins;
-
-      if (gistPluginsFileUrl) {
-        this.onOpenPluginEditor()
+      if(getGistPluginsFileUrl()) {
+        this.onOpenPluginEditor();
       }
     });
 

diff --git a/src/public/web-components.js b/src/public/web-components.js
@@ -96,7 +96,6 @@ class Toast extends HTMLElement {
 customElements.define('toast-component', Toast);
 window.ToastWc = {
     show: ({ content, type, time }) => {
-        console.log(document.querySelector('toast-component').openToast)
         document.querySelector('toast-component').openToast({ content, type, time })
     }
 }