From 910ef598de4aed41ffcbd1efd0eebc97b5daa321 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Wed, 11 May 2016 10:57:04 -0700
Subject: [PATCH 1/3] 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.
---
 caravel/assets/javascripts/modules/caravel.js | 8 ++++++++
 caravel/assets/package.json                   | 1 +
 caravel/assets/visualizations/iframe.js       | 3 ++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/caravel/assets/javascripts/modules/caravel.js b/caravel/assets/javascripts/modules/caravel.js
index 4d92951f1dbe6..5cb59a0d4b01b 100644
--- a/caravel/assets/javascripts/modules/caravel.js
+++ b/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;
diff --git a/caravel/assets/package.json b/caravel/assets/package.json
index ccebcdb792d85..e6f5e0188cfd6 100644
--- a/caravel/assets/package.json
+++ b/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",
diff --git a/caravel/assets/visualizations/iframe.js b/caravel/assets/visualizations/iframe.js
index 0f9fddc8ba2fd..c38feff30d38a 100644
--- a/caravel/assets/visualizations/iframe.js
+++ b/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) {

From 4fe2c044e68b6485bbba4ff7498a7da23c621b99 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Wed, 11 May 2016 11:06:37 -0700
Subject: [PATCH 2/3] Passing function references

---
 caravel/assets/javascripts/modules/caravel.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/caravel/assets/javascripts/modules/caravel.js b/caravel/assets/javascripts/modules/caravel.js
index 5cb59a0d4b01b..386627e10c800 100644
--- a/caravel/assets/javascripts/modules/caravel.js
+++ b/caravel/assets/javascripts/modules/caravel.js
@@ -218,8 +218,8 @@ var px = (function () {
       },
       render_template: function (s) {
         var context = {
-          width: this.width(),
-          height: this.height(),
+          width: this.width,
+          height: this.height,
         };
         return Mustache.render(s, context);
       },

From faa14deb121a068e36a8138aa3d24bddcdd4b864 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Wed, 11 May 2016 11:35:45 -0700
Subject: [PATCH 3/3] js linting

---
 caravel/assets/javascripts/modules/caravel.js | 2 +-
 caravel/forms.py                              | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/caravel/assets/javascripts/modules/caravel.js b/caravel/assets/javascripts/modules/caravel.js
index 386627e10c800..ca8458a4eab3f 100644
--- a/caravel/assets/javascripts/modules/caravel.js
+++ b/caravel/assets/javascripts/modules/caravel.js
@@ -219,7 +219,7 @@ var px = (function () {
       render_template: function (s) {
         var context = {
           width: this.width,
-          height: this.height,
+          height: this.height
         };
         return Mustache.render(s, context);
       },
diff --git a/caravel/forms.py b/caravel/forms.py
index 9889148e18623..bc9fe9145c099 100644
--- a/caravel/forms.py
+++ b/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=(