Published
Edited
Nov 21, 2020
md`# Chunk`
dObject = ({
"$schema":$schema,
"description":description,
"background":background})
varToString = varObj => Object.keys(varObj)[0]
$schema = ({"input":[{"type":"url","value":"https://vega.github.io/schema/vega/v5.json","required":true}]})
description = ({"input":[{"type":"string","required":false}]})
background = ({"input":[{"type":"color","required":false},{"type":signal,"required":false}]})
signal =({"signal":{"input":[{"type":"string","required":false}]}})
function removeAll2Child(div){
let childNodes = div.childNodes
while(div.childNodes.length>1){
div.childNodes[1].remove()
}
}
function clearInner(node) {
function clear(node) {
while (node.hasChildNodes()) {
clear(node.firstChild);
}
//node.removeChild(node.firstChild);
node.remove()
console.log(node, "cleared!");
}
while (node.hasChildNodes()) {
clear(node.firstChild);
}
}
function InputColor(config = {}){
let {
value = "#d3e8d4",
label,
required=false,
onInput
} = typeof config === "string" ? { value: config } : config;
let C = html`<span id="editor" class="observablehq--string"></span>`
let L = label?html`<label for="InputText" >${label} :</label>`:false
let I = html`<input type="color" id="InputColor" name="InputColor" value="${value}" class="" ${required?'required':''}>`
let R = required?html`${required?'<span class="red">required</span>':''}`:false
let E = html`<span id="ErrMsg" class="block"></span>`
I.addEventListener('input', onInput)
if(L)C.append(L)
C.append(I)
if(R)C.append(R)
C.append(E)
return C
}
function InputText(config = {}){
let {
value='',
label,
required=false,
onInput,
onKeyDown
} = typeof config === "string" ? { value: config } : config;
let C = html`<span id="editor" class="observablehq--string"></span>`
let L = label?html`<label for="InputText" >${label} :</label>`:false
let I = html`<input type="text" id="InputText" name="InputText" value="${value}" class="" ${required?'required':''}>`
let R = required?html`${required?'<span class="red">required</span>':''}`:false
let E = html`<span id="ErrMsg" class="block"></span>`
I.addEventListener('input', onInput)
if(onKeyDown)I.onkeydown=onKeyDown;
debugger;
if(L)C.append(L)
C.append(I)
if(R)C.append(R)
C.append(E)
return C
}
function InputList(config = {}){
let {
value='',
label,
required=false,
onInput,
props = ['a','b','c']
} = typeof config === "string" ? { value: config } : config;
let C = html`<span id="editor" class="observablehq--key"> </span>`
let L = label?html`<label for="InputList" >${label} :</label>`:false
let I = html`<input list="DataList" id="InputList" value="${value}">`
let D = `<datalist id="DataList">`
let E = html`<span id="ErrMsg" class="block"></span>`
for (const prop of Object.values(props)){
D+=`<option value="${prop}">`
}
D+=`</datalist>`
//debugger;
I.addEventListener('input', onInput)
if(L)C.append(L)
C.append(I)
C.append(E)
C.append(html`${D}`)
//debugger;
return C
}
x = InputList({required:true})
html`⯈`
html`⯆`
Primitive = ({undefined:undefined,boolean:true,number:10, string:"String",bigint: 10n,symbol:Symbol("Sym") })
Sym = Symbol('sym')
typeof undefined
primitive = ['undefined','boolean','number','string','bigint','symbol']
primitive.includes(typeof null)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
