From 860c5a510788dd87f94eab011dc5a1afa83094e9 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Thu, 23 Aug 2018 15:45:45 -0700 Subject: [PATCH] Revise markup.js and iframe.js (#5672) * Do not call slice.xxx * remove iframe id * remove old code * use import instead of require * update iframe.js --- superset/assets/src/chart/Chart.jsx | 10 ---- superset/assets/src/visualizations/iframe.js | 28 +++++++---- superset/assets/src/visualizations/markup.js | 52 +++++++++----------- 3 files changed, 42 insertions(+), 48 deletions(-) diff --git a/superset/assets/src/chart/Chart.jsx b/superset/assets/src/chart/Chart.jsx index 032f1d672ef49..ed49eea6849f2 100644 --- a/superset/assets/src/chart/Chart.jsx +++ b/superset/assets/src/chart/Chart.jsx @@ -1,7 +1,6 @@ /* eslint no-undef: 2 */ import React from 'react'; import PropTypes from 'prop-types'; -import Mustache from 'mustache'; import { Tooltip } from 'react-bootstrap'; import { d3format } from '../modules/utils'; @@ -183,15 +182,6 @@ class Chart extends React.PureComponent { return this.props.datasource.verbose_map[metric] || metric; } - // eslint-disable-next-line camelcase - render_template(s) { - const context = { - width: this.width(), - height: this.height(), - }; - return Mustache.render(s, context); - } - renderTooltip() { if (this.state.tooltip) { return ( diff --git a/superset/assets/src/visualizations/iframe.js b/superset/assets/src/visualizations/iframe.js index 89b1240c43d43..332f9bb0d03da 100644 --- a/superset/assets/src/visualizations/iframe.js +++ b/superset/assets/src/visualizations/iframe.js @@ -1,12 +1,20 @@ -const $ = require('jquery'); +import Mustache from 'mustache'; -function iframeWidget(slice) { - $('#code').attr('rows', '15'); - const url = slice.render_template(slice.formData.url); - slice.container.html(''); - const iframe = slice.container.find('iframe'); - iframe.css('height', slice.height()); - iframe.attr('src', url); -} +export default function iframeWidget(slice) { + const { selector, formData } = slice; + const { url } = formData; + const width = slice.width(); + const height = slice.height(); + const container = document.querySelector(selector); + + const completedUrl = Mustache.render(url, { + width, + height, + }); -module.exports = iframeWidget; + const iframe = document.createElement('iframe'); + iframe.style.width = '100%'; + iframe.style.height = height; + iframe.setAttribute('src', completedUrl); + container.appendChild(iframe); +} diff --git a/superset/assets/src/visualizations/markup.js b/superset/assets/src/visualizations/markup.js index 3068d025876b1..1f632bf270a46 100644 --- a/superset/assets/src/visualizations/markup.js +++ b/superset/assets/src/visualizations/markup.js @@ -1,44 +1,40 @@ -const srcdoc = require('srcdoc-polyfill'); - -require('./markup.css'); +import srcdoc from 'srcdoc-polyfill'; +import './markup.css'; function markupWidget(slice, payload) { - $('#code').attr('rows', '15'); - const jqdiv = slice.container; - jqdiv.css({ - overflow: 'auto', - }); + const { selector } = slice; + const height = slice.height(); + const headerHeight = slice.headerHeight(); + const vizType = slice.props.vizType; + const { data } = payload; + + const container = document.querySelector(selector); + container.style.overflow = 'auto'; // markup height is slice height - (marginTop + marginBottom) - let iframeHeight = slice.height() - 20; - if (slice.props.vizType === 'separator') { - // separator height is the entire chart container: slice height + header - iframeHeight = slice.height() + slice.headerHeight(); - } + const iframeHeight = vizType === 'separator' + ? height - 20 + : height + headerHeight; - const iframeId = `if__${slice.containerId}`; - const stylesheets = payload.data.theme_css.map( - href => ``, - ); const html = ` - ${stylesheets} + ${data.theme_css.map( + href => ``, + )} - ${payload.data.html} + ${data.html} `; - jqdiv.html(` - - `); - const iframe = document.getElementById(iframeId); + const iframe = document.createElement('iframe'); + iframe.setAttribute('frameborder', 0); + iframe.setAttribute('height', iframeHeight); + iframe.setAttribute('sandbox', 'allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation'); + container.appendChild(iframe); + srcdoc.set(iframe, html); } -module.exports = markupWidget; +export default markupWidget;