29:null 2a:["$","title",null,{"children":"Combining Form Elements | Fabian Iwand | Observable"}] 2f:T43b,viewof pat_inline = { const o = {}; const view = html`

Step size Horizontal steps:${o.stepX = slider({min:0,max:10,step:1,value:1})}
Vertical steps: ${o.stepY = slider({min:0,max:10,step:1,value:1})}

Margins

Top:
${o.top = html``}
Left:
${o.left = html``} Right:
${o.right = html``}
Bottom:
${o.bottom = html``}

`; view.value = linkViews({}, o); return view; }30:Td2c,viewof ex_color_gradient = { const gradient = html`

`; const controls = [ colorControl('#deffaa', 2, gradient), colorControl('#ffaa00', 39, gradient), colorControl('#ff0000', 100, gradient) ]; const view = html`

${gradient}${controls}`; view.value = linkViews([], controls); view.oninput = () => update(view, controls); gradient.onclick = function(e) { const {width} = this.getBoundingClientRect(); const offset = (e.offsetX / width * 100).toFixed(0); const c = colorControl('#808080', offset, gradient); controls.push(view.appendChild(c)); update(view, controls); view.dispatchEvent(new Event('input')); }; update(view, controls); return view; function update(view, controls) { const c = controls .filter(c => c.parentNode) .sort((a, b) => a.value.offset - b.value.offset); view.value = linkViews([], c); view.style.setProperty('--stops', view.value.map(v => `${v.color} ${+v.offset}%`).join(',')); }; function colorControl(colorValue = '#000000', offsetValue = 0, dragBounds) { const color = html``; const offset = html``; const view = html`${color}${offset}`; view.value = linkViews({}, {color, offset}); view.offset = offset; // Update picker position. offset.oninput = function(e) { if(this.value === '') { e.stopPropagation(); return; } this.value = clamp(0, 100, this.value); view.style.setProperty('--offset', this.value); }; // Detach picker if offset is empty. The parent view will // remove the picker from the list of controls and values. offset.onchange = function() { const p = view.parentNode; if(this.value !== '' || !p) return; p.removeChild(view); p.dispatchEvent(new Event('input')); }; const globalHandlers = { mousemove: (e) => { const {left, width} = dragBounds.getBoundingClientRect(); const o = clamp(0, 1, (e.clientX - left) / width); offset.value = (o * 100).toFixed(1); offset.dispatchEvent(new CustomEvent('input', {bubbles: true})); }, mouseup: removeGlobalHandlers, mouseleave: removeGlobalHandlers, }; let x = 0, y = 0; color.onmousedown = (e) => { x = e.clientX; y = e.clientY; bind(document, globalHandlers); }; color.onclick = (e) => { const dx = Math.abs(e.clientX - x), dy = Math.abs(e.clientY - y); // TODO: Magic number. No idea where the displacement comes from. if(dx > 2 || dy > 2) e.preventDefault(); }; color.ondblclick = (e) => { e.preventDefault(); offset.value = ''; offset.dispatchEvent(new Event('change')); }; invalidation.then(removeGlobalHandlers); return view; function removeGlobalHandlers() { unbind(document, globalHandlers); } } function bind(el, events) { for(let [e, fn] of Object.entries(events)) el.addEventListener(e, fn); } function unbind(el, events) { for(let [e, fn] of Object.entries(events)) el.removeEventListener(e, fn); } function clamp(min, max, value) { return Math.max(min, Math.min(max, value)); } }31:T615,style__ex_color_gradient = html`