RubyGems - not_pressed-core - Versions diffs - 0.1.0 - Mend

not_pressed-core 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

data/app/views/layouts/not_pressed/admin.html.erb ADDED Viewed

@@ -0,0 +1,745 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%= @page_title ? "#{@page_title} | #{NotPressed.configuration.site_name}" : NotPressed.configuration.site_name %></title>
+  <%= stylesheet_link_tag "not_pressed/admin", media: "all" %>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <script src="https://unpkg.com/@hotwired/stimulus@3/dist/stimulus.umd.js"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      var application = Stimulus.Application.start();
+      application.register("np-flash", class extends Stimulus.Controller {
+        connect() {
+          this.timeout = setTimeout(() => this.dismiss(), 5000);
+        }
+        disconnect() {
+          if (this.timeout) clearTimeout(this.timeout);
+        }
+        dismiss() {
+          this.element.style.transition = "opacity 0.3s";
+          this.element.style.opacity = "0";
+          setTimeout(() => this.element.remove(), 300);
+        }
+      });
+      application.register("np-sidebar", class extends Stimulus.Controller {
+        static get targets() { return ["panel"]; }
+        toggle() {
+          if (this.hasPanelTarget) {
+            this.panelTarget.classList.toggle("np-sidebar--open");
+          }
+        }
+      });
+      application.register("np-modal", class extends Stimulus.Controller {
+        open() {
+          this.element.showModal();
+        }
+        close() {
+          this.element.close();
+        }
+      });
+      application.register("np-block-editor", class extends Stimulus.Controller {
+        static get values() { return { pageId: Number }; }
+        connect() {
+          this._handleKeyboard = this._onKeydown.bind(this);
+          document.addEventListener("keydown", this._handleKeyboard);
+        }
+        disconnect() {
+          document.removeEventListener("keydown", this._handleKeyboard);
+        }
+        openPicker() {
+          var dialog = this.element.querySelector("dialog.np-block-picker");
+          if (dialog) dialog.showModal();
+        }
+        _onKeydown(e) {
+          var mod = e.ctrlKey || e.metaKey;
+          // Ctrl+S / Cmd+S — save focused block
+          if (mod && e.key === "s") {
+            e.preventDefault();
+            var activeBlock = document.activeElement.closest(".np-block-body");
+            if (activeBlock) {
+              var saveBtn = activeBlock.querySelector('input[type="submit"]');
+              if (saveBtn) saveBtn.click();
+            }
+          }
+          // Ctrl+Shift+Enter — open block picker
+          if (mod && e.shiftKey && e.key === "Enter") {
+            e.preventDefault();
+            this.openPicker();
+          }
+          // Delete on focused block header — remove block
+          if (e.key === "Delete" && document.activeElement.closest(".np-block-header")) {
+            var deleteBtn = document.activeElement.closest(".np-block").querySelector(".np-btn--danger");
+            if (deleteBtn) deleteBtn.click();
+          }
+        }
+      });
+      application.register("np-rich-text", class extends Stimulus.Controller {
+        static get targets() { return ["editor", "textarea"]; }
+        bold() { document.execCommand("bold"); this.sync(); }
+        italic() { document.execCommand("italic"); this.sync(); }
+        underline() { document.execCommand("underline"); this.sync(); }
+        insertUnorderedList() { document.execCommand("insertUnorderedList"); this.sync(); }
+        insertOrderedList() { document.execCommand("insertOrderedList"); this.sync(); }
+        link() {
+          var url = prompt("Enter URL:");
+          if (url) {
+            document.execCommand("createLink", false, url);
+            this.sync();
+          }
+        }
+        sync() {
+          if (this.hasEditorTarget && this.hasTextareaTarget) {
+            this.textareaTarget.value = this.editorTarget.innerHTML;
+          }
+        }
+      });
+      application.register("np-sortable", class extends Stimulus.Controller {
+        static get targets() { return ["list", "item"]; }
+        static get values() { return { url: String }; }
+        initialize() {
+          this._draggedEl = null;
+        }
+        connect() {
+          this._onDragStart = this._handleDragStart.bind(this);
+          this._onDragOver = this._handleDragOver.bind(this);
+          this._onDragEnd = this._handleDragEnd.bind(this);
+          this._onDrop = this._handleDrop.bind(this);
+          this.element.addEventListener("dragstart", this._onDragStart);
+          this.element.addEventListener("dragover", this._onDragOver);
+          this.element.addEventListener("dragend", this._onDragEnd);
+          this.element.addEventListener("drop", this._onDrop);
+        }
+        disconnect() {
+          this.element.removeEventListener("dragstart", this._onDragStart);
+          this.element.removeEventListener("dragover", this._onDragOver);
+          this.element.removeEventListener("dragend", this._onDragEnd);
+          this.element.removeEventListener("drop", this._onDrop);
+        }
+        grabHandle() {
+          // No-op — just ensures drag handle is interactive
+        }
+        _handleDragStart(e) {
+          var block = e.target.closest("[data-block-id]");
+          if (!block) return;
+          this._draggedEl = block;
+          block.classList.add("np-block--dragging");
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.setData("text/plain", block.dataset.blockId);
+        }
+        _handleDragOver(e) {
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+          if (!this._draggedEl || !this.hasListTarget) return;
+          var afterEl = this._getDragAfterElement(this.listTarget, e.clientY);
+          // Remove existing indicator
+          var old = this.listTarget.querySelector(".np-drop-indicator");
+          if (old) old.remove();
+          var indicator = document.createElement("div");
+          indicator.className = "np-drop-indicator";
+          if (afterEl == null) {
+            this.listTarget.appendChild(indicator);
+          } else {
+            this.listTarget.insertBefore(indicator, afterEl);
+          }
+        }
+        _handleDrop(e) {
+          e.preventDefault();
+          if (!this._draggedEl || !this.hasListTarget) return;
+          var indicator = this.listTarget.querySelector(".np-drop-indicator");
+          if (indicator) {
+            this.listTarget.insertBefore(this._draggedEl, indicator);
+            indicator.remove();
+          }
+          this._persistOrder();
+        }
+        _handleDragEnd() {
+          if (this._draggedEl) {
+            this._draggedEl.classList.remove("np-block--dragging");
+            this._draggedEl = null;
+          }
+          var indicator = this.element.querySelector(".np-drop-indicator");
+          if (indicator) indicator.remove();
+        }
+        _getDragAfterElement(container, y) {
+          var elements = Array.from(container.querySelectorAll("[data-block-id]:not(.np-block--dragging)"));
+          var result = null;
+          var closest = Number.POSITIVE_INFINITY;
+          elements.forEach(function(el) {
+            var box = el.getBoundingClientRect();
+            var offset = y - box.top - box.height / 2;
+            if (offset < 0 && offset > -closest) {
+              closest = -offset;
+              result = el;
+            }
+          });
+          return result;
+        }
+        _persistOrder() {
+          if (!this.hasListTarget || !this.urlValue) return;
+          var blockIds = Array.from(this.listTarget.querySelectorAll("[data-block-id]")).map(function(el) {
+            return el.dataset.blockId;
+          });
+          var token = document.querySelector('meta[name="csrf-token"]');
+          fetch(this.urlValue, {
+            method: "PATCH",
+            headers: {
+              "Content-Type": "application/json",
+              "Accept": "text/vnd.turbo-stream.html, text/html",
+              "X-CSRF-Token": token ? token.content : ""
+            },
+            body: JSON.stringify({ block_ids: blockIds })
+          });
+        }
+      });
+      application.register("np-preview", class extends Stimulus.Controller {
+        static get targets() { return ["container", "editorPane", "previewPane", "frame", "editorBtn", "splitBtn", "previewBtn"]; }
+        static get values() { return { previewUrl: String }; }
+        editorMode() {
+          this.editorPaneTarget.style.display = "";
+          this.editorPaneTarget.style.flex = "";
+          this.previewPaneTarget.style.display = "none";
+          this.containerTarget.classList.remove("np-editor-split--active");
+          this._setActiveBtn(this.editorBtnTarget);
+        }
+        splitMode() {
+          this.editorPaneTarget.style.display = "";
+          this.editorPaneTarget.style.flex = "0 0 60%";
+          this.previewPaneTarget.style.display = "";
+          this.previewPaneTarget.style.flex = "0 0 40%";
+          this.containerTarget.classList.add("np-editor-split--active");
+          this._setActiveBtn(this.splitBtnTarget);
+          this.refresh();
+        }
+        previewMode() {
+          this.editorPaneTarget.style.display = "none";
+          this.previewPaneTarget.style.display = "";
+          this.previewPaneTarget.style.flex = "1";
+          this.containerTarget.classList.add("np-editor-split--active");
+          this._setActiveBtn(this.previewBtnTarget);
+          this.refresh();
+        }
+        refresh() {
+          if (this.hasFrameTarget && this.previewUrlValue) {
+            this.frameTarget.src = this.previewUrlValue;
+          }
+        }
+        _setActiveBtn(active) {
+          [this.editorBtnTarget, this.splitBtnTarget, this.previewBtnTarget].forEach(function(btn) {
+            btn.classList.remove("np-preview-btn--active");
+          });
+          active.classList.add("np-preview-btn--active");
+        }
+      });
+      application.register("np-tree", class extends Stimulus.Controller {
+        static get targets() { return ["toggle", "children"]; }
+        connect() {
+          this._restoreState();
+        }
+        toggle(event) {
+          var btn = event.currentTarget;
+          var pageId = btn.dataset.pageId;
+          var container = this.childrenTargets.find(function(el) {
+            return el.dataset.parentId === pageId;
+          });
+          if (!container) return;
+          var collapsed = container.classList.toggle("np-tree-children--collapsed");
+          btn.innerHTML = collapsed ? "&#9654;" : "&#9660;";
+          this._saveState(pageId, !collapsed);
+        }
+        expandAll() {
+          var self = this;
+          this.childrenTargets.forEach(function(el) {
+            el.classList.remove("np-tree-children--collapsed");
+          });
+          this.toggleTargets.forEach(function(btn) {
+            btn.innerHTML = "&#9660;";
+          });
+          self._clearState();
+        }
+        collapseAll() {
+          var self = this;
+          this.childrenTargets.forEach(function(el) {
+            el.classList.add("np-tree-children--collapsed");
+          });
+          this.toggleTargets.forEach(function(btn) {
+            btn.innerHTML = "&#9654;";
+          });
+          self._clearState();
+          this.childrenTargets.forEach(function(el) {
+            self._saveState(el.dataset.parentId, false);
+          });
+        }
+        _restoreState() {
+          var state = this._loadState();
+          var self = this;
+          this.childrenTargets.forEach(function(el) {
+            var pageId = el.dataset.parentId;
+            if (state[pageId] === false) {
+              el.classList.add("np-tree-children--collapsed");
+              var btn = self.toggleTargets.find(function(t) { return t.dataset.pageId === pageId; });
+              if (btn) btn.innerHTML = "&#9654;";
+            }
+          });
+        }
+        _loadState() {
+          try {
+            return JSON.parse(localStorage.getItem("np-tree-state") || "{}");
+          } catch(e) { return {}; }
+        }
+        _saveState(pageId, expanded) {
+          var state = this._loadState();
+          state[pageId] = expanded;
+          localStorage.setItem("np-tree-state", JSON.stringify(state));
+        }
+        _clearState() {
+          localStorage.removeItem("np-tree-state");
+        }
+      });
+      application.register("np-page-sortable", class extends Stimulus.Controller {
+        static get values() { return { url: String }; }
+        initialize() {
+          this._draggedEl = null;
+          this._dropZone = null;
+        }
+        grabHandle() {
+          // No-op — ensures drag handle is interactive
+        }
+        dragstart(event) {
+          var node = event.currentTarget.closest(".np-tree-node");
+          if (!node) return;
+          this._draggedEl = node;
+          node.classList.add("np-tree-node--dragging");
+          event.dataTransfer.effectAllowed = "move";
+          event.dataTransfer.setData("text/plain", node.dataset.pageId);
+        }
+        dragover(event) {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = "move";
+          if (!this._draggedEl) return;
+          var node = event.target.closest(".np-tree-node");
+          if (!node || node === this._draggedEl) {
+            this._clearIndicators();
+            return;
+          }
+          var rect = node.getBoundingClientRect();
+          var y = event.clientY - rect.top;
+          var height = rect.height;
+          var zone;
+          if (y < height * 0.25) {
+            zone = "before";
+          } else if (y > height * 0.75) {
+            zone = "after";
+          } else {
+            zone = "inside";
+          }
+          this._clearIndicators();
+          this._dropZone = { node: node, zone: zone };
+          if (zone === "inside") {
+            node.classList.add("np-tree-node--drop-inside");
+          } else {
+            var indicator = document.createElement("div");
+            indicator.className = "np-tree-drop-indicator";
+            if (zone === "before") {
+              node.parentNode.insertBefore(indicator, node);
+            } else {
+              node.parentNode.insertBefore(indicator, node.nextSibling);
+            }
+          }
+        }
+        drop(event) {
+          event.preventDefault();
+          if (!this._draggedEl || !this._dropZone) return;
+          var draggedId = this._draggedEl.dataset.pageId;
+          var targetNode = this._dropZone.node;
+          var zone = this._dropZone.zone;
+          var targetId = targetNode.dataset.pageId;
+          if (draggedId === targetId) return;
+          // Move DOM element
+          var draggedGroup = this._getNodeWithChildren(this._draggedEl);
+          if (zone === "before") {
+            targetNode.parentNode.insertBefore(draggedGroup, targetNode);
+          } else if (zone === "after") {
+            var targetChildren = targetNode.nextElementSibling;
+            if (targetChildren && targetChildren.classList.contains("np-tree-children")) {
+              targetChildren.parentNode.insertBefore(draggedGroup, targetChildren.nextSibling);
+            } else {
+              targetNode.parentNode.insertBefore(draggedGroup, targetNode.nextSibling);
+            }
+          } else if (zone === "inside") {
+            var childrenContainer = targetNode.nextElementSibling;
+            if (childrenContainer && childrenContainer.classList.contains("np-tree-children")) {
+              childrenContainer.appendChild(draggedGroup);
+            } else {
+              var newContainer = document.createElement("div");
+              newContainer.className = "np-tree-children";
+              newContainer.dataset.npTreeTarget = "children";
+              newContainer.dataset.parentId = targetId;
+              newContainer.appendChild(draggedGroup);
+              targetNode.parentNode.insertBefore(newContainer, targetNode.nextSibling);
+            }
+          }
+          this._clearIndicators();
+          this._persistOrder();
+        }
+        dragend() {
+          if (this._draggedEl) {
+            this._draggedEl.classList.remove("np-tree-node--dragging");
+            this._draggedEl = null;
+          }
+          this._dropZone = null;
+          this._clearIndicators();
+        }
+        _getNodeWithChildren(node) {
+          // Create a fragment with the node (children container is separate in DOM)
+          var fragment = document.createDocumentFragment();
+          var nextSibling = node.nextElementSibling;
+          fragment.appendChild(node);
+          if (nextSibling && nextSibling.classList.contains("np-tree-children") && nextSibling.dataset.parentId === node.dataset.pageId) {
+            fragment.appendChild(nextSibling);
+          }
+          return fragment;
+        }
+        _clearIndicators() {
+          var indicators = this.element.querySelectorAll(".np-tree-drop-indicator");
+          indicators.forEach(function(el) { el.remove(); });
+          var insideNodes = this.element.querySelectorAll(".np-tree-node--drop-inside");
+          insideNodes.forEach(function(el) { el.classList.remove("np-tree-node--drop-inside"); });
+        }
+        _persistOrder() {
+          if (!this.urlValue) return;
+          var pages = [];
+          this._walkTree(this.element, null, pages);
+          var token = document.querySelector('meta[name="csrf-token"]');
+          fetch(this.urlValue, {
+            method: "PATCH",
+            headers: {
+              "Content-Type": "application/json",
+              "Accept": "application/json",
+              "X-CSRF-Token": token ? token.content : ""
+            },
+            body: JSON.stringify({ pages: pages })
+          });
+        }
+        _walkTree(container, parentId, pages) {
+          var self = this;
+          var position = 0;
+          var children = Array.from(container.children);
+          children.forEach(function(el) {
+            if (el.classList.contains("np-tree-node")) {
+              pages.push({ id: parseInt(el.dataset.pageId), position: position, parent_id: parentId });
+              position++;
+              // Check for children container immediately after
+              var next = el.nextElementSibling;
+              if (next && next.classList.contains("np-tree-children")) {
+                self._walkTree(next, parseInt(el.dataset.pageId), pages);
+              }
+            }
+          });
+        }
+      });
+      application.register("np-block-content", class extends Stimulus.Controller {
+        static get targets() { return ["indicator"]; }
+        static get values() { return { url: String }; }
+        initialize() {
+          this._debounceTimer = null;
+        }
+        save() {
+          if (this._debounceTimer) clearTimeout(this._debounceTimer);
+          this._debounceTimer = setTimeout(() => this._performSave(), 300);
+        }
+        _performSave() {
+          var form = this.element.querySelector("form");
+          if (!form) return;
+          var formData = new FormData(form);
+          var token = document.querySelector('meta[name="csrf-token"]');
+          fetch(this.urlValue, {
+            method: "PATCH",
+            headers: {
+              "Accept": "text/vnd.turbo-stream.html, text/html",
+              "X-CSRF-Token": token ? token.content : ""
+            },
+            body: formData
+          }).then(function(response) {
+            if (response.ok) {
+              this._showIndicator("Saved");
+            }
+          }.bind(this)).catch(function() {
+            this._showIndicator("Error");
+          }.bind(this));
+        }
+        _showIndicator(text) {
+          if (!this.hasIndicatorTarget) return;
+          this.indicatorTarget.textContent = text;
+          this.indicatorTarget.style.opacity = "1";
+          setTimeout(function() {
+            this.indicatorTarget.style.opacity = "0";
+          }.bind(this), 1500);
+        }
+      });
+      application.register("np-media-picker", class extends Stimulus.Controller {
+        static get targets() { return ["urlField", "altField", "mediaIdField", "dialog", "grid"]; }
+        static get values() { return { pickerUrl: String }; }
+        openModal() {
+          if (!this.hasDialogTarget) return;
+          this.dialogTarget.showModal();
+          this._loadPicker();
+        }
+        closeModal() {
+          if (this.hasDialogTarget) this.dialogTarget.close();
+        }
+        select(event) {
+          var item = event.currentTarget;
+          var url = item.dataset.mediaUrl;
+          var alt = item.dataset.mediaAlt || "";
+          var mediaId = item.dataset.mediaId;
+          if (this.hasUrlFieldTarget) {
+            this.urlFieldTarget.value = url;
+            this.urlFieldTarget.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+          if (this.hasAltFieldTarget && alt) {
+            this.altFieldTarget.value = alt;
+            this.altFieldTarget.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+          if (this.hasMediaIdFieldTarget) {
+            this.mediaIdFieldTarget.value = mediaId;
+          }
+          this.closeModal();
+        }
+        _loadPicker() {
+          if (!this.pickerUrlValue || !this.hasGridTarget) return;
+          var grid = this.gridTarget;
+          fetch(this.pickerUrlValue, {
+            headers: { "Accept": "text/html" }
+          }).then(function(response) {
+            return response.text();
+          }).then(function(html) {
+            grid.innerHTML = html;
+          });
+        }
+      });
+      application.register("np-media-upload", class extends Stimulus.Controller {
+        static get targets() { return ["input"]; }
+        choose() {
+          if (this.hasInputTarget) this.inputTarget.click();
+        }
+        submit() {
+          var form = this.inputTarget.closest("form");
+          if (form) form.submit();
+        }
+      });
+      application.register("np-form-fields", class extends Stimulus.Controller {
+        static get targets() { return ["list", "item", "template", "position", "destroy", "optionsGroup"]; }
+        initialize() {
+          this._draggedEl = null;
+          this._nextIndex = 0;
+        }
+        connect() {
+          this._nextIndex = this.itemTargets.length;
+        }
+        addField() {
+          var template = this.templateTarget.innerHTML;
+          var html = template.replace(/NEW_INDEX/g, String(Date.now()));
+          this.listTarget.insertAdjacentHTML("beforeend", html);
+          this._updatePositions();
+        }
+        removeField(event) {
+          var row = event.target.closest(".np-field-row");
+          if (!row) return;
+          var destroyInput = row.querySelector('[name*="_destroy"]');
+          if (destroyInput) {
+            destroyInput.value = "1";
+            row.style.display = "none";
+          } else {
+            row.remove();
+          }
+          this._updatePositions();
+        }
+        toggleOptions(event) {
+          var row = event.target.closest(".np-field-row");
+          if (!row) return;
+          var optionsGroup = row.querySelector('[data-np-form-fields-target="optionsGroup"]');
+          if (!optionsGroup) return;
+          var optionTypes = ["select", "radio", "checkbox"];
+          optionsGroup.style.display = optionTypes.indexOf(event.target.value) !== -1 ? "" : "none";
+        }
+        dragstart(event) {
+          var row = event.target.closest(".np-field-row");
+          if (!row) return;
+          this._draggedEl = row;
+          row.classList.add("np-block--dragging");
+          event.dataTransfer.effectAllowed = "move";
+          event.dataTransfer.setData("text/plain", "");
+        }
+        dragover(event) {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = "move";
+          if (!this._draggedEl) return;
+          var row = event.target.closest(".np-field-row");
+          if (!row || row === this._draggedEl) return;
+          var rect = row.getBoundingClientRect();
+          var midY = rect.top + rect.height / 2;
+          if (event.clientY < midY) {
+            this.listTarget.insertBefore(this._draggedEl, row);
+          } else {
+            this.listTarget.insertBefore(this._draggedEl, row.nextSibling);
+          }
+        }
+        drop(event) {
+          event.preventDefault();
+          this._updatePositions();
+        }
+        dragend() {
+          if (this._draggedEl) {
+            this._draggedEl.classList.remove("np-block--dragging");
+            this._draggedEl = null;
+          }
+          this._updatePositions();
+        }
+        _updatePositions() {
+          var visibleRows = Array.from(this.listTarget.querySelectorAll(".np-field-row")).filter(function(row) {
+            return row.style.display !== "none";
+          });
+          visibleRows.forEach(function(row, i) {
+            var posInput = row.querySelector('[name*="[position]"]');
+            if (posInput) posInput.value = i;
+          });
+        }
+      });
+    });
+  </script>
+</head>
+<body data-controller="np-sidebar">
+  <%= render "not_pressed/admin/shared/sidebar" %>
+  <div id="admin-wrapper">
+    <header id="admin-header">
+      <div class="np-header-left">
+        <button class="np-hamburger" data-action="np-sidebar#toggle" aria-label="Toggle sidebar">
+          &#9776;
+        </button>
+        <h2><%= @page_title %></h2>
+      </div>
+      <div class="user-info">
+        <% if current_admin_user %>
+          <span><%= current_admin_user %></span>
+        <% end %>
+      </div>
+    </header>
+    <main id="admin-content">
+      <%= render "not_pressed/admin/shared/breadcrumbs" %>
+      <%= render "not_pressed/admin/shared/flash" %>
+      <%= yield %>
+    </main>
+  </div>
+</body>
+</html>