simplyview 2.1.0 → 3.0.0

package/src/command.mjs

@@ -0,0 +1,125 @@
+class SimplyCommands {
+	constructor(options={}) {
+		if (!options.app) {
+			options.app = {}
+		}
+		if (!options.app.container) {
+			options.app.container = document.body
+		}
+		this.$handlers = options.handlers || defaultHandlers
+        if (options.commands) {
+    		Object.assign(this, options.commands)
+        }
+
+		const commandHandler = (evt) => {
+			const command = getCommand(evt, this.$handlers)
+			if (!command) {
+				return
+			}
+			if (!this[command.name]) {
+                console.error('simply.command: undefined command '+command.name, command.source);
+                return
+			}
+            const shouldContinue = this[command.name].call(options.app, command.source, command.value)
+            if (shouldContinue===false) {
+                evt.preventDefault()
+                evt.stopPropagation()
+                return false
+            }
+		}
+
+        options.app.container.addEventListener('click', commandHandler)
+        options.app.container.addEventListener('submit', commandHandler)
+        options.app.container.addEventListener('change', commandHandler)
+        options.app.container.addEventListener('input', commandHandler)
+	}
+}
+
+export function commands(options={}) {
+	return new SimplyCommands(options)
+}
+
+function getCommand(evt, handlers) {
+    var el = evt.target.closest('[data-simply-command]')
+    if (el) {
+        for (let handler of handlers) {
+            if (el.matches(handler.match)) {
+                if (handler.check(el, evt)) {
+                    return {
+                        name:   el.dataset.simplyCommand,
+                        source: el,
+                        value:  handler.get(el)
+                    }
+                }
+                return null
+            }
+        }
+    }
+    return null
+}
+
+const defaultHandlers = [
+    {
+        match: 'input,select,textarea',
+        get: function(el) {
+            if (el.tagName==='SELECT' && el.multiple) {
+                let values = []
+                for (let option of el.options) {
+                    if (option.selected) {
+                        values.push(option.value)
+                    }
+                }
+                return values
+            }
+            return el.dataset.simplyValue || el.value
+        },
+        check: function(el, evt) {
+            return evt.type=='change' || (el.dataset.simplyImmediate && evt.type=='input')
+        }
+    },
+    {
+        match: 'a,button',
+        get: function(el) {
+            return el.dataset.simplyValue || el.href || el.value
+        },
+        check: function(el,evt) {
+            return evt.type=='click' && evt.ctrlKey==false && evt.button==0
+        }
+    },
+    {
+        match: 'form',
+        get: function(el) {
+            let data = {}
+            for (let input of Array.from(el.elements)) {
+                if (input.tagName=='INPUT' 
+                    && (input.type=='checkbox' || input.type=='radio')
+                ) {
+                    if (!input.checked) {
+                        return;
+                    }
+                }
+                if (data[input.name] && !Array.isArray(data[input.name])) {
+                    data[input.name] = [data[input.name]]
+                }
+                if (Array.isArray(data[input.name])) {
+                    data[input.name].push(input.value)
+                } else {
+                    data[input.name] = input.value
+                }
+            }
+            return data
+        },
+        check: function(el,evt) {
+            return evt.type=='submit'
+        }
+    },
+    {
+    	match: '*',
+        get: function(el) {
+            return el.dataset.simplyValue
+        },
+        check: function(el, evt) {
+            return evt.type=='click' && evt.ctrlKey==false && evt.button==0
+        }
+    }
+]

package/src/everything.mjs

@@ -0,0 +1,27 @@
+import { activate } from './activate.mjs'
+import * as action from './action.mjs'
+import { app } from './app.mjs'
+import { bind } from './bind.mjs'
+import * 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'
+
+const simply = {
+	activate,
+	action,
+	app,
+	bind,
+	command,
+	include,
+	key,
+	model,
+	route,
+	state
+}
+
+window.simply = simply
+
+export default simply

package/src/include.mjs

@@ -0,0 +1,191 @@
+function throttle( callbackFunction, intervalTime ) {
+    let eventId = 0
+    return () => {
+        const myArguments = arguments
+        if ( eventId ) {
+            return
+        } else {
+            eventId = globalThis.setTimeout( () => {
+                callbackFunction.apply(this, myArguments)
+                eventId = 0
+            }, intervalTime )
+        }
+    }
+}
+
+const runWhenIdle = (() => {
+    if (globalThis.requestIdleCallback) {
+        return (callback) => {
+            globalThis.requestIdleCallback(callback, {timeout: 500})
+        }
+    }
+    return globalThis.requestAnimationFrame
+})()
+
+function rebaseHref(relative, base) {
+    let url = new URL(relative, base)
+    if (include.cacheBuster) {
+        url.searchParams.set('cb',include.cacheBuster)
+    }
+    return url.href
+}
+
+let observer, loaded = {}
+let head = globalThis.document.querySelector('head')
+let currentScript = globalThis.document.currentScript
+let getScriptURL, currentScriptURL
+if (!currentScript) {
+    getScriptURL = (() => {
+        var scripts = document.getElementsByTagName('script')
+        var index = scripts.length - 1
+        var myScript = scripts[index]
+        return () => myScript.src
+    })()
+    currentScriptURL = getScriptURL()
+} else {
+    currentScriptURL = currentScript.src
+}
+
+const waitForPreviousScripts = async () => {
+    // because of the async=false attribute, this script will run after
+    // the previous scripts have been loaded and run
+    // simply.include.next.js only fires the simply-next-script event
+    // that triggers the Promise.resolve method
+    return new Promise(function(resolve) {
+        var next = globalThis.document.createElement('script')
+        next.src = rebaseHref('simply.include.next.js', currentScriptURL)
+        next.async = false
+        globalThis.document.addEventListener('simply-include-next', () => {
+            head.removeChild(next)
+            resolve()
+        }, { once: true, passive: true})
+        head.appendChild(next)
+    })
+}
+
+let scriptLocations = []
+
+export const include = {
+    cacheBuster: null,
+    scripts: (scripts, base) => {
+        let arr = scripts.slice()
+        const importScript = () => {
+            const script = arr.shift()
+            if (!script) {
+                return
+            }
+            const attrs  = [].map.call(script.attributes, (attr) => {
+                return attr.name
+            })
+            let clone  = globalThis.document.createElement('script')
+            for (const attr of attrs) {
+                clone.setAttribute(attr, script.getAttribute(attr))
+            }
+            clone.removeAttribute('data-simply-location')
+            if (!clone.src) {
+                // this is an inline script, so copy the content and wait for previous scripts to run
+                clone.innerHTML = script.innerHTML
+                waitForPreviousScripts()
+                    .then(() => {
+                        const node = scriptLocations[script.dataset.simplyLocation]
+                        node.parentNode.insertBefore(clone, node)
+                        node.parentNode.removeChild(node)
+                        importScript()
+                    })
+            } else {
+                clone.src = rebaseHref(clone.src, base)
+                if (!clone.hasAttribute('async') && !clone.hasAttribute('defer')) {
+                    clone.async = false //important! do not use clone.setAttribute('async', false) - it has no effect
+                }
+                const node = scriptLocations[script.dataset.simplyLocation]
+                node.parentNode.insertBefore(clone, node)
+                node.parentNode.removeChild(node)
+                loaded[clone.src]=true
+                importScript()
+            }
+        }
+        if (arr.length) {
+            importScript()
+        }
+    },
+    html: (html, link) => {
+        let fragment = globalThis.document.createRange().createContextualFragment(html)
+        const stylesheets = fragment.querySelectorAll('link[rel="stylesheet"],style')
+        // add all stylesheets to head
+        for (let stylesheet of stylesheets) {
+            if (stylesheet.href) {
+                stylesheet.href = rebaseHref(stylesheet.href, link.href)
+            }
+            head.appendChild(stylesheet)
+        }
+        // remove the scripts from the fragment, as they will not run in the
+        // 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)
+        }
+        // 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)
+    }
+}
+
+let included = {}
+const includeLinks = async (links) => {
+    // mark them as in progress, so handleChanges doesn't find them again
+    let remainingLinks = [].reduce.call(links, (remainder, link) => {
+        if (link.rel=='simply-include-once' && included[link.href]) {
+            link.parentNode.removeChild(link)
+        } else {
+            included[link.href]=true
+            link.rel = 'simply-include-loading'
+            remainder.push(link)
+        }
+        return remainder
+    }, [])
+
+    for (let link of remainingLinks) {
+        if (!link.href) {
+            return
+        }
+        // fetch the html
+        const response = await fetch(link.href)
+        if (!response.ok) {
+            console.log('simply-include: failed to load '+link.href);
+            continue
+        }
+        console.log('simply-include: loaded '+link.href);
+        const html = await response.text()
+        // if succesfull import the html
+        include.html(html, link)
+        // remove the include link
+        link.parentNode.removeChild(link)
+    }
+}
+
+const handleChanges = throttle(() => {
+    runWhenIdle(() => {
+        var links = globalThis.document.querySelectorAll('link[rel="simply-include"],link[rel="simply-include-once"]')
+        if (links.length) {
+            includeLinks(links)
+        }
+    })
+})
+
+const observe = () => {
+    observer = new MutationObserver(handleChanges)
+    observer.observe(globalThis.document, {
+        subtree: true,
+        childList: true,
+    })
+}
+
+observe()
+handleChanges() // check if there are include links in the dom already

package/src/key.mjs

@@ -0,0 +1,55 @@
+class SimplyKeys {
+	constructor(options = {}) {
+		if (!options.app) {
+			options.app = {}
+		}
+		if (!options.app.container) {
+			options.app.container = document.body
+		}
+		Object.assign(this, options.keys)
+
+		const keyHandler = (e) => {
+			if (e.isComposing || e.keyCode === 229) {
+			    return;
+			}
+			if (e.defaultPrevented) {
+			    return;
+			}
+			if (!e.target) {
+			    return;
+			}
+
+			let selectedKeyboard = 'default';
+			if (e.target.closest('[data-simply-keyboard]')) {
+			    selectedKeyboard = e.target.closest('[data-simply-keyboard]').dataset.simplyKeyboard;
+			}
+			let key = '';
+			if (e.ctrlKey && e.keyCode!=17) {
+			    key+='Control+';
+			}
+			if (e.metaKey && e.keyCode!=224) {
+			    key+='Meta+';
+			}
+			if (e.altKey && e.keyCode!=18) {
+			    key+='Alt+';
+			}
+			if (e.shiftKey && e.keyCode!=16) {
+			    key+='Shift+';
+			}
+			key+=e.key;
+
+			if (this[selectedKeyboard] && this[selectedKeyboard][key]) {
+			    let keyboard = this[selectedKeyboard]
+			    keyboard[key].call(options.app,e);
+			}
+		}
+
+		options.app.container.addEventListener('keydown', keyHandler)
+	}
+
+}
+
+export function keys(options={}) {
+	return new SimplyKeys(options)
+}
+

package/src/model.mjs

@@ -0,0 +1,151 @@
+import {signal, effect, batch} from './state.mjs'
+
+/**
+ * This class implements a pluggable data model, where you can
+ * add effects that are run only when either an option for that
+ * effect changes, or when an effect earlier in the chain of
+ * effects changes.
+ */
+class SimplyModel {
+
+	/**
+	 * Creates a new datamodel, with a state property that contains
+	 * all the data passed to this constructor
+	 * @param state	Object with all the data for this model
+	 */
+	constructor(state) {
+		this.state = signal(state)
+		if (!this.state.options) {
+			this.state.options = {}
+		}
+		this.effects = [{current:state.data}]
+		this.view = signal(state.data)
+	}
+
+	/**
+	 * Adds an effect to run whenever a signal it depends on
+	 * changes. this.state is the usual signal.
+	 * The `fn` function param is not itself an effect, but must return
+	 * and effect function. `fn` takes one param, which is the data signal.
+	 * This signal will always have at least a `current` property.
+	 * The result of the effect function is pushed on to the this.effects
+	 * list. And the last effect added is set as this.view
+	 */
+	addEffect(fn) {
+		const dataSignal = this.effects[this.effects.length-1]
+		this.view = fn.call(this, dataSignal)
+		this.effects.push(this.view)
+	}
+}
+
+export function model(options) {
+	return new SimplyModel(options)
+}
+
+export function sort(options={}) {
+	return function(data) {
+		// initialize the sort options, only gets called once
+		this.state.options.sort = Object.assign({
+			direction: 'asc',
+			sortBy: null,
+			sortFn: ((a,b) => {
+				const sort = this.state.options.sort
+				const sortBy = sort.sortBy
+				if (!sort.sortBy) {
+					return 0
+				}
+				const larger = sort.direction == 'asc' ? 1 : -1
+				const smaller = sort.direction == 'asc' ? -1 : 1
+				if (typeof a?.[sortBy] === 'undefined') {
+					if (typeof b?.[sortBy] === 'undefined') {
+						return 0
+					}
+					return larger
+				}
+				if (typeof b?.[sortBy] === 'undefined') {
+					return smaller
+				}
+				if (a[sortBy]<b[sortBy]) {
+					return smaller
+				} else if (a[sortBy]>b[sortBy]) {
+					return larger
+				} else {
+					return 0
+				}
+			})
+		}, options);
+		// then return the effect, which is called when
+		// either the data or the sort options change
+		return effect(() => {
+			const sort = this.state.options.sort
+			if (sort?.sortBy && sort?.direction) {
+				return data.current.toSorted(sort?.sortFn)
+			}
+			return data.current
+		})
+	}
+}
+
+export function paging(options={}) {
+	return function(data) {
+		// initialize the paging options
+		this.state.options.paging = Object.assign({
+			page: 1,
+			pageSize: 20,
+			max: 1
+		}, options)
+		return effect(() => {
+			return batch(() => {
+				const paging = this.state.options.paging
+				if (!paging.pageSize) {
+					paging.pageSize = 20
+				}
+				paging.max = Math.ceil(this.state.data.length / paging.pageSize)
+				paging.page = Math.max(1, Math.min(paging.max, paging.page))
+
+				const start = (paging.page-1) * paging.pageSize
+				const end = start + paging.pageSize
+				return data.current.slice(start, end)
+			})
+		})
+	}
+}
+
+export function filter(options) {
+	if (!options?.name || typeof options.name!=='string') {
+		throw new Error('filter requires options.name to be a string')
+	}
+	if (!options.matches || typeof options.matches!=='function') {
+		throw new Error('filter requires options.matches to be a function')
+	}
+	return function(data) {
+		this.state.options[options.name] = options
+		return effect(() => {
+			if (this.state.options[options.name].enabled) {
+				return data.filter(this.state.options.matches)
+			}
+		})
+	}
+}
+
+export function columns(options={}) {
+	if (!options
+		|| typeof options!=='object'
+		|| Object.keys(options).length===0) {
+		throw new Error('columns requires options to be an object with at least one property')
+	}
+	return function(data) {
+		this.state.options.columns = options
+		return effect(() => {
+			return data.current.map(input => {
+				let result = {}
+				for (let key of Object.keys(this.state.options.columns)) {
+					if (!this.state.options.columns[key].hidden) {
+						result[key] = input[key]
+					}
+				}
+				return result
+			})
+		})
+	}
+}