elm-ui 장치를 통해 판정

Ellie로 샘플을 준비했으니 꼭 시운전해 보세요.

https://ellie-app.com/b2GczCVsjcza1

주안점

GetViewport에서 elm-ui가 준비한 장치 판정용 함수 사용classifyDevice

시작할 때(init)·창 크기 변경 때(subscriptions) 실행GetViewport

view 측에서 장치별로 분기

코드

Model

모델에서는 이번Device만 지정했습니다.
Deviceelm-ui로 준비한 유형으로 (Phone,Tablet,Desktop,BigDesktop)형과DeviceClass형의 값(Portrait,Landscape)이 있다.
init는 초기값Desktop과 Portrait을 지정하고 시작할 때 Task에서 점화GetViewport를 한 번만 사용하면 Orientation의 값을 얻을 수 있습니다.

type alias Model =
    Device

init : () -> ( Model, Cmd Msg )
init _ =
    ( { class = Desktop
      , orientation = Portrait
      }
    , Task.perform GetViewport getViewport
    )

Subscriptions

크기 조정 후GetViewport에 불이 납니다.onResize에서 수신된 값이 인트형이기 때문에 플랫형으로 전환한 후 제작Viewport하고 GetViewport에 불을 붙인다.

subscriptions : Model -> Sub Msg
subscriptions _ =
    Events.onResize
        (\w h ->
            GetViewport
                { scene =
                    { height = 0
                    , width = 0
                    }
                , viewport =
                    { height = Basics.toFloat h
                    , width = Basics.toFloat w
                    , x = 0
                    , y = 0
                    }
                }
        )

Update

elm-uiViewport에서 장치 판정에 사용할 편의 함수가 준비되어 있습니다.
이 함수classifyDevice를 이용하여 추출Viewport귀환형toDevice을 얻는다.

toDevice : Viewport -> Device
toDevice v =
    classifyDevice
        { height = Basics.floor v.viewport.height
        , width = Basics.floor v.viewport.width
        }

GetViewportDevice는 수신toDevice에서 Viewport형으로 변환하여 모델에 저장합니다.

type Msg
    = GetViewport Viewport

update : Msg -> Model -> ( Model, Cmd Msg )
update msg _ =
    case msg of
        GetViewport viewport ->
            ( toDevice viewport
            , Cmd.none
            )

View

이번에는 모델 (Device 을 패턴으로 간단하게 구분해서 각각의 상태를 나타내는 텍스트만 표시합니다.

view : Model -> Html Msg
view model =
    layout [] <|
        column []
            [ case model.class of
                BigDesktop ->
                    text "BigDesktop"

                Desktop ->
                    text "Desktop"

                Tablet ->
                    text "Tablet"

                Phone ->
                    text "Phone"
            , case model.orientation of
                Portrait ->
                    text "Portrait"

                Landscape ->
                    text "Landscape"
            ]

elm-ui를 사용하면 설비 판정을 간단하게 할 수 있다.꼭 해보세요.