90 lines
2.8 KiB
HTML
90 lines
2.8 KiB
HTML
<div id="widget">
|
|
<div id="widget-{{ unique }}" class="grid-stack-item" {% block widget_options %}{% if widget_options is None %}gs-w="6" gs-h="1" gs-y="20" gs-x="0"{% else %}{% autoescape off %}{{ widget_options }}{% endautoescape %}{% endif %}{% endblock %}>
|
|
<div class="grid-stack-item-content">
|
|
<span class="gia-widget-focus-indicator" aria-hidden="true">
|
|
<i class="{{ widget_icon|default:'fa-solid fa-circle' }}"></i>
|
|
</span>
|
|
|
|
<nav class="panel">
|
|
<p class="panel-heading" style="padding: .2em; line-height: .5em;">
|
|
<i class="{{ widget_icon|default:'fa-solid fa-arrows-up-down-left-right' }} has-text-grey-light"></i>
|
|
{% block close_button %}
|
|
{% include "mixins/partials/close-widget.html" %}
|
|
{% endblock %}
|
|
<i
|
|
class="fa-solid fa-arrows-minimize has-text-grey-light float-right"
|
|
onclick="grid.compact();"></i>
|
|
{% block heading %}
|
|
{{ title }}
|
|
{% endblock %}
|
|
</p>
|
|
<article class="panel-block is-active">
|
|
<div class="control">
|
|
{% block panel_content %}
|
|
{% include window_content %}
|
|
{% endblock %}
|
|
</div>
|
|
</article>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#widget-{{ unique }} .grid-stack-item-content {
|
|
position: relative;
|
|
}
|
|
#widget-{{ unique }} .gia-widget-focus-indicator {
|
|
position: absolute;
|
|
left: 0.32rem;
|
|
top: 50%;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.7rem;
|
|
color: #2f5f9f;
|
|
background: rgba(235, 244, 255, 0.92);
|
|
border: 1px solid rgba(47, 95, 159, 0.3);
|
|
opacity: 0;
|
|
transform: translateY(-50%) scale(0.92);
|
|
transition: opacity 120ms ease, transform 120ms ease;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
}
|
|
#widget-{{ unique }}.is-widget-active .gia-widget-focus-indicator {
|
|
opacity: 1;
|
|
transform: translateY(-50%) scale(1);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
{% block custom_script %}
|
|
{% endblock %}
|
|
var widget_event = new Event("load-widget");
|
|
document.dispatchEvent(widget_event);
|
|
(function () {
|
|
var widgetRoot = document.getElementById("widget-{{ unique }}");
|
|
if (!widgetRoot) {
|
|
return;
|
|
}
|
|
|
|
function setActive() {
|
|
document.querySelectorAll(".grid-stack-item.is-widget-active").forEach(function (node) {
|
|
if (node !== widgetRoot) {
|
|
node.classList.remove("is-widget-active");
|
|
}
|
|
});
|
|
widgetRoot.classList.add("is-widget-active");
|
|
}
|
|
|
|
widgetRoot.addEventListener("mousedown", setActive);
|
|
widgetRoot.addEventListener("focusin", setActive);
|
|
window.setTimeout(setActive, 0);
|
|
})();
|
|
</script>
|
|
{% block custom_end %}
|
|
{% endblock %}
|