diff --git a/caravel/assets/javascripts/modules/caravel.js b/caravel/assets/javascripts/modules/caravel.js index 4d92951f1dbe6..ca8458a4eab3f 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(''); 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) { 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=(