Re: [elm-discuss] Re: Errors when using Chart.js in a port subscription

[Coury Ditch]

Hopefully this will be helpful for someone. I've struggled with an elegant 
solution to this problem the last couple days, and found something that 
worked out quite nicely.
http://stackoverflow.com/questions/38952724/how-to-coordinate-rendering-with-port-interactions-elm-0-17/42451273#42451273

On Sunday, November 13, 2016 at 4:00:15 AM UTC-7, Austin Bingham wrote:
>
> That definitely looks like it would address the issues I'm seeing. Thanks 
> for pointing it out!
>
> ‪On Sun, Nov 13, 2016 at 12:53 AM ‫أحمد حبنكة‬‎  > wrote:‬
>
>>
>>
>> بتاريخ الأربعاء، 9 نوفمبر، 2016 10:11:06 ص UTC+2، كتب Austin Bingham:
>>>
>>> I'm trying to use Chart.js from my elm app, and I'm running into some 
>>> errors that I can't sort out. In short, I've got a elm-to-javascript port 
>>> that takes in a data structure describing the chart I want to draw. Then on 
>>> the javascript side I've got a subscription to that port that renders that 
>>> chart. A trimmed version of that function looks like this:
>>>
>>> var brooksChart = null;
>>>
>>> function chart(val) {
>>>  var datasets = ... // calculate data sets from `val`
>>>
>>>  var ctx = document.getElementById("bark-spider-canvas");
>>>
>>>  if (brooksChart) {
>>>  brooksChart.destroy();
>>>  }
>>>
>>>  brooksChart = new Chart(ctx, {
>>>  type: 'line',
>>>  data: {
>>>  datasets: datasets
>>>  },
>>>  options: {
>>>  scales: {
>>>  xAxes: [{
>>>  type: 'linear',
>>>  position: 'bottom'
>>>  }]
>>>  }
>>>  }
>>>  });
>>>  };
>>>  
>>> When I run this and pass data into the port, the chart is rendered 
>>> correctly. But, at some point after the "new Chart(...)" call completes, I 
>>> get errors in the javascript console like this:
>>>
>>> bark_spider.js:8139 Uncaught TypeError: Cannot read property 
>>> 'childNodes' of undefined(…)addDomNodesHelp @ 
>>> bark_spider.js:8139addDomNodesHelp @ bark_spider.js:8147addDomNodesHelp @ 
>>> bark_spider.js:8147addDomNodesHelp @ bark_spider.js:8147addDomNodesHelp @ 
>>> bark_spider.js:8147addDomNodes @ bark_spider.js:8066applyPatches @ 
>>> bark_spider.js:8195updateIfNeeded @ bark_spider.js:7232
>>>
>>> The fallout of this seems to be that the elm runtime gets confused, at 
>>> least insofar as I don't receive Msgs that I ought to be receiving. In 
>>> fact, if I take the call to "new Chart(...)" out, then my app works just 
>>> fine (except of course that charts aren't rendered).
>>>
>>> So, does anyone have any idea what I'm going wrong? This seems like 
>>> pretty standard use of both ports and chart.js, but clearly I'm missing 
>>> something.
>>>
>>
>>  I think your problem is related to this issue : 
>> https://github.com/elm-lang/html/issues/19 , the feature request is 
>> added in this meta issue : https://github.com/elm-lang/html/issues/53 So 
>> I think it's only a matter of time before we have true interop with JS :) 
>>
>> -- 
>> 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...@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: can't understand compiler error

[Anurup Mitra]

Dear Alex,

This is very elegant indeed! I am bowled over by the simplicity of it all. 
So its like chaining mathematical functions...

I'm off to read Learn You a Haskell.

Thanks a ton mate!

Best Regards
Anurup

-- 
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: can't understand compiler error

[Alex Darlington]

>
> Hi Anarup,
Try changing your update function to:

update : Msg -> Model -> Model
update msg model =
case msg of
Name name ->
unsetFlag { model | name = name }

Age age ->
unsetFlag { model | age = age }

Password password ->
unsetFlag { model | password = password }

PasswordAgain password ->
unsetFlag { model | passwordAgain = password }

SetFlag ->
{ model | flag = True }

The problem is you are still trying to do things in a procedural way, but 
each branch of your case statement needs to be a single value (and all of 
them need to be the same type).
You are trying to do 2 separate statements, I have turned it into one 
statement/value.

It is confusing at first but very worthwhile to learn.
Reading the first few chapters (1-6) of Learn You a Haskell gives you the 
essential ideas.
http://learnyouahaskell.com/chapters

You don't need to go any further than Chapter 6, it will not be very 
relevant to Elm.

Good luck

-- 
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] Can I run Elm with/on Nodejs

[Tom F]

Hey guys,

I'm also very interested in running elm server side (especially node.js), 
and would appreciate to hear about your experiences & tips.

Thx !

On Friday, January 9, 2015 at 6:09:11 PM UTC+1, Sonny Michaud wrote:
>
> Everything Joey said is spot on.  I should have pointed out that my 
> library simply takes care of running elm-compile for you and giving you 
> access to the ports from your Elm code.  Basically, the point is to reduce 
> the friction of those additional build steps for you.  There is also an 
> interoperability layer between the ports from Elm and Node EventEmitter 
> objects, so people familiar with the latter can concern themselves with the 
> details less.
>
> - Sonny
>
> On 01/09/2015 11:59 AM, Joey Eremondi wrote:
>
> @robcuz the important thing to remember is that Elm is just a way to 
> translate elm code into JavaScript.
>
> So really, you can run Elm with any platform that interacts with JS, 
> because the result of elm-make is JavaScript. So you use the code Elm 
> generates as part of a JS project. Ports makes this particularly elegant.
>
> Here's the tutorial on Ports:
> http://elm-lang.org/learn/Ports.elm
>
> As for importing libs into elm-repl, that's not possible because it would 
> violate purity. It's easy to call Elm from JavaScript, but calling 
> JavaScript from Elm is tough, because there's no guarantee that JS code is 
> pure (performs no side-effects) or typesafe. So your best bet is to choose 
> the functionality you want to import and set up ports for them.
>
> On Friday, January 9, 2015 at 5:24:53 PM UTC+1, Sonny Michaud wrote: 
>>
>> I wrote a NPM module that goes in the opposite direction - allowing you 
>> to import Elm code into your JS: https://www.npmjs.com/package/elm-loader
>>
>> - Sonny
>>
>> On 01/09/2015 08:45 AM, robkuz wrote:
>>
>> I havent found anything to declare the contrary but also nothing that 
>> says its possible. 
>> And if it is possible can I import JS libs into the ELM Repl? or how is 
>> that done?
>>
>> Thanks for clarification
>>
>> Rob
>> -- 
>> 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...@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...@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.

Re: [elm-discuss] Elm and contenteditable

[Josh Szmajda]

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-lang.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:
>>>
>>> I've tried a naive implementation in Elm but, for some reason, it 
>>> doesn't work (events are not fired for divs that have content editable) 
>>>
>>> import Html exposing (..)
>>> import Html.Attributes exposing (..)
>>> import Html.App exposing (beginnerProgram)
>>> import Html.Events exposing (on)
>>> import Json.Encode as JE
>>> import Json.Decode as JD exposing ((:=))
>>>
>>>
>>> main =
>>>   beginnerProgram { model = "", view = view, update = update }
>>>
>>>
>>> onContent tagger = 
>>>   on "input" (JD.map tagger ("innerHTML" := JD.string))
>>>
>>> view model =
>>>   div []
>>> [ div [property "innerHTML" (JE.string model), onContent OnChange, 
>>> contenteditable True][]
>>> ]
>>>
>>>
>>> type Msg = OnChange String 
>>>
>>>
>>> update msg model =
>>>   case (Debug.log "msg:" msg) of
>>> OnChange str -> str
>>>
>>>
>>>
>>>
>>>
>>>
>>> On Tue, Aug 30, 2016 at 12:03 PM, Vincent Jousse  
>>> wrote:
>>>
 Hello,

 I'm writing an application where the user needs to edit some HTML 
 content. When I first wrote this application in JS, I was using some 
 contenteditable fields to do so.

 How should I handle this with Elm? My problem is that if I set a div 
 with contenteditable=true in elm, and that the content of this div depends 
 on my model state, when an user edits the HTML, my model is now out of 
 sync.
 Maybe getting the innerHTML field when the user is changing the content 
 of the div 

[elm-discuss] Re: can't understand compiler error

[Anurup Mitra]

Peter, Witold and David,

Thanks to all of you for having taken time out to reply to a novice!

@ Peter : Your comment was an eye-opener. This wasn't obvious to me at all 
because I am still to wrap my head around the FRP paradigm...

@ Witold : Your detailed reply is nothing short of exceptional. Thanks for 
being so patient and writing out that nice reply. I have read it many times 
already...

@ David : This is indeed something that I should have seen earlier as 
Witold also pointed out.

I tried going back with all your comments and suggestions and redoing the 
exercise and failed again. I now feel like cheating and asking for the 
solution. My guess is that my sequential programming mindset is acting as a 
blocker. Could you please help with how you would achieve the button press 
validation?

I am at a loss to see how I can set up all of the model, update and view to 
do this. By the way, the idea is to have a validation of the form done ONLY 
AFTER the submit button has been pressed. I would love to know how this 
solution would be attempted by a seasoned/professional programmer.

This is what I tried...

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)
import String

main =
  Html.beginnerProgram { model = model, view = view, update = update }

-- MODEL

type alias Model =
  { name : String
  , age : String
  , password : String
  , passwordAgain : String
  , flag : Bool
  }

model : Model
model =
  Model "" "" "" "" False

-- UPDATE

type Msg
= Name String
| Password String
| PasswordAgain String
| Age String
| SetFlag

unsetFlag : Model -> Model
unsetFlag model =
  { model | flag = False}
  
update : Msg -> Model -> Model
update msg model =
  case msg of
Name name ->
  { model | name = name }
  unsetFlag model

Age age ->
  { model | age = age}
  unsetFlag model
  
Password password ->
  { model | password = password }
  unsetFlag model
  
PasswordAgain password ->
  { model | passwordAgain = password }
  unsetFlag model
  
SetFlag ->
  { model | flag = True }

-- VIEW

view : Model -> Html Msg
view model =
  div []
[ input [ type_ "text", placeholder "Name", onInput Name ] []
, input [ type_ "text", placeholder "Age", onInput Age ] []
, input [ type_ "password", placeholder "Password", onInput Password ] 
[]
, input [ type_ "password", placeholder "Re-enter Password", onInput 
PasswordAgain ] []
, div [] [button [ onClick SetFlag ] [text "Submit"] ]
, viewValidation model
]


viewValidation : Model -> Html msg
viewValidation model =
  if model.flag == True then
let (color, message) =
if Result.withDefault 0 (String.toInt model.age) <= 0 then
  ("red", "Funny Age")
else if String.length model.password < 9 then
  ("red", "Password too short")
else if model.password == model.passwordAgain then
  ("green", "OK")
else
  ("red", "Passwords do not match!")
in
  div [ style [("color", color)] ] [ text message ]
  else
let (color, message) = ("white", "")
in div [ style [("color", color)] ] [ text message ]

-- 
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: can't understand compiler error

[David Legard]

Think of it in terms of the type signature, in your case

viewValidation : Model -> Html msg

You are giving this function a Model, and every branch of this function 
must return a Html msg, nothing more, nothing less.

The function is a black box - it expects a Model as input. It will return 
an Html Msg as output. Nothing else happens. That is the functional way.

-- 
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]

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-lang.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:
>>
>> I've tried a naive implementation in Elm but, for some reason, it doesn't 
>> work (events are not fired for divs that have content editable) 
>>
>> import Html exposing (..)
>> import Html.Attributes exposing (..)
>> import Html.App exposing (beginnerProgram)
>> import Html.Events exposing (on)
>> import Json.Encode as JE
>> import Json.Decode as JD exposing ((:=))
>>
>>
>> main =
>>   beginnerProgram { model = "", view = view, update = update }
>>
>>
>> onContent tagger = 
>>   on "input" (JD.map tagger ("innerHTML" := JD.string))
>>
>> view model =
>>   div []
>> [ div [property "innerHTML" (JE.string model), onContent OnChange, 
>> contenteditable True][]
>> ]
>>
>>
>> type Msg = OnChange String 
>>
>>
>> update msg model =
>>   case (Debug.log "msg:" msg) of
>> OnChange str -> str
>>
>>
>>
>>
>>
>>
>> On Tue, Aug 30, 2016 at 12:03 PM, Vincent Jousse  
>> wrote:
>>
>>> Hello,
>>>
>>> I'm writing an application where the user needs to edit some HTML 
>>> content. When I first wrote this application in JS, I was using some 
>>> contenteditable fields to do so.
>>>
>>> How should I handle this with Elm? My problem is that if I set a div 
>>> with contenteditable=true in elm, and that the content of this div depends 
>>> on my model state, when an user edits the HTML, my model is now out of sync.
>>> Maybe getting the innerHTML field when the user is changing the content 
>>> of the div and set this to a field in my model? But how would I do to 
>>> convert this string back to some Html.div/Html.span/whatever code in Elm?
>>> The tricky part is that I need to handle events on spans that are in the 
>>> div with contenteditable=true.
>>>
>>> I tried to do it using Ports and Draft-js but the problem is that I now 
>>> have 2 states in my application: one in Elm and one in JS/React. Then, all 
>>> the beauty of "my application just depends on my Elm model state" is not 
>>> true anymore, as I know need to sync the 2 states…
>>>
>>> Not sure if I'm really clear, but thanks for reading this anyway ;-)
>>>
>>> -- 
>>> 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...@googlegroups.com.
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>
>>
>>
>> -- 
>> There is NO FATE, we are the creators.
>> blog: http://damoc.ro/
>>
>

-- 
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 package manager behind a proxy

[roovo]

what are you typing to get that error - I'm currently behind a corporate 
proxy and can run elm repl fine.  It even runs if I unset the proxy env 
variables in the terminal session.  Is it that it isn't installed properly? 
 It looks like your proxy doesn't let you access github via https?? 
although why elm repl would try and do this when you start it up I don't 
know...

My set-up is on a mac - and I'm using the asdf package manager to install 
elm

On Thursday, February 23, 2017 at 1:09:54 PM UTC, Abhinav Gogna wrote:
>
> Can anyone help me out? I am willing to make it work (almost) whatever it 
> takes.
>
> On Wednesday, February 22, 2017 at 6:15:11 PM UTC-5, Abhinav Gogna wrote:
>>
>> I can't get elm-repl to work behind proxy. I have set http_proxy and 
>> https_proxy but to no avail.
>>
>> I would like to learn elm and use it at work but without proxy support, I 
>> can go forward. Would really appreciate, if someone, can help get this 
>> working behind proxy. 
>>
>> Currently, the error I am getting is 
>>
>> Error: The following HTTP request failed.
>> 
>>
>> ProxyConnectException "github.com" 443 (Right (StatusCodeException (
>> Status {statusCode = 403, statusMessage = "Forbidden"}) [] (CJ {expose = 
>> []})))
>>
>>
>>
>> On Saturday, January 16, 2016 at 1:09:15 AM UTC-5, Alex Neslusan wrote:
>>>
>>> Yes. It works for me at work behind my authenticated corporate proxy. I 
>>> don't remember having to do anything to get it working, it just worked when 
>>> I set it as a system proxy.
>>> On Saturday, January 16, 2016 at 12:50:19 AM UTC+8, Ronn Ross wrote:

 Has anyone used Elm's package manager from behind a proxy? Any advice 
 to get it working? 

>>>

-- 
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.