Reimplement compose and add tiling windows
This commit is contained in:
@@ -1,100 +1,67 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% load joinsep %}
|
||||
{% block html_class %}gia-has-workspace-root{% endblock %}
|
||||
{% block body_class %}gia-has-workspace{% endblock %}
|
||||
{% block extra_head_assets %}
|
||||
{{ block.super }}
|
||||
<link rel="stylesheet" href="{% static 'css/gridstack.min.css' %}" integrity="sha512-ttQfsDTO64bamkJHeLDf0kzMP1NKfkootudPWS2V8Pwy+9z1wexSYjIT6/HXGg/bmtD+DRwsUnQoYEB0yePjbw==" crossorigin="anonymous">
|
||||
<script defer src="{% static 'js/gridstack-all.js' %}" integrity="sha512-djBPxwvBhDep1SvOhliatweHMORhVO3HabrfBjaW6nYsa7UcJYHty31x42m4HBSJXcJSQdoEgRPLVYGGIuIaDQ==" crossorigin="anonymous"></script>
|
||||
<script defer src="{% static 'js/workspace-shell.js' %}"></script>
|
||||
{% endblock %}
|
||||
{% block standard_page_shell %}{% endblock %}
|
||||
{% block outer_content %}
|
||||
|
||||
<div class="grid-stack" id="grid-stack-main">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var grid = GridStack.init({
|
||||
cellHeight: 20,
|
||||
cellWidth: 45,
|
||||
cellHeightUnit: 'px',
|
||||
auto: true,
|
||||
float: true,
|
||||
draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
|
||||
removable: false,
|
||||
animate: true,
|
||||
});
|
||||
// GridStack.init();
|
||||
|
||||
// a widget is ready to be loaded
|
||||
document.addEventListener('load-widget', function(event) {
|
||||
let containers = htmx.findAll('#widget');
|
||||
for (let x = 0, len = containers.length; x < len; x++) {
|
||||
container = containers[x];
|
||||
// get the scripts, they won't be run on the new element so we need to eval them
|
||||
let widgetelement = container.firstElementChild.cloneNode(true);
|
||||
console.log(widgetelement);
|
||||
var scripts = htmx.findAll(widgetelement, "script");
|
||||
var new_id = widgetelement.id;
|
||||
|
||||
// check if there's an existing element like the one we want to swap
|
||||
let grid_element = htmx.find('#grid-stack-main');
|
||||
let existing_widget = htmx.find(grid_element, "#"+new_id);
|
||||
|
||||
// get the size and position attributes
|
||||
if (existing_widget) {
|
||||
let attrs = existing_widget.getAttributeNames();
|
||||
for (let i = 0, len = attrs.length; i < len; i++) {
|
||||
if (attrs[i].startsWith('gs-')) { // only target gridstack attributes
|
||||
widgetelement.setAttribute(attrs[i], existing_widget.getAttribute(attrs[i]));
|
||||
}
|
||||
}
|
||||
}
|
||||
// clear the queue element
|
||||
container.outerHTML = "";
|
||||
// container.firstElementChild.outerHTML = "";
|
||||
grid.addWidget(widgetelement);
|
||||
|
||||
// re-create the HTMX JS listeners, otherwise HTMX won't work inside the grid
|
||||
htmx.process(widgetelement);
|
||||
if (typeof window.giaEnableWidgetSpawnButtons === "function") {
|
||||
window.giaEnableWidgetSpawnButtons(widgetelement);
|
||||
}
|
||||
|
||||
// update the size of the widget according to its content
|
||||
var added_widget = htmx.find(grid_element, "#"+new_id);
|
||||
var itemContent = htmx.find(added_widget, ".control");
|
||||
var scrollheight = itemContent.scrollHeight+80;
|
||||
var verticalmargin = 0;
|
||||
var cellheight = grid.opts.cellHeight;
|
||||
var height = Math.ceil((scrollheight + verticalmargin) / (cellheight + verticalmargin));
|
||||
var opts = {
|
||||
h: height,
|
||||
}
|
||||
grid.update(
|
||||
added_widget,
|
||||
opts
|
||||
);
|
||||
|
||||
// run the JS scripts inside the added element again
|
||||
for (var i = 0; i < scripts.length; i++) {
|
||||
eval(scripts[i].innerHTML);
|
||||
}
|
||||
}
|
||||
// clear the containers we just added
|
||||
// for (let x = 0, len = containers.length; x < len; x++) {
|
||||
// container = containers[x];
|
||||
// container.inner = "";
|
||||
// }
|
||||
grid.compact();
|
||||
if (typeof window.giaEnableWidgetSpawnButtons === "function") {
|
||||
window.giaEnableWidgetSpawnButtons(document);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div>
|
||||
{% block load_widgets %}
|
||||
<!-- <div
|
||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||
hx-get="#"
|
||||
hx-target="#widgets-here"
|
||||
hx-trigger="load"
|
||||
hx-swap="afterend"
|
||||
style="display: none;"></div> -->
|
||||
{% endblock %}
|
||||
</div>
|
||||
<section class="section gia-workspace-page">
|
||||
<div class="gia-workspace-shell">
|
||||
<div class="gia-workspace-main">
|
||||
<div class="gia-workspace-grid-column">
|
||||
<div class="grid-stack gia-workspace-grid" id="grid-stack-main">
|
||||
</div>
|
||||
</div>
|
||||
<aside
|
||||
id="gia-snap-assistant"
|
||||
class="panel gia-snap-assistant is-hidden"
|
||||
aria-label="Snap assistant">
|
||||
<p class="panel-heading gia-snap-assistant-heading">
|
||||
<span class="icon is-small"><i class="fa-solid fa-table-columns"></i></span>
|
||||
<span>Snap Right</span>
|
||||
<button
|
||||
type="button"
|
||||
class="delete is-small js-gia-snap-assistant-close"
|
||||
aria-label="Close snap assistant"></button>
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<div class="content is-small">
|
||||
<p>Choose a second window for the right side.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-block is-active gia-snap-assistant-body">
|
||||
<div
|
||||
id="gia-snap-assistant-options"
|
||||
class="buttons are-small gia-snap-assistant-options"></div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav
|
||||
id="gia-taskbar"
|
||||
class="tabs is-boxed is-small gia-taskbar is-hidden"
|
||||
aria-label="Open windows">
|
||||
<ul id="gia-taskbar-items">
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="gia-workspace-stash" class="is-hidden" aria-hidden="true"></div>
|
||||
<div>
|
||||
{% block load_widgets %}
|
||||
<!-- <div
|
||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||
hx-get="#"
|
||||
hx-target="#widgets-here"
|
||||
hx-trigger="load"
|
||||
hx-swap="beforeend"
|
||||
style="display: none;"></div> -->
|
||||
{% endblock %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user