File: C:/Users/fred/anaconda3/Lib/site-packages/panel/template/fast/grid/fast_grid_template.html
{% extends "base/base.html" %}
{% block preamble %}
{% block metadata %}
{{ super() }}
{% endblock %}
<!-- Template JS -->
{% for src in template_resources['js'].values() %}
<script src="{{ src }}"></script>
{% endfor %}
{% for src in template_resources['js_modules'].values() %}
<script src="{{ src }}" type="module"></script>
{% endfor %}
{% endblock %}
{% block postamble %}
<!-- Template CSS -->
{% for css in template_resources['css'].values() %}
<link rel="stylesheet" href="{{ css }}">
{% endfor %}
{% for raw_css in template_resources['raw_css'] %}
<style type="text/css">
{{ raw_css }}
</style>
{% endfor %}
{% if style.font_url %}
<link rel="stylesheet" type="text/css" href="{{ style.font_url }}" />
{% endif %}
<style>
:root {
--background-color: {{ style.background_color }};
--body-font: {{ style.font }};
--corner-radius: {{ style.corner_radius }};
--header-background: {{ style.header_background }};
--header-color: {{ style.header_color }};
--sidebar-width: {{ sidebar_width }}px;
}
body {
color: {{ style.color }};
background-color: var(--background-color);
font-family: var(--body-font);
}
#header a {
color: currentColor;
}
#header-design-provider {
--neutral-fill-hover: var(--header-background);
--neutral-fill-rest: var(--header-background);
--neutral-foreground-rest: var(--header-color);
--design-background-text-color: var(--header-color);
--design-background-color: var(--header-background);
background: var(--header-background);
color: var(--header-color);
}
#sidebar {
min-width: var(--sidebar-width);
max-width: var(--sidebar-width);
{% if not main_layout %}
background-color: var(--panel-surface-color);
{% endif %}
}
</style>
<!-- Fast Script -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', (event) => {
const header_design = new window.fastDesignProvider("#header-design-provider");
const body_design = new window.fastDesignProvider("#body-design-provider");
body_design.setAccentColor("{{ style.accent_base_color }}")
body_design.setLuminance({{ style.luminance }});
body_design.setNeutralColor("{{ style.neutral_color }}");
header_design.setLuminance("{{ style.header_luminance }}");
header_design.setAccentColor("{{ style.header_accent_base_color }}");
header_design.setNeutralColor("{{ style.header_neutral_color }}");
});
</script>
{% endblock %}
<!-- goes in body -->
{% block contents %}
<fast-design-system-provider id="body-design-provider" use-defaults>
<div id="container">
<fast-design-system-provider id="header-design-provider">
<nav id="header" {{ 'class="shadow"' if style.shadow else '' }} >
{% if nav or sidebar_footer %}
<span onclick="{{ 'openNav()' if collapsed_sidebar else 'closeNav()' }}" id="sidebar-button">
<div class="pn-bar"></div>
<div class="pn-bar"></div>
<div class="pn-bar"></div>
</span>
<fast-tooltip anchor="sidebar-button" position="right">
Toggle the Sidebar
</fast-tooltip>
{% endif %}
<div class="app-header">
{% if app_logo %}
<a class="navbar-brand app-logo" href="{{ site_url }}">
<img src="{{ app_logo }}" class="app-logo">
</a>
{% endif %}
{% if site_title %}
<a class="title" href="{{ site_url }}" > {{ site_title }}</a>
{% endif %}
{% if site_title and app_title%}
<span class="title">-</span>
{% endif %}
{% if app_title %}
<a class="title" href="" >{{ app_title }}</a>
{% endif %}
</div>
<div id="header-items">
{% for doc in docs %}
{% for root in doc.roots %}
{% if "header" in root.tags %}
{{ embed(root) | indent(8) }}
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% if saveLayout %}
<fast-button id="layout-reset" appearance="neutral" style="height:24px">
<svg style="height: 10px;width: 10px" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"/></svg>
</fast-button>
<fast-tooltip anchor="layout-reset" position="bottom">
Reset the layout
</fast-tooltip>
{% endif %}
{% if theme_toggle %}
<div class="pn-toggle-theme">
<fast-switch id="theme-switch" style="float: right;" onChange="toggleLightDarkTheme('{{ theme }}')" {% if theme=='default' %}checked{% endif %}>
<span slot="checked-message">
<svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/></svg>
</span>
<span slot="unchecked-message">
<svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
</span>
</fast-switch>
<fast-tooltip anchor="theme-switch" position="bottom">
Toggle the Theme
</fast-tooltip>
</div>
{% endif %}
{% if busy %}
<div class="pn-busy-container" id="busy-container">
{{ embed(roots.busy_indicator) | indent(6) }}
</div>
<fast-tooltip anchor="busy-container" position="left">
Busy Indicator
</fast-tooltip>
{% endif %}
</nav>
</fast-design-system-provider>
<div class="row" id="content">
{% if nav or sidebar_footer %}
<div class="sidenav {{'hidden' if collapsed_sidebar else ''}}" id="sidebar">
<ul class="nav flex-column">
{% if nav %}
{% for doc in docs %}
{% for root in doc.roots %}
{% if "nav" in root.tags %}
{{ embed(root) | indent(8) }}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% if sidebar_footer %}
{{ sidebar_footer }}
{% endif %}
</ul>
</div>
{% endif %}
<div class="main" id="main">
{% if main_max_width %}
<div class="main-margin" style="max-width: {{ main_max_width }};">
{% endif %}
<div id="responsive-grid"></div>
{% if main_max_width %}
</div>
{% endif %}
</div>
<fast-dialog id="pn-Modal" hidden>
<fast-button class="pn-modalclose" id="pn-closeModal">×</fast-button>
<div class="pn-modal-content">
{% for doc in docs %}
{% for root in doc.roots %}
{% if "modal" in root.tags %}
{{ embed(root) | indent(10) }}
{% endif %}
{% endfor %}
{% endfor %}
</div>
</fast-dialog>
</div>
</div>
</fast-design-system-provider>
<script type="text/javascript">
{{ js }}
</script>
<script type="text/javascript">
function openNav() {
document.getElementById("sidebar").classList.remove("hidden");
document.getElementById("sidebar-button").onclick = closeNav;
}
function closeNav() {
document.getElementById("sidebar").classList.add("hidden");
document.getElementById("sidebar-button").onclick = openNav;
}
var modal = document.getElementById("pn-Modal");
var span = document.getElementById("pn-closeModal");
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script type="text/babel">
const ResponsiveGridLayout = ReactGridLayout.WidthProvider(ReactGridLayout.Responsive);
{% if saveLayout %}
const originalLayout = getFromLS("layouts") || {{ layouts }};
{% else %}
const originalLayout = {{ layouts }};
{% endif %}
function resize_layout(obj, old_, new_, p, e, element) {
window.dispatchEvent(new Event("resize"))
}
function resize_layout_stop(obj, old_, new_, p, e, element) {
setTimeout(function(){
window.dispatchEvent(new Event("resize"))
}, 50);
}
function getFromLS(key) {
let ls = {};
if (window.localStorage) {
try {
ls = JSON.parse(window.localStorage.getItem(window.location.origin + window.location.pathname)) || {};
} catch (e) {
/*Ignore*/
}
}
return ls[key];
}
function saveToLS(key, value) {
if (window.localStorage) {
window.localStorage.setItem(
window.location.origin + window.location.pathname,
JSON.stringify({
[key]: value
})
);
}
}
class ResponsiveGrid extends React.PureComponent {
static defaultProps = {
onLayoutChange: function() {}
}
constructor(props) {
super(props);
this.state = {
layouts: JSON.parse(JSON.stringify(originalLayout))
};
{% if saveLayout %}
this.resetLayout = this.resetLayout.bind(this)
document.getElementById('layout-reset').onclick = this.resetLayout
{% endif %}
this.mounted = false;
}
resetLayout() {
this.setState({
layouts: {{ layouts }}
});
}
onLayoutChange(layout, layouts) {
saveToLS("layouts", layouts);
this.setState({ layouts });
}
componentDidMount() {
}
render() {
return (
<ResponsiveGridLayout
className={"layout"}
cols={ {{cols}} }
breakpoints={ {{breakpoints}} }
onResize={resize_layout}
onResizeStop={resize_layout_stop}
draggableHandle={".drag-handle"}
draggableCancel={".bk-root"}
rowHeight={ {{rowHeight}} }
layouts={this.state.layouts}
{% if compact == "both" %}
compactType={"horizontal"}
{% elif compact == "horizontal" %}
verticalCompact={false}
compactType={"horizontal"}
{% elif compact is none %}
verticalCompact={false}
{% endif %}
preventCollision={ {{preventCollision and 'true' or 'false'}} }
{% if saveLayout %}
onLayoutChange={(layout, layouts) => this.onLayoutChange(layout, layouts)}
{% endif %}
>
{% set count = [] %}
{% for doc in docs %}{% for root in doc.roots %}{% if "main" in root.tags %}
<div className="card-margin" key="{{count|length + 1 }}" style={% raw %}{{borderRadius: '5px'}}{% endraw %}>
{% if main_layout %}
<fast-card class="pn-wrapper">
{% else %}
<div class="pn-wrapper">
{% endif %}
<span className="drag-handle"></span>
<span className="fullscreen-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
<path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
</svg>
</span>
{{ embed(root) | indent(4) | replace("class", "className") | replace('style="display: contents;"', 'style={{display: "contents"}}') }}
{% if main_layout %}
</fast-card>
{% else %}
</div>
{% endif %}
</div>
{% set __ = count.append(1) %}
{% endif %}{% endfor %}{% endfor %}
</ResponsiveGridLayout>
);
}
}
ReactDOM.render(<ResponsiveGrid />, document.getElementById('responsive-grid'));
addFullScreenToggle()
</script>
{% block state_roots %}
{{ super() }}
{% endblock %}
{% endblock %}