simplyview 3.0.2 → 3.0.4

package/src/bind.mjs

@@ -7,14 +7,28 @@ class SimplyBind {
             container: document.body,
             attribute: 'data-bind',
             transformers: [],
-            defaultTransformers: [defaultTransformer]
+            defaultTransformers: {
+                field: [defaultFieldTransformer],
+                list: [defaultListTransformer],
+                map: [defaultMapTransformer]
+            }
         }
         if (!options?.root) {
             throw new Error('bind needs at least options.root set')
         }
         this.options = Object.assign({}, defaultOptions, options)
 
-        const attribute = this.options.attribute
+        const attribute      = this.options.attribute
+        const bindAttributes = [attribute+'-field',attribute+'-list',attribute+'-map']
+        const bindSelector   = `[${attribute}-field],[${attribute}-list],[${attribute}-map]`
+
+        const getBindingAttribute = (el) => {
+            const foundAttribute = bindAttributes.find(attr => el.hasAttribute(attr))
+            if (!foundAttribute) {
+                console.error('No matching attribute found',el)
+            }
+            return foundAttribute
+        }
 
         // sets up the effect that updates the element if its
         // data binding value changes
@@ -23,8 +37,9 @@ class SimplyBind {
             this.bindings.set(el, throttledEffect(() => {
                 const context = {
                     templates: el.querySelectorAll(':scope > template'),
-                    path: this.getBindingPath(el)
+                    attribute: getBindingAttribute(el)
                 }
+                context.path = this.getBindingPath(el)
                 context.value = getValueByPath(this.options.root, context.path)
                 context.element = el
                 runTransformers(context)
@@ -36,7 +51,18 @@ class SimplyBind {
         // each transformer can opt to call the next or not
         // transformers should return the context object (possibly altered)
         const runTransformers = (context) => {
-            let transformers = this.options.defaultTransformers || []
+            let transformers
+            switch(context.attribute) {
+                case this.options.attribute+'-field':
+                    transformers = this.options.defaultTransformers.field || []
+                    break
+                case this.options.attribute+'-list':
+                    transformers = this.options.defaultTransformers.list || []
+                    break
+                case this.options.attribute+'-map':
+                    transformers = this.options.defaultTransformers.map || []
+                    break
+            }
             if (context.element.dataset.transform) {
                 context.element.dataset.transform.split(' ').filter(Boolean).forEach(t => {
                     if (this.options.transformers[t]) {
@@ -69,12 +95,13 @@ class SimplyBind {
         // if any element is added, and has a data bind attribute
         // it applies that data binding
         const updateBindings = (changes) => {
+            const selector = `[${attribute}-field],[${attribute}-list],[${attribute}-map]`
             for (const change of changes) {
                 if (change.type=="childList" && change.addedNodes) {
                     for (let node of change.addedNodes) {
                         if (node instanceof HTMLElement) {
-                            let bindings = Array.from(node.querySelectorAll(`[${attribute}]`))
-                            if (node.matches(`[${attribute}]`)) {
+                            let bindings = Array.from(node.querySelectorAll(selector))
+                            if (node.matches(selector)) {
                                 bindings.unshift(node)
                             }
                             if (bindings.length) {
@@ -100,7 +127,11 @@ class SimplyBind {
         // this finds elements with data binding attributes and applies those bindings
         // must come after setting up the observer, or included templates
         // won't trigger their own bindings
-        const bindings = this.options.container.querySelectorAll('['+this.options.attribute+']:not(template)')
+        const bindings = this.options.container.querySelectorAll(
+            '['+this.options.attribute+'-field]'+
+            ',['+this.options.attribute+'-list]'+
+            ',['+this.options.attribute+'-map]'
+        )
         if (bindings.length) {
             applyBindings(bindings)
         }
@@ -127,23 +158,25 @@ class SimplyBind {
         }
         let clone = template.content.cloneNode(true)
         if (!clone.children?.length) {
-            throw new Error('template must contain a single html element', { cause: template })
+            return clone
         }
         if (clone.children.length>1) {
             throw new Error('template must contain a single root node', { cause: template })
         }
-        const bindings = clone.querySelectorAll('['+this.options.attribute+']')
         const attribute = this.options.attribute
+        const attributes = [attribute+'-field',attribute+'-list',attribute+'-map']
+        const bindings = clone.querySelectorAll(`[${attribute}-field],[${attribute}-list],[${attribute}-map]`)
         for (let binding of bindings) {
-            const bind = binding.getAttribute(attribute)
-            if (bind.substring(0, '#root.'.length)=='#root.') {
-                binding.setAttribute(attribute, bind.substring('#root.'.length))
-            } else if (bind=='#value' && index!=null) {
-                binding.setAttribute(attribute, path+'.'+index)
+            const attr = attributes.find(attr => binding.hasAttribute(attr))
+            const bind = binding.getAttribute(attr)
+            if (bind.substring(0, ':root.'.length)==':root.') {
+                binding.setAttribute(attr, bind.substring(':root.'.length))
+            } else if (bind==':value' && index!=null) {
+                binding.setAttribute(attr, path+'.'+index)
             } else if (index!=null) {
-                binding.setAttribute(attribute, path+'.'+index+'.'+bind)
+                binding.setAttribute(attr, path+'.'+index+'.'+bind)
             } else {
-                binding.setAttribute(attribute, parent+'.'+bind)
+                binding.setAttribute(attr, parent+'.'+bind)
             }
         }
         if (typeof index !== 'undefined') {
@@ -156,7 +189,16 @@ class SimplyBind {
     }
 
     getBindingPath(el) {
-        return el.getAttribute(this.options.attribute)
+        const attributes = [
+            this.options.attribute+'-field', 
+            this.options.attribute+'-list',
+            this.options.attribute+'-map'
+        ]
+        for (let attr of attributes) {
+            if (el.hasAttribute(attr)) {
+                return el.getAttribute(attr)
+            }
+        }
     }
 
     /**
@@ -169,7 +211,7 @@ class SimplyBind {
             let path = this.getBindingPath(t)
             let currentItem
             if (path) {
-                if (path.substr(0,6)=='#root.') {
+                if (path.substr(0,6)==':root.') {
                     currentItem = getValueByPath(this.options.root, path)
                 } else {
                     currentItem = getValueByPath(value, path)
@@ -182,16 +224,19 @@ class SimplyBind {
             const strItem = ''+currentItem
             let matches = t.getAttribute(this.options.attribute+'-match')
             if (matches) {
-                if (matches==='#empty' && !currentItem) {
+                if (matches===':empty' && !currentItem) {
                     return t
-                } else if (matches==='#notempty' && currentItem) {
+                } else if (matches===':notempty' && currentItem) {
                     return t
                 }
                 if (strItem.match(matches)) {
                     return t
                 }
             }
-            if (!matches) {
+            if (!matches && currentItem!==null && currentItem!==undefined) {
+                //FIXME: this doesn't run templates in lists where list entry is null
+                //which messes up the count
+                //
                 // no data-bind-match is set, so return this template
                 return t
             }
@@ -229,13 +274,13 @@ export function bind(options)
 
 /**
  * Returns true if a matches b, either by having the
- * same string value, or matching string #empty against a falsy value
+ * same string value, or matching string :empty against a falsy value
  */
 export function matchValue(a,b) {
-    if (a=='#empty' && !b) {
+    if (a==':empty' && !b) {
         return true
     }
-    if (b=='#empty' && !a) {
+    if (b==':empty' && !a) {
         return true
     }
     if (''+a == ''+b) {
@@ -257,11 +302,11 @@ export function getValueByPath(root, path)
     let part, prevPart;
     while (parts.length && curr) {
         part = parts.shift()
-        if (part=='#key') {
+        if (part==':key') {
             return prevPart
-        } else if (part=='#value') {
+        } else if (part==':value') {
             return curr
-        } else if (part=='#root') {
+        } else if (part==':root') {
             curr = root
         } else {
             part = decodeURIComponent(part)
@@ -276,7 +321,7 @@ export function getValueByPath(root, path)
  * Default transformer for data binding
  * Will be used unless overriden in the SimplyBind options parameter
  */
-export function defaultTransformer(context) {
+export function defaultFieldTransformer(context) {
     const el             = context.element
     const templates      = context.templates
     const templatesCount = templates.length 
@@ -284,11 +329,7 @@ export function defaultTransformer(context) {
     const value          = context.value
     const attribute      = this.options.attribute
 
-    if (Array.isArray(value) && templates?.length) {
-        transformArrayByTemplates.call(this, context)
-    } else if (typeof value == 'object' && templates?.length) {
-        transformObjectByTemplates.call(this, context)
-    } else if (templates?.length) {
+    if (templates?.length) {
         transformLiteralByTemplates.call(this, context)
     } else if (el.tagName=='INPUT') {
         transformInput.call(this, context)
@@ -304,10 +345,49 @@ export function defaultTransformer(context) {
     return context
 }
 
+export function defaultListTransformer(context) {
+    const el             = context.element
+    const templates      = context.templates
+    const templatesCount = templates.length 
+    const path           = context.path
+    const value          = context.value
+    const attribute      = this.options.attribute
+
+    if (!Array.isArray(value)) {
+        console.error('Value is not an array.', el, value)
+    } else if (!templates?.length) {
+        console.error('No templates found in', el)
+    } else {
+        transformArrayByTemplates.call(this, context)
+    }
+    return context
+}
+
+export function defaultMapTransformer(context) {
+    const el             = context.element
+    const templates      = context.templates
+    const templatesCount = templates.length 
+    const path           = context.path
+    const value          = context.value
+    const attribute      = this.options.attribute
+
+    if (typeof value != 'object') {
+        console.error('Value is not an object.', el, value)
+    } else if (!templates?.length) {
+        console.error('No templates found in', el)
+    } else {
+        transformObjectByTemplates.call(this, context)
+    }
+    return context
+}
+
+
 /**
  * Renders an array value by applying templates for each entry
  * Replaces or removes existing DOM children if needed
  * Reuses (doesn't touch) DOM children if template doesn't change
+ * FIXME: this doesn't handle situations where there is no matching template
+ * this messes up self healing. check transformObjectByTemplates for a better implementation
  */
 export function transformArrayByTemplates(context) {
     const el             = context.element
@@ -333,14 +413,14 @@ export function transformArrayByTemplates(context) {
             // remove this
             item.remove()
         } else {
-            // check that all data-bind params start with current json path or a '#', otherwise replaceChild
+            // 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}]`)) {
                 bindings.unshift(item)
             }
             let needsReplacement = bindings.find(b => {
                 let databind = b.getAttribute(attribute)
-                return (databind.substr(0,5)!=='#root' 
+                return (databind.substr(0,5)!==':root' 
                     && databind.substr(0, path.length)!==path)
             })
             if (!needsReplacement) {
@@ -400,7 +480,10 @@ export function transformObjectByTemplates(context) {
         context.index = key
         let item = items.shift()
         if (!item) { // more properties than rendered items
-            el.appendChild(this.applyTemplate(context))
+            let clone = this.applyTemplate(context)
+            if (clone.firstElementChild) {
+                el.appendChild(clone)
+            }
             continue
         }
         if (item.getAttribute[attribute+'-key']!=key) { 
@@ -432,6 +515,17 @@ export function transformObjectByTemplates(context) {
     }
 }
 
+function getParentPath(el, attribute) {
+    const parentEl  = el.parentElement?.closest(`[${attribute}-list],[${attribute}-map]`)
+    if (!parentEl) {
+        return ':root'
+    }
+    if (parentEl.hasAttribute(`${attribute}-list`)) {
+        return parentEl.getAttribute(`${attribute}-list`)
+    }
+    return parentEl.getAttribute(`${attribute}-map`)
+}
+
 /**
  * transforms the contents of an html element by rendering
  * a matching template, once.
@@ -446,7 +540,8 @@ export function transformLiteralByTemplates(context) {
 
     const rendered = el.querySelector(':scope > :not(template)')
     const template = this.findTemplate(templates, value)
-    context.parent = el.parentElement?.closest(`[${attribute}]`)?.getAttribute(attribute) || '#root'
+
+    context.parent = getParentPath(el, attribute)
     if (rendered) {
         if (template) {
             if (rendered?.$bindTemplate != template) {

package/src/command.mjs

@@ -21,7 +21,7 @@ class SimplyCommands {
                 return
 			}
             const shouldContinue = this[command.name].call(options.app, command.source, command.value)
-            if (shouldContinue===false) {
+            if (shouldContinue!==true) {
                 evt.preventDefault()
                 evt.stopPropagation()
                 return false

package/src/everything.mjs

@@ -1,25 +1,21 @@
 import { activate } from './activate.mjs'
-import * as action from './action.mjs'
+import { actions as action } from './action.mjs'
 import { app } from './app.mjs'
-import { bind } from './bind.mjs'
-import * as command from './command.mjs'
+import { commands as command } from './command.mjs'
 import { include } from './include.mjs'
-import * as key from './key.mjs'
-import * as model from './model.mjs'
-import * as route from './route.mjs'
-import * as state from './state.mjs'
+import { keys as key } from './key.mjs'
+import { routes as route } from './route.mjs'
+import { view } from './view.mjs'
 
 const simply = {
 	activate,
 	action,
 	app,
-	bind,
 	command,
 	include,
 	key,
-	model,
 	route,
-	state
+	view
 }
 
 window.simply = simply

package/src/include.mjs

@@ -53,7 +53,7 @@ const waitForPreviousScripts = async () => {
     // that triggers the Promise.resolve method
     return new Promise(function(resolve) {
         var next = globalThis.document.createElement('script')
-        next.src = "javascript:document.dispatchEvent(new Event('simply-include-next'))"
+        next.src = "https://cdn.jsdelivr.net/gh/simplyedit/simplyview/dist/simply.include.next.js"
         next.async = false
         globalThis.document.addEventListener('simply-include-next', () => {
             head.removeChild(next)
@@ -122,18 +122,21 @@ export const include = {
         // order in which they are defined
         let scriptsFragment = globalThis.document.createDocumentFragment()
         const scripts = fragment.querySelectorAll('script')
-        for (let script of scripts) {
-            let placeholder = globalThis.document.createComment(script.src || 'inline script')
-            script.parentNode.insertBefore(placeholder, script)
-            script.dataset.simplyLocation = scriptLocations.length
-            scriptLocations.push(placeholder)
-            scriptsFragment.appendChild(script)
+        if (scripts.length) {
+            for (let script of scripts) {
+                let placeholder = globalThis.document.createComment(script.src || 'inline script')
+                script.parentNode.insertBefore(placeholder, script)
+                script.dataset.simplyLocation = scriptLocations.length
+                scriptLocations.push(placeholder)
+                scriptsFragment.appendChild(script)
+            }
+            globalThis.setTimeout(function() {
+                include.scripts(Array.from(scriptsFragment.children), link ? link.href : globalThis.location.href )
+            }, 10)
         }
         // add the remainder before the include link
         link.parentNode.insertBefore(fragment, link ? link : null)
-        globalThis.setTimeout(function() {
-            include.scripts(scriptsFragment.childNodes, link ? link.href : globalThis.location.href )
-        }, 10)
+
     }
 }
 

package/src/key.mjs

@@ -1,4 +1,12 @@
-class SimplyKeys {
+const KEY = Object.freeze({
+	Compose: 229,
+	Control: 17,
+	Meta:    224,
+	Alt:     18,
+	Shift:   16
+})
+
+class SimplyKey {
 	constructor(options = {}) {
 		if (!options.app) {
 			options.app = {}
@@ -9,38 +17,83 @@ class SimplyKeys {
 		Object.assign(this, options.keys)
 
 		const keyHandler = (e) => {
-			if (e.isComposing || e.keyCode === 229) {
-			    return;
+			if (e.isComposing || e.keyCode === KEY.Compose) {
+			    return
 			}
 			if (e.defaultPrevented) {
-			    return;
+			    return
 			}
 			if (!e.target) {
-			    return;
+			    return
 			}
 
-			let selectedKeyboard = 'default';
+			let selectedKeyboard = 'default'
 			if (e.target.closest('[data-simply-keyboard]')) {
-			    selectedKeyboard = e.target.closest('[data-simply-keyboard]').dataset.simplyKeyboard;
+			    selectedKeyboard = e.target.closest('[data-simply-keyboard]')
+			    					.dataset.simplyKeyboard
+			}
+			let keyCombination = []
+			if (e.ctrlKey && e.keyCode!=KEY.Control) {
+			    keyCombination.push('Control')
 			}
-			let key = '';
-			if (e.ctrlKey && e.keyCode!=17) {
-			    key+='Control+';
+			if (e.metaKey && e.keyCode!=KEY.Meta) {
+			    keyCombination.push('Meta')
 			}
-			if (e.metaKey && e.keyCode!=224) {
-			    key+='Meta+';
+			if (e.altKey && e.keyCode!=KEY.Alt) {
+			    keyCombination.push('Alt')
 			}
-			if (e.altKey && e.keyCode!=18) {
-			    key+='Alt+';
+			if (e.shiftKey && e.keyCode!=KEY.Shift) {
+			    keyCombination.push('Shift')
 			}
-			if (e.shiftKey && e.keyCode!=16) {
-			    key+='Shift+';
+			keyCombination.push(e.key.toLowerCase())
+
+			let keyboards = []
+			let keyboardElement = event.target.closest('[data-simply-keyboard]')
+			while (keyboardElement) {
+				keyboards.push(keyboardElement.dataset.simplyKeyboard)
+				keyboardElement = keyboardElement.parentNode.closest('[data-simply-keyboard]')
 			}
-			key+=e.key;
+			keyboards.push('')
+
+			let keyboard, subkeyboard
+			let separators = ['+','-']
+
+			for (i in keyboards) {
+				keyboard = keyboards[i]
+				if (keyboard == '') {
+					subkeyboard = 'default'
+				} else {
+					subkeyboard = keyboard
+					keyboard += '.'
+				}
+				for (let separator of separators) {
+					let keyString = keyCombination.join(separator)
+
+					if (this[subkeyboard] && (typeof this[subkeyboard][keyString]=='function')) {
+						let _continue = this[subkeyboard][keyString].call(this[subkeyboard], e)
+						if (!_continue) {
+							e.preventDefault()
+							return
+						}
+					}
+					if (typeof this[subkeyboard + keyString] == 'function') {
+						let _continue = this[subkeyboard + keyString].call(this, e)
+						if (!_continue) {
+							e.preventDefault()
+							return
+						}					
+					}
+
+					if (this[selectedKeyboard] && this[selectedKeyboard][keyString]) {
+						let targets = options.app.container.querySelectorAll('[data-simply-accesskey="'
+							+ keyboard + keyString + '"]')
+						if (targets.length) {
+							targets.forEach(t => t.click())
+							e.preventDefault()
+						}
+					}
 
-			if (this[selectedKeyboard] && this[selectedKeyboard][key]) {
-			    let keyboard = this[selectedKeyboard]
-			    keyboard[key].call(options.app,e);
+				}
 			}
 		}
 
@@ -50,6 +103,6 @@ class SimplyKeys {
 }
 
 export function keys(options={}) {
-	return new SimplyKeys(options)
+	return new SimplyKey(options)
 }
 

package/src/route.mjs

@@ -6,6 +6,8 @@ class SimplyRoute {
 	constructor(options={}) {
 		this.root = options.root || '/'
         this.app = options.app
+        this.addMissingSlash = !!options.addMissingSlash
+        this.matchExact = !!options.matchExact
 		this.clear()
 		if (options.routes) {
 			this.load(options.routes)
@@ -13,7 +15,7 @@ class SimplyRoute {
 	}
 
 	load(routes) {
-		parseRoutes(routes, this.routeInfo)
+		parseRoutes(routes, this.routeInfo, this.matchExact)
 	}
 
 	clear() {
@@ -44,6 +46,15 @@ class SimplyRoute {
         path = getPath(path);
         for ( let route of this.routeInfo) {
             matches = route.match.exec(path)
+            if (this.addMissingSlash && !matches?.length) {
+                if (path && path[path.length-1]!='/') {
+                    matches = route.match.exec(path+'/')
+                    if (matches) {
+                        path+='/'
+                        history.replaceState({}, '', getURL(path))
+                    }
+                }
+            }
             if (matches && matches.length) {
                 var params = {};
                 route.params.forEach((key, i) => {
@@ -62,9 +73,6 @@ class SimplyRoute {
                 return args.result
             }
         }
-        if (path && path[path.length-1]!='/') {
-        	return this.match(path+'/', options)
-        }
         return false
 	}
 
@@ -93,7 +101,7 @@ class SimplyRoute {
                 this.match(getPath(document.location.pathname, this.root))
             }
         })
-        globalThis.document.addEventListener('click', (evt) => {
+        this.app.container.addEventListener('click', (evt) => {
 	        if (evt.ctrlKey) {
 	            return;
 	        }
@@ -117,10 +125,12 @@ class SimplyRoute {
 	            if ( this.has(path) ) {
 	                let params = this.runListeners('goto', { path: path});
 	                if (params.path) {
-	                    this.goto(params.path);
+	                    if (this.goto(params.path)) {
+                            // now cancel the browser navigation, since a route handler was found
+                            evt.preventDefault();
+                            return false;
+                        }
 	                }
-	                evt.preventDefault();
-	                return false;
 	            }
 	        }
 	    })
@@ -195,12 +205,14 @@ function getURL(path, root) {
     return root + path;
 }
 
-function getRegexpFromRoute(route) {
-    return new RegExp('^'+route.replace(/:\w+/g, '([^/]+)').replace(/:\*/, '(.*)'));
+function getRegexpFromRoute(route, exact=false) {
+    if (exact) {
+        return new RegExp('^'+route.replace(/:\w+/g, '([^/]+)').replace(/:\*/, '(.*)')+'(\\?|$)')
+    }
+    return new RegExp('^'+route.replace(/:\w+/g, '([^/]+)').replace(/:\*/, '(.*)'))
 }
 
-function parseRoutes(routes) {
-    let routeInfo = []
+function parseRoutes(routes, routeInfo, exact=false) {
     const paths = Object.keys(routes)
     const matchParams = /:(\w+|\*)/g
     for (let path of paths) {
@@ -213,7 +225,7 @@ function parseRoutes(routes) {
             }
         } while(matches)
         routeInfo.push({
-            match:  getRegexpFromRoute(path),
+            match:  getRegexpFromRoute(path, exact),
             params: params,
             action: routes[path]
         })

package/src/view.mjs

@@ -0,0 +1,20 @@
+export function view(options) {
+	if (options.app) {
+		options.app.view = options.view || {}
+
+		const load = () => {
+			const data = options.app.view
+			const path = globalThis.editor.data.getDataPath(options.app.container || document.body)
+			options.app.view = globalThis.editor.currentData[path]
+			Object.assign(options.app.view, data)
+		}
+		if (globalThis.editor && globalThis.editor.currentData) {
+			load()
+		} else {
+			document.addEventListener('simply-content-loaded', load)
+		}
+		return options.app.view
+	} else {
+		return options.view
+	}
+}

package/src/changes.md

@@ -1,18 +0,0 @@
-# changes
-
-removed:
-- render, observe
-  these are replaced with bind.mjs and state.mjs (signal, effect)
-- view
-  replaced by state.mjs (signal)
-- collect
-  replaced by state.mjs (effect)
-- keyboard
-  renamed to key.mjs
-- path
-  was never used, use jsonPointer instead if you need it
-- viewmodel
-  replaced wiht model.mjs
-- resize
-  use @container queries instead
-