mirror of
https://github.com/apache/superset.git
synced 2026-04-20 08:34:37 +00:00
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
This commit is contained in:
committed by
Chris Williams
parent
5c49514e2f
commit
9fb28b5f4e
@@ -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 (
|
||||
|
||||
@@ -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('<iframe style="width:100%;"></iframe>');
|
||||
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,
|
||||
});
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.style.width = '100%';
|
||||
iframe.style.height = height;
|
||||
iframe.setAttribute('src', completedUrl);
|
||||
container.appendChild(iframe);
|
||||
}
|
||||
|
||||
module.exports = iframeWidget;
|
||||
|
||||
@@ -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 => `<link rel="stylesheet" type="text/css" href="${href}" />`,
|
||||
);
|
||||
const html = `
|
||||
<html>
|
||||
<head>
|
||||
${stylesheets}
|
||||
${data.theme_css.map(
|
||||
href => `<link rel="stylesheet" type="text/css" href="${href}" />`,
|
||||
)}
|
||||
</head>
|
||||
<body style="background-color: transparent;">
|
||||
${payload.data.html}
|
||||
${data.html}
|
||||
</body>
|
||||
</html>`;
|
||||
jqdiv.html(`
|
||||
<iframe id="${iframeId}"
|
||||
frameborder="0"
|
||||
height="${iframeHeight}"
|
||||
sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation">
|
||||
</iframe>
|
||||
`);
|
||||
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user