Re: [elm-discuss] Re: Elm Architecture in Vanilla JS

[Robert Muller]

Thank you. I am following BuckleScript; it's terrific but I cannot (yet)
teach OCaml or Elm to WebApps students. I don't think it will be long, but
for now I have to stick with JS.
Best,
RM


On Sun, Feb 26, 2017 at 10:24 PM, YuFan Lou  wrote:

> As an aside, since you mentioned OCaml, maybe you'd be interested in
> BuckleScript: https://github.com/bloomberg/bucklescript
>
> Robert Muller於 2017年2月25日星期六 UTC-5下午6時52分44秒寫道：
>
>> Greetings. I'm an OCaml guy, teaching Web Apps for the first time and
>> finding my way through the insanity that is HTML + CSS + JS and trying to
>> impart something sensible to students for how to structure their vanilla JS
>> apps to conform to the the Elm Architecture (model-view-update). First time
>> through, I'm not savvy enough to know how to properly fake the Elm
>> Architecture in vanilla JS.
>>
>> IN PARTICULAR: I'd like to write a simple TODO app where the model is a
>> record containing a list of todo items and a list of completed items. I'd
>> like to write the app along the lines of:
>>
>> let app = {
>>
>>  view : view, //   : model -> element
>>
>>  update : update   //  : model -> model
>>
>>}
>>
>>
>> But I'm getting bollixed-up with the basic wiring. It's very basic stuff.
>> E.g., let's say I have an addItem button; I assume that I want to wire-up
>> the event listener to deliver the new item to the model (an update).
>> Obviously these are executed asynchronously. But then what are the proper
>> manners for displaying the model in the DOM? For a simple synchronous
>> 8-queens solver example that I did, I wrote a reasonable runApp function
>> using the JS setInterval function. But I'm not sure if this is kosher for
>> the asynchronous case.
>>
>> Any advice here? Any pointers to Vanilla JS examples written using the
>> Elm Architecture?
>>
>> Thank you! Your reply would help me and my 60 students!
>> Bob Muller
>>
>> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Elm Discuss" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/
> topic/elm-discuss/XJ6yP_Mq7M0/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> elm-discuss+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: Elm Architecture in Vanilla JS

[YuFan Lou]

As an aside, since you mentioned OCaml, maybe you'd be interested in 
BuckleScript: https://github.com/bloomberg/bucklescript

Robert Muller於 2017年2月25日星期六 UTC-5下午6時52分44秒寫道：
>
> Greetings. I'm an OCaml guy, teaching Web Apps for the first time and 
> finding my way through the insanity that is HTML + CSS + JS and trying to 
> impart something sensible to students for how to structure their vanilla JS 
> apps to conform to the the Elm Architecture (model-view-update). First time 
> through, I'm not savvy enough to know how to properly fake the Elm 
> Architecture in vanilla JS.
>
> IN PARTICULAR: I'd like to write a simple TODO app where the model is a 
> record containing a list of todo items and a list of completed items. I'd 
> like to write the app along the lines of:
>
> let app = { 
>
>  view : view, //   : model -> element 
>
>  update : update   //  : model -> model
>
>}  
>
>
> But I'm getting bollixed-up with the basic wiring. It's very basic stuff. 
> E.g., let's say I have an addItem button; I assume that I want to wire-up 
> the event listener to deliver the new item to the model (an update). 
> Obviously these are executed asynchronously. But then what are the proper 
> manners for displaying the model in the DOM? For a simple synchronous 
> 8-queens solver example that I did, I wrote a reasonable runApp function 
> using the JS setInterval function. But I'm not sure if this is kosher for 
> the asynchronous case.
>
> Any advice here? Any pointers to Vanilla JS examples written using the Elm 
> Architecture?
>
> Thank you! Your reply would help me and my 60 students!
> Bob Muller
>
>

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Elm and contenteditable

[Simon]

For what I needed to do (convert an enter into a 'finished editing' action 
i found quite a nice solution

https://stackoverflow.com/questions/42390708/elm-conditional-preventdefault-with-contenteditable

In brief, I catch the keydown event but convert anything other than an 
enter in to json decode fail, so that it does not reach the update loop. An 
enter is caught, with preventDefault applied, and is passed to update as a 
finished editing action, which I pass to Dom.blur and then catch the blur 
event and use that to cause the model to updated.

Simon


On Sunday, 26 February 2017 09:11:51 UTC+1, Vincent Jousse wrote:
>
> The best workaround I've found is to use a webcomponent wrapper (only 
> compatible with chrome): 
> https://github.com/vjousse/the-transcriber/blob/webcomponents/src/static/js/custom-text-editor-element.js
>
> I'm using a custom attribute called "content" that is mapped to my Elm 
> Model. With this solution I've got the best of both worlds: Elm is managing 
> the DOM of my contenteditable element while being able to write custom 
> behavior in javascript for it.
>
> It is based on this talk by Richard Feldman: 
> https://www.youtube.com/watch?v=ar3TakwE8o0
>
> 2017-02-25 11:41 GMT+01:00 Witold Szczerba  >:
>
>> One trick I have learned when integrating date range picker is that you 
>> can push data from component to Elm using custom HTML events instead of 
>> sending data through a port(s).
>> I have described it shortly here:
>>
>> https://www.reddit.com/r/elm/comments/5uqa13/those_fancy_date_pickers_in_elm_watch_this_no/
>>
>> input [ class "form-control date-range" , value <| formatMaybeDuration 
>> item.duration , onDateRangePicker DurationChanged *-- see demo for 
>> details* ] []
>>
>> Regards,
>> Witold Szczerba
>>
>> On Fri, Feb 24, 2017 at 4:30 PM, Josh Szmajda > > wrote:
>>
>>> I'm working with http://github.com/Voog/wysihtml, integration has been 
>>> pretty alright.. Still very much in the figuring things out stage for my 
>>> app but here are some key snippets:
>>>
>>> Ports:
>>> ```
>>> port startEditor : (String, String, String) -> Cmd msg
>>> port stopEditor : String -> Cmd msg
>>> port editorChanges : (String -> msg) -> Sub msg
>>> port selectionChange : (Selection -> msg) -> Sub msg
>>> ```
>>>
>>> Selection:
>>> ```
>>> type alias Selection =
>>>   { text : String
>>>   , t : Float
>>>   , r : Float
>>>   , b : Float
>>>   , l : Float
>>>   }
>>> ```
>>>
>>> WYSIHtml View:
>>> ```
>>> module Wysihtml.View exposing (wysiToolbar, wysiEditor)
>>>
>>> import Html exposing (..)
>>> import Html.Attributes exposing (id, attribute, class)
>>>
>>> wysiToolbar : a -> Html a
>>> wysiToolbar msg =
>>>   div [ id "wysi-toolbar" ]
>>> [ a [ class "bold", command msg "bold" ] [ text "B" ]
>>> , a [ class "italic", command msg "italic" ] [ text "I" ]
>>> , a [ class "h1", command msg "formatBlock", commandValue msg "h1" ] 
>>> [ text "H1" ]
>>> , a [ class "p", command msg "formatBlock", commandValue msg "p" ] [ 
>>> text "P" ]
>>> , a [ class "ul", command msg "inserUnorderedList" ] [ text "list" ]
>>> ]
>>>
>>> wysiEditor : a -> Html a
>>> wysiEditor msg =
>>>   div [ id "wysi-editor", dataPlaceholder msg "Start editing" ] []
>>>
>>>
>>> dataPlaceholder : a -> String -> Attribute a
>>> dataPlaceholder msg data =
>>>   attribute "data-placeholder" data
>>>
>>> command : a -> String -> Attribute a
>>> command msg command =
>>>   attribute "data-wysihtml5-command" command
>>>
>>> commandValue : a -> String -> Attribute a
>>> commandValue msg value =
>>>   attribute "data-wysihtml5-command-value" value
>>> ```
>>>
>>> index.html wiring:
>>> ```
>>> app.ports.startEditor.subscribe(function(){
>>>   var editor = arguments[0][0];
>>>   var toolbar = arguments[0][1];
>>>   var initialText = arguments[0][2];
>>>   // todo change setTimeout to MutationObserver
>>>   setTimeout(function(){
>>> console.log('start editor');
>>> window.x_editor = new wysihtml5.Editor(editor, {
>>>   toolbar: toolbar,
>>>   parserRules:  wysihtml5ParserRules
>>> });
>>> window.x_editor.setValue(initialText, true);
>>> window.x_editor.on('interaction', function(){
>>>   app.ports.editorChanges.send(x_editor.getValue());
>>> });
>>>   }, 60);
>>> });
>>> document.addEventListener("selectionchange", function(){
>>>   console.log("selection changed, sending to elm");
>>>   selection = window.getSelection();
>>>   if(!selection.isCollapsed){
>>> for(var i = 0; i < selection.rangeCount; i++) {
>>>   range = selection.getRangeAt(i);
>>>   rect = range.getBoundingClientRect();
>>>   app.ports.selectionChange.send({ text: selection.toString(), t: 
>>> rect.top, r: rect.right, b: rect.bottom, l: rect.left });
>>> }
>>>   }
>>> });
>>> ```
>>>
>>> I think that's the meat. Happy to chat more.
>>>
>>>
>>> On Friday, February 24, 2017 at 3:38:33 AM UTC-5, Simon wrote:

 I'm also trying to 

[elm-discuss] Re: Designing with sum and product types

[kanishka azimi]

For the second case, I try to use elm-tagged more.

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Elm and contenteditable

[Vincent Jousse]

The best workaround I've found is to use a webcomponent wrapper (only
compatible with chrome):
https://github.com/vjousse/the-transcriber/blob/webcomponents/src/static/js/custom-text-editor-element.js

I'm using a custom attribute called "content" that is mapped to my Elm
Model. With this solution I've got the best of both worlds: Elm is managing
the DOM of my contenteditable element while being able to write custom
behavior in javascript for it.

It is based on this talk by Richard Feldman:
https://www.youtube.com/watch?v=ar3TakwE8o0

2017-02-25 11:41 GMT+01:00 Witold Szczerba :

> One trick I have learned when integrating date range picker is that you
> can push data from component to Elm using custom HTML events instead of
> sending data through a port(s).
> I have described it shortly here:
> https://www.reddit.com/r/elm/comments/5uqa13/those_fancy_
> date_pickers_in_elm_watch_this_no/
>
> input [ class "form-control date-range" , value <| formatMaybeDuration
> item.duration , onDateRangePicker DurationChanged *-- see demo for
> details* ] []
>
> Regards,
> Witold Szczerba
>
> On Fri, Feb 24, 2017 at 4:30 PM, Josh Szmajda  wrote:
>
>> I'm working with http://github.com/Voog/wysihtml, integration has been
>> pretty alright.. Still very much in the figuring things out stage for my
>> app but here are some key snippets:
>>
>> Ports:
>> ```
>> port startEditor : (String, String, String) -> Cmd msg
>> port stopEditor : String -> Cmd msg
>> port editorChanges : (String -> msg) -> Sub msg
>> port selectionChange : (Selection -> msg) -> Sub msg
>> ```
>>
>> Selection:
>> ```
>> type alias Selection =
>>   { text : String
>>   , t : Float
>>   , r : Float
>>   , b : Float
>>   , l : Float
>>   }
>> ```
>>
>> WYSIHtml View:
>> ```
>> module Wysihtml.View exposing (wysiToolbar, wysiEditor)
>>
>> import Html exposing (..)
>> import Html.Attributes exposing (id, attribute, class)
>>
>> wysiToolbar : a -> Html a
>> wysiToolbar msg =
>>   div [ id "wysi-toolbar" ]
>> [ a [ class "bold", command msg "bold" ] [ text "B" ]
>> , a [ class "italic", command msg "italic" ] [ text "I" ]
>> , a [ class "h1", command msg "formatBlock", commandValue msg "h1" ]
>> [ text "H1" ]
>> , a [ class "p", command msg "formatBlock", commandValue msg "p" ] [
>> text "P" ]
>> , a [ class "ul", command msg "inserUnorderedList" ] [ text "list" ]
>> ]
>>
>> wysiEditor : a -> Html a
>> wysiEditor msg =
>>   div [ id "wysi-editor", dataPlaceholder msg "Start editing" ] []
>>
>>
>> dataPlaceholder : a -> String -> Attribute a
>> dataPlaceholder msg data =
>>   attribute "data-placeholder" data
>>
>> command : a -> String -> Attribute a
>> command msg command =
>>   attribute "data-wysihtml5-command" command
>>
>> commandValue : a -> String -> Attribute a
>> commandValue msg value =
>>   attribute "data-wysihtml5-command-value" value
>> ```
>>
>> index.html wiring:
>> ```
>> app.ports.startEditor.subscribe(function(){
>>   var editor = arguments[0][0];
>>   var toolbar = arguments[0][1];
>>   var initialText = arguments[0][2];
>>   // todo change setTimeout to MutationObserver
>>   setTimeout(function(){
>> console.log('start editor');
>> window.x_editor = new wysihtml5.Editor(editor, {
>>   toolbar: toolbar,
>>   parserRules:  wysihtml5ParserRules
>> });
>> window.x_editor.setValue(initialText, true);
>> window.x_editor.on('interaction', function(){
>>   app.ports.editorChanges.send(x_editor.getValue());
>> });
>>   }, 60);
>> });
>> document.addEventListener("selectionchange", function(){
>>   console.log("selection changed, sending to elm");
>>   selection = window.getSelection();
>>   if(!selection.isCollapsed){
>> for(var i = 0; i < selection.rangeCount; i++) {
>>   range = selection.getRangeAt(i);
>>   rect = range.getBoundingClientRect();
>>   app.ports.selectionChange.send({ text: selection.toString(), t:
>> rect.top, r: rect.right, b: rect.bottom, l: rect.left });
>> }
>>   }
>> });
>> ```
>>
>> I think that's the meat. Happy to chat more.
>>
>>
>> On Friday, February 24, 2017 at 3:38:33 AM UTC-5, Simon wrote:
>>>
>>> I'm also trying to work with contenteditable. I have a basic system
>>> working with pure Elm, in that I can click on a field to edit it and then
>>> click elsewhere with blur causing an update of the model. But the challenge
>>> I face is detecting an enter key and using that save the updated value and
>>> blur the current field. I seem to be getting some virtual DOM issues.
>>>
>>> Anyway I have an Ellie at https://ellie-app.com/tnXL92zwvka1/3 and if
>>> anyone can help, I'd love to know
>>>
>>> Simon
>>>
>>> On Tuesday, 27 September 2016 16:35:04 UTC+2, Girish Sonawane wrote:

 Instead of onChange, you can try using Events.on http://package.elm-l
 ang.org/packages/elm-lang/html/1.1.0/Html-Events#on


 On Tuesday, August 30, 2016 at 3:16:12 PM UTC+5:30, Peter Damoc wrote: