Created
August 12, 2021 02:36
-
-
Save all12jus/964c7f205687764ce1b51f6ae2ed53c4 to your computer and use it in GitHub Desktop.
Rough Draft 1 of Toggle-Switch Custom Element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
customElements.define('toggle-switch', class extends HTMLElement { | |
lerp (start, end, amt){ | |
return (1-amt)*start+amt*end; | |
} | |
currentX = 0; | |
value = true; | |
// labelText = "Label"; | |
constructor() { | |
super(); | |
this.attachShadow({mode: 'open'}); | |
const wrapper = document.createElement('div'); | |
wrapper.setAttribute('class','wrapper'); | |
// const icon = wrapper.appendChild(document.createElement('span')); | |
// icon.innerText = ""; | |
// icon.setAttribute('class','icon'); | |
// icon.setAttribute('tabindex', 0); | |
const canvas = document.createElement("canvas"); | |
canvas.width = 100; | |
canvas.height = 50; | |
wrapper.appendChild(canvas); | |
const ctx = canvas.getContext('2d'); | |
// ctx.fillStyle = 'rgb(200, 0, 0)'; | |
// ctx.fillRect(0, 0, 50, 50); | |
const draw = () => { | |
ctx.clearRect(0,0, canvas.width, canvas.height); | |
ctx.beginPath() | |
ctx.ellipse(canvas.width / 2, canvas.height / 2, (canvas.width-1) /2 , (canvas.height-1) / 2, 0, 0, 2 * Math.PI); | |
ctx.stroke() | |
ctx.beginPath(); | |
// ctx.moveTo(canvas.width/2, canvas.height/2); | |
if (this.value){ | |
ctx.fillStyle = 'rgb(000, 200, 0)'; | |
// ctx.ellipse((canvas.width-10) / 2, (canvas.height-10) / 2, (canvas.width-21) /2 , (canvas.height-21) / 2, 0, 0, 2 * Math.PI); | |
// ctx.fillRect(0, 0, canvas.width, canvas.height); | |
// ctx.fill() | |
} else { | |
ctx.fillStyle = 'rgb(200, 200, 200)'; | |
// ctx.fillRect(0, 0, canvas.width, canvas.height); | |
} | |
// ctx.moveTo(0,0); | |
ctx.ellipse((canvas.width) / 2, (canvas.height) / 2, (canvas.width-5) /2 , (canvas.height-5) / 2, 0, 0, 2 * Math.PI); | |
ctx.fill() | |
// ctx.fillStyle = 'rgb(200, 0, 0)'; | |
// ctx.fillRect(0, 0, 50, 50); | |
// TODO: draw circle | |
ctx.beginPath(); | |
const onPos = (canvas.width / 3) * 2; | |
const offPost = canvas.width / 3; | |
const currentTime = Date.now()/1000; | |
this.currentX = this.lerp(this.currentX, ((this.value) ? onPos : offPost), 0.2); | |
console.log(this.currentX) | |
// TODO: calculate the x value | |
// const X = ((this.value) ? 2 : 1) * canvas.width / 3; | |
// this is the one position value I wanna lerp with animation to make it be a smooth change | |
// should also make the fill color also change for the elipse around it. | |
ctx.arc(this.currentX, canvas.height / 2, (canvas.height - 15)/2, 0, 2 * Math.PI, false); | |
ctx.stroke(); | |
ctx.fillStyle = "rgb(255, 255, 255)" | |
ctx.fill(); | |
requestAnimationFrame(draw); | |
} | |
// could also impliment the dragging when in the canvas to move the handle. | |
const info = wrapper.appendChild(document.createElement('span')); | |
info.setAttribute('class','info'); | |
// Take attribute content and put it inside the info span | |
info.textContent = this.getAttribute('data-text'); | |
const style = document.createElement('style'); | |
style.textContent = '.wrapper { cursor: pointer; ' + | |
'-webkit-touch-callout: none; /* iOS Safari */\n' + | |
' -webkit-user-select: none; /* Safari */\n' + | |
' -khtml-user-select: none; /* Konqueror HTML */\n' + | |
' -moz-user-select: none; /* Old versions of Firefox */\n' + | |
' -ms-user-select: none; /* Internet Explorer/Edge */\n' + | |
' user-select: none; /* Non-prefixed version, currently\n' + | |
' supported by Chrome, Edge, Opera and Firefox */' + | |
'}' + | |
'canvas { height: 1em; vertical-align: middle; }' + | |
'span {vertical-align: baseline;}' + | |
'' + | |
'' + | |
''; | |
// CSS truncated for brevity | |
// add no select | |
// attach the created elements to the shadow DOM | |
this.shadowRoot.append(style,wrapper); | |
this.addEventListener('click', () => { | |
this.value = !this.value; | |
// this.innerText = ((this.value) ? "(Y)" : "(N)") + this.labelText; | |
// icon.innerText = (this.value) ? "(Y)" : "(N)"; | |
// draw(); | |
}); | |
// this.innerText = ((this.value) ? "(Y)" : "(N)") + this.labelText;/**/ | |
// icon.innerText = (this.value) ? "(Y)" : "(N)"; | |
draw(); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment