Don't Hide buttonOverlay `onclick`

[zacksmith]

I am trying to place an element inside a buttonOverlay which, when
clicked, will not hide the buttonOverlay. This is because the element,
when clicked, is appending the content of the buttonOverlay, and not
taking an action to insert anything into the MooEditable area. I am
having trouble with this. Anyone know how to make that happen?

[ryan]

Hello

Yeah you would use the openOverlay event, a bit like this:

overlay.addEvent('openOverlay',function(e){
this.getElement('element you want').addEvent('click',function(ev)
{
ev.stop();
// do your stuff here
}
});

[zacksmith]

Thanks Ryan!

Could you possibly be more specific on where this code should go?
Blessings...

[ryan]

can you tell me how you are creating the overlay, and then I will show
you how to add the event?

[zacksmith]

Sure...

I've got an overlay that loads thumbnail images from a user's file
library when a toolbar button ('add an image') is clicked. 21 images
are loaded at first to cut down on the loading time, because they will
probably want an image that's close to the top. However, if they
scroll to the bottom of the initial 21, there is a 'load more...'
button, which, upon clicking, reveals 21 more images. All of that is
working fine, except for the fact that the overlay is hidden soon as
the 'load more...' button is clicked, and they've got to click the
'add an image' button again to see the 21 new thumbnails they've just
revealed.

In short, I need that one 'a' tag ('load more...') not to close the
overlay when it is clicked. Hope that helps. Thanks for your time and
expertise.

[ryan]

Sorry, I meant more your code, so that I can show you where to add the
event!!

[zacksmith]

Sorry, no problem. This would be in my included .js file...

~~~~~~~
MooEditable.Actions.extend({
image: {
type: 'button-overlay',
title: 'Add Image',
options: {
shortcut: 'm',
overlaySize: {x: 255, y: 235},
overlayRequest: {url: ajax_url, data: 'action=library_images'}
},
command: function(buttonOverlay, e) {
var el = e.target;
if (el.tagName.toLowerCase() != 'a') return; // a link was not
clicked
if (el.getParent().hasClass('load')) { // 'load more' link clicked
- don't close overlay; just load more images
loadMorePhotos(el);
// now if the overlay would just stay visible...
} else { // insert image html
el = $(el);
var src = el.get('rel');
var content = '<img src="'+src+'" />';
this.selection.insertContent(content);
this.focus();
}
}
}
});
~~~~~~~

Where I assumed the desired code should go is round about line 15,
where I've got the special 'loadMorePhotos' function called only when
an 'a.load' is clicked. Again, that part is working fine, except for
the fact that clicking that particular element closes the overlay,
exactly the same as happens when you click any 'a' element inside the
overlay.

Thanks again for your help!

[ryan]

hello

ok, what you want to do (i think) is add an events to do that i.e.

image: {
....
events: {
openOverlay: function(event){
// code from earlier goes here
}
}
...
}

I haven't used overlays so I can't be 100% sure, but thats worth a go.

Thanks,
Ryan