[MediaObj] elm module #mediaobj #component

MediaObj.elm

module MediaObj exposing (mediabox, ModStyles(..))

import Element exposing (Element, el, text, row, column, empty, image, link)
import Element.Attributes exposing (alignLeft, alignRight, moveUp, spacing, height, width, maxWidth, maxHeight, px, fill, center, padding, property)
import Element.Events exposing (on, onClick)
import Color
import Style
import Style.Color as Color
import Style.Background as Background
import Style.Border as Border
import Style.Font as Font
import Style.Transition as Transition
import TypeMsgs exposing (Msg(ShowModal, Close),LinkModal,ModState(..))
import Json.Decode
import Json.Encode as Encode
import Html exposing (Attribute)
import Animation


type ModStyles
    = MediaObj | EmptyStyle | ModalObj

    
darkGrey = Color.rgb 169 169 169
white = Color.rgb 0 0 0

-- We define our stylesheet
stylesheet mod =
    Style.styleSheet
        [ Style.style EmptyStyle []
        , Style.style MediaObj
            [ Color.text darkGrey
            , Color.background white
            , Font.size 10 -- all units given as px
            --, Style.prop mod mod
            , Transition.all
            ]
        , Style.style ModalObj
            [
                Style.translate mod.translateX mod.translateY 0
            ]
        ]

--("data:image/png;base64,"++(link.img)) link.uri link.html link.descriptor
mediabox link animStyle = 
    Element.layout (stylesheet link.img) <|
        (myColumnOfStuff ("data:image/png;base64,"++(link.img.src)) link.uri link.html link.descriptor link.img.class link.img.state link.hash animStyle (Result.withDefault 0 (String.toFloat link.img.linkmod.height)) (Result.withDefault 0 (String.toFloat link.img.linkmod.width)))


myColumnOfStuff img url title lead class state hash animStyle hy wx =
    column EmptyStyle [ height fill, center, spacing 30 ]
        [ myElement img url title lead class state hash animStyle hy wx]


--myElement : Element msg
myElement img url title lead class state hash styleAnim heightY widthX =
    let
        stateMod = case state of
            OpenMod -> CloseMod
            _ -> OpenMod
    in
        Element.textLayout MediaObj [ width (px 250), maxWidth (px 250), maxHeight (px 50), spacing 10, padding 10 ]
            [ el EmptyStyle [ alignLeft ] (image class (renderAnim styleAnim [height (px heightY), width (px widthX), property "hash" (Encode.string hash), cClick ShowModal stateMod]) {caption = "", src = img}) -- prop width/height
                , column EmptyStyle [][
                    row EmptyStyle [][
                        link url (text title)
                        , Element.paragraph EmptyStyle [] [ text lead ]
                    ]
                ]
                , el EmptyStyle [alignRight, moveUp 25, onClick (Close hash)] (text "X")
            ]
  --style []


renderAnim : Animation.State -> List (Element.Attribute variation Msg) -> List (Element.Attribute variation Msg)
renderAnim animStyle otherAttrs =
    (List.map Element.Attributes.toAttr <| Animation.render animStyle) ++ otherAttrs


targetStyle =
    (Json.Decode.at ["target", "style"] (Json.Decode.map5 LinkModal (Json.Decode.field "top" Json.Decode.string) (Json.Decode.field "left" Json.Decode.string) (Json.Decode.field "height" Json.Decode.string) (Json.Decode.field "width" Json.Decode.string) (Json.Decode.field "visibility" Json.Decode.string))) --map7,4?
targetHash = Json.Decode.at ["target", "hash"] Json.Decode.string

styleStructDecoder = ()
  --(Json.Decode.field "top" Json.Decode.string) (Json.Decode.field "left" Json.Decode.string) (Json.Decode.field "height" Json.Decode.string) (Json.Decode.field "width" Json.Decode.string) (Json.Decode.field "visibility" Json.Decode.string)


--cClick : (LinkModal -> msg) -> Attribute msg
cClick tagger state =
  on "click" (Json.Decode.map3 tagger targetStyle targetHash (Json.Decode.succeed state))