@flourish/sdk
Version:
The Flourish SDK
120 lines (109 loc) • 5.24 kB
HTML
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flourish | Data Visualization & Storytelling</title>
<script>if ("ontouchstart" in window) { document.documentElement.classList.add("is-touch"); }</script>
<link rel="stylesheet" type="text/css" href="/sdk.css">
<script data-ot-ignore src="/script.js" charset="utf-8"></script>
</head>
<body class="sdk">
<div class="row header no-select" style="padding-left:10px">
<a href="https://app.flourish.studio" target="_blank"><img class="logo" src="/images/flourish_logo_white.svg" alt="Flourish logo"></a><span id="sdk-tag">SDK</span>
</div>
<div class="row editor-bar">
<div id="preview-menu" class="row-menu left no-select">
<a id="full-preview" href="preview" target="_blank" class="menu-item clickable popup" data-popup-head="Full preview in new window" aria-label="Full preview in new window">
<i class="fa fa-expand"></i>
</a>
<div id="editor-previews">
<span id="editor-auto" data-target="auto" class="menu-item preview-mode clickable selected popup" data-popup-head="Preview using available width">
<i class="fa fa-tv"></i>
</span>
<span id="editor-tablet" data-target="tablet" class="menu-item preview-mode clickable popup" data-popup-head="Preview at typical tablet width">
<i class="fa fa-tablet"></i>
</span>
<span id="editor-mobile" data-target="mobile" class="menu-item preview-mode clickable popup" data-popup-head="Preview at typical mobile width">
<i class="fa fa-mobile-phone"></i>
</span>
<span id="editor-custom" data-target="custom" class="menu-item preview-mode clickable popup" data-popup-head="Preview at custom size">
<i class="fa fa-cog"></i>
</span>
<span id="editor-custom-inputs">
<input id="editor-custom-width" type="number" min="100" data-target="custom" class="clickable selected" aria-label="Custom width"> x
<input id="editor-custom-height" type="number" min="100" data-target="custom" class="clickable selected" placeholder="auto" aria-label="Custom height">
</span>
</div>
</div>
<script>
document.querySelector('#full-preview')?.addEventListener('click', () => {
window.sp.trackInteraction({
section: 'editor_toolbar',
component: 'full_preview',
interaction_type: 'click'
});
});
</script>
<span class="sdk-status-label"></span>
<button class="sdk-session-reset-button" title="Resets the development session.">Reset</button>
<div class="confirm-saved saved" data-testid="saving-indicator"><i class="fa fa-check"></i> <span class="label"></span></div>
</div>
<svg class="svg-defs">
<symbol id="cancel-setting" width="8px" height="8px" viewBox="0 0 8 8"><path stroke="#252525" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square" d="M1.45012627,1.45012627 L6.39987373,6.39987373 M1.45012627,6.39987373 L6.39987373,1.44987373" transform="translate(3.925000, 3.924874) rotate(-270.000000) translate(-3.925000, -3.924874) "></path></symbol>
</svg>
<div class="content">
<div class="row editor">
<div class="row-inner">
<div id="visualisation" class="full-screen-ready">
<div id="visualisation-inner" class="editor-core">
<div class="preview-holder">
<div class="loading-spinner" data-testid="loading-indicator"></div>
<div class="preview-overlay">
<p class="empty-label"></p>
<p class="empty-details"></p>
</div>
<iframe id="preview" sandbox="allow-same-origin allow-scripts allow-downloads" src="about:blank" data-testid="visualisation-iframe" aria-label="Visualization preview"></iframe>
<div id="resize-overlay"></div>
<div id="resize-handle-container">
<div id="resize-handle"></div>
</div>
</div>
</div>
<div class="side-panel">
<div class="side-panel-inner">
<div class="current-template popup" data-popup-head="Template details" data-popup-body="Add or edit thumbnail.jpg and template.yml to change">
<div class="current-template-title">
<!-- <div class="current-template-thumbnail"></div> -->
<h1>Current template <span class="template-name">{{ template_name }}</span></h1>
</div>
</div>
<div class="template-settings"></div>
<div class="detailed-settings"></div>
<div class="template-settings-search">
<i class="fa fa-search"></i>
<input type="search" placeholder="Search for setting" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{# if build_failed }}
<div class="error shown">
<h1><i class="fa fa-exclamation-triangle"></i> Template failed to build</h1>
<h2>See your terminal for details</h2>
</div>
{{/ if }}
<div id="error-server-down" class="error">
<h1><i class="fa fa-exclamation-triangle"></i> SDK server not running</h1>
<h2>Check your terminal for errors</h2>
</div>
<script>
Flourish.initSDK({{{ visualisation_js }}}, {{{ settings }}}, {{{ data_bindings }}}, "{{ public_url_prefix }}");
Flourish.app.initTemplate();
Flourish.talkToServer();
</script>
</body>
</html>