This is an example that use Elm ports with facebook-sdk
Last active
November 2, 2018 22:10
-
-
Save groteck/f26b445b6cdcda4366b88516dce9eae6 to your computer and use it in GitHub Desktop.
elm facebook integration test
This file contains hidden or 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
| port module Facebook exposing (..) | |
| import Html exposing (..) | |
| import Html.Attributes exposing (..) | |
| import Html.Events exposing (..) | |
| import String | |
| import Debug | |
| main = | |
| program | |
| { init = init | |
| , view = view | |
| , update = update | |
| , subscriptions = subscriptions | |
| } | |
| -- MODEL | |
| type alias Model = | |
| { fbToken: String | |
| } | |
| init : ( Model, Cmd Msg ) | |
| init = | |
| ( Model "", Cmd.none ) | |
| -- UPDATE | |
| type Msg | |
| = Login | |
| | Logout | |
| | Status | |
| | AddToken String | |
| -- port for sending strings out to JavaScript | |
| port fbAction : String -> Cmd msg | |
| -- port for listening for suggestions from JavaScript | |
| port fbToken : (String -> msg) -> Sub msg | |
| update : Msg -> Model -> ( Model, Cmd Msg ) | |
| update msg model = | |
| case msg of | |
| Login -> | |
| (model , fbAction "Login" ) | |
| Logout -> | |
| (model , fbAction "Logout" ) | |
| Status -> | |
| (model , fbAction "Status" ) | |
| AddToken newToken -> | |
| ({model | fbToken = newToken} , Cmd.none ) | |
| -- SUBSCRIPTIONS | |
| subscriptions : Model -> Sub Msg | |
| subscriptions model = Debug.log "sub: " fbToken AddToken | |
| -- VIEW | |
| view : Model -> Html Msg | |
| view model = | |
| div [] | |
| [ button [ onClick Login ] [ text "Login" ] | |
| , button [ onClick Logout ] [ text "Logout" ] | |
| , button [ onClick Status ] [ text "Status" ] | |
| , div [] [ text model.fbToken ] | |
| ] |
This file contains hidden or 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
| elm-stuff |
This file contains hidden or 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": "5.1.1 <= v < 6.0.0", | |
| "elm-lang/html": "2.0.0 <= v < 3.0.0" | |
| }, | |
| "elm-version": "0.18.0 <= v < 0.19.0" | |
| } |
This file contains hidden or 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
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Spelling example</title> | |
| </head> | |
| <body> | |
| <div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #9A9A9A; font-family: 'Source Sans Pro';"> | |
| <div style="font-size: 3em;">Building your project!</div> | |
| <img src="/_reactor/waiting.gif"> | |
| <div style="font-size: 1em">With new projects, I need a bunch of extra time to download packages.</div> | |
| </div> | |
| </body> | |
| <!-- Put the name of your app here (my sources place in `src` forder) --> | |
| <script type="text/javascript" src="/_compile/Facebook.elm"></script> | |
| <!-- Removes splash and starts elm app. --> | |
| <script type="text/javascript"> | |
| (function(d, s, id){ | |
| var js, fjs = d.getElementsByTagName(s)[0]; | |
| if (d.getElementById(id)) {return;} | |
| js = d.createElement(s); js.id = id; | |
| js.src = "//connect.facebook.net/en_US/sdk.js"; | |
| fjs.parentNode.insertBefore(js, fjs); | |
| }(document, 'script', 'facebook-jssdk')); | |
| while (document.body.firstChild) { | |
| document.body.removeChild(document.body.firstChild); | |
| } | |
| app = runElmProgram(); | |
| window.fbAsyncInit = function() { | |
| FB.init({ | |
| appId : '{{your facebook api id}}', | |
| xfbml : true, | |
| version : 'v2.8' | |
| }); | |
| FB.AppEvents.logPageView(); | |
| function syncFBStatus() { | |
| FB.getLoginStatus(function(response) { | |
| if (response.status === 'connected') { | |
| app.ports.fbToken.send(response.authResponse.accessToken); | |
| } | |
| }); | |
| } | |
| app.ports.fbAction.subscribe(fbTrigger); | |
| function fbTrigger(action) { | |
| if (action === "Login") { | |
| FB.login(); | |
| } else if (action === "Logout") { | |
| FB.logout(); | |
| } else { | |
| syncFBStatus(); | |
| } | |
| } | |
| }; | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment