so-35738808.elm

import Html exposing (..)
import Html.Events exposing (..)
import Html.Attributes exposing (..)
import StartApp
import Effects exposing (Never)
import Task exposing (..)

app =
  StartApp.start
    { init = init
    , view = view
    , update = update
    , inputs = [ Signal.map SetMessage setMessage ]
    }

main =
  app.html

type alias Model =
  { message : String
  , images : List String
  }

init =
  (initialModel, sendMasonryCommand "initialize")

initialModel =
  { message = "Click an image to remove it", images = initialImages }

initialImages =
  [ "https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg"
  , "https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg"
  , "https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg"
  , "https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg"
  , "https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg"
  , "https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg"
  , "https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg"
  , "https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg"
  , "https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg"
  ]


view address model =
  div []
    [ h1 [] [ text model.message ]
    , div [ class "grid" ]
      ( div [ class "grid-sizer" ] [] :: List.map (viewImage address) model.images )
    ]

viewImage address image =
  div [ class "grid-item" ]
    [ img
      [ src image
      , onClick address (RemoveImage image)
      ] [] ]

type Action
  = NoOp
  | SetMessage String
  | RemoveImage String

update action model =
  case action of
    NoOp ->
      (model, Effects.none)
    SetMessage msg ->
      ({ model | message = msg }, Effects.none)
    RemoveImage url ->
      let model' =
        { model
        | images = List.filter ((/=) url) model.images
        , message = "Removing image " ++ url
        }
      in (model', sendMasonryCommand "imageRemoved")

port tasks : Signal (Task.Task Never ())
port tasks =
  app.tasks

masonryMailbox : Signal.Mailbox String
masonryMailbox =
  Signal.mailbox ""

port masonryCommands : Signal String
port masonryCommands =
  masonryMailbox.signal

sendMasonryCommand : String -> Effects.Effects Action
sendMasonryCommand cmd =
  let
    task =
      Signal.send masonryMailbox.address cmd
        `Task.andThen` \_ -> Task.succeed NoOp
  in
    Effects.task task

port setMessage : Signal String