Smalltalk › Frameworks & Tools › Magritte, Pier and Related Tools

Gracefully Degrading Lightbox from Command Column

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

8 messages Options

Joel Turnbull

Gracefully Degrading Lightbox from Command Column

In a Magritte report, I have a "remove" command column. What I want is a confirmation lightbox that degrades to a normal seaside confirmation ( separate page ) if javascript is disabled.

In my command column's renderCellLinkContent:on: method, it's no problem to call the seaside confirm from the callback, but I can't figure out how to call the lightbox from the onClick event.

I'm in GLASS so I've got scriptaculous to work with.

Thanks,

Joel

_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

Lukas Renggli

Re: Gracefully Degrading Lightbox from Command Column

> In a Magritte report, I have a "remove" command column. What I want is a
> confirmation lightbox that degrades to a normal seaside confirmation (
> separate page ) if javascript is disabled.

The default lightbox that comes with Scriptaculous does not use AJAX,
so it is degraded by default anyway ;-)

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

Joel Turnbull

Re: Gracefully Degrading Lightbox from Command Column

How then do I set what I want to happen if javascript is disabled?

I create an MACommandColumn with this as the selector.

removeFooConfirm: aFoo

( self lightbox: (WAYesOrNoDialog new addMessage: 'Are you sure you wish to remove', aFoo name,'?'; yourself ))
ifTrue: [ self removeFoo: aFoo ]

I disable javascript in my browser. When I click "remove", I see in the html source that it's still trying to apply the light box, but since javascript is disabled, all I see is that the same page without a vertical scrollbar.

How I understand degradation is that you put in an onClick event what you want to happen, and return false. If javascript is disabled, it ignores the onClick and the element does what is in the callback.

On Thu, Oct 1, 2009 at 7:41 AM, Lukas Renggli <[hidden email]> wrote:

> In a Magritte report, I have a "remove" command column. What I want is a
> confirmation lightbox that degrades to a normal seaside confirmation (
> separate page ) if javascript is disabled.

The default lightbox that comes with Scriptaculous does not use AJAX,
so it is degraded by default anyway ;-)

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

Lukas Renggli

Re: Gracefully Degrading Lightbox from Command Column

The point is that the light-box does not use Javascript (AJAX) to get
it displayed, so it will generate the HTML either way. JavaScript is
only used afterwards to get the dialog centered in the middle of the
page and have the background dimmed. I haven't seen a lightbox yet
that can do this cross-browser only using CSS.

> How I understand degradation is that you put in an onClick event what you
> want to happen, and return false. If javascript is disabled, it ignores the
> onClick and the element does what is in the callback.

Now for your problem I don't see an out of the box solution. If you
would implement your own lightbox that displays as an answer to an
#onClick: event, then you could have a standard fallback as you
describe. That approach does not work with the lightbox that comes
with Scriptaculous though, because it does a full-fresh and a normal
#call:.

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

SeanTAllen

Re: Gracefully Degrading Lightbox from Command Column

On Thu, Oct 1, 2009 at 10:15 AM, Lukas Renggli <[hidden email]> wrote:

The point is that the light-box does not use Javascript (AJAX) to get
it displayed, so it will generate the HTML either way. JavaScript is
only used afterwards to get the dialog centered in the middle of the
page and have the background dimmed. I haven't seen a lightbox yet
that can do this cross-browser only using CSS.

How would a lightbox get displayed without using js?

You have to do something to get the lightbox to display,

that something requires javascript to happen.

_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

Lukas Renggli

Re: Gracefully Degrading Lightbox from Command Column

>> The point is that the light-box does not use Javascript (AJAX) to get
>> it displayed, so it will generate the HTML either way. JavaScript is
>> only used afterwards to get the dialog centered in the middle of the
>> page and have the background dimmed. I haven't seen a lightbox yet
>> that can do this cross-browser only using CSS.
>
> How would a lightbox get displayed without using js?
> You have to do something to get the lightbox to display,
> that something requires javascript to happen.

No. #lightbox: is like #call:. It does a full refresh to the server
and generates a completely new page with the background and lightbox
HTML. The only difference between #call: and #lightbox: is that call
does not render the parent component, #lightbox: does to make it shine
through using some CSS effects. You can easily observe that in
FireBug.

Now of course there are nicer ways to do a lightbox, e.g. by loading
the dialog using an AJAX call. However this does not work as part of a
flow and requires you to write and adapt some Javascript code to work
with your page layout.

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

SeanTAllen

Re: Gracefully Degrading Lightbox from Command Column

On Thu, Oct 1, 2009 at 12:17 PM, Lukas Renggli <[hidden email]> wrote:

>> The point is that the light-box does not use Javascript (AJAX) to get
>> it displayed, so it will generate the HTML either way. JavaScript is
>> only used afterwards to get the dialog centered in the middle of the
>> page and have the background dimmed. I haven't seen a lightbox yet
>> that can do this cross-browser only using CSS.
>
> How would a lightbox get displayed without using js?
> You have to do something to get the lightbox to display,
> that something requires javascript to happen.

No. #lightbox: is like #call:. It does a full refresh to the server
and generates a completely new page with the background and lightbox
HTML. The only difference between #call: and #lightbox: is that call
does not render the parent component, #lightbox: does to make it shine
through using some CSS effects. You can easily observe that in
FireBug.

Now of course there are nicer ways to do a lightbox, e.g. by loading
the dialog using an AJAX call. However this does not work as part of a
flow and requires you to write and adapt some Javascript code to work
with your page layout.

ah, i understand.

thanks.

_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

Joel Turnbull

Re: Gracefully Degrading Lightbox from Command Column

In reply to this post by Lukas Renggli

Ok well I'm not necessarily tied to lightbox, I just thought it would be cool. I've been playing with something like this instead.

renderCellLinkContent: aFoo on: html

    self commands
        do: [ :each |
            html submitButton
                onClick: 'confirm(''Are you sure you wish to remove', aFoo name,'?''); return false';
                callback: [ each key value: aFoo ];
                with: each value ]
        separatedBy: [ html space ]

The callback does the WAComponent confirm:.

So this degrades well, my only problem is, I don't know how to get the result of the js dialog it and call removeFoo: aFoo if it's true.

Joel

On Thu, Oct 1, 2009 at 12:17 PM, Lukas Renggli <[hidden email]> wrote:

>> The point is that the light-box does not use Javascript (AJAX) to get
>> it displayed, so it will generate the HTML either way. JavaScript is
>> only used afterwards to get the dialog centered in the middle of the
>> page and have the background dimmed. I haven't seen a lightbox yet
>> that can do this cross-browser only using CSS.
>
> How would a lightbox get displayed without using js?
> You have to do something to get the lightbox to display,
> that something requires javascript to happen.

No. #lightbox: is like #call:. It does a full refresh to the server
and generates a completely new page with the background and lightbox
HTML. The only difference between #call: and #lightbox: is that call
does not render the parent component, #lightbox: does to make it shine
through using some CSS effects. You can easily observe that in
FireBug.

Now of course there are nicer ways to do a lightbox, e.g. by loading
the dialog using an AJAX call. However this does not work as part of a
flow and requires you to write and adapt some Javascript code to work
with your page layout.

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki