Add an embedding js api with auto-sizing

frontend/src/metabase/public/components/EmbedFrame.jsx

@@ -11,6 +11,11 @@ import cx from "classnames";
 
 import "./EmbedFrame.css";
 
+const DEFAULT_OPTIONS = {
+    bordered: IFRAMED,
+    titled: true
+}
+
 import type { Parameter } from "metabase/meta/types/Dashboard";
 
 type Props = {
@@ -25,21 +30,6 @@ type Props = {
     setParameterValue: (id: string, value: string) => void
 }
 
-const DEFAULT_OPTIONS = {
-    bordered: IFRAMED,
-    titled: true
-}
-
-let frames = [];
-window.iFrameResizer = {
-    autoResize: true,
-    heightCalculationMethod: "bodyScroll",
-    readyCallback() {
-        frames.map(frame => frame.setState({ innerScroll: false }))
-    }
-}
-import "iframe-resizer/js/iframeResizer.contentWindow.js";
-
 @withRouter
 export default class EmbedFrame extends Component<*, Props, *> {
     state = {
@@ -47,10 +37,20 @@ export default class EmbedFrame extends Component<*, Props, *> {
     }
 
     componentWillMount() {
-        frames = frames.concat(this);
-    }
-    componentWillUnmount() {
-        frames = frames.filter(frame => frame !== this);
+        if (window.iFrameResizer) {
+            console.error("iFrameResizer resizer already defined.")
+        } else {
+            window.iFrameResizer = {
+                autoResize: true,
+                heightCalculationMethod: "bodyScroll",
+                readyCallback: () => {
+                    this.setState({ innerScroll: false })
+                }
+            }
+            require.ensure([], () => {
+                require("iframe-resizer/js/iframeResizer.contentWindow.js")
+            });
+        }
     }
 
     _getOptions() {

resources/frontend_client/embed_script.js

+(function() {
+    var scriptUrl;
+    try {
+        throw new Error();
+    } catch (e) {
+        scriptUrl = e.stack.match(
+            /https?:\/\/[\w_-]+(\.[\w_-]+)*(\:\d+)?\/[^:\s]+\.js/
+        )[0];
+    }
+
+    var scripts = document.getElementsByTagName("script");
+    var script;
+    for (var i = scripts.length - 1; i >= 0; i--) {
+        if (scripts[i].src === scriptUrl) {
+            script = scripts[i];
+            break;
+        }
+    }
+
+    var iframeAttrsMap = {
+        width: "800",
+        height: "600",
+        frameborder: "0",
+        allowtransparency: "allowtransparency"
+    };
+    var hashParamsMap = {};
+
+    if (script) {
+        for (var name in script.dataset) {
+            if (name in iframeAttrsMap) {
+                iframeAttrsMap[name] = script.dataset[name];
+            } else {
+                hashParamsMap[name] = script.dataset[name];
+            }
+        }
+    }
+
+    var hashParamsStr = Object.keys(hashParamsMap)
+        .map(function(name) {
+            return name + "=" + hashParamsMap[name];
+        })
+        .join("&");
+
+    iframeAttrsMap["src"] = scriptUrl.replace(/\.js$/, "") + (hashParamsStr ? "#" + hashParamsStr : "");
+    iframeAttrsMap["onload"] = "iFrameResize({}, this)";
+
+    var iframeAttrs = Object.keys(iframeAttrsMap)
+        .map(function(name) {
+            return name + "=" + JSON.stringify(iframeAttrsMap[name]);
+        })
+        .join(" ");
+
+    if (!window.iFrameResize) {
+        document.write(
+            '<script src="node_modules/iframe-resizer/js/iframeResizer.js" charset="utf-8"></script>'
+        );
+    }
+
+    console.log("iframeAttrs", iframeAttrs)
+
+    document.write('<iframe ' + iframeAttrs + '></iframe>');
+})();

src/metabase/routes.clj

 (ns metabase.routes
   (:require [clojure.java.io :as io]
+            [clojure.string :as str]
             [cheshire.core :as json]
             (compojure [core :refer [context defroutes GET]]
                        [route :as route])
@@ -11,14 +12,19 @@
             [metabase.util :as u]
             [metabase.util.embed :as embed]))
 
+(defn- load-file [path]
+  (slurp (or (io/resource path)
+             (throw (Exception. (str "Cannot find '" path "'. Did you remember to build the Metabase frontend?"))))))
+
+(defn- load-template [path variables]
+  (stencil/render-string (load-file path) variables))
 
 (defn- entrypoint [entry embeddable? {:keys [uri]}]
   (-> (if (init-status/complete?)
-        (stencil/render-string (slurp (or (io/resource (str "frontend_client/" entry ".html"))
-                                          (throw (Exception. (str "Cannot find './resources/frontend_client/" entry ".html'. Did you remember to build the Metabase frontend?")))))
-                               {:bootstrap_json (json/generate-string (public-settings/public-settings))
-                                :embed_code     (when embeddable? (embed/head uri))})
-        (slurp (io/resource "frontend_client/init.html")))
+        (load-template (str "frontend_client/" entry ".html")
+                       {:bootstrap_json (json/generate-string (public-settings/public-settings))
+                        :embed_code     (when embeddable? (embed/head uri))})
+        (load-file "frontend_client/init.html"))
       resp/response
       (resp/content-type "text/html; charset=utf-8")))
 
@@ -26,14 +32,21 @@
 (def ^:private public (partial entrypoint "public" :embeddable))
 (def ^:private embed  (partial entrypoint "embed"  :embeddable))
 
+(defn- embed-script []
+  (-> (load-file "frontend_client/embed_script.js")
+      resp/response
+      (resp/content-type "application/javascript; charset=utf-8")))
+
 (defroutes ^:private public-routes
   (GET ["/question/:uuid.csv"  :uuid u/uuid-regex] [uuid] (resp/redirect (format "/api/public/card/%s/query/csv"  uuid)))
   (GET ["/question/:uuid.json" :uuid u/uuid-regex] [uuid] (resp/redirect (format "/api/public/card/%s/query/json" uuid)))
+  (GET "/:type/:uuid.js"                           []     (embed-script))
   (GET "*" [] public))
 
 (defroutes ^:private embed-routes
   (GET "/question/:token.csv"  [token] (resp/redirect (format "/api/embed/card/%s/query/csv"  token)))
   (GET "/question/:token.json" [token] (resp/redirect (format "/api/embed/card/%s/query/json" token)))
+  (GET "/:type/:uuid.js"       []      (embed-script))
   (GET "*" [] embed))
 
 ;; Redirect naughty users who try to visit a page other than setup if setup is not yet complete