Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Study</title>
- <style>
- html,
- body {
- display: flex;
- width: 95%;
- height: 95%;
- min-width: 810px;
- min-height: 410px;
- align-items: center;
- justify-content: center;
- margin: 8px 15px;
- }
- .centered {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- padding: 50px;
- }
- #main {
- width: 100%;
- height: 50%;
- flex-direction: column;
- }
- #rgbContainer {
- width: 100%;
- height: 50%;
- background-color: grey;
- border: 2px solid black;
- }
- .colorBlock {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 30%;
- height: 95%;
- margin: auto;
- border: 4px solid white;
- }
- #red {
- background-color: red;
- }
- #green {
- background-color: green;
- }
- #blue {
- background-color: blue;
- }
- </style>
- </head>
- <body>
- <div id="main" class="centered">
- <div id="rgbContainer" class="centered" tabindex="1">
- <div id="red" class="colorBlock">
- <input id="inRed" type="number" min="0" max="255" step="1" value="0">
- </div>
- <div id="green" class="colorBlock">
- <input id="inGreen" type="number" min="0" max="255" step="1" value="0">
- </div>
- <div id="blue" class="colorBlock">
- <input id="inBlue" type="number" min="0" max="255" step="1" value="0">
- </div>
- </div>
- </div>
- <script>
- 'use strict'
- class ColorPicker {
- constructor() {
- this._red = 0;
- this._green = 0;
- this._blue = 0;
- this._active = 'none';
- }
- static deltaQ = 10;
- static colorElements = ['red', 'green', 'blue'];
- static inElements = ['inRed', 'inGreen', 'inBlue'];
- get red() { return this._red; }
- get green() { return this._green; }
- get blue() { return this._blue; }
- get active() { return this._active; }
- set red(val) { this._red = Math.min(Math.max(0, val), 255); this._updateColor(); this._updateNumbers();}
- set green(val) { this._green = Math.min(Math.max(0, val), 255); this._updateColor(); this._updateNumbers();}
- set blue(val) { this._blue = Math.min(Math.max(0, val), 255); this._updateColor(); this._updateNumbers();}
- set active(val) { this._active = val; this._setActive(this._active); }
- _updateColor() {
- const rgbContainer = document.getElementById('rgbContainer');
- rgbContainer.style.backgroundColor = `rgb(${this.red}, ${this.green}, ${this.blue})`;
- }
- _updateNumbers() {
- document.getElementById('inRed').value = this.red;
- document.getElementById('inGreen').value = this.green;
- document.getElementById('inBlue').value = this.blue;
- }
- _setActive(color) {
- for (let colorId of ColorPicker.colorElements) {
- if (colorId != color) { document.getElementById(colorId).style.borderStyle = 'solid'; };
- if (colorId == color) { document.getElementById(colorId).style.borderStyle = 'dotted'; };
- }
- };
- _cycleActive(dir = 1) {
- if (this.active == 'none') { this.active = 'red'; return; }
- let activeId = ColorPicker.colorElements.indexOf(this.active);
- activeId += dir;
- if (activeId > 2) { activeId = 0; }
- if (activeId < 0) { activeId = 2; }
- this.active = ColorPicker.colorElements[activeId];
- }
- _addActiveColor(val) {
- let color = this.active == 'none' ? 'red' : this.active;
- this[color] += val;
- }
- handleEvent(event) {
- this[`on${event.type[0].toUpperCase()}${event.type.slice(1)}`](event);
- }
- onClick(event) {
- this._cycleActive();
- }
- onKeydown(event) {
- if (event.target.id == 'rgbContainer') {
- if (event.code == 'ArrowRight') { this._cycleActive(1); }
- if (event.code == 'ArrowLeft') { this._cycleActive(-1); }
- if (event.code == 'ArrowUp') { this._addActiveColor(10); }
- if (event.code == 'ArrowDown') { this._addActiveColor(-10); }
- }
- }
- onChange(event) {
- const inColor = event.target.id;
- if (ColorPicker.inElements.includes(inColor)) {
- let color = inColor.slice(2).toLowerCase();
- this[color] = parseInt(event.target.value);
- }
- }
- onWheel(event) {
- const color = event.target.id;
- if (ColorPicker.colorElements.includes(color)) {
- event.preventDefault();
- this[color] += (event.deltaY > 0 ? -ColorPicker.deltaQ : ColorPicker.deltaQ);
- }
- if (color == 'rgbContainer') {
- event.preventDefault();
- for (let colorId of ColorPicker.colorElements) {
- this[colorId] += (event.deltaY > 0 ? -ColorPicker.deltaQ : ColorPicker.deltaQ);
- }
- }
- }
- onMouseover(event) {
- const classList = event.target.classList;
- if (classList.contains('colorBlock')) {
- this.active = event.target.id;
- }
- }
- onMouseout(event) {
- const classList = event.target.classList;
- if (classList.contains('colorBlock')) {
- this.active = 'none';
- }
- }
- }
- const rgbContainer = document.getElementById('rgbContainer');
- let colorPicker = new ColorPicker();
- rgbContainer.addEventListener('wheel', colorPicker);
- rgbContainer.addEventListener('click', colorPicker);
- rgbContainer.addEventListener('change', colorPicker);
- rgbContainer.addEventListener('keydown', colorPicker);
- rgbContainer.addEventListener('mouseover', colorPicker);
- rgbContainer.addEventListener('mouseout', colorPicker);
- //const red = document.getElementById('red');
- //const green = document.getElementById('green');
- //const blue = document.getElementById('blue');
- //rgbContainer.addEventListener('mouseenter', (event) => { console.log(`Mouseenter -> ${event.target.id}`) });
- //rgbContainer.addEventListener('mouseleave', (event) => { console.log(`Mouseleave -> ${event.target.id}`) });
- //rgbContainer.addEventListener('mouseover', (event) => { console.log(`Mouseover -> ${event.target.id}`) });
- //rgbContainer.addEventListener('mouseout', (event) => { console.log(`Mouseout -> ${event.target.id}`) });
- //red.addEventListener('mouseenter', (event) => { console.log(`Mouseenter -> ${event.target.id}`) });
- //red.addEventListener('mouseleave', (event) => { console.log(`Mouseleave -> ${event.target.id}`) });
- //red.addEventListener('mouseover', (event) => { console.log(`Mouseover -> ${event.target.id}`) });
- //red.addEventListener('mouseout', (event) => { console.log(`Mouseout -> ${event.target.id}`) });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement