78 lines
2.6 KiB
HTML
78 lines
2.6 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">
|
|
|
|
<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>
|
|
|
|
<script>
|
|
{% block custom_script %}
|
|
{% endblock %}
|
|
var widget_event = new Event("load-widget");
|
|
document.dispatchEvent(widget_event);
|
|
(function () {
|
|
var widgetRoot = document.getElementById("widget-{{ unique }}");
|
|
var iconClass = "{{ widget_icon|default:'fa-solid fa-arrows-minimize'|escapejs }}";
|
|
function decorateHandle() {
|
|
if (!widgetRoot) {
|
|
return true;
|
|
}
|
|
var handles = widgetRoot.querySelectorAll(".ui-resizable-se");
|
|
if (!handles.length) {
|
|
handles = widgetRoot.querySelectorAll(".ui-resizable-handle");
|
|
}
|
|
if (!handles.length) {
|
|
return false;
|
|
}
|
|
handles.forEach(function (handle) {
|
|
if (handle.dataset.iconApplied === "1") {
|
|
return;
|
|
}
|
|
handle.dataset.iconApplied = "1";
|
|
handle.style.display = "flex";
|
|
handle.style.alignItems = "center";
|
|
handle.style.justifyContent = "center";
|
|
handle.style.overflow = "hidden";
|
|
var icon = document.createElement("i");
|
|
icon.className = iconClass + " has-text-grey-light";
|
|
icon.style.fontSize = "0.65rem";
|
|
icon.style.opacity = "0.65";
|
|
icon.style.pointerEvents = "none";
|
|
handle.appendChild(icon);
|
|
});
|
|
return true;
|
|
}
|
|
var attempts = 0;
|
|
var timer = window.setInterval(function () {
|
|
attempts += 1;
|
|
if (decorateHandle() || attempts > 10) {
|
|
window.clearInterval(timer);
|
|
}
|
|
}, 80);
|
|
})();
|
|
</script>
|
|
{% block custom_end %}
|
|
{% endblock %}
|