feat(plugins): init plugin loader

Sefaria · Nov 21, 2024 · 65c6a12 · 65c6a12
1 parent 8167911
commit 65c6a12
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/static/js/ConnectionsPanel.jsx b/static/js/ConnectionsPanel.jsx
@@ -31,6 +31,7 @@ import { AddToSourceSheetBox } from './AddToSourceSheet';
 import LexiconBox from './LexiconBox';
 import AboutBox from './AboutBox';
 import GuideBox from './GuideBox';
+import WebComponentLoader from './WebComponentLoader'
 import TranslationsBox from './TranslationsBox';
 import ExtendedNotes from './ExtendedNotes';
 import classNames from 'classnames';
@@ -348,6 +349,7 @@ class ConnectionsPanel extends Component {
               <ToolsButton en="Table of Contents" he="תוכן העניינים" image="text-navigation.svg" urlConnectionsMode="Navigation" onClick={() => this.props.setConnectionsMode("Navigation")} />
               <ToolsButton en="Search in this Text" he="חיפוש בטקסט" image="compare.svg" urlConnectionsMode="SidebarSearch" onClick={() => this.props.setConnectionsMode("SidebarSearch")} />
               <ToolsButton en="Translations" he="תרגומים" image="translation.svg"  urlConnectionsMode="Translations" onClick={() => this.props.setConnectionsMode("Translations")} count={resourcesButtonCounts.translations} />
+              <ToolsButton en="Plugin" he="תוסף" image="connection.png" urlConnectionsMode="Plugin" onClick={() => this.props.setConnectionsMode("Plugin")} />
             </div>
           }
           {showConnectionSummary ?
@@ -675,6 +677,9 @@ class ConnectionsPanel extends Component {
                 onSidebarSearchClick={this.props.onSidebarSearchClick}
               />
     }
+    else if (this.props.mode === "Plugin") {
+      content = <WebComponentLoader sref={this.props.srefs[0]} />
+    }
 
     const marginless = ["Resources", "ConnectionsList", "Advanced Tools", "Share", "WebPages", "Topics", "manuscripts"].indexOf(this.props.mode) !== -1;
     let classes = classNames({ connectionsPanel: 1, textList: 1, marginless: marginless, fullPanel: this.props.fullPanel, singlePanel: !this.props.fullPanel });

diff --git a/static/js/WebComponentLoader.jsx b/static/js/WebComponentLoader.jsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+
+function WebComponentLoader(props) {
+  const [link, setLink] = useState('');
+  const [loaded, setLoaded] = useState(false);
+  const sref = props.sref;
+
+  const repoToRawLink = (link) => {
+    const repo = link.split('github.com/')[1].split('/');
+    const dateTimeStamp = new Date().getTime();
+    return `https://${repo[0]}.github.io/${repo[1]}/plugin.js?rand=${dateTimeStamp}`
+  }
+
+  let script = null;
+
+  const handleClick = () => {
+    if (script) {
+      document.head.removeChild(script);
+      setLoaded(false);
+    }
+    if (link) {
+      script = document.createElement('script');
+      script.src = repoToRawLink(link);
+      script.async = true;
+      script.onload = () => {
+        setLoaded(true);
+      };
+      document.head.appendChild(script);
+    }
+  };
+
+  if (loaded) {
+    return (
+            <div>
+                <button onClick={handleClick}>Reload Plugin</button>
+                <sefaria-plugin sref={sref} />
+            </div>
+        );
+  }
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Enter script link"
+        value={link}
+        onChange={(e) => setLink(e.target.value)}
+      />
+      <button onClick={handleClick}>Pull</button>
+    </div>
+  );
+}
+
+export default WebComponentLoader;