Replace js code with proper elm using elm-scroll package

This commit is contained in:
Eike Kettner 2020-09-14 23:35:21 +02:00
parent 3852c69da1
commit ad110b2a05
8 changed files with 31 additions and 47 deletions

View File

@ -7,11 +7,11 @@
"elm-version": "0.19.1",
"dependencies": {
"direct": {
"CurrySoftware/elm-datepicker": "3.1.0",
"CurrySoftware/elm-datepicker": "4.0.0",
"NoRedInk/elm-json-decode-pipeline": "1.0.0",
"NoRedInk/elm-simple-fuzzy": "1.0.3",
"elm/browser": "1.0.1",
"elm/core": "1.0.2",
"elm/browser": "1.0.2",
"elm/core": "1.0.5",
"elm/file": "1.0.5",
"elm/html": "1.0.0",
"elm/http": "2.0.0",
@ -24,6 +24,7 @@
"pablohirafuji/elm-qrcode": "3.3.1",
"ryannhg/date-format": "2.3.0",
"truqu/elm-base64": "2.0.4",
"ursi/elm-scroll": "1.0.0",
"ursi/elm-throttle": "1.0.1"
},
"indirect": {

View File

@ -79,7 +79,10 @@ defaultLayout model =
, loginInfo model
]
]
, div [ class "main-content" ]
, div
[ class "main-content"
, id "main-content"
]
[ case model.page of
HomePage _ ->
viewHome model

View File

@ -13,6 +13,7 @@ module Page.Home.Data exposing
import Api
import Api.Model.ItemLightList exposing (ItemLightList)
import Api.Model.ItemSearch
import Browser.Dom as Dom
import Comp.FixedDropdown
import Comp.ItemCardList
import Comp.SearchMenu
@ -95,6 +96,7 @@ type Msg
| SearchTypeMsg (Comp.FixedDropdown.Msg SearchType)
| KeyUpMsg (Maybe KeyCode)
| SetContentOnly String
| ScrollResult (Result Dom.Error ())
type SearchType

View File

@ -8,7 +8,8 @@ import Data.Flags exposing (Flags)
import Data.UiSettings exposing (UiSettings)
import Page exposing (Page(..))
import Page.Home.Data exposing (..)
import Ports
import Scroll
import Task
import Throttle
import Time
import Util.Html exposing (KeyCode(..))
@ -221,6 +222,9 @@ update mId key flags settings msg model =
KeyUpMsg _ ->
withSub ( model, Cmd.none )
ScrollResult res ->
withSub ( model, Cmd.none )
--- Helpers
@ -228,9 +232,13 @@ update mId key flags settings msg model =
scrollToCard : Maybe String -> Model -> ( Model, Cmd Msg, Sub Msg )
scrollToCard mId model =
let
scroll id =
Scroll.scroll id 0.5 0.5 0.5 0.5
in
case mId of
Just id ->
( model, Ports.scrollToElem ( id, 0 ), Sub.none )
( model, Task.attempt ScrollResult (scroll id), Sub.none )
Nothing ->
( model, Cmd.none, Sub.none )

View File

@ -1,6 +1,7 @@
module Page.ItemDetail.Data exposing (Model, Msg(..), emptyModel)
import Api.Model.ItemDetail exposing (ItemDetail)
import Browser.Dom as Dom
import Comp.ItemDetail
import Comp.ItemDetail.Update
import Http
@ -21,3 +22,4 @@ type Msg
= Init String
| ItemDetailMsg Comp.ItemDetail.Update.Msg
| ItemResp (Result Http.Error ItemDetail)
| ScrollResult (Result Dom.Error ())

View File

@ -6,7 +6,8 @@ import Comp.ItemDetail
import Comp.ItemDetail.Update
import Data.Flags exposing (Flags)
import Page.ItemDetail.Data exposing (Model, Msg(..))
import Ports
import Scroll
import Task
update : Nav.Key -> Flags -> Maybe String -> Msg -> Model -> ( Model, Cmd Msg, Sub Msg )
@ -16,12 +17,15 @@ update key flags next msg model =
let
( lm, lc, ls ) =
Comp.ItemDetail.update key flags next Comp.ItemDetail.Update.Init model.detail
task =
Scroll.scroll "main-content" 0 0 0 0
in
( { model | detail = lm }
, Cmd.batch
[ Api.itemDetail flags id ItemResp
, Cmd.map ItemDetailMsg lc
, Ports.scrollToTop ()
, Task.attempt ScrollResult task
]
, Sub.map ItemDetailMsg ls
)
@ -45,3 +49,6 @@ update key flags next msg model =
ItemResp (Err _) ->
( model, Cmd.none, Sub.none )
ScrollResult _ ->
( model, Cmd.none, Sub.none )

View File

@ -4,8 +4,6 @@ port module Ports exposing
, loadUiSettings
, onUiSettingsSaved
, removeAccount
, scrollToElem
, scrollToTop
, setAccount
, setAllProgress
, setProgress
@ -31,12 +29,6 @@ port setProgress : ( String, Int ) -> Cmd msg
port setAllProgress : ( String, Int ) -> Cmd msg
port scrollToElem : ( String, Int ) -> Cmd msg
port scrollToTop : () -> Cmd msg
port saveUiSettings : ( AuthResult, StoredUiSettings ) -> Cmd msg

View File

@ -32,37 +32,6 @@ elmApp.ports.setAllProgress.subscribe(function(input) {
}, 100);
});
elmApp.ports.scrollToTop.subscribe(function() {
window.scrollTo(0, 0);
});
elmApp.ports.scrollToElem.subscribe(function(argList) {
var id = argList && argList.length >= 1
? argList[0] : null;
var offset = argList && argList.length >= 2
? argList[1] : null;
if (id && id != "") {
window.setTimeout(function() {
var el = document.getElementById(id);
if (el) {
if (el["scrollIntoViewIfNeeded"]) {
el.scrollIntoViewIfNeeded();
} else {
el.scrollIntoView({
behavior: "auto",
block: "center",
inline: "nearest"
});
}
if (offset && offset != 0) {
window.scrollBy(0, offset);
}
}
}, 20);
}
});
elmApp.ports.saveUiSettings.subscribe(function(args) {
if (Array.isArray(args) && args.length == 2) {
var authResult = args[0];