diff --git a/README.md b/README.md index e88bb12..8a848c1 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ re-implements the CSS parts in Elm, but relies on the CSS of MDL verbatim. Build the demo: - > elm-make src/Demo.elm + > elm-make examples/Demo.elm This will construct a file `index.html`; open that in your browser. diff --git a/elm-package.json b/elm-package.json index 176afb7..88c9135 100644 --- a/elm-package.json +++ b/elm-package.json @@ -4,7 +4,8 @@ "repository": "https://github.com/debois/elm-mdl.git", "license": "BSD3", "source-directories": [ - "src" + "src", + "examples" ], "exposed-modules": [ "Material", diff --git a/src/Demo.elm b/src/Demo.elm deleted file mode 100644 index 21cf352..0000000 --- a/src/Demo.elm +++ /dev/null @@ -1,182 +0,0 @@ -import StartApp -import Html exposing (..) -import Html.Attributes exposing (href, class, style) -import Signal exposing (Signal) -import Effects exposing (..) -import Task -import Signal -import Task exposing (Task) -import Array exposing (Array) - -import Material.Layout as Layout exposing (defaultLayoutModel) -import Material - -import Demo.Buttons -import Demo.Grid -import Demo.Textfields - - --- MODEL - - -type alias Model = - { layout : Layout.Model - , buttons : Demo.Buttons.Model - , textfields : Demo.Textfields.Model - } - - -layoutModel : Layout.Model -layoutModel = - { defaultLayoutModel - | state = Layout.initState (List.length tabs) - } - - -model : Model -model = - { layout = layoutModel - , buttons = Demo.Buttons.model - , textfields = Demo.Textfields.model - } - - --- ACTION, UPDATE - - -type Action - = LayoutAction Layout.Action - | ButtonsAction Demo.Buttons.Action - | TextfieldAction Demo.Textfields.Action - - -update : Action -> Model -> (Model, Effects.Effects Action) -update action model = - case action of - LayoutAction a -> - let - (l, e) = Layout.update a model.layout - in - ({ model | layout = l }, Effects.map LayoutAction e) - - ButtonsAction a -> - let - (b, e) = Demo.Buttons.update a model.buttons - in - ({ model | buttons = b }, Effects.map ButtonsAction e) - - TextfieldAction a -> - ({ model | textfields = Demo.Textfields.update a model.textfields } - , Effects.none - ) - - --- VIEW - - -type alias Addr = Signal.Address Action - - - -drawer : List Html -drawer = - [ Layout.title "Example drawer" - , Layout.navigation - [ Layout.link - [href "https://groups.google.com/forum/#!forum/elm-discuss"] - [text "Elm Discuss"] - , Layout.link - [href "http://elm-lang.org"] - [text "Elm"] - ] - ] - - -header : List Html -header = - [ Layout.title "elm-mdl" - , Layout.spacer - , Layout.navigation - [ Layout.link - [ href "https://www.getmdl.io/components/index.html" ] - [ text "MDL" ] - , Layout.link - [ href "https://www.google.com/design/spec/material-design/introduction.html"] - [ text "Material Design"] - ] - ] - - -tabs : List (String, Addr -> Model -> List Html) -tabs = - [ ("Buttons", \addr model -> - [Demo.Buttons.view (Signal.forwardTo addr ButtonsAction) model.buttons]) - , ("Textfields", \addr model -> - [Demo.Textfields.view (Signal.forwardTo addr TextfieldAction) model.textfields]) - , ("Grid", \addr model -> Demo.Grid.view) - ] - - -tabViews : Array (Addr -> Model -> List Html) -tabViews = List.map snd tabs |> Array.fromList - - -tabTitles : List Html -tabTitles = List.map (fst >> text) tabs - - -view : Signal.Address Action -> Model -> Html -view addr model = - let top = - div - [ style - [ ("margin", "auto") - , ("width", "90%") - ] - ] - ((Array.get model.layout.selectedTab tabViews - |> Maybe.withDefault (\addr model -> - [div [] [text "This can't happen."]] - ) - ) addr model) - - in - Layout.view (Signal.forwardTo addr LayoutAction) model.layout - { header = Just header - , drawer = Just drawer - , tabs = Just tabTitles - , main = [ top ] - } - |> Material.topWithColors Material.Teal Material.Red - - -init : (Model, Effects.Effects Action) -init = (model, Effects.none) - - -inputs : List (Signal.Signal Action) -inputs = - [ Layout.setupSizeChangeSignal LayoutAction - ] - - -app : StartApp.App Model -app = - StartApp.start - { init = init - , view = view - , update = update - , inputs = inputs - } - -main : Signal Html -main = - app.html - - --- PORTS - - -port tasks : Signal (Task.Task Never ()) -port tasks = - app.tasks diff --git a/src/Demo/Buttons.elm b/src/Demo/Buttons.elm deleted file mode 100644 index 2beac6e..0000000 --- a/src/Demo/Buttons.elm +++ /dev/null @@ -1,144 +0,0 @@ -module Demo.Buttons where - -import Dict -import Html exposing (..) -import Html.Attributes exposing (..) -import Effects - -import Material.Button as Button exposing (..) -import Material.Grid as Grid -import Material.Icon as Icon - - --- MODEL - - -type alias Index = (Int, Int) - - -tabulate' : Int -> List a -> List (Int, a) -tabulate' i ys = - case ys of - [] -> [] - y :: ys -> (i, y) :: tabulate' (i+1) ys - - -tabulate : List a -> List (Int, a) -tabulate = tabulate' 0 - - -type alias View = - Signal.Address Button.Action -> Button.Model -> Coloring -> List Html -> Html - -type alias View' = - Signal.Address Button.Action -> Button.Model -> Html - - -view' : View -> Coloring -> Html -> Signal.Address Button.Action -> Button.Model -> Html -view' view coloring elem addr model = - view addr model coloring [elem] - - -describe : String -> Bool -> Coloring -> String -describe kind ripple coloring = - let - c = - case coloring of - Plain -> "plain" - Colored -> "colored" - Primary -> "primary" - Accent -> "accent" - in - kind ++ ", " ++ c ++ if ripple then " w/ripple" else "" - - -row : (String, Html, View) -> Bool -> List (Int, (Bool, String, View')) -row (kind, elem, v) ripple = - [ Plain, Colored, Primary, Accent ] - |> List.map (\c -> (ripple, describe kind ripple c, view' v c elem)) - |> tabulate - - -buttons : List (List (Index, (Bool, String, View'))) -buttons = - [ ("flat", text "Flat Button", Button.flat) - , ("raised", text "Raised Button", Button.raised) - , ("FAB", Icon.i "add", Button.fab) - , ("mini-FAB", Icon.i "zoom_in", Button.minifab) - , ("icon", Icon.i "flight_land", Button.icon) - ] - |> List.concatMap (\a -> [row a False, row a True]) - |> tabulate - |> List.map (\(i, row) -> List.map (\(j, x) -> ((i,j), x)) row) - - -model : Model -model = - { clicked = "" - , buttons = - buttons - |> List.concatMap (List.map <| \(idx, (ripple, _, _)) -> (idx, Button.model ripple)) - |> Dict.fromList - } - - --- ACTION, UPDATE - - -type Action = Action Index Button.Action - - -type alias Model = - { clicked : String - , buttons : Dict.Dict Index Button.Model - } - - -update : Action -> Model -> (Model, Effects.Effects Action) -update (Action idx action) model = - Dict.get idx model.buttons - |> Maybe.map (\m0 -> - let - (m1, e) = Button.update action m0 - in - ({ model | buttons = Dict.insert idx m1 model.buttons }, Effects.map (Action idx) e) - ) - |> Maybe.withDefault (model, Effects.none) - - --- VIEW - - -view : Signal.Address Action -> Model -> Html -view addr model = - buttons |> List.concatMap (\row -> - row |> List.concatMap (\(idx, (ripple, description, view)) -> - let model' = - Dict.get idx model.buttons |> Maybe.withDefault (Button.model False) - in - [ Grid.cell - [ Grid.size Grid.All 3] - [ div - [ style - [ ("text-align", "center") - , ("margin-top", "1em") - , ("margin-bottom", "1em") - ] - ] - [ view - (Signal.forwardTo addr (Action idx)) - model' - , div - [ style - [ ("font-size", "9pt") - , ("margin-top", "1em") - ] - ] - [ text description - ] - ] - ] - ] - ) - ) - |> Grid.grid diff --git a/src/Demo/Grid.elm b/src/Demo/Grid.elm deleted file mode 100644 index 0ddf04f..0000000 --- a/src/Demo/Grid.elm +++ /dev/null @@ -1,36 +0,0 @@ -module Demo.Grid where - -import Material.Grid exposing (..) -import Html exposing (..) - - -view : List Html -view = - [ [1..12] - |> List.map (\i -> cell [size All 1] [text "1"]) - |> grid - , [1 .. 3] - |> List.map (\i -> cell [size All 4] [text <| "4"]) - |> grid - , [ cell [size All 6] [text "6"] - , cell [size All 4] [text "4"] - , cell [size All 2] [text "2"] - ] |> grid - , [ cell [size All 6, size Tablet 8] [text "6 (8 tablet)"] - , cell [size All 4, size Tablet 6] [text "4 (6 tablet)"] - , cell [size All 2, size Phone 4] [text "2 (4 phone)"] - ] |> grid - , Html.node "style" [] [text """ - .mdl-cell { - text-sizing: border-box; - background-color: #BDBDBD; - height: 200px; - padding-left: 8px; - padding-top: 4px; - color: white; - } - .mdl-grid:first-of-type .mdl-cell { - height: 50px; - } - """] - ] diff --git a/src/Demo/Textfields.elm b/src/Demo/Textfields.elm deleted file mode 100644 index e5634b0..0000000 --- a/src/Demo/Textfields.elm +++ /dev/null @@ -1,52 +0,0 @@ -module Demo.Textfields where - -import Array exposing (Array) -import Html exposing (Html) - -import Material.Textfield as Textfield -import Material.Grid as Grid exposing (..) - - -type alias Model = Array Textfield.Model - - -model : Model -model = - let t0 = Textfield.model in - [ t0 - , { t0 | label = Just { text = "Labelled", float = False } } - , { t0 | label = Just { text = "Floating label", float = True }} - , { t0 - | label = Just { text = "Disabled", float = False } - , isDisabled = True - } - , { t0 - | label = Just { text = "With error and value", float = False } - , error = Just "The input is wrong!" - , value = "Incorrect input" - } - ] - |> Array.fromList - - -type Action = - Field Int Textfield.Action - - -update : Action -> Model -> Model -update (Field k action) fields = - Array.get k fields - |> Maybe.map (Textfield.update action) - |> Maybe.map (\field' -> Array.set k field' fields) - |> Maybe.withDefault fields - - -view : Signal.Address Action -> Model -> Html -view addr model = - model - |> Array.indexedMap (\k field -> - Textfield.view (Signal.forwardTo addr (Field k)) field - ) - |> Array.toList - |> List.map (\x -> cell [size All 3] [x]) - |> grid