diff --git a/Makefile b/Makefile index fe890db..6c68723 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,17 @@ PAGES=../elm-mdl-gh-pages +elm.js: + elm-make examples/Demo.elm --output elm.js + pages : elm-make examples/Demo.elm --output $(PAGES)/elm.js (cd $(PAGES); git commit -am "Update."; git push origin gh-pages) -.phony : pages +clean : + rm -f elm.js index.html + +distclean : clean + rm -rf elm-stuff + + +.PHONY : pages elm.js clean distclean diff --git a/elm-package.json b/elm-package.json index e23a170..abdf6dc 100644 --- a/elm-package.json +++ b/elm-package.json @@ -20,7 +20,8 @@ "elm-lang/core": "3.0.0 <= v < 4.0.0", "evancz/elm-effects": "2.0.1 <= v < 3.0.0", "evancz/elm-html": "4.0.2 <= v < 5.0.0", + "evancz/elm-markdown": "2.0.1 <= v < 3.0.0", "evancz/start-app": "2.0.2 <= v < 3.0.0" }, "elm-version": "0.16.0 <= v < 0.17.0" -} +} \ No newline at end of file diff --git a/examples/Demo.elm b/examples/Demo.elm index aad86cb..b1f3ee1 100644 --- a/examples/Demo.elm +++ b/examples/Demo.elm @@ -8,12 +8,14 @@ import Signal import Task exposing (Task) import Array exposing (Array) +import Material.Color as Color import Material.Layout as Layout exposing (defaultLayoutModel) -import Material +import Material exposing (lift, lift') import Demo.Buttons import Demo.Grid import Demo.Textfields +import Demo.Snackbar -- MODEL @@ -23,6 +25,7 @@ type alias Model = { layout : Layout.Model , buttons : Demo.Buttons.Model , textfields : Demo.Textfields.Model + , snackbar : Demo.Snackbar.Model } @@ -38,6 +41,7 @@ model = { layout = layoutModel , buttons = Demo.Buttons.model , textfields = Demo.Textfields.model + , snackbar = Demo.Snackbar.model } @@ -48,27 +52,16 @@ type Action = LayoutAction Layout.Action | ButtonsAction Demo.Buttons.Action | TextfieldAction Demo.Textfields.Action + | SnackbarAction Demo.Snackbar.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 - ) + case Debug.log "Action: " action of + LayoutAction a -> lift .layout (\m x->{m|layout=x}) LayoutAction Layout.update a model + ButtonsAction a -> lift .buttons (\m x->{m|buttons=x}) ButtonsAction Demo.Buttons.update a model + TextfieldAction a -> lift' .textfields (\m x->{m|textfields=x}) Demo.Textfields.update a model + SnackbarAction a -> lift .snackbar (\m x->{m|snackbar=x}) SnackbarAction Demo.Snackbar.update a model -- VIEW @@ -109,10 +102,12 @@ header = tabs : List (String, Addr -> Model -> List Html) tabs = - [ ("Buttons", \addr model -> - [Demo.Buttons.view (Signal.forwardTo addr ButtonsAction) model.buttons]) + [ ("Snackbar", \addr model -> + [Demo.Snackbar.view (Signal.forwardTo addr SnackbarAction) model.snackbar]) , ("Textfields", \addr model -> [Demo.Textfields.view (Signal.forwardTo addr TextfieldAction) model.textfields]) + , ("Buttons", \addr model -> + [Demo.Buttons.view (Signal.forwardTo addr ButtonsAction) model.buttons]) , ("Grid", \addr model -> Demo.Grid.view) ] @@ -151,7 +146,7 @@ view addr model = your html, as done with page.html. Removing it will then fix the flicker you see on load. -} - |> Material.topWithColors Material.Teal Material.Red + |> Material.topWithColors Color.Teal Color.Red init : (Model, Effects.Effects Action) diff --git a/src/Material.elm b/src/Material.elm index 93e4792..aaf9616 100644 --- a/src/Material.elm +++ b/src/Material.elm @@ -1,67 +1,25 @@ module Material - ( Color(..), topWithColors, top + ( topWithColors, top + , Updater', Updater, lift, lift' ) where {-| Material Design component library for Elm based on Google's [Material Design Lite](https://www.getmdl.io/). -This file contains CSS loaders only. +# Loading CSS +@docs topWithColors, top -@docs Color, topWithColors, top +# Component convienience +@docs Updater', Updater, lift', lift -} import String import Html exposing (..) import Html.Attributes exposing (..) +import Effects exposing (..) - -{-| Possible colors for color scheme. --} -type Color - = Indigo - | Blue - | LightBlue - | Cyan - | Teal - | Green - | LightGreen - | Lime - | Yellow - | Amber - | Orange - | Brown - | BlueGrey - | Grey - | DeepOrange - | Red - | Pink - | Purple - | DeepPurple - - -toString : Color -> String -toString color = - case color of - Indigo -> "indigo" - Blue -> "blue" - LightBlue -> "light-blue" - Cyan -> "cyan" - Teal -> "teal" - Green -> "green" - LightGreen -> "light-green" - Lime -> "lime" - Yellow -> "yellow" - Amber -> "amber" - Orange -> "orange" - Brown -> "brown" - BlueGrey -> "blue-grey" - Grey -> "grey" - DeepOrange -> "deep-orange" - Red -> "red" - Pink -> "pink" - Purple -> "purple" - DeepPurple -> "deep-purple" +import Material.Color exposing (..) css : Color -> Color -> String @@ -71,7 +29,9 @@ css primary accent = Grey -> "" Brown -> "" BlueGrey -> "" - _ -> "." ++ toString primary ++ "-" ++ toString accent + Primary -> "" + Accent -> "" + _ -> "." ++ cssName primary ++ "-" ++ cssName accent in [ "https://code.getmdl.io/1.1.1/material" ++ cssFile ++ ".min.css" , "https://fonts.googleapis.com/icon?family=Material+Icons" @@ -102,7 +62,7 @@ you choose them as such anyway, you will get the default theme. Using this top-level container is not recommended, as most browsers will load css concurrently with rendering the initial page, which will produce a flicker on page load. The container is included only to provide an option to get started -quickly and for use with elm-reactor. +quickly and for use with elm-reactor. -} topWithColors : Color -> Color -> Html -> Html @@ -124,3 +84,50 @@ top : Html -> Html top content = -- Force default color-scheme by picking an invalid combination. topWithColors Grey Grey content + + + + +{-| TODO. +-} +type alias Updater' action model = + action -> model -> model + + +{-| TODO. +-} +type alias Updater action model = + action -> model -> (model, Effects action) + +type alias ComponentModel model components = + { model | components : components } + + +{-| TODO. +-} +lift' : + (model -> submodel) -> -- get + (model -> submodel -> model) -> -- set + Updater' subaction submodel -> -- update + subaction -> -- action + model -> -- model + (model, Effects action) +lift' get set update action model = + (set model (update action (get model)), Effects.none) + + +{-| TODO. +-} +lift : + (model -> submodel) -> -- get + (model -> submodel -> model) -> -- set + (subaction -> action) -> -- fwd + Updater subaction submodel -> -- update + subaction -> -- action + model -> -- model + (model, Effects action) +lift get set fwd update action model = + let + (submodel', e) = update action (get model) + in + (set model submodel', Effects.map fwd e) diff --git a/src/Material/Grid.elm b/src/Material/Grid.elm index 9385e53..1184146 100644 --- a/src/Material/Grid.elm +++ b/src/Material/Grid.elm @@ -3,6 +3,7 @@ module Material.Grid , cell , Device(..) , Align(..) + , CellConfig , size , offset , align @@ -61,7 +62,7 @@ Cells are configured with a `List CellConfig`; this configuration dictates the size, offset, and alignment behaviour of the cell. Construct individual `CellConfig` elements using `size`, `offset`, and `align`. -@docs cell, Device, size, offset, Align, align, hide, order +@docs cell, CellConfig, Device, size, offset, Align, align, hide, order -} @@ -135,7 +136,7 @@ encapsulates a screen size.) type Device = All | Desktop | Tablet | Phone -{- Cell configuration. Construct with `size`, `offset`, and `align`. +{-| Opaque type; construct with `size`, `offset`, `align`, etc. -} type CellConfig = Config String diff --git a/src/Material/Helpers.elm b/src/Material/Helpers.elm index 207a9dd..ebc552c 100644 --- a/src/Material/Helpers.elm +++ b/src/Material/Helpers.elm @@ -28,6 +28,14 @@ pure : a -> (a, Effects b) pure = effect Effects.none +addFx : Effects a -> (model, Effects a) -> (model, Effects a) +addFx effect1 (model, effect2) = + (model, Effects.batch [effect1, effect2]) + +mapFx : (a -> b) -> (model, Effects a) -> (model, Effects b) +mapFx f (model, effect) = + (model, Effects.map f effect) + clip : comparable -> comparable -> comparable -> comparable clip lower upper k = Basics.max lower (Basics.min k upper)