fisk/core/templates/index.html

{% 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="5" gs-h="14" 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>
            Controls
          </p>
          <article class="panel-block is-active">
            {% include 'window-content/controls.html' %}
          </article>
        </nav>
      </div>
    </div>
    <div class="grid-stack-item" gs-w="4" gs-h="25" gs-y="0" gs-x="6">
      <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 class="grid-stack-item" gs-w="5" gs-h="14" gs-y="14" 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>
            Offset
          </p>
          <article class="panel-block is-active">
            {% include 'window-content/offset.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>
  <script>

  </script>

{% endblock %}