WIP

youtubecontainer.elm

import Html exposing (Html)
import Html.Attributes
import Html.Events

import Signal exposing (Address)
import Json.Decode exposing (Decoder, (:=))
import List

-------

infixl 2 =>
(=>) = (,)

type alias Vector = 
  { x : Float , y : Float }
  
-------

type alias State backgroundState topState bottomState = 
  { background : backgroundState 
  , foreground : 
      { top    : topState 
      , bottom : bottomState 
      }
  , viewport  : Vector 
  , topHeight : Float
  }
  
  
type alias BackgroundContext = 
  { size      : Vector 
  , isVisible : Bool
  }

makeBackgroundContext : State backgroundState topState bottomState -> BackgroundContext
makeBackgroundContext state = 
  { size = 
      { x = state.viewport.x 
      , y = state.viewport.y
      }
  , isVisible = False
  }

type ForegroundState 
  = Minimized
  | Maximized 
  | Dragged

type alias TopContext = 
  { size : Vector 
  , foregroundState : ForegroundState
  } 
  
makeTopContext : State backgroundState topState bottomState -> TopContext
makeTopContext state = 
  { size = 
      { x = state.viewport.x 
      , y = state.topHeight
      }
  , foregroundState = Maximized
  }
  
  
type alias BottomContext = 
  { size : Vector 
  , foregroundState : ForegroundState 
  }
  
  
makeBottomContext : State backgroundState topState bottomState -> BottomContext
makeBottomContext state = 
  { size = 
      { x = state.viewport.x 
      , y = state.viewport.y - state.topHeight
      }
  , foregroundState = Maximized
  }  
  
type alias ViewBackground backgroundAction backgroundState = 
  BackgroundContext -> Address backgroundAction -> backgroundState -> Html
  
  
type alias ViewTop topAction topState = 
  TopContext -> Address topAction -> topState -> Html 
  
  
type alias ViewBottom bottomAction bottomState = 
  BottomContext -> Address bottomAction -> bottomState -> Html
  
  
  
type Action backgroundAction topAction bottomAction 
  = Background backgroundAction
  | Top topAction 
  | Bottom bottomAction


type alias View backgroundAction backgroundState topAction topState bottomAction bottomState = 
  ViewBackground backgroundAction backgroundState -> 
  ViewTop topAction topState ->
  ViewBottom bottomAction bottomState ->
  Address (Action backgroundAction topAction bottomAction) ->
  State backgroundState topState bottomState ->
  Html





view : View backgroundAction backgroundState topAction topState bottomAction bottomState
view viewBackground viewTop viewBottom address state = 
  let 
      backgroundContainerStyle = 
          [ "position"  => "absolute"
          , "left"      => "0px"
          , "top"       => "0px"
          , "width"     => toString state.viewport.x ++ "px"
          , "height"    => toString state.viewport.y ++ "px"
          , "z-index"   => "0"
          ]
          
      foregroundContainerStyle = 
          [ "position"  => "absolute"
          , "left"      => "0px"
          , "top"       => "0px"
          , "width"     => toString state.viewport.x ++ "px"
          , "height"    => toString state.viewport.y ++ "px"
          , "z-index"   => "1"
          ]
          
      topContainerStyle = 
          [ "position" => "absolute"
          , "left"     => "0px"
          , "top"      => "0px"
          , "width"    => toString state.viewport.x ++ "px"
          , "height"   => toString state.topHeight ++ "px"
          ]
          
      bottomContainerStyle = 
          [ "position" => "absolute" 
          , "left"     => "0px"
          , "top"      => toString state.topHeight ++ "px"
          , "width"    => toString state.viewport.x ++ "px"
          , "height"   => toString (state.viewport.y - state.topHeight) ++ "px"
          ]
        
      backgroundAddress = 
          Signal.forwardTo address Background  
        
      topAddress = 
          Signal.forwardTo address Top
            
      bottomAddress = 
          Signal.forwardTo address Bottom
          
      backgroundContext = 
          makeBackgroundContext state
          
      topContext = 
          makeTopContext state 
          
      bottomContext = 
          makeBottomContext state 
  in 
      Html.div
          []
          [ Html.div 
                [ Html.Attributes.style backgroundContainerStyle ]
                [ viewBackground backgroundContext backgroundAddress state.background ]
          , Html.div 
                [ Html.Attributes.style foregroundContainerStyle ]
                [ Html.div 
                      [ Html.Attributes.style topContainerStyle ]
                      [ viewTop topContext topAddress state.foreground.top ]
                , Html.div 
                      [ Html.Attributes.style bottomContainerStyle ]
                      [ viewBottom bottomContext bottomAddress state.foreground.bottom ]
                ]
          ]