Merge pull request #47 from toolness/base-sketch-url

Add data-base-url option.

Author: toolness

index.html

@@ -24,6 +24,7 @@ <h2>Table of Contents</h2>
   <li><a href="#error-handling">Error Handling</a>
   <li><a href="#resizing">Resizing</a>
   <li><a href="#specifying-p5-version">Specifying The p5 Version</a>
+  <li><a href="#base-url">Specifying The Base URL</a>
 </ol>
 
 <h2 id="quick-start">Quick Start</h2>
@@ -176,6 +177,31 @@ <h2 id="specifying-p5-version">Specifying The p5 Version</h2>
   <a href="https://cdnjs.com/libraries/p5.js">cdnjs.com/libraries/p5.js</a>.
 </p>
 
+<h2 id="base-url">Specifying The Base URL</h2>
+
+<p>
+  By default, the widget will set the base URL of the sketch to
+  the URL of the page embedding the widget. This means that if
+  you're embedding this widget at
+  <code>http://example.org/index.html</code> and have the following
+  code in your sketch:
+</p>
+
+<pre><code class="language-javascript">loadJSON('foo.json');</code></pre>
+
+<p>
+  The actual URL retrieved will be
+  <code>http://example.org/foo.json</code>.
+</p>
+
+<p>
+  If you'd like to override this default, you can specify a
+  custom base URL with the <code>data-base-url</code>
+  attribute like so:
+</p>
+
+<pre><code class="language-markup">&lt;script type="text/p5" data-base-url="http://some-other-website.com/"&gt;</code></pre>
+
 <script src="static/vendor/jquery.js"></script>
 <script src="p5-widget.js" data-manual></script>
 <script src="static/vendor/prism.js" data-manual></script>

lib/app.tsx

@@ -15,6 +15,7 @@ interface AppProps {
   initialContent: string,
   previewWidth: number,
   p5version: string,
+  baseSketchURL: string,
   autosaver?: Autosaver,
   autoplay?: boolean
 }
@@ -139,6 +140,7 @@ export default class App extends PureComponent<AppProps, AppState> {
           <div className="preview-holder-wrapper">
           {this.state.isPlaying
             ? <Preview content={this.state.previewContent}
+                       baseSketchURL={this.props.baseSketchURL}
                        p5version={this.props.p5version}
                        width={this.props.previewWidth}
                        timestamp={this.state.startPlayTimestamp}

lib/main.tsx

@@ -12,8 +12,10 @@ let defaultSketchJS = require("raw!./default-sketch.js") as string;
 require("../css/style.css");
 
 function start() {
+  let embeddingPageURL = document.referrer;
   let qs = url.parse(window.location.search, true).query;
-  let id = document.referrer + '_' + qs['id'];
+  let id = embeddingPageURL + '_' + qs['id'];
+  let baseSketchURL = qs['baseSketchURL'] || embeddingPageURL;
   let autoplay = (qs['autoplay'] === 'on');
   let initialContent = qs['sketch'] || defaultSketchJS;
   let p5version = qs['p5version'] || defaults.P5_VERSION;
@@ -28,6 +30,7 @@ function start() {
   ReactDOM.render(
     <App initialContent={initialContent}
          autosaver={new SessionStorageAutosaver(id)}
+         baseSketchURL={baseSketchURL}
          p5version={p5version}
          previewWidth={previewWidth}
          autoplay={autoplay} />,

lib/p5-widget.ts

@@ -50,6 +50,7 @@ function replaceScriptWithWidget(el: HTMLScriptElement) {
   let iframe = document.createElement('iframe');
   let height = getDataHeight(el);
   let previewWidth = parseInt(el.getAttribute('data-preview-width'));
+  let baseSketchURL = el.getAttribute('data-base-url');
   let p5version = el.getAttribute('data-p5-version');
   let autoplay = el.hasAttribute('data-autoplay');
   let url;
@@ -63,6 +64,10 @@ function replaceScriptWithWidget(el: HTMLScriptElement) {
     qsArgs.push('previewWidth=' + previewWidth);
   }
 
+  if (baseSketchURL) {
+    qsArgs.push('baseSketchURL=' + encodeURIComponent(baseSketchURL));
+  }
+
   if (p5version) {
     qsArgs.push('p5version=' + encodeURIComponent(p5version));
   }

lib/preview-frame.ts

@@ -52,12 +52,23 @@ function LoopChecker(sketch: string, funcName: string, maxRunTime: number) {
   return self;
 }
 
+function setBaseURL(url: string) {
+  var base = document.createElement('base');
+  base.setAttribute('href', url);
+
+  document.head.appendChild(base);
+}
+
 function startSketch(sketch: string, p5version: string, maxRunTime: number,
-                     loopCheckFuncName: string,
+                     loopCheckFuncName: string, baseURL: string,
                      errorCb: PreviewFrameErrorReporter) {
   let sketchScript = document.createElement('script');
   let loopChecker = LoopChecker(sketch, loopCheckFuncName, maxRunTime);
 
+  if (baseURL) {
+    setBaseURL(baseURL);
+  }
+
   sketchScript.textContent = sketch;
 
   global.addEventListener('error', (e: ErrorEvent) => {

lib/preview.tsx

@@ -11,6 +11,7 @@ interface Props {
   p5version: string,
   width: number,
   content: string,
+  baseSketchURL: string,
   timestamp: number,
   onError: PreviewFrameErrorReporter
 }
@@ -52,7 +53,9 @@ export default class Preview extends PureComponent<Props, State> {
       // in which case it shouldn't be emitting events anymore.
       let frame = iframe.contentWindow as PreviewFrame;
       frame.startSketch(content, this.props.p5version, 1000,
-                        LOOP_CHECK_FUNC_NAME, this.props.onError);
+                        LOOP_CHECK_FUNC_NAME,
+                        this.props.baseSketchURL,
+                        this.props.onError);
     });
     this.refs.container.appendChild(iframe);
     this._iframe = iframe;

typings/custom.d.ts

@@ -21,6 +21,6 @@ declare interface PreviewFrameErrorReporter {
 // to communicate with it. Thus this interface needs to be asynchronous.
 declare interface PreviewFrame extends Window {
   startSketch: (sketch: string, p5version: string, maxRunTime: number,
-                loopCheckFuncName: string,
+                loopCheckFuncName: string, baseURL: string,
                 errorCb: PreviewFrameErrorReporter) => void
 }