import { IsetPaletteData , IcolorDataFull } from './js/ts-interfaces/interfaces' ; import { fillGrid , addExampleControls , Test } from './js/helpers/index' ; import { PaletteGenerator } from './js/palette-generator' ; import './scss/styles.scss' ; interface IcontrolsCollectionExtended extends HTMLFormControlsCollection { finalFormat : HTMLFormControlsCollection ; } const inputElem = < HTMLInputElement > document . querySelector ( '.codes__textarea--input' ) ; const outputElem = < HTMLInputElement > document . querySelector ( '.codes__textarea--output' ) ; const paletteView = < HTMLDivElement > document . querySelector ( '.palette__view' ) ; const stepsQuantityElem = < HTMLInputElement > document . querySelector ( '.options__range--stepsquantity' ) ; const stepsQuantityValueElem = < HTMLInputElement > document . querySelector ( '.options__range-value--stepsquantity' ) ; const lightstepElem = < HTMLInputElement > document . querySelector ( '.options__range--lightstep' ) ; const lightstepValueElem = < HTMLSpanElement > document . querySelector ( '.options__range-value--lightstep' ) ; const form = < HTMLFormElement > document . querySelector ( '.options__form' ) ; const controlsElem = < HTMLDivElement > document . querySelector ( '.codes__controls' ) ; const optionsControls = < IcontrolsCollectionExtended > form . elements ; const colorFormatControls = optionsControls . finalFormat ; const palette = new PaletteGenerator ( ) ; const test = new Test ( { inputElem , setPalette } ) ; setPalette ( ) ; addExampleControls ( { controlsElem , inputElem , setPalette } ) ; inputElem . addEventListener ( 'input' , setPalette ) ; lightstepElem . addEventListener ( 'input' , setPalette ) ; stepsQuantityElem . addEventListener ( 'input' , setPalette ) ; for ( const formatInput of colorFormatControls ) { formatInput . addEventListener ( 'input' , setPalette ) ; } function setPalette ( ) { const options = { } ; const formData = new FormData ( form ) ; setRangeValues ( ) ; for ( const [ name , value ] of formData ) { options [ name ] = value ; } const paletteParams = < IsetPaletteData > { inputValue : inputElem . value , ... options } ; palette . setPalette ( paletteParams ) ; const code = palette . getCode ( ) ; const data = palette . getData ( ) ; const stepsQuantity = stepsQuantityElem . value ; outputElem . value = code ; fillGrid ( { data , elem : paletteView , stepsQuantity } ) ; } function setRangeValues ( ) { setRangeValue ( lightstepElem , lightstepValueElem ) ; setRangeValue ( stepsQuantityElem , stepsQuantityValueElem ) ; } interface IInputProps { value : unknown ; min : unknown ; max : unknown ; offsetWidth : number ; } function setRangeValue ( input , inputValueElem ) { const { value , min , max , offsetWidth } = input ; inputValueElem . innerHTML = < string > value ; const realPos = < number > value - < number > min ; const realMax = < number > max - < number > min ; const elemWidth = offsetWidth - inputValueElem . offsetWidth / 2 ; const inputValuePos = realPos / realMax * elemWidth ; inputValueElem . style . left = `${ inputValuePos . toFixed ( 2 ) }px` ; } window . addEventListener ( 'resize' , setRangeValues ) ;