3e:null 3f:["$","title",null,{"children":"Chunk | binarmaya | Observable"}] 45:T10b9,class child{ //will create html structure like this: // //or expanded //--> this.Container // Object { //or Array // list of div field or list of span depend on expand or collaps // .. // constructor(o,c){ this.SpecDef = o this.c = c//refer to child class for recursive process this.CopySpec = Object.assign({},o) this.Container = html`` //this.key = html`Vega Spec = ` this.Caret = html`${isObject(o)?'Object {':`Array(${o.length}) [`}` //debugger; this.Expanded = true this.CollapsAll = true this.Caret.addEventListener('click',event=>{ debugger; if(this.Expanded){ this.Collaps() debugger; this.Expanded = false } else { this.Expand() debugger; this.Expanded = true } }) this.El = {} this.Spread(this.CopySpec) } ContainerClass(c){ switch(c){ case 'expand': c = 'observablehq--expanded' break; case 'collaps': c = 'observablehq--collapsed' break; default: c = 'observablehq--expanded' } return this.Container.className = c } Spread(KeyVal){ for(const [key,val] of Object.entries(KeyVal)){ let kEl = html` ${key}` let cEl let _child //let type //to do check type of value first., --> 1. Primitive, 2. Object, 3. Array,. 4. Other if(primitive.includes(typeof val)){ cEl = html`${typeof val==='symbol'?val.toString():val}` //type='primitive' } else if(isObject(val)){ //if Object -- to do _child = new this.c(val,this.c) cEl = _child.Expand() //type='object' } else if(Array.isArray(val)){ //if Array -- to do _child = new this.c(val,this.c) cEl = _child.Expand() //type='array' } this.El[key] = {'key':kEl,'val':cEl}//,'type':type} } } Expand(){ //debugger; removeAll2Child(this.Container) //debugger; //clearInner(this.Caret.firstElementChild) this.Caret.firstElementChild.replaceChildren(html` ⯆`) this.Container.append(this.Caret) this.ContainerClass('expand') let i = 0 for(const [k,{key,val}] of Object.entries(this.El)){ //debugger; i++ this.Container.append(field(key,val)) if(i==Object.keys(this.El).length){ //debugger; isNaN(k)?this.Container.append('}'):this.Container.append(']') //debugger; } } //debugger; return this.Container } Collaps(){ //debugger; removeAll2Child(this.Container) //clearInner(this.Caret.firstElementChild) this.Caret.firstElementChild.replaceChildren(html` ⯈ `) //this.Container.append(this.Caret) this.ContainerClass('collaps') //debugger; let i = 0 let type //object or array based on string or number of k -- key for(const [k,{key,val}] of Object.entries(this.El)){ debugger; i++ key.innerText=key.innerText.replace(/^\s\s/g, '') this.Container.append(key) this.Container.append(': ') if(this.CollapsAll&&val.childNodes.length>1){ if(val.childNodes[0].lastChild.innerText.includes('Object')){ this.Container.append(val.childNodes[0].lastChild.innerText.replace('{','')) debugger; } else if(val.childNodes[0].lastChild.innerText.includes('Array')){ this.Container.append(val.childNodes[0].lastChild.innerText.replace('[','')) debugger; } } else { this.Container.append(val) } if(i!==Object.keys(this.El).length){debugger;this.Container.append(', ')} if(i==Object.keys(this.El).length){ debugger; isNaN(k)?this.Container.append('}'):this.Container.append(']') debugger; } } //debugger; return this.Container } }46:[] 43:{"id":"440efe625fd8d919","slug":"chunk","title":"Chunk","thumbnail":"7c703cbe66aa66b3b79371bf25b3f47117599477d09b9fce3fb851ca7a4c613f","access_level":"public","create_time":"$D2020-11-04T09:41:57.924Z","update_time":"$D2020-11-21T08:37:04.179Z","view_time":null,"first_public_time":"$D2020-11-21T08:37:13.325Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c2128fd74bbc32eb","login":"binarmaya","name":"","avatar_url":"https://avatars-next.observableusercontent.com/60e192fcf5564319c76497a81fea4ba9f8013d2de90bcad3b62e68e008003907","tier":"starter_2024","bio":""},"version":253,"publish_version":253,"role":null,"authored":false,"authors":[{"type":"individual","id":"72bf76a3ed4ecf8c","login":"binarmaya","name":"","avatar_url":"https://avatars-next.observableusercontent.com/60e192fcf5564319c76497a81fea4ba9f8013d2de90bcad3b62e68e008003907","tier":null,"bio":""}],"members":[{"type":"individual","id":"72bf76a3ed4ecf8c","login":"binarmaya","name":"","avatar_url":"https://avatars-next.observableusercontent.com/60e192fcf5564319c76497a81fea4ba9f8013d2de90bcad3b62e68e008003907","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Chunk","cells":[{"id":0,"value":"md`# Chunk`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"dObject = ({\n \"$schema\":$schema,\n \"description\":description, \n \"background\":background})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"function field(k,v){\n let D = html`

`\n if(!k.innerText.match(/^\\s\\s/g))k.innerText = ' '.concat(k.innerText);\n D.append(k)\n D.append(': ')\n D.append(v)\n return D\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"function master(o,c){ \n let P = new c(o,c)\n let C = html``\n let D = html`${varToString({o})} = `\n let Q = P.Expand() \n C.append(D)\n C.append(Q)\n \n return C\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"master(dObject,child)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"varToString = varObj => Object.keys(varObj)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$$schema = ({\"input\":[{\"type\":\"url\",\"value\":\"https://vega.github.io/schema/vega/v5.json\",\"required\":true}]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"description = ({\"input\":[{\"type\":\"string\",\"required\":false}]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"background = ({\"input\":[{\"type\":\"color\",\"required\":false},{\"type\":signal,\"required\":false}]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"signal =({\"signal\":{\"input\":[{\"type\":\"string\",\"required\":false}]}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function isObject(obj) {\n //return obj === Object(obj);\n return typeof obj==='object' && !Array.isArray(obj)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"function removeAllChild(div){\n while (div.firstChild) {\n //The list is LIVE so it will re-index each call\n div.removeChild(div.firstChild);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"function removeAll2Child(div){\n let childNodes = div.childNodes\n while(div.childNodes.length>1){\n div.childNodes[1].remove()\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"function clearInner(node) {\n function clear(node) {\n while (node.hasChildNodes()) {\n clear(node.firstChild);\n }\n //node.removeChild(node.firstChild);\n node.remove()\n console.log(node, \"cleared!\");\n}\n \n while (node.hasChildNodes()) {\n clear(node.firstChild);\n } \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function InputColor(config = {}){\n let {\n value = \"#d3e8d4\",\n label,\n required=false,\n onInput\n } = typeof config === \"string\" ? { value: config } : config;\n \n let C = html``\n let L = label?html`${label} :`:false\n let I = html``\n let R = required?html`${required?'required':''}`:false\n let E = html``\n \n I.addEventListener('input', onInput)\n if(L)C.append(L)\n C.append(I)\n if(R)C.append(R)\n C.append(E)\n \n return C\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function InputText(config = {}){\n let {\n value='',\n label,\n required=false,\n onInput,\n onKeyDown\n } = typeof config === \"string\" ? { value: config } : config;\n let C = html``\n let L = label?html`${label} :`:false\n let I = html``\n let R = required?html`${required?'required':''}`:false\n let E = html``\n \n I.addEventListener('input', onInput)\n if(onKeyDown)I.onkeydown=onKeyDown;\n debugger;\n if(L)C.append(L)\n C.append(I)\n if(R)C.append(R)\n C.append(E)\n \n return C\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function InputList(config = {}){\n let {\n value='',\n label,\n required=false,\n onInput,\n props = ['a','b','c']\n } = typeof config === \"string\" ? { value: config } : config;\n let C = html` ` \n let L = label?html`${label} :`:false\n let I = html``\n let D = ``\n let E = html``\n for (const prop of Object.values(props)){\n D+=``\n //debugger;\n I.addEventListener('input', onInput)\n \n if(L)C.append(L)\n C.append(I)\n C.append(E)\n C.append(html`${D}`)\n //debugger;\n return C\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"x = InputList({required:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"html`⯈`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"html`⯆`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"Primitive = ({undefined:undefined,boolean:true,number:10, string:\"String\",bigint: 10n,symbol:Symbol(\"Sym\") })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"Sym = Symbol('sym')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"typeof undefined","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"primitive = ['undefined','boolean','number','string','bigint','symbol']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"primitive.includes(typeof null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"