Allowing for templated urls in iFrame (#460)

* Allowing for templated urls in iFrame

This can allow for passing {{ width }} and {{ height }} as dynamic
attributes in the iFrame's URL.

The new method Slice.render_template method could do more eventually
exposing more variables to be used in dynamic strings.

* Passing function references

* js linting

caravel/assets/javascripts/modules/caravel.js

@@ -1,6 +1,7 @@
 var $ = require('jquery');
 var jQuery = $;
 var d3 = require('d3');
+var Mustache = require('mustache');
 
 // vis sources
 var sourceMap = {
@@ -215,6 +216,13 @@ var px = (function () {
       getWidgetHeader: function () {
         return this.container.parents("li.widget").find(".chart-header");
       },
+      render_template: function (s) {
+        var context = {
+          width: this.width,
+          height: this.height
+        };
+        return Mustache.render(s, context);
+      },
       jsonEndpoint: function () {
         var parser = document.createElement('a');
         parser.href = data.json_endpoint;

caravel/assets/package.json

@@ -60,6 +60,7 @@
     "jquery-ui": "^1.10.5",
     "less": "^2.6.1",
     "less-loader": "^2.2.2",
+    "mustache": "^2.2.1",
     "nvd3": "1.8.2",
     "react": "^0.14.7",
     "react-bootstrap": "^0.28.3",

caravel/assets/visualizations/iframe.js

@@ -5,10 +5,11 @@ function iframeWidget(slice) {
   function refresh() {
     $('#code').attr('rows', '15');
     $.getJSON(slice.jsonEndpoint(), function (payload) {
+        var url = slice.render_template(payload.form_data.url);
         slice.container.html('<iframe style="width:100%;"></iframe>');
         var iframe = slice.container.find('iframe');
         iframe.css('height', slice.height());
-        iframe.attr('src', payload.form_data.url);
+        iframe.attr('src', url);
         slice.done();
       })
       .fail(function (xhr) {

caravel/forms.py

@@ -420,7 +420,12 @@ def __init__(self, viz):
                     default=default_metric,
                     choices=datasource.metrics_combo),
             'url': TextField(
-                'URL', default='https://www.youtube.com/embed/JkI5rg_VcQ4',),
+                'URL',
+                description=(
+                    "The URL, this field is templated, so you can integrate "
+                    "{{ width }} and/or {{ height }} in your URL string."
+                ),
+                default='https://www.youtube.com/embed/JkI5rg_VcQ4',),
             'where': TextField(
                 'Custom WHERE clause', default='',
                 description=(