visbug-lib
Version:
<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a> <a href
156 lines (139 loc) • 4.13 kB
JavaScript
/* source: https://github.com/hail2u/color-blindness-emulation */
const FILTERS = `
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<defs>
<filter id="protanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.567, 0.433, 0, 0, 0
0.558, 0.442, 0, 0, 0
0, 0.242, 0.758, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="protanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.817, 0.183, 0, 0, 0
0.333, 0.667, 0, 0, 0
0, 0.125, 0.875, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="deuteranopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.625, 0.375, 0, 0, 0
0.7, 0.3, 0, 0, 0
0, 0.3, 0.7, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="deuteranomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.8, 0.2, 0, 0, 0
0.258, 0.742, 0, 0, 0
0, 0.142, 0.858, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="tritanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.95, 0.05, 0, 0, 0
0, 0.433, 0.567, 0, 0
0, 0.475, 0.525, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="tritanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.967, 0.033, 0, 0, 0
0, 0.733, 0.267, 0, 0
0, 0.183, 0.817, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="achromatopsia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.299, 0.587, 0.114, 0, 0
0.299, 0.587, 0.114, 0, 0
0.299, 0.587, 0.114, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="achromatomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.618, 0.320, 0.062, 0, 0
0.163, 0.775, 0.062, 0, 0
0.163, 0.320, 0.516, 0, 0
0, 0, 0, 1, 0"/>
</filter>
</defs>
</svg>
`
const types = [
'protanopia',
'protanomaly',
'deuteranopia',
'deuteranomaly',
'tritanopia',
'tritanomaly',
'achromatopsia',
'achromatomaly',
]
export const commands = [
'colorblind',
'simulate-colorblind',
...types,
]
const state = {
filters_injected: false,
}
const makeFilterSVGNode = () => {
const node = document.createElement('div')
node.innerHTML = FILTERS
return node.firstElementChild
}
const makeSelectMenu = query => {
const node = document.createElement('select')
node.innerHTML = types
.map(type =>
`<option id="${type}">${type}</option>`)
.join('')
if (!query.includes('colorblind'))
node.querySelector(`#${query}`)
.selected = 'selected'
node.style = `
position: fixed;
top: 10px;
right: 10px;
z-index: 999999999;
`
node.setAttribute('size', types.length)
node.addEventListener('input', e =>
document.body.style.filter = `url(#${e.target.value})`)
return node
}
export default async function({selected, query}) {
query = query.slice(1, query.length)
// only inject filters once
if (!state.filters_injected) {
const filters = makeFilterSVGNode()
const select = makeSelectMenu(query)
document.body.appendChild(filters)
document.body.appendChild(select)
state.filters_injected = true
}
query.includes('colorblind')
? document.body.style.filter = `url(#${types[0]})`
: document.body.style.filter = `url(#${query})`
}