Hey there,
I have a JSON object that grabs swatch colors then converts to hex. I then bring that hex back to javascript and the array shows, but it won't make custom color blocks from the CSS code. if I hand type in a bunch of random hex colors into an array it does work then.
when I alert hexArray I get: #ffffff,#00adef,#ec008b,#ff100,#d12229,#40ad48 and so on....
I then push this array into another to make up for the colors none and paper. I run a delay because otherwise, I do not see those colors.
I then run the following code to build a li list with the swatch name and a color block next to it. when I use the pulled in code it doesn't except the array colorbox. but if I build my own array in javascript it does.
Does anyone know what I am doing wrong here?
Here is my js code:
/* Create an instance of CSInterface. */
var csInterface = new CSInterface();
//======================= DROPDOWN COLOR SWATCHES===================//
//=====================LAYOUT PANEL===============================//
var customDropdown = document.querySelector("#swatches");
customDropdown.addEventListener("click", callDrop);
//GLOBAL VARIABLES
var hexArray = [];
//Establish the text array
var colors = ["Black", "White", "cyan", "#fa09ca", "#333333", "#009ecf", "purple", "orange", "teal", "yellow","grey", "pink"];
var hexColorArray = ["white","black","white","purple","#009ecf"];
//delays the hex array callback so it is async
setTimeout(function() {
hexColorArray.push(hexArray);
alert(hexColorArray);
}, 250);
var callDrop = function (result) {
//loop for swatch name
var s = result;
var myObject = eval('(' + s + ')');
for (i in myObject)
{
//set color for each
var name = myObject[i]["name"];
//grab the ul swatches
var ul = document.getElementById("swatches");
//creates the new li
var li = document.createElement('li');
//appending the array to the li
li.appendChild(document.createTextNode(name));
//variable to create new div
const div = document.createElement('div');
//find the class name
div.className = 'colorBox';
//pulls the color from the css class to switch the colors
div.style.backgroundColor = hexColorArray[i];
//appends the color to the li
li.appendChild(div);
//appending the li to the ul
ul.appendChild(li);
}
/*====================== //selected color to have an active color ========================*/
$(".swatches li").click(function() {
$(".swatches li").removeClass('activeColor');
$(this).addClass('activeColor');
});
}
setTimeout(function() {
csInterface.evalScript('swatchIndex()', callDrop);
}, 3000);
/////===============================TEXT BOX ADD COLOR BUTTON========================================////
//Tab 2 textcolor button
var textColorBtn = document.querySelector("#textColorbtn");
textColorBtn.addEventListener("click", textColor);
function textColor() {
grabSwatchIndex();
csInterface.evalScript("textColor()");
}
//push the selected value to jsx file
function grabSwatchIndex() {
var getSelectedValue = document.getElementById(".swatches li");
var selectedSwatch = $($.find('.activeColor')[0]).index();
var sender = (selectedSwatch);
csInterface.evalScript("exportSwatch('"+JSON.stringify(sender)+"')");
}
//////////////Pulling HEX COLORS from JSX////////////////////////
csInterface.evalScript('hexColor()', function(hexArr) {
var hexArrObj = JSON.parse(hexArr);
hexArray = hexArrObj;
for (var i = 0; i < hexArray.length; i++) {
hexArray[i] = hexArray[i].replace(/"/g, "");
}
alert(hexArray);
});
AdChoices