Skip to content

Instantly share code, notes, and snippets.

@chrisortman
Last active October 26, 2015 13:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chrisortman/c53c9f6075e7dd28158f to your computer and use it in GitHub Desktop.
Save chrisortman/c53c9f6075e7dd28158f to your computer and use it in GitHub Desktop.
Grid with selectable rows
import StartApp.Simple as StartApp
import Mouse
import Html exposing(..)
import Html.Attributes exposing(style,attribute)
import Html.Events exposing(..)
import Signal exposing(..)
main =
StartApp.start { model = model, view = view, update = update }
type GridState
= AtRest
| Selecting
type Action
= NoOp
| StartSelection CellID
| StopSelection
| SelectCell CellID
| DeSelectCell CellID
type alias CellID = (Int,Int)
model = { currentState = AtRest, selected = [] }
view address model =
let cellText = "A"
gridCell =
td [] [text cellText]
gridRow =
tr []
(List.repeat 20 gridCell)
borderStyle =
if model.currentState == Selecting
then attribute "bordercolor" "red"
else attribute "bordercolor" "black"
in
table [attribute "border" "1"
, onMouseDown address StartSelection
, onMouseUp address StopSelection
, borderStyle]
(List.repeat 10 gridRow)
update action model =
case action of
NoOp -> model
StartSelection -> {model | currentState <- Selecting }
StopSelection -> {model | currentState <- AtRest }
import Mouse
import Html exposing(..)
import Html.Attributes exposing(style,attribute)
import Html.Events exposing(onMouseOver,onClick,onMouseEnter,onMouseLeave)
import Signal exposing(..)
positionWithButton2 =
Signal.map3 (,,) Mouse.isDown Mouse.position mouseEvents.signal
|> Signal.filterMap positionIfDown (0,0)
--positionWithButton =
-- Signal.map2 (,) Mouse.isDown Mouse.position
-- |> Signal.map positionIfDown
font : List (String, String)
font =
[ ("font-family", "futura, sans-serif")
, ("color", "red")
, ("font-size", "2em")
]
type ElementAction
= Hover Int
| NoHover
mouseEvents = Signal.mailbox NoHover
background : List (String, String)
background =
[ ("background-color", "rgb(245, 245, 245)")
]
positionIfDown (isDown,position,hover) =
case (isDown,hover) of
(True, Hover x) -> Just (x,x)
(True, NoHover) -> Just position
(False, Hover x) -> Just position
_ -> Nothing
type GridState
= AtRest
| Selecting
type GridActions
= NoOp
| StartSelection
| StopSelection
tableEvents = Signal.mailbox
makeElements el count children =
List.map (\n -> el [] children) [1..count]
view pos =
div [ ]
[ p [ style (font ++ background)] [text (toString pos)]
, h1 [onMouseEnter mouseEvents.address (Hover 10)
, onMouseLeave mouseEvents.address (NoHover)]
[text "Magic"]
, Html.button
[ onClick mouseEvents.address NoHover]
[text "Stop"]
]
view2 x =
table [attribute "border" "1"]
(makeElements tr 10 (makeElements td 20 [text "A"]))
main : Signal Html
main =
Signal.map view2 positionWithButton2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment