Add scrollIntoView port (#129)
* Add scrollIntoView port * Fix js formatting * @n1k0's review
This commit is contained in:
parent
bff92549a2
commit
9b8293554f
|
@ -17,16 +17,20 @@
|
||||||
<body>
|
<body>
|
||||||
<script src="app.js"></script>
|
<script src="app.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
const app = Elm.Main.fullscreen({
|
const app = Elm.Main.fullscreen({
|
||||||
client: JSON.parse(localStorage.getItem("tooty.client")),
|
client: JSON.parse(localStorage.getItem("tooty.client")),
|
||||||
registration: JSON.parse(localStorage.getItem("tooty.registration"))
|
registration: JSON.parse(localStorage.getItem("tooty.registration"))
|
||||||
});
|
});
|
||||||
|
|
||||||
app.ports.saveClient.subscribe(json => {
|
app.ports.saveClient.subscribe(json => {
|
||||||
localStorage.setItem("tooty.client", json);
|
localStorage.setItem("tooty.client", json);
|
||||||
});
|
});
|
||||||
|
|
||||||
app.ports.saveRegistration.subscribe(json => {
|
app.ports.saveRegistration.subscribe(json => {
|
||||||
localStorage.setItem("tooty.registration", json);
|
localStorage.setItem("tooty.registration", json);
|
||||||
});
|
});
|
||||||
|
|
||||||
app.ports.setStatus.subscribe(function(data) {
|
app.ports.setStatus.subscribe(function(data) {
|
||||||
var element = document.getElementById(data.id);
|
var element = document.getElementById(data.id);
|
||||||
if (element) {
|
if (element) {
|
||||||
|
@ -35,6 +39,16 @@
|
||||||
element.focus();
|
element.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
app.ports.scrollIntoView.subscribe(function(id) {
|
||||||
|
requestAnimationFrame(function() {
|
||||||
|
var element = document.getElementById(id);
|
||||||
|
if (element) {
|
||||||
|
element.scrollIntoView(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -26,6 +26,7 @@ module Command
|
||||||
, focusId
|
, focusId
|
||||||
, scrollColumnToTop
|
, scrollColumnToTop
|
||||||
, scrollColumnToBottom
|
, scrollColumnToBottom
|
||||||
|
, scrollToThreadStatus
|
||||||
, searchAccounts
|
, searchAccounts
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -329,3 +330,8 @@ scrollColumnToTop column =
|
||||||
scrollColumnToBottom : String -> Cmd Msg
|
scrollColumnToBottom : String -> Cmd Msg
|
||||||
scrollColumnToBottom column =
|
scrollColumnToBottom column =
|
||||||
Task.attempt (always NoOp) <| Dom.Scroll.toBottom column
|
Task.attempt (always NoOp) <| Dom.Scroll.toBottom column
|
||||||
|
|
||||||
|
|
||||||
|
scrollToThreadStatus : String -> Cmd Msg
|
||||||
|
scrollToThreadStatus cssId =
|
||||||
|
Ports.scrollIntoView <| "thread-status-" ++ cssId
|
||||||
|
|
|
@ -524,7 +524,7 @@ processMastodonEvent msg model =
|
||||||
case result of
|
case result of
|
||||||
Ok context ->
|
Ok context ->
|
||||||
{ model | currentView = ThreadView (Thread status context) }
|
{ model | currentView = ThreadView (Thread status context) }
|
||||||
! [ Command.scrollColumnToBottom "thread" ]
|
! [ Command.scrollToThreadStatus <| toString status.id ]
|
||||||
|
|
||||||
Err error ->
|
Err error ->
|
||||||
{ model
|
{ model
|
||||||
|
|
|
@ -1,4 +1,10 @@
|
||||||
port module Ports exposing (saveRegistration, saveClient, setStatus)
|
port module Ports
|
||||||
|
exposing
|
||||||
|
( saveRegistration
|
||||||
|
, scrollIntoView
|
||||||
|
, saveClient
|
||||||
|
, setStatus
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
port saveRegistration : String -> Cmd msg
|
port saveRegistration : String -> Cmd msg
|
||||||
|
@ -8,3 +14,6 @@ port saveClient : String -> Cmd msg
|
||||||
|
|
||||||
|
|
||||||
port setStatus : { id : String, status : String } -> Cmd msg
|
port setStatus : { id : String, status : String } -> Cmd msg
|
||||||
|
|
||||||
|
|
||||||
|
port scrollIntoView : String -> Cmd msg
|
||||||
|
|
|
@ -188,8 +188,15 @@ statusEntryView context className currentUser status =
|
||||||
|
|
||||||
_ ->
|
_ ->
|
||||||
""
|
""
|
||||||
|
|
||||||
|
liAttributes =
|
||||||
|
[ class <| "list-group-item " ++ className ++ " " ++ nsfwClass ]
|
||||||
|
++ if context == "thread" then
|
||||||
|
[ id <| "thread-status-" ++ (toString status.id) ]
|
||||||
|
else
|
||||||
|
[]
|
||||||
in
|
in
|
||||||
li [ class <| "list-group-item " ++ className ++ " " ++ nsfwClass ]
|
li liAttributes
|
||||||
[ Lazy.lazy2 statusView context status
|
[ Lazy.lazy2 statusView context status
|
||||||
, Lazy.lazy2 statusActionsView status currentUser
|
, Lazy.lazy2 statusActionsView status currentUser
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in New Issue