Initial commit

core/templates/index.html

@@ -0,0 +1,95 @@
+{% extends "base.html" %}
+{% load static %}
+{% load joinsep %}
+{% block outer_content %}
+
+  <div class="grid-stack" id="grid-stack-main">
+    <div class="grid-stack-item" gs-w="7" gs-h="10" gs-y="0" gs-x="1">
+      <div class="grid-stack-item-content">
+        <nav class="panel">
+          <p class="panel-heading" style="padding: .2em; line-height: .5em;">
+            <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light"></i>
+            Home
+          </p>
+          <article class="panel-block is-active">
+            {% include 'window-content/main.html' %}
+          </article>
+        </nav>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    var grid = GridStack.init({
+      cellHeight: 20,
+      cellWidth: 50,
+      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 container = htmx.find('#widget');
+      // get the scripts, they won't be run on the new element so we need to eval them
+      var scripts = htmx.findAll(container, "script");
+      let widgetelement = container.firstElementChild.cloneNode(true);
+      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 = "";
+      grid.addWidget(widgetelement);
+
+      // re-create the HTMX JS listeners, otherwise HTMX won't work inside the grid
+      htmx.process(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);
+      }
+    });
+  </script>
+
+  <div id="modals-here">
+  </div>
+  <div id="items-here">
+  </div>
+  <div id="widgets-here" style="display: none;">
+  </div>
+  <script>
+
+  </script>
+
+{% endblock %}