This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
README Image

Image.Collection

This module helps you deal with collections of images.

type alias Key = String

The key type to access images in the collection.

type alias Collection = Dict Key Image

A collection of images.

resize : ( Int, Int ) -> Collection -> Collection

Resize all images of a collection.

type alias ItemViewer msg = Key -> Image -> Html msg

A type alias describing a view function for an item (key,image) of the collection.

defaultItemViewer : ItemViewer msg

The default itemViewer, just a simple Image viewer, not taking care of the key.

view : List (H.Attribute msg) -> ItemViewer msg -> Collection -> Html msg

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