This demonstrates how to incorporate a Polymer web component into an Elm application.
In particular, it uses a polymer-paper-date-picker
component from https://github.com/bendavis78/paper-date-picker to present a calendar and update the Elm model based on the user's choices of calendar date.
npm install -g elm
npm install -g bower
npm install -g vulcanize
git clone [email protected]:fredcy/elm-polymer-calendar.git
cd elm-polymer-calendar
bower install
make
cd elm-polymer-calendar
python3 -m http.server
Browse http://localhost:8000/
The calendar component generates a JS date-changed
event each time the user selects a date.
The onValueChanged
function in Main.elm sets up an Elm Html event attribute that ultimately creates a DateChanged
message.
The Elm Json.Decode functions do not provide a way to decode the JS Date
value in that event,
so the message carries the value as a Json.Decode.Value which is later converted to an Elm Date
value via custom native code in JsonDateDecode.toDate
.
Running make dist
will generate a "dist" directory with the minimal static web content needed to deploy the application.
This started as a direct copy of a gist by Peter Damoc (@pdamoc) and relates to a discussion on the elm-discuss list