Проверка высоты в вязе - PullRequest
Новая
       70

Проверка высоты в вязе

0 голосов
/ 01 мая 2020

У меня есть следующая структура html: 

div.mainContainer
   button
   div.container
      div.block
         text
      div.block
         text

.block s доступны для редактирования (contenteditable), поэтому вы можете добавить текст.

При нажатии на кнопку новый .block добавляется в первую позицию внутри первого .container,

Я хотел бы проверить высоту .container, а когда его высота превышает 400px, новый контейнер должен быть добавлен и перемещаться последним блоки от первого .container до второго * до первого .containter не больше 400 пикселей. И так далее, если необходимо третье приложение .container.

Моя версия Elm имеет следующую модель: 

type alias Model =
    { content: List String}

Мои просмотры: 

view : Model -> Html Msg
view model =
    div [ class "mainContainer"]
        (buttonView :: (viewContainer model) :: [])

viewContainer : Model -> Html Msg
viewContainer model =
    div [ class "container" ]
        (map blockView model.content)

buttonView : Html Msg
buttonView =
    button [onClick NewBlock] [ text "New block"]

blockView : String -> Html Msg
blockView contentText = 
    div [ class "block", contenteditable True]
        [ text contentText ]

Я запускаю с двумя блоками: 

init : () -> ( Model, Cmd Msg )
init _ =
    ({ content= "Lorem"::"Ipsum"::[]}, Cmd.none )

Нажатие кнопки добавляет новый блок в модель: 

newBlock : Model -> Model
newBlock model =
    { model | content = "example"::model.content}

Msg тип и update функции: 

type Msg
    = CheckHeights
    | NewBlock


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        CheckHeights ->
            ( model, Cmd.none ) -- How do it?
        NewBlock ->
            (model |> newBlock, Cmd.none)

Я думаю, что лучший подход заключается в использовании подписок (onKeyDown событие), но я не знаю, как вы можете проверить выше update функция. 

subscriptions : Model -> Sub Msg
subscriptions _ =
    onKeyDown (Decode.succeed CheckHeights)

Здесь вы можете проверить мой код: https://ellie-app.com/8KCV7jjT94va1

1 Ответ

0 голосов
/ 01 мая 2020

Вы можете использовать Browser.Dom.getElement, чтобы получить размеры элемента, но вам нужно будет присвоить элементу уникальный id. Как только вы это сделаете, вот как ваш msg тип и update функция могут быть адаптированы для его использования: 

type Msg
    = CheckHeights
    | NewBlock
    | GotElement (Result Browser.Dom.Error Browser.Dom.Element)

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        CheckHeights ->
            ( model, Task.attempt GotElement (Browser.Dom.getElement "some-block-id") )

        GotElement (Ok element) ->
            -- Do whatever you need to do with the dimensions of element
            ( model, Cmd.none )

        GotElement (Err _) ->
            -- Handle error
            ( model, Cmd.none )

        NewBlock ->
            ( model |> newBlock, Cmd.none )
...