elm-mdl/examples/Demo/Page.elm

module Demo.Page 
  ( demo, package, mds, mdl
  , fromMDL, fromMDS
  , body
  ) 
  where

import Html exposing (..)
import Html.Attributes exposing (href, class)
import Markdown

import Material.Grid exposing (..)
import Material.Style as Style exposing (styled, cs, css, attribute)
import Material.Button as Button
import Material.Color as Color
import Material.Icon as Icon
import Material.Elevation as Elevation


-- REFERENCES


demo : String -> (String, String)
demo url = 
  ( "Demo source", url )


package : String -> (String, String)
package url = 
  ( "Package documentation", url )
      

mds : String -> (String, String) 
mds url = 
  ( "Material Design Specification", url )
        
      
mdl : String -> (String, String)
mdl url = 
  ( "Material Design Lite documentation", url )


references : List (String, String) -> List Html
references links = 
  [ text "References" 
  , ul [] 
      ( links |> List.map (\(str, url) -> 
          li [] [ a [ href url ] [ text str ] ]
        )
      )
  ]


-- DOCUMENTATION QUOTES


from : String -> String -> String -> Html
from title url body = 
  div []
    [ text "From the "
    , a [ href url ] [ text title ] 
    , text ":"
    , Markdown.toHtml body
    ] 


fromMDL : String -> String -> Html 
fromMDL = 
  from "Material Design Lite documentation" 


fromMDS : String -> String -> Html
fromMDS = 
  from "Material Design Specification"


-- TITLES


title : String -> Html 
title t = 
  Style.styled Html.h1 
    [ Color.text Color.primary 
    --, cs "mdl-typography--display-4" 
    -- TODO. Typography module
    ]
    []
    [ text t ]


demoTitle : Html 
demoTitle = 
  div [] []
  {-
  Style.div
    [ Color.text Color.primary 
    , css "text-align" "right"
    , css "padding" ".5em"
    , cs "mdl-typography--display2" 
    -- TODO. Typography module
    ]
    [ text "Demo" ]
   -} 

-- VIEW SOURCE BUTTON


addr : Signal.Address Button.Action
addr = (Signal.mailbox Button.Click).address


fab : String -> Html 
fab url = 
  Button.fab addr (Button.model False)
    [ css "position" "fixed"
    , css "right" "72px"
    , css "bottom" "72px"
    , css "z-index" "9999"
    , Button.colored
    --, attribute (href srcUrl) 
    , attribute (Html.Attributes.attribute "onclick" ("alert('foo!');")) --("window.location.href = '" ++ srcUrl ++ "';") )
    ]
    [ Icon.i "link" ]


-- BODY 


body : String -> String -> Html -> List (String, String) -> List Html -> Html 
body t srcUrl contents links demo = 
  div []
    [ title t
    , grid []
       [ cell [ size All 6, size Phone 4 ] [ contents ]
       , cell 
           [ size All 5, offset Desktop 1, size Phone 4, align Top ] 
           ( references <| ("Demo source", srcUrl) :: links )
       ]
    , fab srcUrl
    , Style.div 
        [ Elevation.shadow 2 ]
        (  demoTitle 
        :: demo 
        )
    ]