navigating the DOM

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
16 messages Options
Reply | Threaded
Open this post in threaded view
|

navigating the DOM

Dave Mason
Hi,

I've just started using Amber, and needed to navigate the DOM, so I did:

        (document getElementsByClassName: 'program') do: [: program | ... ]

but I got a DNU for NodeList>>do: so I poked around a bit, trying to figure out how to give it Array properties.  I thought of doing something in callJavaScriptMethod in boot.js.

Then I found that adding the following line to boot.js:585 fixed this:
smalltalk.mapClassName("NodeList", "Kernel", NodeList, smalltalk.SequenceableCollection);

Perhaps it should be conditionalized on the existence of NodeList in case it's running in Node.js or something.  Or perhaps there's a better way.  Either way, it would be nice to have this functionality by default.  And maybe it should look at all js classes that have a length field and make them all SequenceableCollections.

../Dave
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Herby Vojčík
Amber includes jQuery (and uses it internally), so
'.program' asJQuery do: ...
should do the trick.

Herby

Dave Mason wrote:

> Hi,
>
> I've just started using Amber, and needed to navigate the DOM, so I did:
>
> (document getElementsByClassName: 'program') do: [: program | ... ]
>
> but I got a DNU for NodeList>>do: so I poked around a bit, trying to figure out how to give it Array properties.  I thought of doing something in callJavaScriptMethod in boot.js.
>
> Then I found that adding the following line to boot.js:585 fixed this:
> smalltalk.mapClassName("NodeList", "Kernel", NodeList, smalltalk.SequenceableCollection);
>
> Perhaps it should be conditionalized on the existence of NodeList in case it's running in Node.js or something.  Or perhaps there's a better way.  Either way, it would be nice to have this functionality by default.  And maybe it should look at all js classes that have a length field and make them all SequenceableCollections.
>
> ../Dave
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Nicolas Petton
Herby Vojčík <[hidden email]> writes:

> Amber includes jQuery (and uses it internally), so
> '.program' asJQuery do: ...
> should do the trick.

Indeed. Also, I don't want to extend host objects.

Nico

>
> Herby
>
> Dave Mason wrote:
>> Hi,
>>
>> I've just started using Amber, and needed to navigate the DOM, so I did:
>>
>> (document getElementsByClassName: 'program') do: [: program | ... ]
>>
>> but I got a DNU for NodeList>>do: so I poked around a bit, trying to
>> figure out how to give it Array properties.  I thought of doing
>> something in callJavaScriptMethod in boot.js.
>>
>> Then I found that adding the following line to boot.js:585 fixed this:
>> smalltalk.mapClassName("NodeList", "Kernel", NodeList, smalltalk.SequenceableCollection);
>>
>> Perhaps it should be conditionalized on the existence of NodeList in
>> case it's running in Node.js or something.  Or perhaps there's a
>> better way.  Either way, it would be nice to have this functionality
>> by default.  And maybe it should look at all js classes that have a
>> length field and make them all SequenceableCollections.
>>
>> ../Dave

--
Nicolas Petton
http://nicolas-petton.fr
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Dave Mason
In reply to this post by Herby Vojčík

On 2012-Jun-7, at 9:29 , Herby Vojčík wrote:

> Amber includes jQuery (and uses it internally), so
> '.program' asJQuery do: ...
> should do the trick.

When I deploy my application, I would like to avoid jQuery (I don't need an extra 100k+ bytes of download and I don't need the power of jQuery), so I want to avoid that, if possible.

../Dave
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Herby Vojčík
Dave Mason wrote:
> On 2012-Jun-7, at 9:29 , Herby Vojčík wrote:
>
>> Amber includes jQuery (and uses it internally), so
>> '.program' asJQuery do: ...
>> should do the trick.
>
> When I deploy my application, I would like to avoid jQuery (I don't
> need an extra 100k+ bytes of download and I don't need the power of
> jQuery), so I want to avoid that, if possible.

You can't. If you want to use Amber.
It is included and used in Canvas package (and of course in IDE, if you
develop).
(not that it is really impossible if you really want, but normally it is
included and used; of course you can do your own version of Amber where
you cut all of its use, but it's not worth the energy (and will probably
be buggy))
(and it is not 100k+, minified version is smaller)

Herby

>
> ../Dave
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

gcambi
In reply to this post by Herby Vojčík


On Jun 7, 3:29 pm, Herby Vojčík <[hidden email]> wrote:
> Amber includes jQuery (and uses it internally), so
> '.program' asJQuery do: ...
> should do the trick.
>

Hi,

Does that work? For example, when I try something like:

coll := Array new.
'.aParagraphClass' asJQuery do: [ :e| coll add: (e textContent)]

I get:

[object Object] does not understand #do:

This works for me:

'.aParagraphClass' asJQuery toArray do: [ :e| coll add: (e
textContent)]

--
Gabriele
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Herby Vojčík
Maybe you are true. I wrote the example 'in principle', that is,
asJQuery should be used. Details on how to do it exactly appear when you
try to use it (but I was convincing enough to even fool Nico ;-) ).

Herby

gcambi wrote:

>
> On Jun 7, 3:29 pm, Herby Vojčík<[hidden email]>  wrote:
>> Amber includes jQuery (and uses it internally), so
>> '.program' asJQuery do: ...
>> should do the trick.
>>
>
> Hi,
>
> Does that work? For example, when I try something like:
>
> coll := Array new.
> '.aParagraphClass' asJQuery do: [ :e| coll add: (e textContent)]
>
> I get:
>
> [object Object] does not understand #do:
>
> This works for me:
>
> '.aParagraphClass' asJQuery toArray do: [ :e| coll add: (e
> textContent)]
>
> --
> Gabriele
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Dave Mason
In reply to this post by Herby Vojčík

On 2012-Jun-7, at 12:16 , Herby Vojčík wrote:

> You can't. If you want to use Amber.
> It is included and used in Canvas package (and of course in IDE, if you develop).
> (not that it is really impossible if you really want, but normally it is included and used; of course you can do your own version of Amber where you cut all of its use, but it's not worth the energy (and will probably be buggy))
> (and it is not 100k+, minified version is smaller)

I've only grepped through the code, but at first blush the use of jQuery functionality looks to be pretty minimal, as it looks like most of the real calls to jQuery are from asJQuery and a couple other methods.  A jQuery stand-in that just implemented that minimal subset of jQuery might be worth it (though I'm not suggesting that any of *you* should do that!).

Obviously completely appropriate to get Amber off the ground, but not necessarily the best way going forward.

In my application for deployment I won't have any need for Canvas or IDE, so I'll be exploring ways to avoid jQuery, although it's obviously fine for development.  It also looks like if I don't have the IDE, I won't need CodeMirror either.

../Dave
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

gokr
In reply to this post by Herby Vojčík




-- Sent from my Palm Pre 2, wohoo!


On Jun 7, 2012 18:16, Herby Vojčík <[hidden email]> wrote:

Dave Mason wrote:
> On 2012-Jun-7, at 9:29 , Herby Vojčík wrote:
>
>> Amber includes jQuery (and uses it internally), so
>> '.program' asJQuery do: ...
>> should do the trick.
>
> When I deploy my application, I would like to avoid jQuery (I don't
> need an extra 100k+ bytes of download and I don't need the power of
> jQuery), so I want to avoid that, if possible.

You can't. If you want to use Amber.
It is included and used in Canvas package (and of course in IDE, if you
develop).
(not that it is really impossible if you really want, but normally it is
included and used; of course you can do your own version of Amber where
you cut all of its use, but it's not worth the energy (and will probably
be buggy))
(and it is not 100k+, minified version is smaller)

Herby

>
> ../Dave
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Herby Vojčík
In reply to this post by Dave Mason


Dave Mason wrote:

> On 2012-Jun-7, at 12:16 , Herby Vojčík wrote:
>
>> You can't. If you want to use Amber.
>> It is included and used in Canvas package (and of course in IDE, if you develop).
>> (not that it is really impossible if you really want, but normally it is included and used; of course you can do your own version of Amber where you cut all of its use, but it's not worth the energy (and will probably be buggy))
>> (and it is not 100k+, minified version is smaller)
>
> I've only grepped through the code, but at first blush the use of
> jQuery functionality looks to be pretty minimal, as it looks like
> most of the real calls to jQuery are from asJQuery and a couple other
> methods.  A jQuery stand-in that just implemented that minimal subset
> of jQuery might be worth it (though I'm not suggesting that any of
> *you* should do that!).

Why not? Zepto should do just fine unless you want your project to work
on IE. If you're mobile-headed, it is natural solution.

Herby
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Dave Mason

On 2012-Jun-7, at 13:22 , Herby Vojčík wrote:

> Why not? Zepto should do just fine unless you want your project to work on IE. If you're mobile-headed, it is natural solution.

Bingo!  Thanks for the pointer.  I might try to get Amber to use it for development as I never use IE.  (boot.js could try to load it first if you're not on IE).

../Dave
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Dave Mason
In reply to this post by Nicolas Petton

On 2012-Jun-7, at 10:37 , [hidden email] wrote:

> Indeed. Also, I don't want to extend host objects.

I hear that, and it's your baby, so your call.

However, it would be nice for someone using it to be able to extend host objects if that met their needs.  To that end, I tried moving:

> Dave Mason wrote:
>> Then I found that adding the following line to boot.js:585 fixed this:
>> smalltalk.mapClassName("NodeList", "Kernel", NodeList, smalltalk.SequenceableCollection);

info the ready function of loadAmber, to no avail.

Digging around in amber.js, I finally realized that adding a Kit-help.js to the loadAmber files field and putting that code there worked.

That would probably be good to document for smalltalkers who aren't comfortable digging around in Javascript code.  In my digging there, I also discovered the answer to how to deploy - by adding a 'deploy: true' field to the loadAmber spec.

But this loads Canvas, which forces a requirement for jQuery (or clone).  I would request/suggest loadDependencies be renamed loadCanvasDependencies and a new loadAmber spec be added for deployCanvas that defaults to true and causes the loading of Canvas and calls loadCanvasDependencies.

Thanks  ../Dave
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Nicolas Petton
Dave Mason <[hidden email]> writes:

> But this loads Canvas, which forces a requirement for jQuery (or
> clone).  I would request/suggest loadDependencies be renamed
> loadCanvasDependencies and a new loadAmber spec be added for
> deployCanvas that defaults to true and causes the loading of Canvas
> and calls loadCanvasDependencies.

can you do it and send me a pull request?

Thanks,
Nico

--
Nicolas Petton
http://nicolas-petton.fr
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Dave Mason

On 2012-Jun-11, at 12:45 , [hidden email] wrote:

> Dave Mason <[hidden email]> writes:
>
>> But this loads Canvas, which forces a requirement for jQuery (or
>> clone).  I would request/suggest loadDependencies be renamed
>> loadCanvasDependencies and a new loadAmber spec be added for
>> deployCanvas that defaults to true and causes the loading of Canvas
>> and calls loadCanvasDependencies.
>
> can you do it and send me a pull request?

I'm new to git, so I don't know how to do that.  In the interim, here's the fix for SequencableCollection>>copyFrom:to:

copyFrom: anIndex to: anotherIndex
        | range newCollection |
        range := anIndex to: anotherIndex.
        newCollection := self class new.
        range do: [:each |
            newCollection add: (self at: each)].
        ^newCollection

I have made changes for deployCanvas, but haven't had a chance to do any tests.

../Dave
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Nicolas Petton
Dave Mason <[hidden email]> writes:

Thanks Dave.

The bug has already been fixed in master thought.

Nico

> On 2012-Jun-11, at 12:45 , [hidden email] wrote:
>
>> Dave Mason <[hidden email]> writes:
>>
>>> But this loads Canvas, which forces a requirement for jQuery (or
>>> clone).  I would request/suggest loadDependencies be renamed
>>> loadCanvasDependencies and a new loadAmber spec be added for
>>> deployCanvas that defaults to true and causes the loading of Canvas
>>> and calls loadCanvasDependencies.
>>
>> can you do it and send me a pull request?
>
> I'm new to git, so I don't know how to do that.  In the interim, here's the fix for SequencableCollection>>copyFrom:to:
>
> copyFrom: anIndex to: anotherIndex
> | range newCollection |
> range := anIndex to: anotherIndex.
> newCollection := self class new.
> range do: [:each |
>    newCollection add: (self at: each)].
> ^newCollection
>
> I have made changes for deployCanvas, but haven't had a chance to do any tests.
>
> ../Dave

--
Nicolas Petton
http://nicolas-petton.fr
Reply | Threaded
Open this post in threaded view
|

Re: navigating the DOM

Dave Mason
In reply to this post by Dave Mason
On 2012-Jun-11, at 12:45 , [hidden email] wrote:

> Dave Mason <[hidden email]> writes:
>
>> I would request/suggest loadDependencies be renamed
>> loadCanvasDependencies and a new loadAmber spec be added for
>> deployCanvas that defaults to true and causes the loading of Canvas
>> and calls loadCanvasDependencies.
>
> can you do it and send me a pull request?

I still don't know how to do that with git, but I've attached a git diff from current HEAD.

Can you give me a 1 minute description of how to set up to get current HEAD updated easily?  I'd like to just say:
        git pull
and have the most recent updates integrated.  The trick is that this is inside a Mercurial VCS directory with the amber distribution files in the .hgignore file, and everything I do in the projects directory.  I got the git repository initially via:
        git pull https://github.com/NicolasPetton/amber.git 
but that appears to not have been the right magic, because a subsequent simple
        git pull
gives an error, although the documentation suggests with the proper magic, it should work.

I don't actually want to start doing git commits (unless it would somehow make your life better for me to submit patches), as I don't expect to make that many changes to the base code.  But I do want to stay up-to-date, and I do expect to fix bugs as I discover them.

Thanks  ../Dave


amber-diff (2K) Download Attachment