Last active
December 22, 2017 17:52
-
-
Save danyx23/e42ceedaccf0c4a556b8 to your computer and use it in GitHub Desktop.
Simple example of using Ports in Elm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "1.0.0", | |
| "summary": "helpful summary of your project, less than 80 characters", | |
| "repository": "https://github.com/user/project.git", | |
| "license": "BSD3", | |
| "source-directories": [ | |
| "." | |
| ], | |
| "exposed-modules": [], | |
| "dependencies": { | |
| "elm-lang/core": "3.0.0 <= v < 4.0.0", | |
| "evancz/elm-effects": "2.0.1 <= v < 3.0.0", | |
| "evancz/elm-html": "4.0.2 <= v < 5.0.0", | |
| "evancz/start-app": "2.0.2 <= v < 3.0.0" | |
| }, | |
| "elm-version": "0.16.0 <= v < 0.17.0" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module EncryptMessage where | |
| import Html exposing (Html, Attribute, text, toElement, div, input) | |
| import Html.Attributes exposing (..) | |
| import Html.Events exposing (on, targetValue) | |
| import Signal exposing (Address, Signal, Mailbox, mailbox, send) | |
| import StartApp | |
| import Effects exposing (Effects, Never) | |
| import String | |
| import Task | |
| app = | |
| StartApp.start { init = (init, Effects.none), view = view, update = update, inputs = [encryptedString] } | |
| main = app.html | |
| port tasks : Signal (Task.Task Never ()) | |
| port tasks = | |
| app.tasks | |
| type Action = | |
| TextChanged String | |
| | EncryptedValueReceived String | |
| | Noop | |
| type alias Model = | |
| { clearText : String | |
| , encryptedText : String | |
| } | |
| init = | |
| Model "" "" | |
| -- outgoing ports & mailbox | |
| portRequestEncryptionMailbox : Mailbox String | |
| portRequestEncryptionMailbox = | |
| mailbox "" | |
| port requestEncryption : Signal String | |
| port requestEncryption = | |
| portRequestEncryptionMailbox.signal | |
| -- incoming ports | |
| port encryptionCompleted : Signal String | |
| encryptedString : Signal Action | |
| encryptedString = | |
| Signal.map EncryptedValueReceived encryptionCompleted | |
| update : Action -> Model -> (Model, Effects Action) | |
| update action model = | |
| case action of | |
| TextChanged text -> | |
| ( { model | clearText = text } | |
| , sendStringToBeEncrypted text | |
| ) | |
| EncryptedValueReceived encrypted -> | |
| ( { model | encryptedText = encrypted } | |
| , Effects.none | |
| ) | |
| Noop -> | |
| ( model, Effects.none ) | |
| sendStringToBeEncrypted : String -> Effects Action | |
| sendStringToBeEncrypted clearText = | |
| send portRequestEncryptionMailbox.address clearText | |
| |> Effects.task | |
| |> Effects.map (\_ -> Noop) | |
| view : Address Action -> Model -> Html | |
| view address model = | |
| div [] | |
| [ input | |
| [ placeholder "Text to encrypt" | |
| , value model.clearText | |
| , on "input" targetValue (\textfieldContent -> Signal.message address <| TextChanged textfieldContent) | |
| , myStyle | |
| ] | |
| [] | |
| , div [ myStyle ] [ text (model.encryptedText) ] | |
| ] | |
| myStyle : Attribute | |
| myStyle = | |
| style | |
| [ ("width", "100%") | |
| , ("height", "40px") | |
| , ("padding", "10px 0") | |
| , ("font-size", "2em") | |
| , ("text-align", "center") | |
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <title>Encryption sample</title> | |
| <link href="base.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="encryptMessages.js"></script> | |
| <script> | |
| var div = document.getElementById('root'); | |
| var myapp = Elm.embed(Elm.EncryptMessage, div, {encryptionCompleted : ""}); | |
| myapp.ports.requestEncryption.subscribe(encryptString); | |
| function encryptString(message) { | |
| encryptedMessage = "Encypted: " + message; // actually encypting the message is ommited | |
| myapp.ports.encryptionCompleted.send(encryptedMessage); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@danyx23 nice example! would be great to see it updated for latest Elm version ... 😉