@panphora/hyper-cms 0.11.5 → 0.12.0

package/src/views/inline-layer.js

@@ -40,7 +40,7 @@ function hosts(row, strip) {
   return strip.width <= row.width && strip.height <= row.height
 }
 
-export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
+export function createInlineLayer({ doc, layerEl, onActivate, onListAction, onStyle }) {
   const win = doc.defaultView
   // Every positioned thing the layer draws, whatever kind: a handle, a row
   // strip, a list's Add. One array, because all three are placed by one pass.
@@ -135,6 +135,14 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
         spot.node.hidden = true
         continue
       }
+      // A Style chip sits inside its element's top-left corner, clear of the
+      // row strips and handles that take the top-right.
+      if (spot.kind === 'style') {
+        const x = Math.max(8, Math.min(anchor.left, viewport.width - handle.width - 8))
+        const y = Math.max(8, Math.min(anchor.top, viewport.height - handle.height - 8))
+        spot.node.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`
+        continue
+      }
       const prefer = spot.kind === 'handle' ? null : CONTROL_PLACEMENT
       let { x, y } = placeHandle({ anchor, handle, viewport, ...prefer })
       const pencil = spot.members.find((member) => member.kind === 'handle')
@@ -272,6 +280,7 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
 
   function sameMember(member, spec) {
     if (member.kind !== spec.kind) return false
+    if (member.kind === 'style') return true
     if (member.kind === 'handle') return targetIdentity(member.target) === targetIdentity(spec.target)
     if (member.kind === 'row') return member.row === spec.row && sameList(member.list, spec.list)
     return sameList(member.list, spec.list)
@@ -301,6 +310,21 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
     return member
   }
 
+  function makeStyleChip(spec) {
+    const button = doc.createElement('button')
+    button.type = 'button'
+    button.className = 'hcms-inline-style-chip mirk-button mirk-button--small'
+    button.setAttribute('aria-label', 'Edit style')
+    button.innerHTML = '<span class="mirk-button__label">Style</span>'
+    const member = { node: button, kind: 'style', group: spec.group }
+    button.addEventListener('click', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      onStyle?.(member.group, button)
+    })
+    return member
+  }
+
   function makeListButton(action, label) {
     const button = doc.createElement('button')
     button.type = 'button'
@@ -380,15 +404,23 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
     } else if (event.key === 'Tab') closeSettings(true)
     else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && openSettings.menu.contains(event.target)) {
       event.preventDefault()
-      openSettings.menu.querySelector('[role="menuitem"]').focus({ preventScroll: true })
+      const items = [...openSettings.menu.querySelectorAll('[role="menuitem"]')]
+      const at = items.indexOf(event.target)
+      const next = event.key === 'Home' ? 0
+        : event.key === 'End' ? items.length - 1
+        : at === -1 ? 0
+        : (at + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length
+      items[next]?.focus({ preventScroll: true })
     }
   }
 
-  function updateSettings(member, { list, row, rowIndex }) {
-    Object.assign(member, { list, row, index: rowIndex })
+  function updateSettings(member, { list, row, rowIndex, style = null }) {
+    Object.assign(member, { list, row, index: rowIndex, style })
     member.node.setAttribute('data-hcms-list', list.path.join('.'))
     member.node.setAttribute('data-hcms-row', String(rowIndex))
     member.button.setAttribute('aria-label', `Settings ${list.path.join('.')}.${rowIndex}`)
+    if (style && !member.styleItem.isConnected) member.menu.insertBefore(member.styleItem, member.menu.firstChild)
+    else if (!style) member.styleItem.remove()
   }
 
   function makeSettings(spec) {
@@ -402,6 +434,11 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
     menu.setAttribute('role', 'menu')
     menu.setAttribute('aria-label', 'Item settings')
     menu.hidden = true
+    const styleItem = doc.createElement('button')
+    styleItem.type = 'button'
+    styleItem.setAttribute('role', 'menuitem')
+    styleItem.setAttribute('data-hcms-style-action', '')
+    styleItem.textContent = 'Style'
     const remove = doc.createElement('button')
     remove.type = 'button'
     remove.setAttribute('role', 'menuitem')
@@ -409,7 +446,7 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
     remove.textContent = 'Delete'
     menu.appendChild(remove)
     node.append(button, menu)
-    const member = { node, button, menu, kind: 'settings' }
+    const member = { node, button, menu, styleItem, kind: 'settings' }
     updateSettings(member, spec)
     const show = () => {
       closeSettings()
@@ -417,7 +454,7 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
       menu.hidden = false
       button.setAttribute('aria-expanded', 'true')
       node.parentElement.classList.add('has-open-settings')
-      remove.focus({ preventScroll: true })
+      menu.querySelector('[role="menuitem"]').focus({ preventScroll: true })
       schedule()
     }
     button.addEventListener('click', (event) => {
@@ -438,6 +475,12 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
       closeSettings(true)
       onListAction?.({ action: 'remove', list: member.list, index: member.index, row: member.row })
     })
+    styleItem.addEventListener('click', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      closeSettings()
+      onStyle?.(member.style, member.button)
+    })
     return member
   }
 
@@ -445,6 +488,7 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
     if (member.kind === 'handle') updateHandle(member, spec.target)
     else if (member.kind === 'row') updateRowControls(member, spec)
     else if (member.kind === 'settings') updateSettings(member, spec)
+    else if (member.kind === 'style') member.group = spec.group
   }
 
   function addDesired(desired, desiredIndex, el, spec, category) {
@@ -459,7 +503,7 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
     spot.members.push(spec)
   }
 
-  function addListControls(desired, desiredIndex, list) {
+  function addListControls(desired, desiredIndex, list, rowStyles) {
     const rows = list.items || []
     rows.forEach((el, i) => {
       if (!isAnchorable(el)) return
@@ -467,7 +511,7 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
         kind: 'row', list, row: el, rowIndex: i, count: rows.length,
       }, 'item')
       addDesired(desired, desiredIndex, el, {
-        kind: 'settings', list, row: el, rowIndex: i,
+        kind: 'settings', list, row: el, rowIndex: i, style: rowStyles.get(el) || null,
       }, 'item')
     })
   }
@@ -481,7 +525,9 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
           ? makeHandle(spec.target)
           : spec.kind === 'row'
             ? makeRowControls(spec.list, spec.row, spec.rowIndex, spec.count)
-            : makeSettings(spec))
+            : spec.kind === 'style'
+              ? makeStyleChip(spec)
+              : makeSettings(spec))
       unused.delete(member)
       updateMember(member, spec)
       if (controlsHidden && member.kind !== 'handle') member.node.hidden = true
@@ -498,18 +544,26 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
     spot.members = next
   }
 
-  function reconcile(targetList, lists) {
+  function reconcile(targetList, lists, groups) {
     const desired = []
     const desiredIndex = new Map()
     const nextTargets = new Map()
     let nextHandleCount = 0
     for (const target of targetList || []) {
+      if (target.style) continue
       if (!nextTargets.has(target.el)) nextTargets.set(target.el, target)
       if (target.kind !== 'handle' || !isAnchorable(target.el)) continue
       addDesired(desired, desiredIndex, target.el, { kind: 'handle', target }, 'item')
       nextHandleCount++
     }
-    for (const list of lists || []) addListControls(desired, desiredIndex, list)
+    const rowStyles = new Map()
+    for (const group of groups || []) {
+      if (group.scope === 'row') rowStyles.set(group.el, group)
+      else if (group.scope === 'section' && isAnchorable(group.el)) {
+        addDesired(desired, desiredIndex, group.el, { kind: 'style', group }, 'style')
+      }
+    }
+    for (const list of lists || []) addListControls(desired, desiredIndex, list, rowStyles)
 
     const unused = new Set(placements)
     const visibility = new Map()
@@ -540,8 +594,10 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
       reconcileMembers(spot, wanted.members)
       spot.kind = spot.members.some((member) => member.kind === 'row')
         ? 'row'
-        : spot.members.some((member) => member.kind === 'handle') ? 'handle' : 'add'
-      spot.node.setAttribute('aria-label', spot.category === 'add' ? 'List controls' : 'Item controls')
+        : spot.members.some((member) => member.kind === 'handle')
+          ? 'handle'
+          : spot.members.some((member) => member.kind === 'style') ? 'style' : 'add'
+      spot.node.setAttribute('aria-label', spot.category === 'add' ? 'List controls' : spot.category === 'style' ? 'Style controls' : 'Item controls')
       next.push(spot)
     }
     for (const spot of unused) spot.node.remove()
@@ -580,8 +636,8 @@ export function createInlineLayer({ doc, layerEl, onActivate, onListAction }) {
   }
 
   return {
-    setTargets(list, lists) {
-      reconcile(list, lists)
+    setTargets(list, lists, groups = []) {
+      reconcile(list, lists, groups)
       ghosts.setLists(lists)
       syncObservation()
       listen()

package/src/views/inline.js

@@ -36,7 +36,7 @@ import { applyUnresolvedState } from '../unresolved.js'
 import { refreshForm } from '../refresh.js'
 import { clearSessionOpen, markSessionOpen, reensureStyles } from '../shell.js'
 import { isAnchorable } from '../anchor.js'
-import { resolveTargets } from '../targets.js'
+import { resolveTargets, styleGroups } from '../targets.js'
 import { createContentView } from '../lib/content-dom.js'
 import { morph } from 'hyper-morph'
 import { place } from '../place.js'
@@ -54,6 +54,7 @@ import {
 import { installSnapshotHook } from '../hooks.js'
 import { createInlineLayer } from './inline-layer.js'
 import { inlineIcon } from '../inline-icons.js'
+import { contentRoot } from '../page-root.js'
 
 const HOST_TAG = 'hypercms-inline'
 
@@ -89,6 +90,7 @@ export function createInlineView({ doc, pageRoot, opts = {} }) {
   // the first placement toward wherever the last field happened to sit.
   let activeTarget = null
   let activeHandle = null
+  let groupsNow = []
   let popMode = null
 
   // Build one binding: the editor, the marker, the snapshot hook, and the two
@@ -258,6 +260,7 @@ export function createInlineView({ doc, pageRoot, opts = {} }) {
         // The handle and the page click are two doors to one room.
         onActivate: (target, handle) => this.activate(target, handle),
         onListAction: (op) => this.listAction(op),
+        onStyle: (group, handle) => this.openStyle(group, handle),
       })
       layer.setFollower(() => this.placePopover())
       host.closeEl.addEventListener('click', () => this.deactivate())
@@ -266,6 +269,12 @@ export function createInlineView({ doc, pageRoot, opts = {} }) {
         event.stopPropagation()
         this.toggleControls()
       })
+      host.pageStyleEl.addEventListener('click', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        const group = groupsNow.find((candidate) => candidate.scope === 'page')
+        if (group) this.openStyle(group, host.pageStyleEl)
+      })
       // There is no drawer. What a field with no visual representation gets is
       // this one tap out to the view that edits everything.
       // The switch carries the session's options across (hypercms.js open()), so
@@ -339,7 +348,7 @@ export function createInlineView({ doc, pageRoot, opts = {} }) {
     // per target: the target set is rebuilt on every refresh, and per-element
     // listeners would have to be torn down and reattached with it.
     bindPage() {
-      const root = this.ctx.pageRoot
+      const root = contentRoot(this.ctx.pageRoot)
       const hostRoot = host.root
 
       const onPointerOver = (event) => {
@@ -405,7 +414,7 @@ export function createInlineView({ doc, pageRoot, opts = {} }) {
       // carries it for.
       const onChanged = (event) => {
         const detail = event.detail
-        if (!detail || detail.pageRoot !== this.ctx.pageRoot || !detail.path) return
+        if (!detail || detail.pageRoot !== contentRoot(this.ctx.pageRoot) || !detail.path) return
         for (const binding of bindings.values()) {
           if (binding.path === detail.path) binding.written = true
         }
@@ -448,6 +457,7 @@ export function createInlineView({ doc, pageRoot, opts = {} }) {
       activeTarget = target
       activeHandle = handle || null
       popMode = null
+      host.popTitleEl.textContent = 'Edit content'
 
       // Unhide BEFORE measuring. A hidden popover has a zero rect, which places
       // it at the clamp instead of beside its anchor — the same trap as the 0px
@@ -458,6 +468,33 @@ export function createInlineView({ doc, pageRoot, opts = {} }) {
       focusFirst(leaf)
     },
 
+    // A style popover shows exactly one group's style fields: the page's from
+    // the bar, a section's from its chip, a row's from its gear menu. The
+    // section and row ones sit beside what they style; the page one beside the
+    // button, because the whole page is no place to anchor a popover.
+    openStyle(group, handle) {
+      if (!group || !host) return
+      const leaf = revealPaths(this, host, group.paths)
+      if (!leaf) {
+        this.deactivate()
+        return
+      }
+      activeTarget = {
+        kind: 'style',
+        scope: group.scope,
+        el: group.scope === 'page' ? host.pageStyleEl : group.el,
+        path: group.paths[0].split('.'),
+        paths: group.paths,
+      }
+      activeHandle = handle || null
+      popMode = null
+      host.popTitleEl.textContent = group.scope === 'page' ? 'Page style' : 'Style'
+      host.popEl.hidden = false
+      host.formRoot.querySelectorAll(`.${ACTIVE_CLASS}`).forEach(autosizeIn)
+      this.placePopover()
+      focusFirst(leaf)
+    },
+
     // Bind richclay to the page element and edit the text where it sits.
     // Returns false when the target cannot be bound, which is the caller's
     // signal to open the popover over it instead.
@@ -511,13 +548,23 @@ export function createInlineView({ doc, pageRoot, opts = {} }) {
     syncTargets() {
       if (!layer) return
       const ctx = this.ctx
-      const { targets, lists } = resolveTargets(ctx.pageRoot, ctx.pageRules)
-      layer.setTargets(targets, lists)
+      const resolved = resolveTargets(ctx.pageRoot, ctx.pageRules, doc)
+      const lists = resolved.lists
+      const targets = resolved.targets.filter((target) => !target.style)
+      groupsNow = styleGroups(resolved.targets, lists)
+      host.pageStyleEl.hidden = !groupsNow.some((group) => group.scope === 'page')
+      layer.setTargets(resolved.targets, lists, groupsNow)
       const byEl = reconcileBindings(this, bindings, targets, doc)
       // An open popover holds its path the same way a binding does. Re-point it
       // at the target that now stands for the element it is anchored over, or
       // the popover keeps editing the row that inherited its old index.
-      if (activeTarget) {
+      if (activeTarget?.kind === 'style') {
+        const group = activeTarget.scope === 'page'
+          ? groupsNow.find((candidate) => candidate.scope === 'page')
+          : groupsNow.find((candidate) => candidate.el === activeTarget.el)
+        if (group) activeTarget = { ...activeTarget, paths: group.paths, path: group.paths[0].split('.') }
+        else this.deactivate()
+      } else if (activeTarget) {
         const candidates = byEl.get(activeTarget.el) || []
         const fresh = candidates.find((target) => sameTargetBinding(target, activeTarget)) ||
           candidates.find((target) => target.path.join('.') === activeTarget.path.join('.')) ||
@@ -644,7 +691,9 @@ export function createInlineView({ doc, pageRoot, opts = {} }) {
         this.deactivate()
         return
       }
-      const leaf = revealPath(this, host, activeTarget.path.join('.'))
+      const leaf = activeTarget.kind === 'style'
+        ? revealPaths(this, host, activeTarget.paths)
+        : revealPath(this, host, activeTarget.path.join('.'))
       if (!leaf) {
         this.deactivate()
         return
@@ -951,18 +1000,34 @@ function revealPath(view, host, path) {
         field.closest('[data-hcms-shape="object-array"], [data-hcms-shape="scalar-array"]') === item.parentElement.closest('[data-hcms-shape="object-array"]'))
     : [leaf]
   if (!fields.includes(leaf)) fields.push(leaf)
-  for (const field of fields) {
-    field.classList.add(ACTIVE_CLASS)
-    field.removeAttribute('draggable')
-    for (let el = field.parentElement; el; el = el.parentElement) {
-      el.classList.add(ONPATH_CLASS)
-      el.removeAttribute('draggable')
-      if (el === view.formRoot) break
-    }
-  }
+  for (const field of fields) markRevealed(view, field)
   return leaf
 }
 
+// Reveal exactly these fields, with no card siblings: a style popover shows
+// style fields only.
+function revealPaths(view, host, paths) {
+  clearPathClasses(host.root)
+  let first = null
+  for (const path of paths) {
+    const field = view.formRoot && view.formRoot.querySelector(`[data-hcms-path="${cssEscape(path)}"]`)
+    if (!field) continue
+    first = first || field
+    markRevealed(view, field)
+  }
+  return first
+}
+
+function markRevealed(view, field) {
+  field.classList.add(ACTIVE_CLASS)
+  field.removeAttribute('draggable')
+  for (let el = field.parentElement; el; el = el.parentElement) {
+    el.classList.add(ONPATH_CLASS)
+    el.removeAttribute('draggable')
+    if (el === view.formRoot) break
+  }
+}
+
 function clearPathClasses(root) {
   if (!root) return
   for (const el of root.querySelectorAll(`.${ACTIVE_CLASS}, .${ONPATH_CLASS}`)) {
@@ -1036,6 +1101,9 @@ function mountInlineHost(doc, theme) {
           <span class="mirk-button__label">Edit in the sidebar</span>
         </button>
       </div>
+      <button type="button" class="hcms-inline-page-style mirk-button mirk-button--small" data-hcms-page-style-open hidden>
+        <span class="mirk-button__label">Page style</span>
+      </button>
       <button type="button" class="hcms-inline-toggle mirk-button mirk-button--small" data-hcms-controls-toggle aria-pressed="false" hidden>
         <span class="mirk-button__label">Hide controls</span>
       </button>
@@ -1045,7 +1113,7 @@ function mountInlineHost(doc, theme) {
     <div class="hcms-inline-layer"></div>
     <div class="hcms-inline-pop" role="dialog" aria-label="Edit content" hidden>
       <div class="hcms-inline-pop-header">
-        <span>Edit content</span>
+        <span class="hcms-inline-pop-title">Edit content</span>
         <button type="button" class="hcms-inline-pop-close mirk-button mirk-button--small" aria-label="Close field editor">
           <span class="mirk-button__label">${inlineIcon('remove')}</span>
         </button>
@@ -1067,6 +1135,8 @@ function mountInlineHost(doc, theme) {
     popEl: root.querySelector('.hcms-inline-pop'),
     closeEl: root.querySelector('.hcms-inline-pop-close'),
     toggleEl: root.querySelector('[data-hcms-controls-toggle]'),
+    pageStyleEl: root.querySelector('[data-hcms-page-style-open]'),
+    popTitleEl: root.querySelector('.hcms-inline-pop-title'),
     destroy() { root.remove() },
   }
 }