Add side document loading.

Clearly needs refactoring... Lots of fumbly functions and variables now...

Author: BigBlueHat

playground/next/editor.bundle.js

@@ -27343,6 +27343,7 @@
     frameDoc: {},
     tableQuads: {},
     remoteDocURL: '',
+    remoteSideDocURL: '',
     parseError: '',
     inputTab: 'json-ld',
     outputTab: 'expanded',
@@ -27365,17 +27366,39 @@
     get hasTableQuads() {
       return Object.keys(this.tableQuads).length > 0;
     },
+    get sideDoc() {
+      if (this.outputTab === 'framed') {
+        return 'frameDoc';
+      } else {
+        return 'contextDoc';
+      }
+    },
+    get sideEditor() {
+      if (this.outputTab === 'framed') {
+        return this.frameEditor;
+      } else {
+        return this.contextEditor;
+      }
+    },
+    get sideEditorURLFieldPlaceholderText() {
+      if (this.outputTab === 'framed') {
+        return 'Frame URL';
+      } else {
+        return 'Context URL';
+      }
+    },
     // methods
-    async retrieveDoc() {
+    async retrieveDoc(_editor, docVar, url) {
       try {
-        const rv = await fetch(this.remoteDocURL);
+        const rv = await fetch(url);
         if (!rv.ok) {
           throw new Error(`HTTP error status: ${rv.status}`);
         }
-        this.doc = await rv.json();
-        setEditorValue(this.mainEditor, this.doc);
+        this[docVar] = await rv.json();
+        setEditorValue(_editor, this[docVar]);
         // clear the remoteDocURL to avoid confusion around state
         this.remoteDocURL = '';
+        this.remoteSideDocURL = '';
       } catch (err) {
         this.parseError = err.message;
       }

playground/next/editor.mjs

@@ -126,6 +126,7 @@ window.app = createApp({
   frameDoc: {},
   tableQuads: {},
   remoteDocURL: '',
+  remoteSideDocURL: '',
   parseError: '',
   inputTab: 'json-ld',
   outputTab: 'expanded',
@@ -148,17 +149,39 @@ window.app = createApp({
   get hasTableQuads() {
     return Object.keys(this.tableQuads).length > 0;
   },
+  get sideDoc() {
+    if (this.outputTab === 'framed') {
+      return 'frameDoc';
+    } else {
+      return 'contextDoc';
+    }
+  },
+  get sideEditor() {
+    if (this.outputTab === 'framed') {
+      return this.frameEditor;
+    } else {
+      return this.contextEditor;
+    }
+  },
+  get sideEditorURLFieldPlaceholderText() {
+    if (this.outputTab === 'framed') {
+      return 'Frame URL';
+    } else {
+      return 'Context URL';
+    }
+  },
   // methods
-  async retrieveDoc() {
+  async retrieveDoc(_editor, docVar, url) {
     try {
-      const rv = await fetch(this.remoteDocURL);
+      const rv = await fetch(url);
       if (!rv.ok) {
         throw new Error(`HTTP error status: ${rv.status}`);
       }
-      this.doc = await rv.json();
-      setEditorValue(this.mainEditor, this.doc);
+      this[docVar] = await rv.json();
+      setEditorValue(_editor, this[docVar]);
       // clear the remoteDocURL to avoid confusion around state
       this.remoteDocURL = '';
+      this.remoteSideDocURL = '';
     } catch (err) {
       this.parseError = err.message;
     }

playground/next/index.html

@@ -103,8 +103,8 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
           <div class="item">
             <div class="ui icon input">
               <input type="text" placeholder="Document URL"
-                v-model="remoteDocURL" @keyup.enter="retrieveDoc()">
-              <i class="file link icon" @click="retrieveDoc()"></i>
+                v-model="remoteDocURL" @keyup.enter="retrieveDoc(mainEditor, 'doc', remoteDocURL)">
+              <i class="file link icon" @click="retrieveDoc(mainEditor, 'doc', remoteDocURL)"></i>
             </div>
           </div>
         </div>
@@ -244,6 +244,15 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
           <span v-show="outputTab == 'compacted' || outputTab == 'flattened'">New JSON-LD Context</span>
           <span v-show="outputTab == 'framed'">JSON-LD Frame</span>
         </div>
+        <div class="right menu">
+          <div class="item">
+            <div class="ui icon input">
+              <input type="text" :placeholder="sideEditorURLFieldPlaceholderText"
+                v-model="remoteSideDocURL" @keyup.enter="retrieveDoc(sideEditor, sideDoc, remoteSideDocURL)">
+              <i class="file link icon" @click="retrieveDoc(sideEditor, sideDoc, remoteSideDocURL)"></i>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="ui bottom attached fitted resizable scrolling segment">
         <div id="context-editor" v-effect="docChanged('context', contextDoc, $el)"