@flourish/sdk
Version:
The Flourish SDK
95 lines (86 loc) • 3.72 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flourish | Data Visualisation & Storytelling</title>
<link rel="stylesheet" type="text/css" href="/sdk.css">
<script src="/script.js" charset="utf-8"></script>
</head>
<body class="sdk">
<div class="row header no-select" style="padding-left:10px">
<a href=""><img class="logo" src="/images/logo.svg" alt="Flourish logo"> SDK</a>
</div>
<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">
<img class="loading-spinner" src="/images/bosh.svg">
<iframe id="preview" sandbox="allow-same-origin allow-scripts" src="about:blank"></iframe>
<div id="resize-overlay"></div>
<div id="resize-handle"><i class="fa fa-arrows-v"></i></div>
</div>
<div id="preview-menu" class="row-menu left no-select">
<span id="editor-custom" class="menu-item">
<input id="editor-custom-width" type="number" min="1" data-target="custom" class="clickable selected"> x
<input id="editor-custom-height" type="number" min="1" data-target="custom" class="clickable selected">
<span id="editor-rotate" class="menu-item clickable">
<i class="fa fa-retweet"></i>
</span>
</span>
<span id="editor-auto" data-target="auto" class="menu-item preview-mode clickable selected">
<span class="label">fill space</span>
</span>
<span id="editor-mobile" data-target="mobile" class="menu-item preview-mode clickable">
<span class="label">phone</span>
</span>
<span id="editor-tablet" data-target="tablet" class="menu-item preview-mode clickable">
<span class="label">tablet</span>
</span>
<span id="editor-full-screen" class="toggle-full-screen menu-item clickable">
<span class="label">full-screen</span>
</span>
<span id="editor-preview" class="menu-item clickable"><a href="preview" target="_blank"><i class="fa fa-external-link"></i> <span class="label">Open in new window</span></a></span>
</div>
</div>
<div class="side-panel">
<div class="side-panel-scrollbox">
<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>Selected template <span class="template-name">{{{ template_name }}}</span></h1>
</div>
<div class="current-template-info">
<div class="current-template-description">
<p><span class="label">Author:</span> <span class="author">{{{ template_author }}}</span></p>
</div>
</div>
</div>
<div class="template-settings"></div>
</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 }}});
Flourish.app.preview_pane.loadTemplate();
Flourish.talkToServer();
</script>
</body>
</html>