(main, callback)
| 42 | |
| 43 | export default class ColorPicker { |
| 44 | constructor(main, callback) { |
| 45 | this.callback = callback; |
| 46 | this.main = main; |
| 47 | this.w = 180; |
| 48 | this.h = 150; |
| 49 | const w = this.w; |
| 50 | const h = this.h; |
| 51 | this.lightPosition = this.w - 1; |
| 52 | this.wrapper = main.wrapper.querySelector('.ptro-color-widget-wrapper'); |
| 53 | this.input = main.wrapper.querySelector('.ptro-color-widget-wrapper .ptro-color'); |
| 54 | this.pipetteButton = main.wrapper.querySelector('.ptro-color-widget-wrapper button.ptro-pipette'); |
| 55 | this.closeButton = main.wrapper.querySelector('.ptro-color-widget-wrapper button.ptro-close-color-picker'); |
| 56 | this.canvas = main.wrapper.querySelector('.ptro-color-widget-wrapper canvas'); |
| 57 | this.ctx = this.canvas.getContext('2d'); |
| 58 | |
| 59 | this.canvasLight = main.wrapper.querySelector('.ptro-color-widget-wrapper .ptro-canvas-light'); |
| 60 | this.colorRegulator = main.wrapper.querySelector('.ptro-color-widget-wrapper .ptro-color-light-regulator'); |
| 61 | |
| 62 | this.canvasAlpha = main.wrapper.querySelector('.ptro-color-widget-wrapper .ptro-canvas-alpha'); |
| 63 | this.alphaRegulator = main.wrapper.querySelector('.ptro-color-widget-wrapper .ptro-color-alpha-regulator'); |
| 64 | |
| 65 | this.ctxLight = this.canvasLight.getContext('2d'); |
| 66 | this.ctxAlpha = this.canvasAlpha.getContext('2d'); |
| 67 | this.canvas.setAttribute('width', `${w}`); |
| 68 | this.canvas.setAttribute('height', `${h}`); |
| 69 | this.canvasLight.setAttribute('width', `${w}`); |
| 70 | this.canvasLight.setAttribute('height', `${20}`); |
| 71 | this.canvasAlpha.setAttribute('width', `${w}`); |
| 72 | this.canvasAlpha.setAttribute('height', `${20}`); |
| 73 | const palette = this.ctx.createLinearGradient(0, 0, w, 0); |
| 74 | palette.addColorStop(1 / 15, '#ff0000'); |
| 75 | palette.addColorStop(4 / 15, '#ffff00'); |
| 76 | palette.addColorStop(5 / 15, '#00ff00'); |
| 77 | palette.addColorStop(9 / 15, '#00ffff'); |
| 78 | palette.addColorStop(12 / 15, '#0000ff'); |
| 79 | palette.addColorStop(14 / 15, '#ff00ff'); |
| 80 | this.ctx.fillStyle = palette; |
| 81 | this.ctx.fillRect(0, 0, w, h); |
| 82 | |
| 83 | const darkOverlay = this.ctx.createLinearGradient(0, 0, 0, h); |
| 84 | darkOverlay.addColorStop(0, 'rgba(0, 0, 0, 0)'); |
| 85 | darkOverlay.addColorStop(0.99, 'rgba(0, 0, 0, 1)'); |
| 86 | darkOverlay.addColorStop(1, 'rgba(0, 0, 0, 1)'); |
| 87 | this.ctx.fillStyle = darkOverlay; |
| 88 | this.ctx.fillRect(0, 0, w, h); |
| 89 | |
| 90 | this.closeButton.onclick = () => { |
| 91 | this.close(); |
| 92 | }; |
| 93 | this.pipetteButton.onclick = () => { |
| 94 | this.wrapper.setAttribute('hidden', 'true'); |
| 95 | this.opened = false; |
| 96 | this.choosing = true; |
| 97 | }; |
| 98 | |
| 99 | this.input.onkeyup = () => { |
| 100 | this.setActiveColor(this.input.value, true); |
| 101 | }; |
nothing calls this directly
no test coverage detected