30:T5f0,viewof HoldButton = { let view = html` `; yield view; // Hold button with mouse / select with tab and hold spacebar let duration = 1600, success = button => { //Success function button.classList.add('success'); }; document.querySelectorAll('.button-hold').forEach(button => { button.style.setProperty('--duration', duration + 'ms'); ['mousedown', 'touchstart', 'keypress'].forEach(e => { button.addEventListener(e, ev => { if ( e != 'keypress' || (e == 'keypress' && ev.which == 32 && !button.classList.contains('process')) ) { button.classList.add('process'); button.timeout = setTimeout(success, duration, button); } }); }); ['mouseup', 'mouseout', 'touchend', 'keyup'].forEach(e => { button.addEventListener( e, ev => { if (e != 'keyup' || (e == 'keyup' && ev.which == 32)) { button.classList.remove('process'); clearTimeout(button.timeout); } }, false ); }); }); }31:T157e,html``32:T87b,ToggleExplanation = md` This effect is styling only the <label> element to look like a toggle switch, and hiding the actual <input> checkbox by positioning it offscreen. When clicking the label associated with the <input> element, it sets the <input> checkbox into the :checked state. The for attribute associates the <label> with the appropriate <input> checkbox element by its id. .switch::after defines a pseudo-element for the <label> to create the circular knob. input[type='checkbox']:checked + .switch::after targets the <label>'s pseudo-element's style when the checkbox is checked. transform: translateX(20px) moves the pseudo-element (knob) 20px to the right when the checkbox is checked. background-color: #7983ff; sets the background-color of the switch to a different color when the checkbox is checked. .offscreen moves the <input> checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it is accessible via keyboard and screen readers. transition: all 0.3s specifies all property changes will be transitioned over 0.3 seconds, therefore transitioning the <label>'s background-color and the pseudo-element's \`transform\` property when the checkbox is checked.`33:[] 2e:{"title":"Quick CSS","cells":[{"id":0,"value":"md`# Quick CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`---\n## 3-Dot Loader`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"Loader = {\n let view = html`\n

\n`;\n\n yield view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`---\n## Hamburger Menu`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"viewof TripleStripe = {\n let refId = DOM.uid('hamburger-menu');\n let view = html`\n

`;\n view.value = true;\n yield view;\n\n d3.select(view).on('click', function() {\n let activeState = d3.select(this).classed('active');\n // if (activeState === true) {\n d3.select(this)\n .selectAll('div')\n .classed('close', !activeState);\n d3.select(this).classed('active', !activeState);\n view.value = activeState;\n view.value = view.dispatchEvent(new CustomEvent('input'));\n\n // }\n });\n\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"TripleStripe","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`---\n## Hover Tooltip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"viewof Tooltip = {\n let refId = DOM.uid('popout-tooltip');\n let view = html`\n

Popout menu

`;\n\n view.value = [0, 0];\n\n yield view;\n\n d3.select(view).on('mousemove', function() {\n let points = [...d3.mouse(this).map(x => ~~x)];\n\n d3.select(this)\n .select('.popout-tooltip')\n .html(points);\n view.value = points;\n view.value = view.dispatchEvent(new CustomEvent('input'));\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"mouse_position = Tooltip","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`\n\n---\n## Dynamic Shadow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"ColoredShadow = {\n let view = html`

`;\n\n yield view;\n \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`## Thin Border`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"ThinBorder = {\n let view = html`

text

`;\n\n yield view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`---\n## Hover Gradient Button`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"HoverGradientButton = {\n let button = html``;\n\n yield button;\n\n button.onmousemove = function(e) {\n var rect = e.target.getBoundingClientRect();\n var x = e.clientX - rect.left;\n var y = e.clientY - rect.top;\n button.style.setProperty('--x', x + 'px');\n button.style.setProperty('--y', y + 'px');\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"md`## Long Press / Hold Button`","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"md`---\n## CHECKBOX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"Toggle","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"mutable view = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":700,"value":"Toggle","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"viewof Toggle = {\n let view = html`\n

\n \n \n

`;\n view.value = false;\n yield view;\n\n d3.select(view).on('click', function() {\n let input = d3.select(this).select('input');\n let activeState = input.property('checked');\n input.property('checked', function() {\n activeState === false ? false : true;\n });\n view.value = activeState;\n view.dispatchEvent(new CustomEvent('input'));\n });\n yield view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"md`\n---\n## Absolute Centered Child`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"CenteredContent = html`\n

Centered content

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"md`---\n## Grid Centered`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"GridCentering = html`

Centered content.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`---\n## Vertically Centered`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"VerticallyCentered = html`\n

Vertically Centered

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`---\n## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}