Mailing List Archive

Prototype 1.6.0.3 and getElementsByClassName
Hi,

Bricolage 2.x uses Prototype 1.6.0.3 and in various bits of Bricolage's
JavaScript, it uses getElementsByClassName(). The problem is that newer
browsers have a native implementation of it which is different to what
Prototype implements, causing slight differences in what it returns. See:

http://www.prototypejs.org/api/element/getElementsByClassName

For example, we have this snippet of code in comp/media/js/lib.js,
FastAdd.add():

document.getElementsByClassName('value', this.list)

which I believe is supposed to return an array of elements in this.list
that have the 'value' class. Because Prototype doesn't declare its
version of the function on modern browsers that already have that
function, it returns all elements in the _whole document_ with the value
class.

I'd create a patch for this, but I'm not 100% on Bricolage's UI to test
the changes. There aren't too many uses of getElementsByClassName(),
but I believe things like:

lbActions = document.getElementsByClassName('lbAction');

should get changed to:

lbActions = $$('.lbAction');

and:

document.getElementsByClassName('value', this.list)

to:

this.list.select('.value')

Adrian
Re: Prototype 1.6.0.3 and getElementsByClassName [ In reply to ]
On Mar 18, 2010, at 5:11 PM, Adrian Yee wrote:

> Hi,
>
> Bricolage 2.x uses Prototype 1.6.0.3 and in various bits of Bricolage's JavaScript, it uses getElementsByClassName(). The problem is that newer browsers have a native implementation of it which is different to what Prototype implements, causing slight differences in what it returns. See:
>
> http://www.prototypejs.org/api/element/getElementsByClassName
>
> For example, we have this snippet of code in comp/media/js/lib.js, FastAdd.add():
>
> document.getElementsByClassName('value', this.list)
>
> which I believe is supposed to return an array of elements in this.list that have the 'value' class. Because Prototype doesn't declare its version of the function on modern browsers that already have that function, it returns all elements in the _whole document_ with the value class.
>
> I'd create a patch for this, but I'm not 100% on Bricolage's UI to test the changes. There aren't too many uses of getElementsByClassName(), but I believe things like:
>
> lbActions = document.getElementsByClassName('lbAction');
>
> should get changed to:
>
> lbActions = $$('.lbAction');

That one seems to be gone already.

>
> and:
>
> document.getElementsByClassName('value', this.list)
>
> to:
>
> this.list.select('.value')

So does the attached patch look right? I ran Bricolage and I *think* I tested the functions that were changed by playing with the corresponding UI. I'd appreciate confirmation from others.

Best,

David
Re: Prototype 1.6.0.3 and getElementsByClassName [ In reply to ]
On Mar 19, 2010, at 1:38 AM, David E. Wheeler wrote:

> So does the attached patch look right? I ran Bricolage and I *think* I tested the functions that were changed by playing with the corresponding UI. I'd appreciate confirmation from others

Patch attached f'realz.

Best,

David
Re: Prototype 1.6.0.3 and getElementsByClassName [ In reply to ]
On Mar 19, 2010, at 1:41 AM, David E. Wheeler wrote:

> On Mar 19, 2010, at 1:38 AM, David E. Wheeler wrote:
>
>> So does the attached patch look right? I ran Bricolage and I *think* I tested the functions that were changed by playing with the corresponding UI. I'd appreciate confirmation from others
>
> Patch attached f'realz.

And now ending in .txt, so hopefully the mail list won't reject it.

Best,

David
Re: Prototype 1.6.0.3 and getElementsByClassName [ In reply to ]
On 19 Mar 2010, at 1:38 AM, David E. Wheeler wrote:

> So does the attached patch look right? I ran Bricolage and I *think* I tested the functions that were changed by playing with the corresponding UI. I'd appreciate confirmation from others.

Works for me. $A() extends "native" javascript arrays into super-Prototype ones so those calls aren't really needed; $$() and Element.select() already return Prototype arrays.

So this works:

var selects = container.select('.reorder');
...
this.list.select('.value').each((function(sibling) {
...etc...

rather than this:

var selects = $A(container.select('.reorder'));
...
$A(this.list.select('.value')).each((function(sibling) {
...etc...


Works either way, just a "less code" kind of quibble.
Re: Prototype 1.6.0.3 and getElementsByClassName [ In reply to ]
Don't forget:

comp/widgets/media_prof/edit_meta.html:
$A(document.getElementsByClassName('reorder',
'contribs')).each(function(select) {
comp/widgets/story_prof/edit_meta.html:
$A(document.getElementsByClassName('reorder',
'contribs')).each(function(select) {

Adrian

David E. Wheeler wrote:
> On Mar 19, 2010, at 1:41 AM, David E. Wheeler wrote:
>
>> On Mar 19, 2010, at 1:38 AM, David E. Wheeler wrote:
>>
>>> So does the attached patch look right? I ran Bricolage and I *think* I tested the functions that were changed by playing with the corresponding UI. I'd appreciate confirmation from others
>> Patch attached f'realz.
>
> And now ending in .txt, so hopefully the mail list won't reject it.
>
> Best,
>
> David
>
>
>
> ------------------------------------------------------------------------
>
>
>
Re: Prototype 1.6.0.3 and getElementsByClassName [ In reply to ]
On Mar 19, 2010, at 1:55 AM, Greg Heo wrote:

> On 19 Mar 2010, at 1:38 AM, David E. Wheeler wrote:
>
>> So does the attached patch look right? I ran Bricolage and I *think* I tested the functions that were changed by playing with the corresponding UI. I'd appreciate confirmation from others.
>
> Works for me. $A() extends "native" javascript arrays into super-Prototype ones so those calls aren't really needed; $$() and Element.select() already return Prototype arrays.

Thanks, changed.

Best,

David
Re: Prototype 1.6.0.3 and getElementsByClassName [ In reply to ]
On Mar 19, 2010, at 4:51 PM, Adrian Yee wrote:

> comp/widgets/media_prof/edit_meta.html: $A(document.getElementsByClassName('reorder', 'contribs')).each(function(select) {
> comp/widgets/story_prof/edit_meta.html: $A(document.getElementsByClassName('reorder', 'contribs')).each(function(select) {

Right. So I've committed this:

http://github.com/bricoleurs/bricolage/commit/3b86f7b068fe40012df853460a67485dc679440f

Thanks for the pointer.

Best,

David