Added first init fields and listeners

parent 515d76a0
#Directories
!node_modules
#File formats
*.js
*.js.*
\ No newline at end of file
import {init} from "./init";
class index {
constructor() {
new init();
}
}
new index();
\ No newline at end of file
/**
* @class init
*/
export class init {
/**
* @constructor
*/
constructor() {
document.body.appendChild(this.initRGBInputs());
document.body.appendChild(this.initCMYKInputs());
this.initInputListeners();
}
private initRGBInputs() {
const rgbContainer: HTMLDivElement = document.createElement("div");
rgbContainer.appendChild(this.createRgbContainer("R"));
rgbContainer.appendChild(this.createRgbContainer("G"));
rgbContainer.appendChild(this.createRgbContainer("B"));
return rgbContainer;
}
private initCMYKInputs() {
const cmykContainer: HTMLDivElement = document.createElement("div");
cmykContainer.appendChild(this.createCmykContainer("C"));
cmykContainer.appendChild(this.createCmykContainer("M"));
cmykContainer.appendChild(this.createCmykContainer("Y"));
cmykContainer.appendChild(this.createCmykContainer("K"));
return cmykContainer;
}
/**
* Initializes all input listeners
*/
private initInputListeners() {
const inputs: HTMLCollectionOf<HTMLInputElement> = document.getElementsByTagName("input");
//Add limit checks
for (let i = 0; i < inputs.length; i++) {
const input: HTMLInputElement = inputs[i];
input.addEventListener("keydown", (e: KeyboardEvent) => {
console.log("Event => ", e);
console.log("Current Value => ", input.value);
});
input.addEventListener("keyup", (e: KeyboardEvent) => {
console.log("Event => ", e);
console.log("Current Value => ", input.value);
const value: number = parseInt(input.value);
if (value > parseInt(input.max) || value < parseInt(input.min)) {
throw new Error("Limit Exception");
}
});
}
}
private createLabel(title: string): HTMLLabelElement {
const label: HTMLLabelElement = document.createElement("label");
label.innerText = title;
return label;
}
private createRGBInput(): HTMLInputElement {
const input: HTMLInputElement = this.createStandardNumberInput();
input.min = "0";
input.max = "255";
input.maxLength = 3;
input.pattern = "[0-9]{1,3}";
return input;
}
private createStandardNumberInput(): HTMLInputElement {
const input: HTMLInputElement = document.createElement("input");
input.type = "number";
input.defaultValue = "0";
return input;
}
private createCMYKInput(): HTMLDivElement {
const input: HTMLInputElement = this.createStandardNumberInput();
input.min = "0";
input.max = "100";
input.maxLength = 3;
input.pattern = "[0-9]{1,3}";
return input;
}
private createRgbContainer(title: "R" | "G" | "B"): HTMLDivElement {
const container: HTMLDivElement = document.createElement("div");
container.appendChild(this.createLabel(title));
container.appendChild(this.createRGBInput());
return container;
}
private createCmykContainer(title: "C" | "M" | "Y" | "K"): HTMLDivElement {
const container: HTMLDivElement = document.createElement("div");
container.appendChild(this.createLabel(title));
container.appendChild(this.createCMYKInput());
container.appendChild(this.createLabel("%"));
return container;
}
}
\ No newline at end of file
<script type="module" src="assets/ts/index.js"></script>
<script>
document.addEventListener("DOMContentReady", () => {
});
</script>
\ No newline at end of file
{
"name": "awesome-color-picker",
"version": "0.0.1",
"dependencies": {
}
}
{
"compileOnSave": true,
"compilerOptions": {
"module": "commonjs",
"target": "es2019",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": ".",
"typeRoots": [
"./node_modules/@types"
]
},
"typedocOptions": {
"name": "Awesome Color Picker",
"mode": "modules",
"out": "doc",
"theme": "default",
"ignoreCompilerErrors": "true",
"experimentalDecorators": "true",
"emitDecoratorMetadata": "true",
"target": "ES2018",
"moduleResolution": "node",
"preserveConstEnums": "true",
"stripInternal": "true",
"suppressExcessPropertyErrors": "true",
"suppressImplicitAnyIndexErrors": "true",
"module": "commonjs"
},
"exclude": [
"node_modules"
]
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment