NaunoKTM/elm-ui-mosaic/1.0.0

Mosaic

This library provides a way to create responsive mosaic layouts with a modal in Elm applications using elm-ui.

Types

type alias DisplayConfig =
{ baseWidth : Int
, baseHeight : Int
, spacingSize : Int
}

Configuration for the display of the mosaic.

type alias Picture =
{ id : String
, size : PictureSize
}

Representation of an image in the mosaic.

type alias PictureSize =
{ width : Int
, height : Int
}

Size of a picture.

type Msg
= NoOpMsg
| ModalOpen Int
| ModalExit
| ReceiveKeyboardEvent KeyBoardKey

Message type for the module.

type alias Mosaic =
{ pictures : List Picture
, modal : Modal
, config : DisplayConfig
, screenSize :
{ deviceWidth : Int
, deviceHeight : Int
}
}

Display a mosaic with the given list of pictures.

Keyboard key type for navigation.

Basics

init : DisplayConfig -> List Picture -> Mosaic

Initialize a new Mosaic with the given display configuration and list of pictures.

subscriptions : Mosaic -> Sub Msg

Define subscriptions for the keyboard events.

update : Msg -> Mosaic -> Mosaic

Update the Mosaic model based on the received message.

type Msg
    = MosaicMsg Mosaic.Msg
    | (...)


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        MosaicMsg subMsg ->
            ( { model | mosaic = Mosaic.update subMsg model.mosaic }, Cmd.none )


-- Handle other messages...

Configuration

defaultSizeConfig : DisplayConfig

Default configuration for the mosaic display.

Display Functions

viewMosaic : Mosaic -> Element Msg

Display a mosaic of pictures.

displayModal : Mosaic -> Element Msg

Display a modal with the selected picture.

inFront <| Mosaic.displayModal model.mosaic

Utility Functions

{ deviceWidth : Int
, deviceHeight : Int
}
-> Mosaic
-> Mosaic

Update the screen size in the Mosaic model.

takeFullscreenSize : Mosaic -> Mosaic

Take the fullscreen size of the mosaic.