simplyflow 0.8.2 → 0.9.0

package/src/bind.mjs

@@ -1,10 +1,7 @@
 import { throttledEffect, destroy } from './state.mjs'
 import { escape_html, fixed_content } from './bind.transformers.mjs'
 import * as render from './bind.render.mjs'
-
-if (!Symbol.bindTemplate) {
-    Symbol.bindTemplate = Symbol('bindTemplate')
-}
+import { DEP } from './symbols.mjs'
 
 /**
  * Implements one way databinding, updating dom elements with matching attributes
@@ -48,6 +45,7 @@ class SimplyBind
             },
             renderers: {
                 'INPUT':render.input,
+                'TEXTAREA':render.input,
                 'BUTTON':render.button,
                 'SELECT':render.select,
                 'A':render.anchor,
@@ -255,7 +253,7 @@ class SimplyBind
             clone.children[0].setAttribute(attribute+'-key',index)
         }
         // keep track of the used template, so if that changes, the item can be updated
-        clone.children[0][Symbol.bindTemplate] = template
+        clone.children[0][DEP.TEMPLATE] = template
 
         // return clone, not the firstChild, so that all whitespace is cloned as well
         return clone

package/src/bind.render.mjs

@@ -5,6 +5,8 @@
 import { signal as domSignal, trackDomField, trackDomList } from './dom.mjs'
 import { throttledEffect, effect, untracked, batch } from './state.mjs'
 import { getValueByPath } from './bind.mjs'
+import { DEP } from './symbols.mjs'
+
 /**
  * This function is used by default to render dom elements with the `data-flow-field` attribute.
  * It will switch to only switching in template content if the context has any templates.
@@ -147,7 +149,8 @@ export function setValueByPath(root, path, value)
 export function arrayByTemplates(context)
 {
     const attribute      = this.options.attribute
-
+    const attributes     = [attribute+'-field',attribute+'-list',attribute+'-map']
+    const attrQuery      = '['+attributes.join('],[')+']'
     let items = context.element.querySelectorAll(':scope > ['+attribute+'-key]')
     // do single merge strategy for now, in future calculate optimal merge strategy from a number
     // now just do a delete if a key <= last key, insert if a key >= last key
@@ -165,19 +168,24 @@ export function arrayByTemplates(context)
             item.remove()
         } else {
             // check that all data-bind params start with current json path or ':root', otherwise replaceChild
-            let bindings = Array.from(item.querySelectorAll(`[${attribute}]`))
-            if (item.matches(`[${attribute}]`)) {
+            let bindings = Array.from(item.querySelectorAll(attrQuery))
+            if (item.matches(attrQuery)) {
                 bindings.unshift(item)
             }
             let needsReplacement = bindings.find(b => {
-                let databind = b.getAttribute(attribute)
-                return (databind.substr(0,5)!==':root' 
-                    && databind.substr(0, context.path.length)!==context.path)
+                for (let attr of attributes) {
+                    let databind = b.getAttribute(attr)
+                    if (databind && databind.substr(0,5)!==':root' 
+                        && databind.substr(0, context.path.length)!==context.path) {
+                        return true
+                    }
+                }
+                return false
             })
             if (!needsReplacement) {
-                if (item[Symbol.bindTemplate]) {
+                if (item[DEP.TEMPLATE]) {
                     let newTemplate = this.findTemplate(context.templates, context.list[lastKey])
-                    if (newTemplate != item[Symbol.bindTemplate]){
+                    if (newTemplate != item[DEP.TEMPLATE]){
                         needsReplacement = true
                         if (!newTemplate) {
                             skipped++
@@ -249,7 +257,7 @@ export function objectByTemplates(context)
             }
         }
         let newTemplate = this.findTemplate(context.templates, context.list[context.index])
-        if (newTemplate != item[Symbol.bindTemplate]){
+        if (newTemplate != item[DEP.TEMPLATE]){
             let clone = this.applyTemplate(context)
             context.element.replaceChild(clone, item)
         }
@@ -272,7 +280,7 @@ export function fieldByTemplates(context)
     context.parent = getParentPath(context.element)
     if (rendered) {
         if (template) {
-            if (rendered?.[Symbol.bindTemplate] != template) {
+            if (rendered?.[DEP.TEMPLATE] != template) {
                 const clone = this.applyTemplate(context)
                 context.element.replaceChild(clone, rendered)
             }

package/src/dom.mjs

@@ -2,15 +2,27 @@ import { signals, signal as stateSignal, notifyGet, notifySet, makeContext,
          throttledEffect, effect, untracked, batch } from './state.mjs'
 import { getValueByPath } from './bind.mjs'
 import { setValueByPath, getProperties } from './bind.render.mjs'
+import { DEP } from '../src/symbols.mjs'
 
+/**
+ * Tracks element => signal mapping so that each element only has one signal
+ */
 const domSignals = new WeakMap()
 
+/**
+ * Tracks element => mutationObservers
+ */
+const observers = new WeakMap()
+
+/**
+ * A dom signal is a Proxy, to track access to properties
+ */
 const domSignalHandler = {
     get: (target, property, receiver) => {
-        if (property===Symbol.xRay) {
+        if (property===DEP.XRAY) {
             return target // don't notifyGet here, this is only called by set
         }
-        if (property===Symbol.Signal) {
+        if (property===DEP.SIGNAL) {
             return true
         }
         const value = target?.[property]
@@ -39,8 +51,17 @@ const domSignalHandler = {
     }
 }
 
+/**
+ * This function returns a dom signal. Using this in an effect() function
+ * will automatically trigger the effect if a property of the dom signal 
+ * changes.
+ * Valid options are any of the mutationObserver options, like characterData, subtree, etc.
+ * @param HTMLElement el
+ * @param Object options
+ * @returns Proxy
+ */
 export function signal(el, options) {
-    if (el[Symbol.xRay]) {
+    if (el[DEP.XRAY]) {
         return el
     }
     if (!signals.has(el)) {
@@ -50,8 +71,9 @@ export function signal(el, options) {
     return signals.get(el)
 }
 
-const observers = new WeakMap()
-
+/**
+ * This sets up the mutationObserver that calls notifySet on changes in the DOM
+ */
 function domListen(el, signal, options) {
     const defaultOptions = {
         characterData: true,
@@ -114,6 +136,11 @@ function domListen(el, signal, options) {
     }
 }
 
+/**
+ * This function sets up the dom signal on an element, provided it has a `data-flow-list` attribute
+ * @param HTMLElement element - the element to track
+ * @returns Proxy
+ */
 export function trackDomList(element)
 {
     const path = this.getBindingPath(element)
@@ -149,8 +176,14 @@ export function trackDomList(element)
             })
         })
     })
+    return s
 }
 
+/**
+ * This function sets up the dom signal on an element, provided it has a `data-flow-field` attribute
+ * @param HTMLElement element - the element to track
+ * @returns Proxy
+ */
 export function trackDomField(element, props, valueIsString) {
     if (domSignals.has(element)) {
         return
@@ -174,4 +207,5 @@ export function trackDomField(element, props, valueIsString) {
             })
         })
     })
+    return s
 }

package/src/edit/anchor.mjs

@@ -0,0 +1,130 @@
+import '../flow.mjs'
+
+export default {
+	html: {
+		anchor: html`<div class="anchor"></div>`
+	},
+	css: {
+		anchor: css`
+.anchor {
+	anchor-name: --cursor-anchor;
+	position: absolute;
+	z-index: 10000;
+	width: 10px;
+	height: 10px;
+	transform: rotate(45deg);
+	transform-origin: top left;
+	background: red;
+	display: none;
+}`
+	},
+	actions: {
+		anchorPosition: function(position) {
+			this.state.anchor.position = position
+		},
+		anchorShow: function() {
+			this.state.anchor.visible = true
+		},
+		anchorHide: function() {
+			this.state.anchor.visible = false
+		}
+	},
+	hooks: {
+		start: function() {
+			this.container.insertAdjacentHTML('beforeend','<simply-render rel="anchor"></simply-render>')
+			this.state.anchor = {
+				element: this.container.querySelector('.anchor'),
+				offset: this.container.getBoundingClientRect(),
+				visible: false,
+				position: {
+					x: 0,
+					y: 0
+				}
+			}
+			setTimeout(() => {
+				this.state.anchor.element = this.container.querySelector('.anchor')
+				this.state.anchor.offset = this.container.getBoundingClientRect()
+			},100)
+ 	        this.selectionListener = document.addEventListener('selectionchange', () => {
+				const selection = window.getSelection()
+				if (!selection.rangeCount || selection.isCollapsed) {
+					this.state.anchor.visible = false
+					return
+				}
+				if (!this.container.contains(selection.anchorNode)) {
+					this.state.anchor.visible = false
+					return
+				}
+				if (!selection.anchorNode.parentElement.closest('[contenteditable]')) {
+					this.state.anchor.visible = false
+					return
+				}
+				this.state.anchor.visible = true
+				const position = getCursorPosition(this.container)
+				this.state.anchor.position = position
+	        })
+			simply.state.effect(() => {
+				const pos = this.state.anchor.position
+				const offset = this.state.anchor.offset
+				simply.state.batch(() => {
+					this.state.anchor.element.style.top = (pos.y + pos.height + offset.top) + 'px'
+					this.state.anchor.element.style.left = (pos.x + offset.left) + 'px'
+				})
+			})
+			simply.state.effect(() => {
+				const visible = this.state.anchor.visible
+				console.log('anchor visible ', visible)
+				if (visible) {
+					this.state.anchor.element.style.display = 'block'
+				} else {
+					this.state.anchor.element.style.display = 'none'
+				}
+			})
+
+		}
+	}
+}
+
+/**
+ * This function returns the cursor position and height, if the cursor is in
+ * the given element. The x and y position are calculated relative to the top
+ * left of the given element. This function does not alter the DOM in any way.
+ */
+function getCursorPosition(element) {
+	const selection = window.getSelection();
+	if (!selection.rangeCount) return null;
+
+	const range = document.createRange();
+	range.setStart(selection.focusNode, selection.focusOffset);
+	range.collapse(true);
+
+	// Try getClientRects() first — often non-empty even on empty lines
+	const elementRect = element.getBoundingClientRect();
+
+	const cursorNode = selection.focusNode;
+	const cursorElement = cursorNode.nodeType === Node.TEXT_NODE
+	? cursorNode.parentElement
+	: cursorNode;
+
+	let x,y,height;
+	const rects = range.getClientRects();
+	if (rects.length > 0) {
+		x = rects[0].left - elementRect.left
+		y = rects[0].top - elementRect.top
+		height = rects[0].height
+	} else {
+		// Fallback for truly empty element: use padding from CSS
+		const style = window.getComputedStyle(cursorElement);
+		const lineHeight = parseFloat(style.lineHeight);
+		height = isNaN(lineHeight) ? parseFloat(style.fontSize) : lineHeight
+		const cursorElementRect = cursorElement.getBoundingClientRect();
+			x = cursorElementRect.left - elementRect.left + parseFloat(style.paddingLeft)
+		y = cursorElementRect.top  - elementRect.top  + parseFloat(style.paddingTop)
+	}
+	return {
+		x,
+		y,
+		height,
+		element: cursorElement
+	}
+}

package/src/edit/toolbars.mjs

@@ -0,0 +1,315 @@
+import anchor from './anchor.mjs'
+import '../flow.mjs'
+
+
+const simplyToolbarCSS = css`
+:host {
+    --simply-button-font: arial, helvetica, sans-serif;
+    --simply-button-font-size: 11px;
+    --simply-button-width: 50px;
+    --simply-button-height: 50px;
+    --simply-button-color: #333;
+    --simply-button-primary: #ea5922;
+}
+.simply-button {
+    height: var(--simply-button-height);
+    border-top: 1px solid transparent;
+    border-bottom: 2px solid transparent;
+    transition: background 0.2s ease;
+    font-size: var(--simply-button-font-size);
+    letter-spacing: 0;
+    font-family: var(--simply-button-font);
+    white-space: nowrap;
+    user-select: none;
+    vertical-align: top;
+    min-width: var(--simply-button-width);
+    text-align: center;
+    cursor: pointer;
+    padding: 0 4px;
+    text-transform: none;
+    background: transparent;
+    outline: none;
+    box-shadow: none;
+    border-radius: 0;
+    color: var(--simply-button-color);
+    position: relative;
+}
+.simply-button:hover {
+    border-bottom: 2px solid var(--simply-button-primary);
+    box-shadow: none;
+}
+.simply-button .ds-icon {
+    height: 26px;
+    font-size: 26px;
+    padding: 0 4px;
+    display: block;
+    margin: -2px auto -2px;
+    position: relative;
+}
+.simply-button.ds-selected {
+    border-top-color: var(--ds-grey-40);
+    background-color: var(--ds-grey-light);
+    border-left: 1px solid var(--ds-grey-40);
+    border-right: 1px solid var(--ds-white);
+}
+.simply-button:active {
+	border-bottom: 2px solid var(--ds-primary);
+    box-shadow: none;
+}
+.simply-toolbar {
+    white-space: nowrap;
+    min-width: 100%;
+    min-height: 50px;
+    display: flex;
+    position: relative;
+}
+.simply-toolbar-main {
+    border-top: 2px solid var(--simply-button-primary);
+    background: linear-gradient(180deg, white 0, white 95%, #CCC 100%);
+}
+.simply-toolbar-inline {
+	min-width: 100px;
+}
+.simply-toolbar-inline .ds-button,
+.simply-toolbar .ds-button {
+    margin: 0;
+}
+.simply-toolbar-sub .simply-toolbar {
+	background: #EEE;
+	min-height: 40px;
+}
+.simply-toolbar-sub .simply-button {
+	height: 40px;
+	min-width: 40px;
+}
+.simply-toolbar-sub .simply-button .ds-icon {
+    height: 20px;
+    font-size: 20px;
+}
+.simply-toolbar-highlight {
+    background: var(--ds-primary-gradient-bump);
+    color: var(--ds-primary-contrast);
+}
+.simply-toolbar  .simply-toolbar-title {
+    margin-top: 0;
+}
+.simply-toolbar-spacer {
+    border-left: 1px solid #ccc;
+    height: 60px;
+    position: absolute;
+    display: inline-block;
+}
+.simply-button-expands:not(.ds-selected)::after {
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: 2px;
+    left: 50%;
+    margin-left: -3px;
+    width: 0;
+    border-top: 3px solid #888;
+    border-bottom: 0;
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+}
+.simply-button-expanded {
+	background: #EEE;
+}
+.simply-button.simply-button-expanded::after {
+	display: none;
+}
+.simply-toolbar .simply-push-right {
+    margin-left: auto;
+}
+.simply-toolbar input[type="text"] {
+    margin-right:0;
+    margin-bottom: 0;
+    margin-top: 10px;
+    font-size: small;
+    line-height: 1.2em;
+    height: 35px;
+}
+.simply-toolbar-header {
+    border-top-width: 5px;
+}
+.ds-nightmode .simply-toolbar {
+    background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%);
+    color: var(--ds-white);
+}
+.ds-nightmode .simply-button {
+    color: var(--ds-white);
+}
+.ds-nightmode .simply-button.ds-selected {
+    background-color: var(--ds-grey-80);
+    border-left-color: var(--ds-black);
+    border-top-color: var(--ds-black);
+    border-right-color: var(--ds-grey-60);
+}
+.ds-nightmode .simply-button[disabled] {
+    background-color: transparent;
+    color: var(--ds-grey-60);
+}
+.simply-toolbar.ds-hidden {
+	height: 0px;
+	overflow: hidden;
+	min-height: 0px;
+}`
+
+
+//TODO: allow app to specify which toolbar to show instead of fixed toolbars.floatToolbarText.buttons
+const simplyToolbarContents = html`
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@muze-nl/theds@0.2.7/dist/theds.css">
+	<style>
+		${simplyToolbarCSS}
+	</style>
+	<nav class="simply-toolbar simply-toolbar-main simply-toolbar-inline" data-flow-list="toolbars.floatToolbarText.buttons">
+		<template rel="simply-toolbar"></template>
+	</nav>
+	<div class="simply-toolbar-sub" data-flow-map="toolbars.floatToolbarText.toolbars">
+		<template>
+			<nav class="simply-toolbar ds-hidden" data-flow-field=":key" data-flow-transform="simplyToolbar">
+				<div data-flow-list="buttons">
+					<template rel="simply-toolbar"></template>
+				</div>
+			</nav>
+		</template>
+	</div>`
+
+export default {
+	css: {
+		simplyToolbarFloat: css`
+:root {
+	--ds-shadow-light: rgba(0,0,0,0.07);
+	--ds-shadow-middle: rgba(0,0,0,0.09);
+	--ds-shadow-dark: rgba(0,0,0,0.11);
+	--ds-shadow-small: 
+	    0 1px 1px var(--ds-shadow-dark),
+	    0 2px 2px var(--ds-shadow-middle),
+	    0 4px 4px var(--ds-shadow-light)
+	;
+}
+.simply-toolbar-float {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	width: auto;
+	position-anchor: --cursor-anchor;
+	position-area: end span-all;
+	position: absolute;
+	min-width:100px;
+	min-height: 50px;
+	background: white;
+	z-index: 10000;
+	margin-top: -4px;
+	box-shadow: var(--ds-shadow-small);
+}`
+	},
+	html: {
+	'simply-toolbar': 
+html`<button class="ds-button simply-button" data-flow-field=":value" data-flow-transform="simplyToolbarButton">
+	<svg class="ds-icon ds-icon-feather">
+        <use xlink:href="feather-sprite.svg#x" data-flow-transform="simplyIcon" data-flow-field="icon">
+    </use></svg>
+    <span data-flow-field="label"></span>
+</button>`,
+	'simply-toolbar-float': 
+html`<div class="simply-toolbar simply-toolbar-float simply-toolbar-inline" popover="manual"></div>`
+	},
+	transformers: {
+		simplyToolbar: function(context, next) {
+			context.element.id = context.value
+		},
+		simplyToolbarButton: function(context, next) {
+			const el = context.element
+			el.value = context.value.command
+			if (context.value.command=="expand") {
+				el.classList.add('simply-button-expands')
+			}
+			if (context.value.command) {
+				el.dataset.simplyCommand = context.value.command
+			}
+			if (context.value.value) {
+				el.value = context.value.value
+			}
+			// skip next()
+		},
+		simplyIcon: function(context, next) {
+			const url = new URL(context.element.getAttribute('xlink:href'), document.location)
+			url.hash = context.value
+			context.element.setAttribute('xlink:href', url.href)
+			// skip next()
+		}
+	},
+	commands: {
+		toggle: function(el, value) {
+
+		},
+		align: function(el, value) {
+
+		},
+		expand: function(el, value) {
+			const toolbar = el.closest('.simply-toolbar')
+			const subToolbars = toolbar.nextElementSibling;
+			if (!subToolbars) {
+				console.error('no subtoolbars')
+				return
+			}
+			const current = Array.from(subToolbars.querySelectorAll('.simply-toolbar:not(.ds-hidden)'))
+			for( let t of current) {
+				t.classList.add('ds-hidden')
+			}
+			const selectedToolbar = subToolbars.querySelector('#'+value)
+			if (selectedToolbar) {
+				selectedToolbar.classList.remove('ds-hidden')
+				const buttons = Array.from(toolbar.querySelectorAll('.simply-button-expanded'))
+				for (let button of buttons) {
+					button.classList.remove('simply-button-expanded')
+				}
+				el.classList.add('simply-button-expanded')
+			} else {
+				console.error('toolbar '+value+' not found')
+			}
+		}
+	},
+	actions: {
+		showToolbar: function(position) {
+			this.state.toolbar.showPopover()
+		},
+		hideToolbar: function() {
+			this.state.toolbar.hidePopover()
+		}
+	},
+	hooks: {
+		start: function() {
+	        this.state.toolbar = this.container.querySelector('simply-edit-focus-toolbar')
+	        if (!this.state.toolbar) {
+				this.container.insertAdjacentHTML('beforeend','<simply-render rel="simply-toolbar-float"></simply-render>')
+				setTimeout(() => {
+					const toolbar = document.querySelector('.simply-toolbar-float')
+					const shadow = toolbar.attachShadow({ mode: "open"})
+					shadow.innerHTML = simplyToolbarContents
+					this.state.toolbar = toolbar
+				    simply.state.effect(() => {
+						let visible = this.state.anchor.visible
+						if (visible) {
+							this.actions.showToolbar()
+						} else {
+							this.actions.hideToolbar()
+						}
+					})
+					// databinding doesn't reach into shadowRoot by default, so set it up here
+					simply.bind({
+						root: this.state,
+						container: toolbar.shadowRoot,
+						transformers: this.transformers
+					})
+					// same for commands, set container explicitly to the shadowRoot
+					simply.command({ app: this, container: toolbar.shadowRoot, commands: this.commands})
+				}, 100)
+	        }
+		}
+	},
+	components: {
+		anchor
+	}
+}