Created
December 8, 2015 13:02
-
-
Save pdamoc/94cdc40523946ad6c654 to your computer and use it in GitHub Desktop.
Alternative Component Architecture
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
import Html exposing (..) | |
import Html.Attributes exposing (width, style) | |
import StartApp | |
import Effects exposing (Effects) | |
import Task exposing (Task) | |
import Time exposing (Time) | |
type MainAction = Sidebar Html | Content Html | |
type SidebarAction = Navigate | InitializeSidebar Time | |
type ContentAction = More | InitializeContent Time | |
type alias MainModel = | |
{ sidebar : Html | |
, content : Html | |
} | |
type alias SidebarModel = String | |
type alias ContentModel = String | |
mainComponent sidebar content = | |
let | |
init : MainModel | |
init = {sidebar = text "", content = text ""} | |
update : MainAction -> MainModel -> (MainModel, Effects MainAction) | |
update action model = | |
case action of | |
Sidebar html -> ({model| sidebar = html}, Effects.none) | |
Content html -> ({model| content = html}, Effects.none) | |
view : Signal.Address MainAction -> MainModel -> Html | |
view address model = | |
let | |
sbStyle = style | |
[ ("background", "#ddf") | |
, ( "width", "20%") | |
, ("display", "block") | |
, ("float", "left") | |
, ("height", "100%") | |
] | |
cStyle = style | |
[ ("background", "#fdd") | |
, ( "width", "80%") | |
, ("display", "block") | |
, ("float", "right") | |
, ("height", "100%") | |
] | |
in | |
div [ style [( "width", "100%"), ("height", "800px"),("background", "#ffd")]] | |
[ div [ sbStyle ] [model.sidebar] | |
, div [ cStyle ] [model.content] | |
] | |
in | |
StartApp.start | |
{ init = (init, Effects.none) | |
, update = update | |
, view = view | |
, inputs = | |
[ Signal.map Sidebar sidebar.html | |
, Signal.map Content content.html ] | |
} | |
sidebar = | |
let | |
update : SidebarAction -> SidebarModel -> (SidebarModel, Effects SidebarAction) | |
update action model = | |
case action of | |
Navigate -> ( model, Effects.none) | |
InitializeSidebar _ -> ( model, Effects.none) | |
view : Signal.Address SidebarAction -> SidebarModel -> Html | |
view address model = | |
div [ ] [text "Sidebar"] | |
in | |
StartApp.start | |
{ init = ("", Effects.tick InitializeSidebar) | |
, update = update | |
, view = view | |
, inputs = [] | |
} | |
content = | |
let | |
update : ContentAction -> ContentModel -> (ContentModel, Effects ContentAction) | |
update action model = | |
case action of | |
More -> ( model, Effects.none) | |
InitializeContent _ -> ( model, Effects.none) | |
view : Signal.Address ContentAction -> ContentModel -> Html | |
view address model = | |
div [ ] [text "Content"] | |
in | |
StartApp.start | |
{ init = ("", Effects.tick InitializeContent) | |
, update = update | |
, view = view | |
, inputs = [] | |
} | |
app = mainComponent sidebar content | |
port tasks : Signal (Task Effects.Never ()) | |
port tasks = app.tasks | |
port sbtasks : Signal (Task Effects.Never ()) | |
port sbtasks = sidebar.tasks | |
port ctasks : Signal (Task Effects.Never ()) | |
port ctasks = content.tasks | |
main = app.html |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment