This module helps you deal with collections of images.
The key type to access images in the collection.
A collection of images.
Resize all images of a collection.
A type alias describing a view function for an item (key,image) of the collection.
The default itemViewer, just a simple Image viewer, not taking care of the key.
View a collection of images with a specific item viewer.
For example, with the following code:
collection =
Dict.fromList
[ ("1", Image "1.jpg" 320 240)
, ("2", Image "2.jpg" 640 480)
]
itemViewer key =
Image.viewImg [ HA.class "image" ]
html =
collection
|> view [ HA.class "collection" ] itemViewer
The html will look like:
<div class="collection">
<img class="image"
src="1.jpg"
style="width: auto; height: auto; max-width: 320px; max-height: 240px;">
<img class="image"
src="2.jpg"
style="width: auto; height: auto; max-width: 640px; max-height: 480px;">
</div>
-- This Source Code Form is subject to the terms of the Mozilla Public
-- License, v. 2.0. If a copy of the MPL was not distributed with this
-- file, You can obtain one at http://mozilla.org/MPL/2.0/
module Image.Collection
exposing
( Key
, Collection
, resize
, ItemViewer
, defaultItemViewer
, view
)
{-| This module helps you deal with collections of images.
@docs Key, Collection
@docs resize
@docs ItemViewer, defaultItemViewer, view
-}
import Html as H exposing (Html)
import Html.Attributes as HA
import Dict exposing (Dict)
import Image exposing (Image)
-- MODEL #############################################################
{-| The key type to access images in the collection.
-}
type alias Key =
String
{-| A collection of images.
-}
type alias Collection =
Dict Key Image
-- UPDATE ############################################################
{-| Resize all images of a collection.
-}
resize : ( Int, Int ) -> Collection -> Collection
resize size collection =
collection
|> Dict.map (\key image -> Image.resize size image)
-- VIEW ##############################################################
{-| A type alias describing a view function for an item (key,image) of the collection.
-}
type alias ItemViewer msg =
Key -> Image -> Html msg
{-| The default itemViewer, just a simple Image viewer, not taking care of the key.
-}
defaultItemViewer : ItemViewer msg
defaultItemViewer key =
Image.viewImg []
{-| View a collection of images with a specific item viewer.
For example, with the following code:
collection =
Dict.fromList
[ ("1", Image "1.jpg" 320 240)
, ("2", Image "2.jpg" 640 480)
]
itemViewer key =
Image.viewImg [ HA.class "image" ]
html =
collection
|> view [ HA.class "collection" ] itemViewer
The html will look like:
<div class="collection">
<img class="image"
src="1.jpg"
style="width: auto; height: auto; max-width: 320px; max-height: 240px;">
<img class="image"
src="2.jpg"
style="width: auto; height: auto; max-width: 640px; max-height: 480px;">
</div>
-}
view : List (H.Attribute msg) -> ItemViewer msg -> Collection -> Html msg
view attributes itemViewer collection =
collection
|> Dict.map itemViewer
|> Dict.values
|> H.div attributes