2019-03-27 02:20:54 +03:00
document . getElementById ( 'jscolor-hex-input' ) . addEventListener ( 'change' , colorChanged , false ) ;
on ( 'input' , 'jscolor-hex-input' , function ( e ) {
2020-04-04 10:41:56 +03:00
//get hex value
var newColorHex = e . target . value . toLowerCase ( ) ;
//if the color is not (yet) a valid hex color, exit this function and do nothing
if ( /^[0-9a-f]{6}$/i . test ( newColorHex ) == false )
return ;
//get currently editing color
var currentlyEditedColor = document . getElementsByClassName ( 'jscolor-active' ) [ 0 ] ;
//update the actual color picker to the inputted color
currentlyEditedColor . firstChild . jscolor . fromString ( newColorHex ) ;
colorChanged ( e ) ;
} ) ;
2019-03-27 02:20:54 +03:00
//changes all of one color to another after being changed from color picker
function colorChanged ( e ) {
2020-04-04 10:41:56 +03:00
console . log ( 'colorChanged()' ) ;
//get colors
var newColor = hexToRgb ( e . target . value ) ;
var oldColor = e . target . oldColor ;
//save undo state
//saveHistoryState({type: 'colorchange', newColor: e.target.value, oldColor: rgbToHex(oldColor), canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
new HistoryStateEditColor ( e . target . value . toLowerCase ( ) , rgbToHex ( oldColor ) ) ;
//get the currently selected color
var currentlyEditedColor = document . getElementsByClassName ( 'jscolor-active' ) [ 0 ] ;
var duplicateColorWarning = document . getElementById ( 'duplicate-color-warning' ) ;
//check if selected color already matches another color
colors = document . getElementsByClassName ( 'color-button' ) ;
var colorCheckingStyle = 'background: #bc60c4; color: white' ;
var newColorHex = e . target . value . toLowerCase ( ) ;
//if the color is not a valid hex color, exit this function and do nothing
if ( /^[0-9a-f]{6}$/i . test ( newColorHex ) == false )
2019-03-27 02:20:54 +03:00
return ;
2020-04-04 10:41:56 +03:00
//loop through all colors in palette
for ( var i = 0 ; i < colors . length ; i ++ ) {
//if generated color matches this color
if ( newColorHex == colors [ i ] . jscolor . toString ( ) ) {
// console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
//if the color isnt the one that has the picker currently open
if ( ! colors [ i ] . parentElement . classList . contains ( 'jscolor-active' ) ) {
// console.log('%cColor is duplicate', colorCheckingStyle);
//show the duplicate color warning
duplicateColorWarning . style . visibility = 'visible' ;
//shake warning icon
duplicateColorWarning . classList . remove ( 'shake' ) ;
void duplicateColorWarning . offsetWidth ;
duplicateColorWarning . classList . add ( 'shake' ) ;
//exit function without updating color
return ;
}
}
}
//if the color being edited has a duplicate color warning, remove it
duplicateColorWarning . style . visibility = 'hidden' ;
currentlyEditedColor . firstChild . jscolor . fromString ( newColorHex ) ;
replaceAllOfColor ( oldColor , newColor ) ;
//set new old color to changed color
e . target . oldColor = newColor ;
//if this is the current color, update the drawing color
if ( e . target . colorElement . parentElement . classList . contains ( 'selected' ) ) {
// console.log('this color is the current color');
context . fillStyle = currentColor ;
2019-03-27 02:20:54 +03:00
}
2020-04-04 10:41:56 +03:00
/ * t h i s i s w r o n g a n d b a d
if ( settings . switchToChangedColor ) {
} * /
2019-03-27 02:20:54 +03:00
}