Re: [cssom-view] addMediumListener / removeMediumListener

Hi,

2010/5/27 Simon Fraser <smfr@me.com>

> On May 27, 2010, at 1:33 AM, Anne van Kesteren wrote:
>
> > On Wed, 26 May 2010 17:10:04 +0200, Luiz Agostini <
> luiz.agostini@openbossa.org> wrote:
> >> Could we use the names addMediaListener, removeMediaListener and
> matchMedia and accept media query lists?
> >
> > I rather not change the name of matchMedium() yet again. Unless you get
> buy-in from Simon Fraser somehow :-) Making everything accept lists could
> work though.
>
> It would be better to change it to matchMedia() now, rather than later,
> since not many people are using this yet. I hope we can avoid more renames,
> though. Or, if we accept media query lists, maybe it should just be be
> matchQueryList(), which I think is easier to read than the awkward
> "matchMedium". matchQuery() would also work OK.
>
> Similarly, perhaps addMediumListener() should be addQueryListener() etc.
>
> As for whether to accept lists, I can imagine this making an implementation
> that tries to be efficient more complex. But I imagine that most
> implementations would just re-evaluate all the query lists every time
> something "interesting" changes.
>
> > If we do that we will need to specify how to compare media query lists. A
> >> preliminary suggestion is:
> >
> > Can't we just order them in specified order? That's how it currently
> works. Though I guess it would be nice if "all, not all" and "not all, all"
> are the same...
> >
> >
> > At this point some thoughts from implementors would be nice.
>
> I'm  a little concerned about using a BooleanCallback here. I agree that
> there's an issue where the serialized query may not match what was
> originally used to add the listener, but I think having some context in the
> callback is necessary. This allows people writing OOP JS to have a single
> object with a handleEvent() function which can act as a listener for
> multiple queries. This would be slightly easier if there were an easy way to
> re-serialize a query (i.e. to convert it to its canonical form) via some
> API.
>

I think that it can be done using JC closures. For example:

<script>


 // create an object to handle the events. Callbacks should come in
handler.handleEvent(id, value)

var handler = {handleEvent: function (id, value) {

    switch (id) {

    case 0: alert("id = " + id + ", value = " + value); break;

    case 1: alert("id = " + id + ", value = " + value); break;

    case 2: alert("id = " + id + ", value = " + value); break;

    }

}};


 var queries = ['(color)', '(min-width: 400px), (orientation:
landscape)', 'tv and (max-width: 640px)'];


 var i;

for (i = 0; i < queries.length; ++i)

    window.styleMedia.addQueryListener(queries[i], function (value) {
handler.handleEvent(i, value); });


 </script>


 Any kind of information may be supplied to the callback.


> A slightly hacky alternative would be for addMediumListener() to return a
> token (like setTimeout()) that can be used to identify which listener is it,
> and gets passed to the callback.
>

And maybe could be passed to removeQueryListener().


>
> Simon
>
>