safhac/CubeTogglePOC.elm

## CubeTogglePOC.elm
module Main exposing (..)

import Html exposing (Html, div, text, button, Attribute)
import Html.Attributes exposing (class, id, style)
import Html.Events exposing (on, onClick)
import Json.Decode as Json exposing (succeed)
import Task exposing (perform)


main : Program Never Model Msg
main =
    Html.program
        { init = init
        , update = update
        , view = view
        , subscriptions = \_ -> Sub.none
        }


type alias Model =
    { state : Bool
    , polygon : Polygon
    , message : String
    }


type Msg
    = Toggle
    | Switch


init : ( Model, Cmd Msg )
init =
    ( { state = True
    , polygon = poly
    , message = "Toggle"
    }, Cmd.none )


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Toggle ->
            ( { model | state = not model.state }, Cmd.none )

        Switch ->
            ( { model | message = "Switched" }
            , Task.perform
                (always <| Toggle)
                (Task.succeed <| Toggle)
            )


type alias Polygon =
    { id : String
    , class : String
    , facets : List Facet
    }


poly : Polygon
poly =
    { id = "scene"
    , class = ""
    , facets = walls
    }


type alias Facet =
    { id : String }


walls : List Facet
walls =
    [ { id = "center" }
    , { id = "right" }
    , { id = "left" }
    ]


-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Toggle ] [ text model.message ]
        , div [ id "container" ]
            [ renderPoly model ]
        ]


renderPoly : Model -> Html Msg
renderPoly { state, polygon } =
    let
        classState =
            case state of
                True ->
                    ""

                False ->
                    "turn"
    in
        div ([ id polygon.id ] ++ [ class classState ] ++ captureTransitionEnd)
            (printWalls polygon.facets)


printWalls : List Facet -> List (Html msg)
printWalls facets =
    facets
        |> List.map rednerFacet


rednerFacet : Facet -> Html msg
rednerFacet facet =
    div [ id facet.id, class "angle" ] []


captureTransitionEnd : List (Attribute Msg)
captureTransitionEnd =
    List.map
        (\te ->
            on te
                (Json.succeed <|
                    Switch
                )
        )
        [ "webkitTransitionEnd", "ontransitionend", "msTransitionEnd", "transitionend" ]

## CubeTogglePOC.html
<html>
<head>
  <style>
    html , body {
      background: #F7F7F7;
      color: red;
      text-align : center;
      margin : 0 auto;
      display :flex;
      flex: 1;
      flex-direction: column;


    }
    #container {
        width : 100%;
        margin : 0 auto;
        display: flex;
        flex-direction : column;
        flex : 1;
        perspective: 500px;
        display : inline-block;
        text-align : center;
        overflow : overlay;

    }
    #scene {
          text-align : center;
        position : relative;
          display: flex;
          flex-direction : column;
          flex : 1;
         transform-style : preserve-3d;
         transition : all 0.5s ease-in-out;
          height: 200px;
          width: 200px;
     }
    .angle {
          border: solid thin lightgray;
          position: absolute;
          margin: 0 auto;
          overflow: auto;
          height: 99%;
          width: 99%;
          transition: all 1s ease-in-out;
      }
    #center {
        transform-origin: left center;
        transform : translateZ(-15vw);
        background-color : green;
        z-index : 2;
    }
    #right {
        right : 0;
        transform-origin: right center;
        transform : rotateY(-90deg);
        background-color : lightpink;
    }
    #left {
        transform-origin: left center;
        transform : rotateY(90deg);
        background-color : lightgray;
    }
    .turn {
        transform-origin: left center;
        transform : rotateY(-90deg);
    }
  </style>
</head>
<body>
  <script>
    var app = Elm.Main.fullscreen()
  </script>
</body>
</html>
	module Main exposing (..)

	import Html exposing (Html, div, text, button, Attribute)
	import Html.Attributes exposing (class, id, style)
	import Html.Events exposing (on, onClick)
	import Json.Decode as Json exposing (succeed)
	import Task exposing (perform)


	main : Program Never Model Msg
	main =
	Html.program
	{ init = init
	, update = update
	, view = view
	, subscriptions = \_ -> Sub.none
	}


	type alias Model =
	{ state : Bool
	, polygon : Polygon
	, message : String
	}


	type Msg
	= Toggle
	\| Switch


	init : ( Model, Cmd Msg )
	init =
	( { state = True
	, polygon = poly
	, message = "Toggle"
	}, Cmd.none )


	update : Msg -> Model -> ( Model, Cmd Msg )
	update msg model =
	case msg of
	Toggle ->
	( { model \| state = not model.state }, Cmd.none )

	Switch ->
	( { model \| message = "Switched" }
	, Task.perform
	(always <\| Toggle)
	(Task.succeed <\| Toggle)
	)


	type alias Polygon =
	{ id : String
	, class : String
	, facets : List Facet
	}


	poly : Polygon
	poly =
	{ id = "scene"
	, class = ""
	, facets = walls
	}


	type alias Facet =
	{ id : String }


	walls : List Facet
	walls =
	[ { id = "center" }
	, { id = "right" }
	, { id = "left" }
	]



	-- VIEW


	view : Model -> Html Msg
	view model =
	div []
	[ button [ onClick Toggle ] [ text model.message ]
	, div [ id "container" ]
	[ renderPoly model ]
	]


	renderPoly : Model -> Html Msg
	renderPoly { state, polygon } =
	let
	classState =
	case state of
	True ->
	""

	False ->
	"turn"
	in
	div ([ id polygon.id ] ++ [ class classState ] ++ captureTransitionEnd)
	(printWalls polygon.facets)


	printWalls : List Facet -> List (Html msg)
	printWalls facets =
	facets
	\|> List.map rednerFacet


	rednerFacet : Facet -> Html msg
	rednerFacet facet =
	div [ id facet.id, class "angle" ] []


	captureTransitionEnd : List (Attribute Msg)
	captureTransitionEnd =
	List.map
	(\te ->
	on te
	(Json.succeed <\|
	Switch
	)
	)
	[ "webkitTransitionEnd", "ontransitionend", "msTransitionEnd", "transitionend" ]
	<html>
	<head>
	<style>
	html , body {
	background: #F7F7F7;
	color: red;
	text-align : center;
	margin : 0 auto;
	display :flex;
	flex: 1;
	flex-direction: column;


	}
	#container {
	width : 100%;
	margin : 0 auto;
	display: flex;
	flex-direction : column;
	flex : 1;
	perspective: 500px;
	display : inline-block;
	text-align : center;
	overflow : overlay;

	}
	#scene {
	text-align : center;
	position : relative;
	display: flex;
	flex-direction : column;
	flex : 1;
	transform-style : preserve-3d;
	transition : all 0.5s ease-in-out;
	height: 200px;
	width: 200px;
	}
	.angle {
	border: solid thin lightgray;
	position: absolute;
	margin: 0 auto;
	overflow: auto;
	height: 99%;
	width: 99%;
	transition: all 1s ease-in-out;
	}
	#center {
	transform-origin: left center;
	transform : translateZ(-15vw);
	background-color : green;
	z-index : 2;
	}
	#right {
	right : 0;
	transform-origin: right center;
	transform : rotateY(-90deg);
	background-color : lightpink;
	}
	#left {
	transform-origin: left center;
	transform : rotateY(90deg);
	background-color : lightgray;
	}
	.turn {
	transform-origin: left center;
	transform : rotateY(-90deg);
	}
	</style>
	</head>
	<body>
	<script>
	var app = Elm.Main.fullscreen()
	</script>
	</body>
	</html>