groteck/ Facebook.elm

## Facebook.elm
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 ]
        ]

## .gitignore
elm-stuff

## README.md

      
    Raw
  

              README.md
            
          
    This is an example that use Elm ports with facebook-sdk

  
## elm-package.json
{
    "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"
}

## index.html
<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: &#39;Source Sans Pro&#39;;">
      <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>
	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 ]
	]
	{
	"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"
	}
	<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>