webspresso 0.0.76 → 0.0.78

package/plugins/content/client/inline-edit.css

@@ -0,0 +1,296 @@
+/**
+ * Inline edit — popover editor for admin users on public pages.
+ */
+.ws-content-host,
+.ws-content-block {
+  position: relative;
+  margin-block: 0.25rem;
+}
+
+.ws-content-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.375rem;
+  min-height: 1.75rem;
+}
+
+.ws-content-edit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  padding: 0.35rem 0.65rem;
+  border-radius: 9999px;
+  border: 1px solid #bfdbfe;
+  background: #eff6ff;
+  color: #1d4ed8;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12);
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+
+.ws-content-edit-btn:hover {
+  background: #dbeafe;
+  border-color: #93c5fd;
+  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18);
+}
+
+.ws-content-edit-btn:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.ws-content-edit-btn-icon {
+  font-size: 0.85em;
+  line-height: 1;
+}
+
+.ws-content-editable {
+  outline: 1px dashed transparent;
+  outline-offset: 3px;
+  border-radius: 0.2rem;
+  transition: outline-color 0.15s, background-color 0.15s;
+}
+
+.ws-content-host:hover .ws-content-editable,
+.ws-content-host.is-editing .ws-content-editable {
+  outline-color: rgba(37, 99, 235, 0.4);
+  background: rgba(37, 99, 235, 0.05);
+}
+
+/* Editor shell — id kept for compatibility */
+#ws-content-modal {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  pointer-events: none;
+}
+
+#ws-content-modal.is-open {
+  display: block;
+}
+
+.ws-content-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.2);
+  pointer-events: auto;
+}
+
+.ws-content-modal-panel {
+  position: fixed;
+  z-index: 1;
+  width: min(22rem, calc(100vw - 1.5rem));
+  max-height: min(24rem, calc(100vh - 2rem));
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  box-shadow:
+    0 4px 6px -1px rgba(15, 23, 42, 0.08),
+    0 16px 32px -8px rgba(15, 23, 42, 0.18);
+  pointer-events: auto;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  font-size: 0.875rem;
+  color: #0f172a;
+  box-sizing: border-box;
+}
+
+.ws-content-modal-panel *,
+.ws-content-modal-panel *::before,
+.ws-content-modal-panel *::after {
+  box-sizing: border-box;
+}
+
+.ws-content-popover-arrow {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  transform: rotate(45deg);
+  top: -7px;
+  left: 50%;
+  margin-left: -6px;
+  pointer-events: none;
+}
+
+.ws-content-modal-panel.is-above .ws-content-popover-arrow {
+  top: auto;
+  bottom: -7px;
+  border-top-color: transparent;
+  border-left-color: transparent;
+}
+
+.ws-content-modal-panel:not(.is-above) .ws-content-popover-arrow {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.ws-content-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #f1f5f9;
+  flex-shrink: 0;
+}
+
+.ws-content-modal-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: #0f172a;
+}
+
+.ws-content-modal-close {
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  color: #64748b;
+}
+
+.ws-content-modal-close:hover {
+  background: #f1f5f9;
+  color: #334155;
+}
+
+.ws-content-modal-body {
+  padding: 0.75rem 1rem;
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.ws-content-field {
+  margin-bottom: 0.75rem;
+}
+
+.ws-content-field:last-child {
+  margin-bottom: 0;
+}
+
+.ws-content-field label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-bottom: 0.3rem;
+  color: #475569;
+  letter-spacing: 0.01em;
+}
+
+.ws-content-field input,
+.ws-content-field textarea,
+.ws-content-field select {
+  width: 100%;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  font: inherit;
+  font-size: 0.875rem;
+  color: #0f172a;
+  background: #fff;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.ws-content-field input:focus,
+.ws-content-field textarea:focus,
+.ws-content-field select:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+}
+
+.ws-content-field textarea {
+  resize: vertical;
+  min-height: 4.5rem;
+}
+
+.ws-content-modal-error {
+  padding: 0 1rem 0.5rem;
+  color: #b91c1c;
+  font-size: 0.8125rem;
+  flex-shrink: 0;
+}
+
+.ws-content-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem 0.875rem;
+  border-top: 1px solid #f1f5f9;
+  flex-shrink: 0;
+}
+
+.ws-content-btn {
+  border-radius: 0.5rem;
+  padding: 0.45rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-family: inherit;
+}
+
+.ws-content-btn-muted {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+  color: #475569;
+}
+
+.ws-content-btn-muted:hover {
+  background: #f1f5f9;
+}
+
+.ws-content-btn-primary {
+  background: #2563eb;
+  color: #fff;
+}
+
+.ws-content-btn-primary:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+
+.ws-content-btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Mobile: bottom sheet */
+@media (max-width: 639px) {
+  .ws-content-modal-panel.is-sheet {
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    top: auto !important;
+    width: 100% !important;
+    max-width: none;
+    max-height: min(88vh, 32rem);
+    border-radius: 1rem 1rem 0 0;
+    border-bottom: none;
+  }
+
+  .ws-content-modal-panel.is-sheet .ws-content-popover-arrow {
+    display: none;
+  }
+
+  .ws-content-modal-backdrop {
+    background: rgba(15, 23, 42, 0.35);
+  }
+}

package/plugins/content/client/inline-edit.js

@@ -0,0 +1,366 @@
+/**
+ * Inline content editing for admin users on public pages.
+ * Popover anchored to the edit trigger — responsive bottom sheet on small screens.
+ */
+(function () {
+  'use strict';
+
+  var config = window.__WS_CONTENT__;
+  if (!config || !config.enabled) return;
+
+  var API = config.adminPath + '/api/content';
+  var modalEl = null;
+  var activeEntry = null;
+  var activeSchema = null;
+  var activeAnchor = null;
+  var activeHost = null;
+  var formState = {};
+  var repositionBound = false;
+
+  function qs(sel, root) {
+    return (root || document).querySelector(sel);
+  }
+
+  function qsa(sel, root) {
+    return Array.prototype.slice.call((root || document).querySelectorAll(sel));
+  }
+
+  function ensureEditor() {
+    if (modalEl) return modalEl;
+    modalEl = document.createElement('div');
+    modalEl.id = 'ws-content-modal';
+    modalEl.innerHTML =
+      '<div class="ws-content-modal-backdrop" data-close="1"></div>' +
+      '<div class="ws-content-modal-panel" role="dialog" aria-modal="true" aria-labelledby="ws-content-modal-title">' +
+      '<div class="ws-content-popover-arrow" aria-hidden="true"></div>' +
+      '<div class="ws-content-modal-header">' +
+      '<h3 class="ws-content-modal-title" id="ws-content-modal-title">Edit content</h3>' +
+      '<button type="button" class="ws-content-modal-close" data-close="1" aria-label="Close">&times;</button>' +
+      '</div>' +
+      '<div class="ws-content-modal-body"></div>' +
+      '<div class="ws-content-modal-error" hidden></div>' +
+      '<div class="ws-content-modal-footer">' +
+      '<button type="button" class="ws-content-btn ws-content-btn-muted" data-close="1">Cancel</button>' +
+      '<button type="button" class="ws-content-btn ws-content-btn-primary" data-save="1">Save</button>' +
+      '</div></div>';
+    document.body.appendChild(modalEl);
+
+    modalEl.addEventListener('click', function (e) {
+      if (e.target && e.target.getAttribute('data-close')) closeEditor();
+    });
+    qs('[data-save="1"]', modalEl).addEventListener('click', saveEditor);
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape' && modalEl.classList.contains('is-open')) {
+        e.preventDefault();
+        closeEditor();
+      }
+    });
+
+    if (!repositionBound) {
+      repositionBound = true;
+      window.addEventListener('resize', function () {
+        if (modalEl.classList.contains('is-open')) positionPopover();
+      });
+      window.addEventListener(
+        'scroll',
+        function () {
+          if (modalEl.classList.contains('is-open')) positionPopover();
+        },
+        true
+      );
+    }
+
+    return modalEl;
+  }
+
+  function closeEditor() {
+    if (modalEl) modalEl.classList.remove('is-open');
+    if (activeHost) activeHost.classList.remove('is-editing');
+    activeEntry = null;
+    activeSchema = null;
+    activeAnchor = null;
+    activeHost = null;
+    formState = {};
+  }
+
+  function showError(msg) {
+    var el = qs('.ws-content-modal-error', modalEl);
+    if (!el) return;
+    if (msg) {
+      el.textContent = msg;
+      el.hidden = false;
+    } else {
+      el.textContent = '';
+      el.hidden = true;
+    }
+  }
+
+  function positionPopover() {
+    if (!modalEl || !activeAnchor) return;
+    var panel = qs('.ws-content-modal-panel', modalEl);
+    if (!panel) return;
+
+    if (window.innerWidth < 640) {
+      panel.classList.add('is-sheet');
+      panel.style.top = '';
+      panel.style.left = '';
+      panel.style.visibility = 'visible';
+      return;
+    }
+
+    panel.classList.remove('is-sheet');
+    panel.style.visibility = 'hidden';
+    panel.style.display = 'flex';
+
+    var panelRect = panel.getBoundingClientRect();
+    var anchorRect = activeAnchor.getBoundingClientRect();
+    var gap = 10;
+    var pad = 12;
+    var vw = window.innerWidth;
+    var vh = window.innerHeight;
+
+    var top = anchorRect.bottom + gap;
+    var left = anchorRect.left + anchorRect.width / 2 - panelRect.width / 2;
+    var above = false;
+
+    if (top + panelRect.height > vh - pad && anchorRect.top - panelRect.height - gap > pad) {
+      top = anchorRect.top - panelRect.height - gap;
+      above = true;
+    }
+
+    top = Math.max(pad, Math.min(top, vh - panelRect.height - pad));
+    left = Math.max(pad, Math.min(left, vw - panelRect.width - pad));
+
+    panel.style.top = top + 'px';
+    panel.style.left = left + 'px';
+    panel.style.visibility = 'visible';
+    panel.classList.toggle('is-above', above);
+
+    var arrow = qs('.ws-content-popover-arrow', panel);
+    if (arrow) {
+      var arrowLeft = anchorRect.left + anchorRect.width / 2 - left;
+      arrow.style.left = Math.max(16, Math.min(arrowLeft, panelRect.width - 16)) + 'px';
+    }
+  }
+
+  function focusFirstField() {
+    var body = qs('.ws-content-modal-body', modalEl);
+    if (!body) return;
+    var input = body.querySelector('input, textarea, select');
+    if (input) input.focus();
+  }
+
+  function renderField(field, container) {
+    var wrap = document.createElement('div');
+    wrap.className = 'ws-content-field';
+    var label = document.createElement('label');
+    label.textContent = field.label || field.name;
+    wrap.appendChild(label);
+
+    var value = formState[field.name];
+    var input;
+
+    if (field.type === 'boolean') {
+      input = document.createElement('input');
+      input.type = 'checkbox';
+      input.checked = !!value;
+      input.addEventListener('change', function () {
+        formState[field.name] = input.checked;
+      });
+    } else if (field.type === 'textarea' || field.type === 'rich-text') {
+      input = document.createElement('textarea');
+      input.rows = field.type === 'rich-text' ? 6 : 3;
+      input.value = value || '';
+      input.addEventListener('input', function () {
+        formState[field.name] = input.value;
+      });
+    } else if (field.type === 'select') {
+      input = document.createElement('select');
+      (field.options || []).forEach(function (opt) {
+        var o = document.createElement('option');
+        o.value = opt;
+        o.textContent = opt;
+        if (value === opt) o.selected = true;
+        input.appendChild(o);
+      });
+      input.addEventListener('change', function () {
+        formState[field.name] = input.value;
+      });
+    } else {
+      input = document.createElement('input');
+      input.type = field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text';
+      input.value = value != null ? value : '';
+      input.addEventListener('input', function () {
+        formState[field.name] = field.type === 'number' ? Number(input.value) : input.value;
+      });
+    }
+
+    wrap.appendChild(input);
+    container.appendChild(wrap);
+  }
+
+  function openEditor(anchorEl, hostEl, entryId, typeSlug) {
+    ensureEditor();
+    showError('');
+    activeAnchor = anchorEl;
+    activeHost = hostEl;
+    if (activeHost) activeHost.classList.add('is-editing');
+
+    var body = qs('.ws-content-modal-body', modalEl);
+    body.innerHTML = '<p>Loading…</p>';
+    modalEl.classList.add('is-open');
+    positionPopover();
+
+    Promise.all([
+      fetch(API + '/types/' + encodeURIComponent(typeSlug) + '/schema', { credentials: 'include' }).then(function (r) {
+        return r.json();
+      }),
+      fetch(API + '/entries/' + entryId, { credentials: 'include' }).then(function (r) {
+        return r.json();
+      }),
+    ])
+      .then(function (results) {
+        if (!results[0].data || !results[1].data) throw new Error('Failed to load content');
+        activeSchema = results[0].data.schema;
+        activeEntry = results[1].data;
+        formState = Object.assign({}, activeEntry.data || {});
+        body.innerHTML = '';
+        var title = qs('.ws-content-modal-title', modalEl);
+        if (title) title.textContent = 'Edit: ' + (activeEntry.title || activeEntry.slug);
+        (activeSchema.fields || []).forEach(function (field) {
+          renderField(field, body);
+        });
+        requestAnimationFrame(function () {
+          positionPopover();
+          focusFirstField();
+        });
+      })
+      .catch(function (err) {
+        body.innerHTML = '';
+        showError(err.message || 'Load failed');
+        positionPopover();
+      });
+  }
+
+  function updateDomFields(entryId, data) {
+    qsa('[data-ws-content-entry="' + entryId + '"][data-ws-content-field]').forEach(function (el) {
+      var field = el.getAttribute('data-ws-content-field');
+      if (!field || !(field in data)) return;
+      var val = data[field];
+      var isHtml = el.getAttribute('data-ws-content-html') === 'true';
+      if (isHtml) {
+        el.innerHTML = val || '';
+      } else {
+        el.textContent = val != null ? val : '';
+      }
+    });
+  }
+
+  function saveEditor() {
+    if (!activeEntry) return;
+    showError('');
+    var saveBtn = qs('[data-save="1"]', modalEl);
+    saveBtn.disabled = true;
+    saveBtn.textContent = 'Saving…';
+
+    fetch(API + '/entries/' + activeEntry.id, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ data: formState }),
+    })
+      .then(function (r) {
+        return r.json().then(function (json) {
+          if (!r.ok) throw new Error(json.error || 'Save failed');
+          return json;
+        });
+      })
+      .then(function (res) {
+        var data = (res.data && res.data.data) || formState;
+        updateDomFields(activeEntry.id, data);
+        closeEditor();
+      })
+      .catch(function (err) {
+        showError(err.message || 'Save failed');
+      })
+      .finally(function () {
+        saveBtn.disabled = false;
+        saveBtn.textContent = 'Save';
+      });
+  }
+
+  function lowestCommonAncestor(nodes) {
+    if (!nodes.length) return null;
+    var ancestor = nodes[0].parentElement;
+    while (ancestor && ancestor !== document.body) {
+      var ok = nodes.every(function (n) {
+        return ancestor.contains(n);
+      });
+      if (ok) return ancestor;
+      ancestor = ancestor.parentElement;
+    }
+    return nodes[0].parentElement;
+  }
+
+  function getEntryHosts() {
+    var byEntry = {};
+    qsa('[data-ws-content-entry]').forEach(function (el) {
+      var entryId = el.getAttribute('data-ws-content-entry');
+      var typeSlug = el.getAttribute('data-ws-content-type');
+      if (!entryId || !typeSlug) return;
+      if (!byEntry[entryId]) byEntry[entryId] = { typeSlug: typeSlug, nodes: [] };
+      byEntry[entryId].nodes.push(el);
+    });
+
+    var hosts = [];
+    Object.keys(byEntry).forEach(function (entryId) {
+      var info = byEntry[entryId];
+      var block = qs('.ws-content-block[data-ws-content-entry="' + entryId + '"]');
+      var host = block || lowestCommonAncestor(info.nodes);
+      if (!host) return;
+      hosts.push({ host: host, entryId: entryId, typeSlug: info.typeSlug });
+    });
+    return hosts;
+  }
+
+  function attachToolbar(host, entryId, typeSlug) {
+    if (host.querySelector('.ws-content-toolbar')) return;
+    host.classList.add('ws-content-host');
+
+    var toolbar = document.createElement('div');
+    toolbar.className = 'ws-content-toolbar';
+
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'ws-content-edit-btn';
+    btn.title = 'Edit content';
+    btn.setAttribute('aria-haspopup', 'dialog');
+    btn.innerHTML = '<span class="ws-content-edit-btn-icon" aria-hidden="true">✎</span> Edit';
+    btn.addEventListener('click', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      openEditor(btn, host, entryId, typeSlug);
+    });
+
+    toolbar.appendChild(btn);
+    host.insertBefore(toolbar, host.firstChild);
+  }
+
+  function attachEditButtons() {
+    getEntryHosts().forEach(function (item) {
+      attachToolbar(item.host, item.entryId, item.typeSlug);
+    });
+  }
+
+  function init() {
+    attachEditButtons();
+    document.addEventListener('DOMContentLoaded', attachEditButtons);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();