Data attributes with HTMLCanvas "with:" API

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

Data attributes with HTMLCanvas "with:" API

Federico Ramirez
Just trying out Amber with a toy app. It's looking fun, but it also looks like it lacks lot of things. Accessing documentation and examples is hard. This is not THAT bad though. What I'm stuck on currently is trying to add data attributes to an html element.

I just want to make a Bootstrap modal, so I have something like this:

renderOn: html
 html div
class: 'modal fade'; with: [
   html div
class: 'modal-dialog'; with: [
     html div
class: 'modal-content'; with: [
       html div
class: 'modal-header'; with: [
       
"how do I add the data attribute? Something like this would make sense"
         html button
class: 'close'; data: #{'dismiss' -> 'modal'}
       
].
     
].
   
].
 
].

Checking out the HTMLCanvas and TagBrush classes I can't seem to find any message relevant to adding data-attributes, but I might be missing something.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: Data attributes with HTMLCanvas "with:" API

Herby Vojčík
Federico Ramirez wrote:

> Just trying out Amber with a toy app. It's looking fun, but it also
> looks like it lacks lot of things. Accessing documentation and examples
> is hard. This is not THAT bad though. What I'm stuck on currently is
> trying to add data attributes to an html element.
>
> I just want to make a Bootstrap modal, so I have something like this:
>
> ||
> renderOn:html
>   html div class:'modal fade';with:[
>     html div class:'modal-dialog';with:[
>       html div class:'modal-content';with:[
>         html div class:'modal-header';with:[
> "how do I add the data attribute? Something like this would make sense"
>           html button class:'close';data:#{'dismiss' -> 'modal'}
> ].
> ].
> ].
> ].
>
> Checking out the HTMLCanvas and TagBrush classes I can't seem to find
> any message relevant to adding data-attributes, but I might be missing
> something.

There isn't any, as far as I looked. Web package allows you to fill what
you want by using jQuery, as if innermost block was:

   [
     | btn |
     btn := html button.
     btn class: 'close'.
     btn asJQuery data: #{'dismiss' -> 'modal'}
   ]

Unless you mean attributes, not data - they can be set easily with at:put:.

Or you can add `data` and `data:` API to TagBrush yourself via extension
methods of your app and just happily use it.

Or add it to amber-contrib-web repo itself and issue a PR.


Alternatively, if you do not care about old browsers, you can try to go
with Silk / DOMite web libraries, and use `propAt: 'dataset'` and
`propAt: 'dataset' put: ...`.

> --
> You received this message because you are subscribed to the Google
> Groups "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to [hidden email]
> <mailto:[hidden email]>.
> For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: Data attributes with HTMLCanvas "with:" API

Herby Vojčík
In reply to this post by Federico Ramirez
Federico Ramirez wrote:

> Just trying out Amber with a toy app. It's looking fun, but it also
> looks like it lacks lot of things. Accessing documentation and examples
> is hard. This is not THAT bad though. What I'm stuck on currently is
> trying to add data attributes to an html element.
>
> I just want to make a Bootstrap modal, so I have something like this:
>
> ||
> renderOn:html
>   html div class:'modal fade';with:[
>     html div class:'modal-dialog';with:[
>       html div class:'modal-content';with:[
>         html div class:'modal-header';with:[
> "how do I add the data attribute? Something like this would make sense"
>           html button class:'close';data:#{'dismiss' -> 'modal'}
Well, as you set a string, maybe simple at: 'data-dismiss' put: 'modal'
should work here as well.

> ].
> ].
> ].
> ].
>
> Checking out the HTMLCanvas and TagBrush classes I can't seem to find
> any message relevant to adding data-attributes, but I might be missing
> something.
>
> --
> You received this message because you are subscribed to the Google
> Groups "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to [hidden email]
> <mailto:[hidden email]>.
> For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: Data attributes with HTMLCanvas "with:" API

Federico Ramirez
In reply to this post by Herby Vojčík
Ah I see, thanks a lot :)

On Monday, 6 February 2017 12:37:14 UTC-3, Herby wrote:
Federico Ramirez wrote:

> Just trying out Amber with a toy app. It's looking fun, but it also
> looks like it lacks lot of things. Accessing documentation and examples
> is hard. This is not THAT bad though. What I'm stuck on currently is
> trying to add data attributes to an html element.
>
> I just want to make a Bootstrap modal, so I have something like this:
>
> ||
> renderOn:html
>   html div class:'modal fade';with:[
>     html div class:'modal-dialog';with:[
>       html div class:'modal-content';with:[
>         html div class:'modal-header';with:[
> "how do I add the data attribute? Something like this would make sense"
>           html button class:'close';data:#{'dismiss' -> 'modal'}
> ].
> ].
> ].
> ].
>
> Checking out the HTMLCanvas and TagBrush classes I can't seem to find
> any message relevant to adding data-attributes, but I might be missing
> something.

There isn't any, as far as I looked. Web package allows you to fill what
you want by using jQuery, as if innermost block was:

   [
     | btn |
     btn := html button.
     btn class: 'close'.
     btn asJQuery data: #{'dismiss' -> 'modal'}
   ]

Unless you mean attributes, not data - they can be set easily with at:put:.

Or you can add `data` and `data:` API to TagBrush yourself via extension
methods of your app and just happily use it.

Or add it to amber-contrib-web repo itself and issue a PR.


Alternatively, if you do not care about old browsers, you can try to go
with Silk / DOMite web libraries, and use `propAt: 'dataset'` and
`propAt: 'dataset' put: ...`.

> --
> You received this message because you are subscribed to the Google
> Groups "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to <a href="javascript:" target="_blank" gdf-obfuscated-mailto="v9Pskr3kBgAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">amber-lang+...@googlegroups.com
> <mailto:<a href="javascript:" target="_blank" gdf-obfuscated-mailto="v9Pskr3kBgAJ" rel="nofollow" onmousedown="this.href=&#39;javascript:&#39;;return true;" onclick="this.href=&#39;javascript:&#39;;return true;">amber-lang+unsubscribe@...>.
> For more options, visit <a href="https://groups.google.com/d/optout" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://groups.google.com/d/optout&#39;;return true;" onclick="this.href=&#39;https://groups.google.com/d/optout&#39;;return true;">https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.