.addEventListener in an array

[scottm29310603]

Trying to get the handle mouse down to alert the colour I've clicked on.

I normally do this with iconbuttons, but saw this method being used and it has less code to color the group background and the onclick feature aswell. So want to try and get this working and that will save me several lines of code.

        var b = new Array();
            for(var i = 0; i<=2;i++){
            b[i] = win.add("group");    
            bText= b[i].add('statictext',undefined,"");
            b[i].graphics.backgroundColor= b[i].graphics.newBrush(b[i].graphics.BrushType.SOLID_COLOR, pcolor[i]);   
            b[i].addEventListener ("click", function (m,i){
                handleMouseDown(m,b)
                });
            bText.preferredSize=[30,20];
            
            function handleMouseDown(i){
            alert(pcolor[i]);
            }
        
            }

[Tomas Sinkunas]

Firs of all, you should be listening for mousedown or mouseup event:

b[i].addEventListener('mousedown', function() {
	///
});

Second, where does the m variable come from in your handleMouseDown(m, b) function?

Third, you make bText a global variable, witch is a bad thing,

etc ... , please clean up your snippet by removing non-trivial things for the functionality you are asking to help, and keep only relevant code.

For better response, please write a basic code you need help on, so we can test it. Right now no one can run your code, therefore cannot test without investing time to figure out what's going on. Help us help you by not copy/pasting excerption from your code.

Here's a small example how to handle mousedown event on a Group object

var win = new Window("palette", "script");

var group = win.add('group');
group.preferredSize = [100, 30];
group.graphics.backgroundColor = group.graphics.newBrush(group.graphics.BrushType.SOLID_COLOR, [0.123, 0.456, 0.789]);
group.addEventListener('mousedown', function() {
	alert('you clicked on group');
});

win.center();
win.show();

[scottm29310603]

Apologies. I copied and pasted it from someone else from the Adobe forums. Then played around with it. 

There was nothing they used that suggested m, but b I assume was their group b = win. add(), but then I thought m was passing on info to the function from listener to the handle. So I left these be.

The text variable. Strangely if you don't add into the group, the background color won't work for the group. So that is just a cheat to get that to work. It does if you make a window though which is bizarre, but I'm not the only one who had this issue.

So essentially you click on the group panel that looks like a coloured button. These are populated based on an array. And then once clicked activate a function.

Currently I want it to alert pcolor[I]. But I'll used that to color my layers in after effects. 

[Tomas Sinkunas]

You dont need edittext object in there at all.

Look at my snippet above.

[scottm29310603]

Cheers will do on Monday when I get onto my machine. 

[Tomas Sinkunas]

I took the liberty of building a super small script that adds/reloads a few colored buttons. Once clicked, it alerts its RGB value. Hopefully, this is something you can read, understand, and follow.

(function(thisObj) {
	var win = (thisObj instanceof Panel) ? thisObj : new Window('palette', 'script');

	var btnRandomColors = win.add('button', undefined, 'Randomize Colors');
	btnRandomColors.onClick = function() {
		while (grpColors.children[0]) {
			grpColors.remove(grpColors.children[0]);
		}

		addColorButtons(grpColors, 10);
		grpColors.layout.layout(true);
	};

	var grpColors = win.add('group');
	grpColors.spacing = 0;

	addColorButtons(grpColors, 10);

	if (win instanceof Window) {
		win.show();
	} else {
		win.layout.layout(true);
	}


	function addColorButtons(container, numColors) {
		for (var i = 0; i < numColors; i++) {
			var color = [
				generateRandomNumber(),
				generateRandomNumber(),
				generateRandomNumber()
			];

			var button = container.add('group');
			button.color = color;
			button.graphics.backgroundColor = button.graphics.newBrush(button.graphics.BrushType.SOLID_COLOR, color);
			button.preferredSize = [20, 20];
			button.addEventListener('mousedown', function() {
				alert(this.color);
			});
		}
	}
})(this);

[scottm29310603]

I'll take a look at this on Monday.

The only problem I've found with adding group backgrounds is that in a window it works fine, but when I create a dockable, resizing window the colours don't show.

But appreciate the above as it's the first time I've seen this in a very short format and much easier to understand than anyone else's code that I've come across.

Question though and this is for tidying up code in general. If the function isn't necessary in the window, is it best to keep it outside of the window? Like you've done with the add. Group? Just an observation as I've noticed it a couple of times on other scripts

[Tomas Sinkunas]

I've updated the above script to be a floating panel - it all works as expected, all buttons show up the same as if it was Dialog or a Panel window.

Regarding splitting into functions - always! Brake your code into multiple peaces. One function ideally should perform only one task. Above snippet could use refactoring of braking code into smaller peace, but for the sake of example, I wanted to contain everything in one function so you better see how those buttons are built.

[scottm29310603]

That's amazing,

Really appreciate this, as it makes much more sense than theirs did.

Just to make sure I understand it all. I've noterised it. Am I missing anything otherwise I think this has been the best learning curve trying to get my script to work going forward to update it and make it much much tidier. Like 100 lines tidier based on what I'm looking at infront of me 🙂

(function(thisObj) {
	var win = (thisObj instanceof Panel) ? thisObj : new Window('palette', 'script',undefined, {resizable:true} );

    //Create Button
	var btnRandomColors = win.add('button', undefined, 'Randomize Colors');
        //Button Function
    btnRandomColors.onClick = function() {
            //if coloured button exist remove them
        while (grpColors.children[0]) {
			grpColors.remove(grpColors.children[0]);
		}
        //then add ten new buttons
		addColorButtons(grpColors, 10);
        //refresh the panel
		grpColors.layout.layout(true);
	};
    
    //Add a group
	var grpColors = win.add('group');
	grpColors.spacing = 0;
    
    //This is to add buttons when script loads
	addColorButtons(grpColors, 10);

    //build window
	if (win instanceof Window) {
		win.show();
	} else {
		win.layout.layout(true);
	}

//Function to create buttons and generate new colours
	function addColorButtons(container, numColors) {
		for (var i = 0; i < numColors; i++) {
			var color = [
				generateRandomNumber(),
				generateRandomNumber(),
				generateRandomNumber()
			];
            
			var button = container.add('group');
			button.color = color;
			button.graphics.backgroundColor = button.graphics.newBrush(button.graphics.BrushType.SOLID_COLOR, color);
			button.preferredSize = [20, 20];
                //when clicked on alert the colour.
			button.addEventListener('mousedown', function() {
				alert(this.color);
			});
		}
	}
})(this);

[Tomas Sinkunas]

Looks good to me.

[scottm29310603]

Right I'm scared that I'm fudging up the proper way of doing this, but this works nearly how I want it to.

One flaw. When I open the script for the first time, it asks me for a swatch. I select a swatch (lets say with 20 RGB colours), it creates 20 groups with backgroundColors. When I click Load New Swatch in my new swatch (lets say with 40 RGB colours), it creates the first 20 into groups with backgroundColors. 

However, if I open my script and select the swatch with 40 Colours. It loads 40 up, and if I then change to 20. Loads 20, then go back to the 40. Loads 40.

It appears to be creating my numColors.length based on the first swatch I load.

Otherwise this works exactly how I want it to.

(function(thisObj) {
	var win = (thisObj instanceof Panel) ? thisObj : new Window('palette', 'script',undefined, {resizable:true} );
//Create Button
	var btnRandomColors = win.add('button', undefined, 'Load New Swatch');
        //Button Function
    btnRandomColors.onClick = function() {
            //if coloured button exist remove them
        while (grpColors.children[0]) {
			grpColors.remove(grpColors.children[0]);
		}
        //then add ten new buttons
		addColorButtons(grpColors);
        //refresh the panel
		grpColors.layout.layout(true);
	};

    //Add a group
	var grpColors = win.add('group');
	grpColors.spacing = 1;
 
    //This is to add buttons when script loads
	addColorButtons(grpColors);

    //build window
	if (win instanceof Window) {
		win.show();
	} else {
		win.layout.layout(true);
	}


//Function to create buttons and generate new colours
	function addColorButtons(container) {
        
        var aseFile = File.openDialog('Select *.ase file'); 
        var data = app.parseSwatchFile(aseFile);
        var numColors = data.values.length;
		
        for (var i = 0; i < numColors; i++) {
             var colorData = data.values[i];
             if(colorData.type == "RGB"){
			var color = [
				colorData.r,
				colorData.g,
				colorData.b
			];
              var button = container.add('group');
			button.color = color;
			button.graphics.backgroundColor = button.graphics.newBrush(button.graphics.BrushType.SOLID_COLOR, color);
			button.preferredSize = [20, 20];
                //when clicked on alert the colour.
			button.addEventListener('mousedown', function() {
				alert(this.color);
			});
            }	
		}
	}
})(this);

[Tomas Sinkunas]

I don't understand what's the problem.

[scottm29310603]

If I load in an aseFile, it'll add up all the colors to define var numColors = data.values.length.

When I click on the button to load up a new aseFile, if the previous file had a smaller length. It seems to stick with that number.

Unless it's the container.add that is the issue.

But if I close the script down, open it back up and choose the longer length aseFile. It works fine, then load the smaller one up and go back to the longer one. Still works fine.

So somewhere the script seems to be hard setting var numColors

[Tomas Sinkunas]

Why would you assume that? Read your code carefully and try to find a line where it does that.

The issue is here - update this line in your code:

//refresh the panel
win.layout.layout(true);

Also, you misspelled resizable property in your code.

 As a bonus - you are not handling cases when:

• User cancels when is prompted to load ASE file
• You are not checking if the user selected *.ase file or any other file
• You are not handling cases when the file is damaged.
• Whipping out old swatches from the UI should only happen once the user has selected ase file, and this file is a valid swatch file.
• Function addColorButtons() no longer does what its name implies. It performs side actions, such as prompts to load a file, parse the file, and therefore needs to be refactored.

[scottm29310603]

I really do appreciate this.

I assumed that because my main problems have been recently scoping to get information passed on. Every time, I assumed it was something in that section causing my problem. Although I went through it a few times I didn't spot that it was the grpColor.layout.layout(true)

I put my load file and parse parts in the addColorButtons(), purely because it was the only way I could get it to work. I read the link you gave, but no matter how times I tried it. I couldn't get it to alert or recognise any data from my file. Even when I copied and pasted it from the link whilst trying to understand. When I thought I had, I'd include the aseFile and the onClick would do nothing.

I promise you, your notes don't go ignored. You wouldn't believe how much I've learnt over the last week from your help.

[scottm29310603]

Sorry Tomas,

I've tried to understand the link you've provided on scope and hoisting and I can get it to work when I just put in a var local and call it globally. But when I load in my swatch. I get nothing. This is why I've been putting everything into one function.

I know I've not put in the other stuff to make sure the file is correct, but currently I know the file works and it's just that file I'm testing, which works with everything else.

🙂

loadSwatch();
var data;

var btn = win.add("button",undefined,"CALL");
btn.onClick = function(){
alert(data.values[0].name);
}

function loadSwatch(){
var aseFile = File.openDialog('Select *.ase file');
var data = app.parseSwatchFile(aseFile);
}

[Tomas Sinkunas]

var btn = win.add("button", undefined, "CALL");
btn.onClick = function() {
	var swatchData = getSwatchData();
	if (swatchData) {
		addColorButtons(container, swatchData);
	}
};

function getSwatchData() {
	var aseFile = File.openDialog('Select *.ase file');
	var data = app.parseSwatchFile(aseFile);

	return data;
}

function addColorButtons(container, swatchData) {
	// ... //
}

[scottm29310603]

I'm being thick as mud here

Am I meant to pass data again similar to var swatchData?

If I put the alert in the btn.onClick it works, so I haven't the foggiest. I can get it to alert undefined fiddling around, but not [object], which makes me think I'm not Passing swatchData over at all.

var btn = win.add("button", undefined, "LOAD");

btn.onClick = function() {
	var swatchData = getSwatchData();
	if (swatchData) {
        callOut(container, swatchData);
	}
};


function getSwatchData() {
	var aseFile = File.openDialog('Select *.ase file');
	var data = app.parseSwatchFile(aseFile);
    
	return data;
    
}

function callOut(container, swatchData){
   
try{    
alert(swatchData.values[0].name);
}catch(err){
    alert("DID NOT PASS")
    }

}

[scottm29310603]

I'm an idiot.

I'm sat here, thinking. What's Tomas gonna tell me I've not done. Then I thought, you're not going to tell me that I've not tested to see if(swatchData). So I got it to alert true. Then realised I did need to add a variable, but I was going about it wrongly.

This works haha.

Thank you so much for being patient, but I think I'm getting it now.

var btn = win.add("button", undefined, "LOAD");

btn.onClick = function() {
	var swatchData = getSwatchData();
	if (swatchData) {
        callOut(swatchData);
	}
};


function getSwatchData() {
	var aseFile = File.openDialog('Select *.ase file');
	var data = app.parseSwatchFile(aseFile);
    
	return data;
    
}

function callOut(swatchData){
var data = swatchData;
alert(data.values[0].name);
   
   }