├── README.md ├── index.html ├── main.css ├── main.js ├── paper.min.css ├── screenshot.png └── torus.min.js /README.md: -------------------------------------------------------------------------------- 1 | # thingboard 🖼️ 2 | 3 | **Thingboard** is just a simple **board** for writing **things** down. Frequently when I'm working, I find myself looking for places to jot stuff down to help me think and organize, but I don't want to be shuffling pieces of paper around, and it's nice to be able to copy-paste notes from other tools I use. Thingboard fulfills this need for me by being a board for Post-it style notes I can move and resize. It saves data to your browser's local storage. 4 | 5 | You can try thingboard deployed on [Repl.it](https://thingboard.thesephist.repl.co) or [Vercel](https://thingboard.thesephist.vercel.app/). 6 | 7 | Thingboard is a fully static, client-side rendered app built on a small pair of libraries: 8 | 9 | - [Torus](https://github.com/thesephist/torus) for UI rendering 10 | - [paper.css](https://thesephist.github.io/paper.css/) for easy aesthetics that match with the rest of my productivity tools. 11 | 12 | ![Thingboard screenshot](screenshot.png) 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | thingboard 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | font-family: 'Barlow', system-ui, sans-serif; 4 | --paper-accent: #ed445b; 5 | background: #f8f8f8; 6 | } 7 | 8 | .tb-textarea, 9 | .tb-button { 10 | font-family: 'Barlow', system-ui, sans-serif; 11 | } 12 | 13 | .tb-header { 14 | justify-content: space-between; 15 | padding: .5em 1em; 16 | } 17 | 18 | .tb-header, 19 | .left, 20 | .right { 21 | display: flex; 22 | flex-direction: row; 23 | align-items: center; 24 | } 25 | 26 | .title { 27 | font-weight: bold; 28 | font-size: 1.2em; 29 | line-height: 1.5em; 30 | margin-right: .5em; 31 | } 32 | 33 | .tb-textarea { 34 | resize: auto; 35 | min-width: 0; 36 | min-height: 0; 37 | -webkit-appearance: none; 38 | background: #fff; 39 | line-height: 1.5em; 40 | font-size: 1em; 41 | } 42 | 43 | .tb-thing { 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | overflow: visible; 48 | height: 0; 49 | width: 0; 50 | transition: opacity .15s; 51 | } 52 | 53 | .tb-buttons { 54 | display: flex; 55 | flex-direction: row; 56 | align-items: center; 57 | position: absolute; 58 | bottom: .6em; 59 | left: 0; 60 | pointer-events: none; 61 | opacity: 0; 62 | transition: opacity .15s; 63 | } 64 | 65 | .tb-thing:focus-within .tb-buttons, 66 | .tb-thing.active .tb-buttons { 67 | opacity: 1; 68 | pointer-events: all; 69 | } 70 | 71 | .tb-button { 72 | margin-left: .6em; 73 | font-size: .8rem; 74 | } 75 | 76 | .tb-button:first-child { 77 | margin-left: 0; 78 | } 79 | 80 | .tb-board { 81 | height: 100vh; 82 | width: 100vw; 83 | overflow: hidden; 84 | } 85 | 86 | .tb-board, 87 | .tb-things { 88 | position: absolute; 89 | top: 0; 90 | left: 0; 91 | } 92 | 93 | .tb-board.ctrlDown .tb-thing { 94 | opacity: .5; 95 | } 96 | 97 | .tb-board.ctrlDown .tb-textarea { 98 | cursor: move; 99 | } 100 | 101 | .tb-slate { 102 | color: #888; 103 | font-size: 1.2em; 104 | position: absolute; 105 | top: 50%; 106 | left: 50%; 107 | transform: translate(-50%, -50%); 108 | pointer-events: none; 109 | text-align: center; 110 | line-height: 1.5em; 111 | } -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const { 2 | Record, 3 | StoreOf, 4 | ListOf, 5 | Component, 6 | } = window.Torus; 7 | 8 | class Thing extends Record { } 9 | class ThingStore extends StoreOf(Thing) { } 10 | 11 | const debounce = (fn, delay) => { 12 | let to = null; 13 | return (...args) => { 14 | const dfn = () => fn(...args); 15 | clearTimeout(to); 16 | to = setTimeout(dfn, delay); 17 | } 18 | } 19 | 20 | function xy(evt) { 21 | let event = evt; 22 | if (!evt.clientX) { 23 | if (evt.touches && evt.touches.length) { 24 | event = evt.touches[0]; 25 | } else if (evt.changedTouches && evt.changedTouches.length) { 26 | event = evt.changedTouches[0]; 27 | } 28 | } 29 | return { 30 | x: event.clientX, 31 | y: event.clientY, 32 | } 33 | } 34 | 35 | class ThingCard extends Component { 36 | init(thing, remover, creator) { 37 | this.remover = remover; 38 | this.creator = creator; 39 | 40 | this.startX = 0; 41 | this.startY = 0; 42 | this.tempX = 0; 43 | this.tempY = 0; 44 | this.active = false; 45 | 46 | this.handleDown = this.handleDown.bind(this); 47 | this.handleMove = this.handleMove.bind(this); 48 | this.handleUp = this.handleUp.bind(this); 49 | 50 | this.bind(thing, data => this.render(data)); 51 | 52 | const setDimensions = debounce((width, height) => { 53 | this.record.update({ width, height }); 54 | }, 500); 55 | const observer = new MutationObserver(mutationList => { 56 | for (const mutation of mutationList) { 57 | if (mutation.type !== 'attributes' || mutation.attributeName !== 'style') { 58 | continue; 59 | } 60 | 61 | const { width, height } = mutation.target.getBoundingClientRect(); 62 | if (width !== this.record.get('width') || height !== this.record.get('height')) { 63 | setDimensions(width, height); 64 | } 65 | return; 66 | } 67 | }); 68 | observer.observe(this.node.querySelector('textarea'), { 69 | attributes: true, 70 | }); 71 | } 72 | handleDown(evt) { 73 | if (!evt.ctrlKey && !evt.metaKey) return; 74 | 75 | evt.preventDefault(); 76 | 77 | const { x, y } = xy(evt); 78 | this.startX = x; 79 | this.startY = y; 80 | this.tempX = 0; 81 | this.tempY = 0; 82 | document.addEventListener('mousemove', this.handleMove, { 83 | passive: true, 84 | }); 85 | document.addEventListener('mouseup', this.handleUp); 86 | document.addEventListener('touchmove', this.handleMove, { 87 | passive: true, 88 | }); 89 | document.addEventListener('touchend', this.handleUp); 90 | } 91 | handleMove(evt) { 92 | const { x, y } = xy(evt); 93 | this.tempX = x - this.startX; 94 | this.tempY = y - this.startY; 95 | this.render(); 96 | } 97 | handleUp(evt) { 98 | evt.preventDefault(); 99 | 100 | const { tempX, tempY } = this; 101 | this.startX = 0; 102 | this.startY = 0; 103 | this.tempX = 0; 104 | this.tempY = 0; 105 | 106 | this.record.update({ 107 | x: this.record.get('x') + tempX, 108 | y: this.record.get('y') + tempY, 109 | }); 110 | 111 | document.removeEventListener('mousemove', this.handleMove); 112 | document.removeEventListener('mouseup', this.handleUp); 113 | document.removeEventListener('touchmove', this.handleMove); 114 | document.removeEventListener('touchend', this.handleUp); 115 | } 116 | compose(data) { 117 | const { value, x, y, width, height } = data; 118 | return jdom`
120 |
121 | 132 | 134 | 141 |
142 | 173 |
`; 174 | } 175 | } 176 | 177 | class ThingList extends ListOf(ThingCard) { 178 | compose() { 179 | return jdom`
${this.nodes}
`; 180 | } 181 | } 182 | 183 | class Board extends Component { 184 | init() { 185 | this.things = new ThingStore(); 186 | this.thingList = new ThingList( 187 | this.things, 188 | t => this.things.create(t), 189 | ); 190 | this.restore(); 191 | 192 | this.ctrlDown = false; 193 | this.toast = ''; 194 | this.handleKeydown = this.handleKeydown.bind(this); 195 | this.handleDown = this.handleDown.bind(this); 196 | this.save = debounce(this.save.bind(this), 500); 197 | 198 | this.things.addHandler(this.save); 199 | for (const thing of this.things) { 200 | thing.addHandler(this.save); 201 | } 202 | this.bind(this.things, () => this.render()); 203 | 204 | window.addEventListener('keydown', this.handleKeydown); 205 | } 206 | save() { 207 | localStorage.setItem('thingboard', JSON.stringify(this.things.serialize())); 208 | 209 | this.toast = '...'; 210 | this.render(); 211 | setTimeout(() => { 212 | this.toast = ''; 213 | this.render(); 214 | }, 1200); 215 | } 216 | restore() { 217 | try { 218 | const saved = localStorage.getItem('thingboard'); 219 | if (!saved) return; 220 | 221 | const thingsRaw = JSON.parse(saved); 222 | for (const thing of thingsRaw) { 223 | this.things.create(thing); 224 | } 225 | } catch (e) { 226 | localStorage.clear(); 227 | console.error(`Error serializing saved data`, e); 228 | } 229 | } 230 | handleKeydown(evt) { 231 | if (evt.key === 'Control' || evt.key === 'Meta') { 232 | this.ctrlDown = true; 233 | } 234 | this.render(); 235 | 236 | const up = evt => { 237 | if (evt.key === 'Control' || evt.key === 'Meta') { 238 | this.ctrlDown = false; 239 | window.removeEventListener('keyup', up); 240 | this.render(); 241 | } 242 | } 243 | window.addEventListener('keyup', up); 244 | } 245 | handleDown(evt) { 246 | if (evt.target !== this.node) { 247 | return; 248 | } 249 | evt.preventDefault(); 250 | 251 | const up = fvt => { 252 | fvt.preventDefault(); 253 | 254 | const a = xy(evt); 255 | const b = xy(fvt); 256 | const closeEnough = (n, m) => Math.abs(n - m) < 2; 257 | 258 | if (closeEnough(a.x, a.x) && closeEnough(a.y, b.y) 259 | && fvt.target === this.node) { 260 | const thing = this.things.create({ 261 | ...a, 262 | width: 300, 263 | height: 200, 264 | value: '', 265 | }); 266 | thing.addHandler(this.save); 267 | } 268 | this.node.removeEventListener('mouseup', up); 269 | this.node.removeEventListener('touchend', up); 270 | } 271 | this.node.addEventListener('mouseup', up); 272 | this.node.addEventListener('touchend', up); 273 | } 274 | compose() { 275 | return jdom`
278 |
279 |
280 | thingboard 281 | (${this.toast || this.things.records.size}) 282 |
283 |
284 | about 286 | 288 | 300 |
301 |
302 | ${this.things.records.size ? this.thingList.node : ( 303 | jdom`
304 | Tap to create a thing.
305 | Ctrl/Cmd + drag to move things. 306 |
` 307 | )} 308 |
`; 309 | } 310 | } 311 | 312 | const board = new Board(); 313 | document.body.appendChild(board.node); 314 | -------------------------------------------------------------------------------- /paper.min.css: -------------------------------------------------------------------------------- 1 | body{--paper-accent:#3819e4;--paper-foreground:#000;--paper-background:#fff;--paper-border-width:4px}.paper{display:block;color:var(--paper-foreground);background:var(--paper-background);box-shadow:0 5px 12px -2px rgba(0,0,0,.4);transform:none;box-sizing:border-box;border:0;outline:none;padding:.5em 1em;border-radius:0;text-decoration:none}.paper.inline{display:inline-block;padding:.1em .5em}.paper.wrap{padding:0}.paper.movable{cursor:pointer;transition:transform .15s,box-shadow .15s;font-weight:700}.paper.colored{color:var(--paper-accent)}.paper.movable:focus,.paper.movable:hover{transform:translateY(-2px);box-shadow:0 8px 22px -1px rgba(0,0,0,.24)}.paper.movable:focus{outline:1px solid var(--paper-accent)}.paper.movable:active{transform:translateY(1px);box-shadow:0 2px 4px 0 rgba(0,0,0,.5);color:var(--paper-foreground)}.paper.movable.colored:active{color:var(--paper-accent)}.paper.accent{background:var(--paper-accent)}.paper.accent,.paper.movable.accent:active{color:var(--paper-background)}.paper.paper-border-left{border-left:var(--paper-border-width) solid var(--paper-accent)}.paper.paper-border-right{border-right:var(--paper-border-width) solid var(--paper-accent)}.paper.paper-border-top{border-top:var(--paper-border-width) solid var(--paper-accent)}.paper.paper-border-bottom{border-bottom:var(--paper-border-width) solid var(--paper-accent)}.paper.accent.paper-border-left{border-left:var(--paper-border-width) solid var(--paper-background)}.paper.accent.paper-border-right{border-right:var(--paper-border-width) solid var(--paper-background)}.paper.accent.paper-border-top{border-top:var(--paper-border-width) solid var(--paper-background)}.paper.accent.paper-border-bottom{border-bottom:var(--paper-border-width) solid var(--paper-background)} 2 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thesephist/thingboard/bf8944c267aac1eb9c2edacf068fbae1b29ab7e8/screenshot.png -------------------------------------------------------------------------------- /torus.min.js: -------------------------------------------------------------------------------- 1 | !function(t){var e={};function s(r){if(e[r])return e[r].exports;var n=e[r]={i:r,l:!1,exports:{}};return t[r].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=t,s.c=e,s.d=function(t,e,r){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},s.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(s.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)s.d(r,n,function(e){return t[e]}.bind(null,n));return r},s.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="",s(s.s=0)}([function(t,e,s){const{render:r,Component:n,Styled:o,StyledComponent:i,List:c,ListOf:l,Record:a,Store:d,StoreOf:u,Router:h}=s(1),{jdom:f,css:m}=s(2);t.exports={render:r,Component:n,Styled:o,StyledComponent:i,List:c,ListOf:l,Record:a,Store:d,StoreOf:u,Router:h,jdom:f,css:m}},function(t,e,s){let r=0;const n=t=>null!==t&&"object"==typeof t,o=t=>{void 0===t.attrs&&(t.attrs={}),void 0===t.events&&(t.events={}),void 0===t.children&&(t.children=[])},i=t=>Array.isArray(t)?t:[t],c=()=>document.createComment("");let l=[];const a={replaceChild:()=>{}};const d=(t,e,s)=>{for(const r of Object.keys(t)){const n=i(t[r]),o=i(e[r]||[]);for(const t of n)o.includes(t)||"function"!=typeof t||s(r,t)}},u=(t,e,s)=>{const i=e=>{t&&t!==e&&l.push([2,t,e]),t=e};if(r++,e!==s)if(null===s)i(c());else if("string"==typeof s||"number"==typeof s)"string"==typeof e||"number"==typeof e?t.data=s:i(document.createTextNode(s));else if(void 0!==s.appendChild)i(s);else{(void 0===t||!n(e)||e&&void 0!==e.appendChild||e.tag!==s.tag)&&(e={tag:null},i(document.createElement(s.tag))),o(e),o(s);for(const r of Object.keys(s.attrs)){const n=e.attrs[r],o=s.attrs[r];if("class"===r){const e=o;Array.isArray(e)?t.className=e.join(" "):t.className=e}else if("style"===r){const e=n||{},s=o;for(const r of Object.keys(s))s[r]!==e[r]&&(t.style[r]=s[r]);for(const r of Object.keys(e))void 0===s[r]&&(t.style[r]="")}else r in t?(t[r]!==o||void 0===n&&n!==o)&&(t[r]=o):n!==o&&t.setAttribute(r,o)}for(const r of Object.keys(e.attrs))void 0===s.attrs[r]&&(r in t?t[r]=null:t.removeAttribute(r));d(s.events,e.events,(e,s)=>{t.addEventListener(e,s)}),d(e.events,s.events,(e,s)=>{t.removeEventListener(e,s)});const r=e.children,c=s.children,a=r.length,h=c.length;if(h+a>0){const n=e._nodes||[],o=a{}},this.init(...t),void 0===this.node&&this.render()}static from(t){return class extends h{init(...t){this.args=t}compose(){return t(...this.args)}}}init(){}get record(){return this.event.source}bind(t,e){if(this.unbind(),!(t instanceof j))throw new Error(`cannot bind to ${t}, which is not an instance of Evented.`);this.event={source:t,handler:e},t.addHandler(e)}unbind(){this.record&&this.record.removeHandler(this.event.handler),this.event={source:null,handler:()=>{}}}remove(){this.unbind()}compose(){return null}preprocess(t){return t}render(t){t=t||this.record&&this.record.summarize();const e=this.preprocess(this.compose(t),t);if(void 0===e)throw new Error(this.constructor.name+".compose() returned undefined.");try{this.node=u(this.node,this.jdom,e)}catch(t){console.error("rendering error.",t)}return this.jdom=e}}const f=new Set;let m;const p=new WeakMap,v=(t,e)=>t+"{"+e+"}",b=(t,e)=>{let s=[],r="";for(const n of Object.keys(e)){const o=e[n];if("@"===n[0])n.startsWith("@media")?s.push(v(n,b(t,o).join(""))):s.push(v(n,b("",o).join("")));else if("object"==typeof o){const e=n.split(",");for(const r of e)if(r.includes("&")){const e=r.replace(/&/g,t);s=s.concat(b(e,o))}else s=s.concat(b(t+" "+r,o))}else r+=n+":"+o+";"}return r&&s.unshift(v(t,r)),s},g=t=>{const e=(t=>{if(!p.has(t)){const e=JSON.stringify(t);let s=e.length,r=1989;for(;s;)r=13*r^e.charCodeAt(--s);p.set(t,"_torus"+(r>>>0))}return p.get(t)})(t);let s=0;if(!f.has(e)){m||(()=>{const t=document.createElement("style");t.setAttribute("data-torus",""),document.head.appendChild(t),m=t.sheet})();const r=b("."+e,t);for(const t of r)m.insertRule(t,s++);f.add(e)}return e},y=t=>class extends t{styles(){return{}}preprocess(t,e){return n(t)&&(t.attrs=t.attrs||{},t.attrs.class=i(t.attrs.class||[]),t.attrs.class.push(g(this.styles(e)))),t}};class x extends h{get itemClass(){return h}init(t,...e){this.store=t,this.items=new Map,this.filterFn=null,this.itemData=e,this.bind(this.store,()=>this.itemsChanged())}itemsChanged(){const t=this.store.summarize(),e=this.items;for(const s of e.keys())t.includes(s)||(e.get(s).remove(),e.delete(s));for(const s of t)e.has(s)||e.set(s,new this.itemClass(s,()=>this.store.remove(s),...this.itemData));let s=[...e.entries()];null!==this.filterFn&&(s=s.filter(t=>this.filterFn(t[0]))),s.sort((e,s)=>t.indexOf(e[0])-t.indexOf(s[0])),this.items=new Map(s),this.render()}filter(t){this.filterFn=t,this.itemsChanged()}unfilter(){this.filterFn=null,this.itemsChanged()}get components(){return[...this]}get nodes(){return this.components.map(t=>t.node)}[Symbol.iterator](){return this.items.values()}remove(){super.remove();for(const t of this.items.values())t.remove()}compose(){return{tag:"ul",children:this.nodes}}}class j{constructor(){this.handlers=new Set}summarize(){}emitEvent(){const t=this.summarize();for(const e of this.handlers)e(t)}addHandler(t){this.handlers.add(t),t(this.summarize())}removeHandler(t){this.handlers.delete(t)}}class w extends j{constructor(t,e={}){super(),n(t)&&(e=t,t=null),this.id=t,this.data=e}update(t){Object.assign(this.data,t),this.emitEvent()}get(t){return this.data[t]}summarize(){return Object.assign({id:this.id},this.data)}serialize(){return this.summarize()}}class O extends j{constructor(t=[]){super(),this.reset(t)}get recordClass(){return w}get comparator(){return null}create(t,e){return this.add(new this.recordClass(t,e))}add(t){return this.records.add(t),this.emitEvent(),t}remove(t){return this.records.delete(t),this.emitEvent(),t}[Symbol.iterator](){return this.records.values()}find(t){for(const e of this.records)if(e.id===t)return e;return null}reset(t){this.records=new Set(t),this.emitEvent()}summarize(){return[...this.records].map(t=>[this.comparator?this.comparator(t):null,t]).sort((t,e)=>t[0]e[0]?1:0).map(t=>t[1])}serialize(){return this.summarize().map(t=>t.serialize())}}const C=t=>{let e;const s=[];for(;null!==e;)if(e=/:\w+/.exec(t),e){const r=e[0];s.push(r.substr(1)),t=t.replace(r,"(.+)")}return[new RegExp(t),s]};const S={render:u,Component:h,Styled:y,StyledComponent:y(h),List:x,ListOf:t=>class extends x{get itemClass(){return t}},Record:w,Store:O,StoreOf:t=>class extends O{get recordClass(){return t}},Router:class extends j{constructor(t){super(),this.routes=Object.entries(t).map(([t,e])=>[t,...C(e)]),this.lastMatch=["",null],this._cb=()=>this.route(location.pathname),window.addEventListener("popstate",this._cb),this._cb()}summarize(){return this.lastMatch}go(t,{replace:e=!1}={}){window.location.pathname!==t&&(e?history.replaceState(null,document.title,t):history.pushState(null,document.title,t),this.route(t))}route(t){for(const[e,s,r]of this.routes){const n=s.exec(t);if(null!==n){const t={},s=n.slice(1);r.forEach((e,r)=>t[e]=s[r]),this.lastMatch=[e,t];break}}this.emitEvent()}remove(){window.removeEventListener("popstate",this._cb)}}};"object"==typeof window&&(window.Torus=S),t.exports&&(t.exports=S)},function(t,e,s){const r=t=>null!==t&&"object"==typeof t,n=(t,e)=>t.substr(0,t.length-e.length),o=(t,e)=>{let s=t[0];for(let r=1,n=e.length;r<=n;r++)s+=e[r-1]+t[r];return s};class i{constructor(t){this.idx=0,this.content=t,this.len=t.length}next(){const t=this.content[this.idx++];return void 0===t&&(this.idx=this.len),t}back(){this.idx--}readUpto(t){const e=this.content.substr(this.idx).indexOf(t);return this.toNext(e)}readUntil(t){const e=this.content.substr(this.idx).indexOf(t)+t.length;return this.toNext(e)}toNext(t){const e=this.content.substr(this.idx);if(-1===t)return this.idx=this.len,e;{const s=e.substr(0,t);return this.idx+=t,s}}clipEnd(t){return!!this.content.endsWith(t)&&(this.content=n(this.content,t),!0)}}const c=t=>{let e="";for(let s=0,r=t.length;s{if("!"===(t=t.trim())[0])return{jdom:null,selfClosing:!0};if(!t.includes(" ")){const e=t.endsWith("/");return{jdom:{tag:e?n(t,"/"):t,attrs:{},events:{}},selfClosing:e}}const e=new i(t),s=e.clipEnd("/");let r="",o=!1,l=!1;const a=[];let d=0;const u=t=>{r=r.trim(),(""!==r||t)&&(a.push({type:d,value:r}),o=!1,r="")};for(let t=e.next();void 0!==t;t=e.next())switch(t){case"=":l?r+=t:(u(),o=!0,d=1);break;case" ":l?r+=t:o||(u(),d=0);break;case"\\":l&&(t=e.next(),r+=t);break;case'"':l?(l=!1,u(!0),d=0):1===d&&(l=!0);break;default:r+=t,o=!1}u();let h="";const f={},m={};h=a.shift().value;let p=null,v=a.shift();const b=()=>{p=v,v=a.shift()};for(;void 0!==v;){if(1===v.type){const t=p.value;let e=v.value.trim();if(t.startsWith("on"))m[t.substr(2)]=[e];else if("class"===t)""!==e&&(f[t]=e.split(" "));else if("style"===t){e.endsWith(";")&&(e=e.substr(0,e.length-1));const s={};for(const t of e.split(";")){const e=t.indexOf(":"),r=t.substr(0,e),n=t.substr(e+1);s[c(r.trim())]=n.trim()}f[t]=s}else f[t]=e;b()}else p&&(f[p.value]=!0);b()}return p&&0===p.type&&(f[p.value]=!0),{jdom:{tag:h,attrs:f,events:m},selfClosing:s}},a=t=>{const e=[];let s=null,r=!1;const n=()=>{r&&""===s.trim()||s&&e.push(s),s=null,r=!1},o=t=>{!1===r&&(n(),r=!0,s=""),s+=t};for(let e=t.next();void 0!==e;e=t.next())if("<"===e){if(n(),"/"===t.next()){t.readUntil(">");break}{t.back();const e=l(t.readUpto(">"));t.next(),s=e&&e.jdom,e.selfClosing||null===s||(s.children=a(t))}}else o("&"===e?(i=e+t.readUntil(";"),String.fromCodePoint(+/&#(\w+);/.exec(i)[1])):e);var i;return n(),e},d=new Map,u=/jdom_tpl_obj_\[(\d+)\]/,h=(t,e)=>{if((t=>"string"==typeof t&&t.includes("jdom_tpl_"))(t)){const s=u.exec(t),r=t.split(s[0]),n=s[1],o=h(r[1],e);let i=[];return""!==r[0]&&i.push(r[0]),Array.isArray(e[n])?i=i.concat(e[n]):i.push(e[n]),0!==o.length&&(i=i.concat(o)),i}return""!==t?[t]:[]},f=(t,e)=>{const s=[];for(const n of t)for(const t of h(n,e))r(t)&&v(t,e),s.push(t);const n=s[0],o=s[s.length-1];return"string"==typeof n&&""===n.trim()&&s.shift(),"string"==typeof o&&""===o.trim()&&s.pop(),s},m=(t,e)=>{if(t.length<14)return t;{const s=u.exec(t);if(null===s)return t;if(t.trim()===s[0])return e[s[1]];{const r=t.split(s[0]);return r[0]+e[s[1]]+m(r[1],e)}}},p=(t,e)=>{for(let s=0,r=t.length;s{for(const s of Object.keys(t)){const n=t[s];"string"==typeof n?t[s]=m(n,e):Array.isArray(n)?"children"===s?t.children=f(n,e):p(n,e):r(n)&&v(n,e)}},b=t=>{const e={};let s=0,r=["",""];const n=()=>{"string"==typeof r[1]?e[r[0].trim()]=r[1].trim():e[r[0].trim()]=r[1],r=["",""]};t.readUntil("{");for(let e=t.next();void 0!==e&&"}"!==e;e=t.next()){const o=r[0];switch(e){case'"':case"'":for(r[s]+=e+t.readUntil(e);r[s].endsWith("\\"+e);)r[s]+=t.readUntil(e);break;case":":""===o.trim()||o.includes("&")||o.includes("@")||o.includes(":")?r[s]+=e:s=1;break;case";":s=0,n();break;case"{":t.back(),r[1]=b(t),n();break;default:r[s]+=e}}return""!==r[0].trim()&&n(),e},g=new Map,y={jdom:(t,...e)=>{const s=t.join("jdom_tpl_joiner");try{if(!d.has(s)){const r=e.map((t,e)=>`jdom_tpl_obj_[${e}]`),n=new i(o(t.map(t=>t.replace(/\s+/g," ")),r)),c=a(n)[0],l=typeof c,u=JSON.stringify(c);d.set(s,t=>{if("string"===l)return m(c,t);if("object"===l){const e={},s=JSON.parse(u);return v(Object.assign(e,s),t),e}return null})}return d.get(s)(e)}catch(s){return console.error(`jdom parse error.\ncheck for mismatched brackets, tags, quotes.\n${o(t,e)}\n${s.stack||s}`),""}},css:(t,...e)=>{const s=o(t,e).trim();return g.has(s)||g.set(s,b(new i("{"+s+"}"))),g.get(s)}};"object"==typeof window&&Object.assign(window,y),t.exports&&(t.exports=y)}]); --------------------------------------------------------------------------------