You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

105 lines
3.1 KiB

const body = document.querySelector('body')
const count = document.createElement('div')
count.className = 'count'
count.textContent = 'hsl(0, 50%, 0%)'
const hueText = document.createElement('div')
hueText.className = 'text hue'
hueText.textContent = 'hue'
const luminosityText = document.createElement('div')
luminosityText.className = 'text luminosity'
luminosityText.textContent = 'luminosity'
const origin = document.createElement('div')
origin.className = 'text origin'
const picked = document.createElement('div')
picked.className = 'text picked'
picked.textContent = 'Color successfully picked!'
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg.setAttributeNS(
'http://www.w3.org/2000/xmlns/',
'xmlns:xlink',
'http://www.w3.org/1999/xlink',
)
svg.setAttribute('width', window.innerWidth)
svg.setAttribute('height', window.innerHeight)
svg.setAttribute('viewBox', `0 0 ${window.innerWidth} ${window.innerHeight}`)
const axisX = document.createElementNS('http://www.w3.org/2000/svg', 'line')
axisX.setAttribute('y1', window.innerHeight)
axisX.setAttribute('y2', 0)
svg.append(axisX)
const axisY = document.createElementNS('http://www.w3.org/2000/svg', 'line')
axisY.setAttribute('x1', window.innerWidth)
axisY.setAttribute('x2', 0)
svg.append(axisY)
body.append(count, hueText, luminosityText, origin, picked, svg)
export const pick = () => {
document.addEventListener('mousemove', (e) => set(e))
setTimeout(
() => document.removeEventListener('mousemove', (e) => set(e)),
500,
)
body.addEventListener('click', click)
setTimeout(() => document.removeEventListener('click', click), 500)
body.addEventListener('copy', copy)
setTimeout(() => document.removeEventListener('copy', copy), 500)
}
const click = (e) => {
document.execCommand('copy')
const wave = document.createElement('div')
wave.className = 'wave'
wave.style.top = `${e.clientY - 10}px`
wave.style.left = `${e.clientX - 10}px`
body.append(wave)
setTimeout(() => wave.remove(), 150)
}
const copy = (event) => {
event.preventDefault()
if (event.clipboardData) {
event.clipboardData.setData('text/plain', count.textContent)
picked.classList.add('fade-in')
setTimeout(() => picked.classList.remove('fade-in'), 1000)
}
}
const calc = (number, max) =>
Math.round(Math.min(max, Math.max(0, max * number)))
const set = ({ clientX, clientY }) => {
const { innerWidth, innerHeight } = window
const padding = 100
const mouseX = clientX - padding
const mouseY = clientY - padding
const hue = calc(mouseX / (innerWidth - padding * 2), 360)
const luminosity = calc(mouseY / (innerHeight - padding * 2), 100)
const color = `hsl(${hue}, 50%, ${luminosity}%)`
axisX.setAttribute('x1', clientX)
axisX.setAttribute('x2', clientX)
axisY.setAttribute('y1', clientY)
axisY.setAttribute('y2', clientY)
axisX.setAttribute('stroke', color)
axisY.setAttribute('stroke', color)
body.style.color = color
body.style.background = color
origin.style.background = color
count.textContent = color
hueText.textContent = `hue\n${hue}`
luminosityText.textContent = `${luminosity}\nluminosity`
}