simplyview
Version:
Library to rapidly build UI components, using declarative tools
3 lines (2 loc) • 11.3 kB
JavaScript
(()=>{var u=new Map,S={addListener:(t,e)=>{u.has(t)||u.set(t,[]),u.get(t).push(e),_(t)},removeListener:(t,e)=>{if(!u.has(t))return!1;u.set(t,u.get(t).filter(r=>r!=e))}};function _(t){let e=document.querySelectorAll('[data-simply-activate="'+t+'"]');if(e)for(let r of e)N(r)}function N(t){let e=t?.dataset?.simplyActivate;if(e&&u.has(e))for(let r of u.get(e))r.call(t)}function V(t){let e=[];for(let a of t)if(a.type=="childList"){for(let n of a.addedNodes)if(n.querySelectorAll){var r=Array.from(n.querySelectorAll("[data-simply-activate]"));n.matches("[data-simply-activate]")&&r.push(n),e=e.concat(r)}}for(let a of e)N(a)}var z=new MutationObserver(V);z.observe(document,{subtree:!0,childList:!0});function g(t,e){if(e){let r=t;t=e,t.app=t}if(t.app){let r={get:(a,n)=>a[n].bind(t.app)};return new Proxy(t.actions,r)}else return t}function b(t,e){if(e){let r=t;t=e,t.app=t}return new x(t)}var x=class{constructor(e={}){this.root=e.root||"/",this.app=e.app,this.addMissingSlash=!!e.addMissingSlash,this.matchExact=!!e.matchExact,this.clear(),e.routes&&this.load(e.routes)}load(e){W(e,this.routeInfo,this.matchExact)}clear(){this.routeInfo=[],this.listeners={match:{},call:{},finish:{}}}match(e,r){let a={path:e,options:r};a=this.runListeners("match",a),e=a.path?a.path:e;let n;if(!e)return this.match(document.location.pathname+document.location.hash)?!0:this.match(document.location.pathname);e=f(e);for(let s of this.routeInfo)if(n=s.match.exec(e),this.addMissingSlash&&!n?.length&&e&&e[e.length-1]!="/"&&(n=s.match.exec(e+"/"),n&&(e+="/",history.replaceState({},"",O(e)))),n&&n.length){var c={};return s.params.forEach((l,h)=>{l=="*"&&(l="remainder"),c[l]=n[h+1]}),Object.assign(c,r),a.route=s,a.params=c,a=this.runListeners("call",a),c=a.params?a.params:c,a.result=s.action.call(s,c),this.runListeners("finish",a),a.result}return!1}runListeners(e,r){if(Object.keys(this.listeners[e]))return Object.keys(this.listeners[e]).forEach(a=>{var n=j(a);if(n.exec(r.path)){var c;for(let s of this.listeners[e][a])c=s.call(this.app,r),c&&(r=c)}}),r}handleEvents(){globalThis.addEventListener("popstate",()=>{this.match(f(document.location.pathname+document.location.hash,this.root))===!1&&this.match(f(document.location.pathname,this.root))}),this.app.container.addEventListener("click",e=>{if(!e.ctrlKey&&e.which==1){for(var r=e.target;r&&r.tagName!="A";)r=r.parentElement;if(r&&r.pathname&&r.hostname==globalThis.location.hostname&&!r.link&&!r.dataset.simplyCommand){let a=f(r.pathname+r.hash,this.root);if(this.has(a)||(a=f(r.pathname,this.root)),this.has(a)){let n=this.runListeners("goto",{path:a});if(n.path&&this.goto(n.path))return e.preventDefault(),!1}}}})}goto(e){return history.pushState({},"",O(e)),this.match(e)}has(e){e=f(e,this.root);for(let a of this.routeInfo){var r=a.match.exec(e);if(r&&r.length)return!0}return!1}addListener(e,r,a){if(["goto","match","call","finish"].indexOf(e)==-1)throw new Error("Unknown action "+e);this.listeners[e][r]||(this.listeners[e][r]=[]),this.listeners[e][r].push(a)}removeListener(e,r,a){if(["match","call","finish"].indexOf(e)==-1)throw new Error("Unknown action "+e);this.listeners[e][r]&&(this.listeners[e][r]=this.listeners[e][r].filter(n=>n!=a))}init(e){e.root&&(this.root=e.root)}};function f(t,e="/"){return(t.substring(0,e.length)==e||e[e.length-1]=="/"&&t.length==e.length-1&&t==e.substring(0,t.length))&&(t=t.substring(e.length)),t[0]!="/"&&t[0]!="#"&&(t="/"+t),t}function O(t,e){return t=f(t,e),e[e.length-1]==="/"&&t[0]==="/"&&(t=t.substring(1)),e+t}function j(t,e=!1){return e?new RegExp("^"+t.replace(/:\w+/g,"([^/]+)").replace(/:\*/,"(.*)")+"(\\?|$)"):new RegExp("^"+t.replace(/:\w+/g,"([^/]+)").replace(/:\*/,"(.*)"))}function W(t,e,r=!1){let a=Object.keys(t),n=/:(\w+|\*)/g;for(let c of a){let s=[],l=[];do s=n.exec(c),s&&l.push(s[1]);while(s);e.push({match:j(c,r),params:l,action:t[c]})}return e}var T=class{constructor(e={}){e.app||(e.app={}),e.app.container||(e.app.container=document.body),this.app=e.app,this.$handlers=e.handlers||G,e.commands&&Object.assign(this,e.commands);let r=a=>{let n=Y(a,this.$handlers);if(!n)return;if(!this[n.name]){console.error("simply.command: undefined command "+n.name,n.source);return}if(this[n.name].call(e.app,n.source,n.value)!==!0)return a.preventDefault(),a.stopPropagation(),!1};e.app.container.addEventListener("click",r),e.app.container.addEventListener("submit",r),e.app.container.addEventListener("change",r),e.app.container.addEventListener("input",r)}call(e,r,a){if(!this[e]){console.error("simply.command: undefined command "+e);return}return this[e].call(this.app,r,a)}action(e){console.warn("deprecated call to `this.commands.action`");let r=Array.from(arguments).slice();return r.shift(),this.app.actions[e](...r)}appendHandler(e){this.$handlers.push(e)}prependHandler(e){this.$handlers.unshift(e)}};function v(t={},e){if(e){let r=t;t=e,t.app=t}return new T(t)}function Y(t,e){var r=t.target.closest("[data-simply-command]");if(r){for(let a of e)if(r.matches(a.match))return a.check(r,t)?{name:r.dataset.simplyCommand,source:r,value:a.get(r)}:null}return null}var G=[{match:"input,select,textarea",get:function(t){if(t.tagName==="SELECT"&&t.multiple){let e=[];for(let r of t.options)r.selected&&e.push(r.value);return e}return t.dataset.simplyValue||t.value},check:function(t,e){return e.type=="change"||t.dataset.simplyImmediate&&e.type=="input"}},{match:"a,button",get:function(t){return t.dataset.simplyValue||t.href||t.value},check:function(t,e){return e.type=="click"&&e.ctrlKey==!1&&e.button==0}},{match:"form",get:function(t){let e={};for(let r of Array.from(t.elements)){if(r.tagName=="INPUT"&&(r.type=="checkbox"||r.type=="radio")&&!r.checked)return;e[r.name]&&!Array.isArray(e[r.name])&&(e[r.name]=[e[r.name]]),Array.isArray(e[r.name])?e[r.name].push(r.value):e[r.name]=r.value}return e},check:function(t,e){return e.type=="submit"}},{match:"*",get:function(t){return t.dataset.simplyValue},check:function(t,e){return e.type=="click"&&e.ctrlKey==!1&&e.button==0}}];var p=Object.freeze({Compose:229,Control:17,Meta:224,Alt:18,Shift:16}),C=class{constructor(e={}){e.app||(e.app={}),e.app.container||(e.app.container=document.body),Object.assign(this,e.keys);let r=a=>{if(a.isComposing||a.keyCode===p.Compose||a.defaultPrevented||!a.target)return;let n="default";a.target.closest("[data-simply-keyboard]")&&(n=a.target.closest("[data-simply-keyboard]").dataset.simplyKeyboard);let c=[];a.ctrlKey&&a.keyCode!=p.Control&&c.push("Control"),a.metaKey&&a.keyCode!=p.Meta&&c.push("Meta"),a.altKey&&a.keyCode!=p.Alt&&c.push("Alt"),a.shiftKey&&a.keyCode!=p.Shift&&c.push("Shift"),c.push(a.key.toLowerCase());let s=[],l=event.target.closest("[data-simply-keyboard]");for(;l;)s.push(l.dataset.simplyKeyboard),l=l.parentNode.closest("[data-simply-keyboard]");s.push("");let h,o,U=["+","-"];for(i in s){h=s[i],h==""?o="default":(o=h,h+=".");for(let F of U){let d=c.join(F);if(this[o]&&typeof this[o][d]=="function"&&!this[o][d].call(this[o],a)){a.preventDefault();return}if(typeof this[o+d]=="function"&&!this[o+d].call(this,a)){a.preventDefault();return}if(this[n]&&this[n][d]){let y=e.app.container.querySelectorAll('[data-simply-accesskey="'+h+d+'"]');y.length&&(y.forEach($=>$.click()),a.preventDefault())}}}};e.app.container.addEventListener("keydown",r)}};function k(t={},e){if(e){let r=t;t=e,t.app=t}return new C(t)}function w(t,e){if(e){let r=t;t=e,t.app=t}if(t.app){t.app.view=t.view||{};let r=()=>{let a=t.app.view,n=globalThis.editor.data.getDataPath(t.app.container||document.body);t.app.view=globalThis.editor.currentData[n],Object.assign(t.app.view,a)};return globalThis.editor&&globalThis.editor.currentData?r():document.addEventListener("simply-content-loaded",r),t.app.view}else return t.view}var E=class{constructor(e={}){this.container=e.container||document.body;for(let r in e)switch(r){case"commands":this.commands=v({app:this,container:this.container,commands:e.commands});break;case"keys":case"keyboard":this.keys=k({app:this,keys:e.keys});break;case"routes":this.routes=b({app:this,routes:e.routes});break;case"actions":this.actions=g({app:this,actions:e.actions}),this.action=function(a){console.warn("deprecated call to `this.action`");let n=Array.from(arguments).slice();return n.shift(),this.actions[a](...n)};break;case"view":this.view=w({app:this,view:e.view});break;default:this[r]=e[r];break}}get app(){return this}};function q(t={}){return new E(t)}function J(t,e){let r=0;return()=>{let a=arguments;r||(r=globalThis.setTimeout(()=>{t.apply(this,a),r=0},e))}}var Q=globalThis.requestIdleCallback?t=>{globalThis.requestIdleCallback(t,{timeout:500})}:globalThis.requestAnimationFrame;function M(t,e){let r=new URL(t,e);return m.cacheBuster&&r.searchParams.set("cb",m.cacheBuster),r.href}var K,X={},A=globalThis.document.querySelector("head"),P=globalThis.document.currentScript,R,D;P?D=P.src:(R=(()=>{var t=document.getElementsByTagName("script"),e=t.length-1,r=t[e];return()=>r.src})(),D=R());var Z=async()=>new Promise(function(t){var e=globalThis.document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/simplyedit/simplyview/dist/simply.include.next.js",e.async=!1,globalThis.document.addEventListener("simply-include-next",()=>{A.removeChild(e),t()},{once:!0,passive:!0}),A.appendChild(e)}),L=[],m={cacheBuster:null,scripts:(t,e)=>{let r=t.slice(),a=()=>{let n=r.shift();if(!n)return;let c=[].map.call(n.attributes,l=>l.name),s=globalThis.document.createElement("script");for(let l of c)s.setAttribute(l,n.getAttribute(l));if(s.removeAttribute("data-simply-location"),!s.src)s.innerHTML=n.innerHTML,Z().then(()=>{let l=L[n.dataset.simplyLocation];l.parentNode.insertBefore(s,l),l.parentNode.removeChild(l),a()});else{s.src=M(s.src,e),!s.hasAttribute("async")&&!s.hasAttribute("defer")&&(s.async=!1);let l=L[n.dataset.simplyLocation];l.parentNode.insertBefore(s,l),l.parentNode.removeChild(l),X[s.src]=!0,a()}};r.length&&a()},html:(t,e)=>{let r=globalThis.document.createRange().createContextualFragment(t),a=r.querySelectorAll('link[rel="stylesheet"],style');for(let s of a)s.href&&(s.href=M(s.href,e.href)),A.appendChild(s);let n=globalThis.document.createDocumentFragment(),c=r.querySelectorAll("script");if(c.length){for(let s of c){let l=globalThis.document.createComment(s.src||"inline script");s.parentNode.insertBefore(l,s),s.dataset.simplyLocation=L.length,L.push(l),n.appendChild(s)}globalThis.setTimeout(function(){m.scripts(Array.from(n.children),e?e.href:globalThis.location.href)},10)}e.parentNode.insertBefore(r,e||null)}},H={},ee=async t=>{let e=[].reduce.call(t,(r,a)=>(a.rel=="simply-include-once"&&H[a.href]?a.parentNode.removeChild(a):(H[a.href]=!0,a.rel="simply-include-loading",r.push(a)),r),[]);for(let r of e){if(!r.href)return;let a=await fetch(r.href);if(!a.ok){console.log("simply-include: failed to load "+r.href);continue}console.log("simply-include: loaded "+r.href);let n=await a.text();m.html(n,r),r.parentNode.removeChild(r)}},I=J(()=>{Q(()=>{var t=globalThis.document.querySelectorAll('link[rel="simply-include"],link[rel="simply-include-once"]');t.length&&ee(t)})}),te=()=>{K=new MutationObserver(I),K.observe(globalThis.document,{subtree:!0,childList:!0})};te();I();var B={activate:S,action:g,app:q,command:v,include:m,key:k,route:b,view:w};window.simply=B;var xe=B;})();
//# sourceMappingURL=simply.everything.min.js.map