Queue of dialogs/sticky windows?

[Rolf -nl]

Working on a file manager where I can select multiple files and drag
them to a trash can. I have to add functionality to ask a confirmation
for each file gets deleted. onDrop of a file an event is fired which
triggers the deleteConfirm function in the file manager class. The
deleteConfirm shows a (modal) dialog (could be a stickywin as well)
that asks confirmation for that particular file.

At the moment all onDrops ofcourse fire at the same time, or real
quick after each other. So this results in multiple dialogs. You only
see one, because they are all centered positioned on screen. I create
one mask/body overlay a check before creating the modal dialog if one
exists already.

I rather queue this so that the deleteConfirm only starts when a
dialog is closed (either with Ok or Cancel) and then create/display a
new dialog.

Does anyone know a way to create some sort of queue after the dropped
event is fired from the drag (which triggers, in case destination is
trashcan my deleteConfirm function). Something like chain...

This way I could also do a "cancel all" from a dialog so it skips the
rest of the possibly 40 dialogs that ask for some sort of
confirmation ;)

Thanks for any input

[Nathan White]

What if you create a deleteQueue array in your class. Inside the
onDrop event you set a delay/timeout for something short like 10 or 20
ms. You store the delay in a variable. Before the delay put $clear
(this.delayDrop); you should then be able to handle all in whatever
way you like. You could even have a dialog with all files with check/
uncheck all options for increased usability.

[Aaron Newton]

I agree that one popup for all the files is ideal, but if you want to prompt for each one (which could be annoying) I would push functions into an array. The function would contain the logic to show the confirmation and send the ajax request to delete the item and then call the next function in the array if there is one.

On Fri, Nov 6, 2009 at 8:12 AM, Nathan White <change...@gmail.com> wrote:

What if you create a deleteQueue array in your class. Inside the onDrop event you set a delay/timeout for something short like 10 or 20 ms. You store the delay in a variable. Before the delay put $clear(this.delayDrop); you should then be able to handle all in whatever way you like. You could even have a dialog with all files with check/uncheck all options for increased usability.

[Rolf -nl]

I didn't know you could put function in an array... or maybe I did but
wasn't aware of it. I will investigate it.. maybe it's already done
inside of mootools or on places I haven't noticed it. Any examples?

Btw- 100 confirmation dialogs for 100 file delete actions is ofcourse
a bit ridiculous ;), but it's a simple way of explaining what's the
case and what has to be done.

On Nov 6, 6:16 pm, Aaron Newton <aa...@iminta.com> wrote:
> I agree that one popup for all the files is ideal, but if you want to prompt
> for each one (which could be annoying) I would push functions into an array.
> The function would contain the logic to show the confirmation and send the
> ajax request to delete the item and then call the next function in the array
> if there is one.
>

> On Fri, Nov 6, 2009 at 8:12 AM, Nathan White <changereal...@gmail.com>wrote:
>
>
>
>
>
> > What if you create a deleteQueue array in your class. Inside the onDrop
> > event you set a delay/timeout for something short like 10 or 20 ms. You
> > store the delay in a variable. Before the delay put $clear(this.delayDrop);
> > you should then be able to handle all in whatever way you like. You could
> > even have a dialog with all files with check/uncheck all options for
> > increased usability.
>

[Aaron Newton]

var alertMsg = function(msg) { alert(msg) };

var alerts = [];

alerts.push(alertMsg.pass('hi'));

alerts.push(alertMsg.pass('there'));

alerts.each(function(fn) {

  fn();

});

[Rolf -nl]

Right. So I have a simple queue class now.
I was playing with stickywin and wondered if it has a callback
functionality for the close button? E.g. to check the queue..
I was having some issues with a simpler dialog class I created that I
fired a 'close' event when it hides. The close event could handle a
callback. However, if you would confirm/press OK in the dialog it
would have to execute the callback, but should also close.. which in
turn fires the close event which triggers a callback as well :) dohh

On Nov 6, 8:45 pm, Aaron Newton <aa...@iminta.com> wrote:
> var alertMsg = function(msg) { alert(msg) };
>
> var alerts = [];
>
> alerts.push(alertMsg.pass('hi'));
> alerts.push(alertMsg.pass('there'));
>
> alerts.each(function(fn) {
>   fn();
>
>
>
> });

[Aaron Newton]

stickywin has a hide event. it is fired whenever the window is set to display: none. that's all you should need.

[Rolf -nl]

Yes, but I do need a callback on the close of a dialog/stickywin. I
already have a real simple dialog class for this project (stickywin is
a bit too much), but it works in a similar way.

I was wondering if I could use one callback function that receives the
file element and a true/false boolean depending on the result/button
click from the confirm..
The callback on close is needed to continue with the queue.

So the default could be (with delete set to flase as protection):

confirm: function(title, message, callback) {
new window({
..
}).addEvents({
confirm: callback,
close: callback
});

new confirm('myTitle', 'myMessage', this.deleteFileConfirmCallback.
(false, file));

deleteFileConfirmCallback: function(confirmDelete, file) {
if(!$defined(confirmDelete)) confirmDelete = false;
console.log('confirmDelete: ', confirmDelete);
console.log('file: ', file);
//continue with possible queue
this.queue.dequeue();
this.queue.doNext();
}

onConfirm the callback should receive a true setting for the variable
confirmDelete and the file, while onClose the callback in its default
way is ok (confirmDelete = false)

I could put in a callbackOk and callbackCancel in the confirm
function, but, if i could re-set one of the arguments (the first one
in this case) in the callback function call I wouldn't have to.

Does this make sense? ;)

[Aaron Newton]

passing state arguments to an event is very common. I'm not sure what else you're asking here.

I can tell you that you should NOT be naming your classes "window" "alert" and "confirm". These are native objects and methods that you don't want to overwrite. Esp. window.

[Rolf -nl]

I'm sorry, I'm a bit unclear.
Just like you have stickywin.confirm I have dialog.confirm. My dialog
class is a more simple stickywin variant I am already using. I don't
use native object or method names that cause problems.

My question is if I can have one callback function that is passed into
dialog.confirm with arguments and that one of those arguments change
depending on the button that is clicked in the dialog.
I tried some ways, didn't succeed and now I have both callbackOk and
callbackCancel arguments in my dialog.confirm method. callbackOk is
called when the 'confirm' event fires, callbackCancel when the 'close'
event fires.

I need callback functionality on both buttons because I have to
continue with my queue; maybe there are more confirms waiting in line
to be processed.

Similar like your stickywin.confirm I call my dialog.confirm like this
(where options are title, message, etc.):
dialog.confirm = function(options, callbackOk, callbackCancel) {
return new dialog(options).addEvents({
confirm: callbackOk,
cancel: callbackCancel
});
}

In my fileManager class I could request one like this for example:
var options = {
title: 'Delete file'
message: 'Are you sure...'
delay: 400,
...
}
dialog.confirm(options, this.deleteFileConfirmCallback.pass([true,
file], this), this.deleteFileConfirmCallback.pass([false, file],
this));

My deleteFileConfirmCallback method deletes the file or not (depending
on the dialog.confirm result) and then tells the queue to do the next
one in line (of there is one):

deleteFileConfirmCallback: function(confirmDelete, file) {
if(!$defined(confirmDelete)) confirmDelete = false;

if($defined(file) && confirmDelete) this.deleteFile(file);
this.queue.nextInLinePlease(); //This is one executed always
}

If I look at my code I think: can't I use just one callback and
(depending on the event firing of "confirm" or "close") return the 1st
argument true or false including the passed file argument?

Follow me? I would then just pass in the file element argument into
the dialog.confirm callback function call. The dialog.confirm calls my
callback with the original argument passed in, including a true/false
depending on the confirm/close firing.

I could then also create an extra "apply to all coming confirm.dialogs
waiting in the queue" checkbox in the dialog.confirm and return an
"applyToAll true/false" value in the callback as well.
Summarized: can you pass in argument(s) in a callback function, and
then execute the callback with those original arguments and on top of
that some extra arguments.

Something like:
dialog.confirm = function(options, callback) {
return new dialog(options).addEvents({
confirm: callback.pass(originalArgument, andMore, andOneMore),
cancel: callback.pass(originalArguments, andHereisOneExtra)
});
}

Pff, excusez more for all this text.