Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

fix: Allow scroll to user and stop restoring scroll position in it

This commit is contained in:
AkiraFukushima 2021-08-29 00:41:07 +09:00
parent ad4264d221
commit d3c549b5f8
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
32 changed files with 390 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
spec/renderer/integration/store/TimelineSpace/Contents/DirectMessages.spec.ts
View File

@ -133,6 +133,7 @@ let state = (): DirectMessagesState => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: []
}
}
@ -195,9 +196,8 @@ describe('Home', () => {
return {
lazyLoading: false,
heading: true,
timeline: [status1],
showReblogs: true,
showReplies: true
scrolling: false,
timeline: [status1]
}
}
})

2
spec/renderer/integration/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts
View File

@ -118,6 +118,7 @@ let state = (): TagState => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: []
}
}
@ -179,6 +180,7 @@ describe('Home', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1]
}
}

6
spec/renderer/integration/store/TimelineSpace/Contents/Home.spec.ts
View File

@ -119,7 +119,8 @@ let state = (): HomeState => {
heading: true,
timeline: [],
showReblogs: true,
showReplies: true
showReplies: true,
scrolling: false
}
}
@ -183,7 +184,8 @@ describe('Home', () => {
timeline: [status1],
unreadTimeline: [],
showReblogs: true,
showReplies: true
showReplies: true,
scrolling: false
}
}
})

2
spec/renderer/integration/store/TimelineSpace/Contents/Lists/Show.spec.ts
View File

@ -120,6 +120,7 @@ let state = (): ShowState => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: []
}
}
@ -179,6 +180,7 @@ describe('Lists/Show', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1]
}
}

7
spec/renderer/integration/store/TimelineSpace/Contents/Local.spec.ts
View File

@ -117,6 +117,7 @@ let state = (): LocalState => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: []
}
}
@ -178,10 +179,8 @@ describe('Home', () => {
return {
lazyLoading: false,
heading: true,
timeline: [status1],
unreadTimeline: [],
showReblogs: true,
showReplies: true
scrolling: false,
timeline: [status1]
}
}
})

3
spec/renderer/integration/store/TimelineSpace/Contents/Mentions.spec.ts
View File

@ -175,6 +175,7 @@ describe('Mentions', () => {
return {
lazyLoading: true,
heading: true,
scrolling: false,
mentions: []
}
}
@ -191,6 +192,7 @@ describe('Mentions', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [mention, reblog]
}
}
@ -221,6 +223,7 @@ describe('Mentions', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [mention, favourite, reblog, follow]
}
}

2
spec/renderer/integration/store/TimelineSpace/Contents/Notifications.spec.ts
View File

@ -192,6 +192,7 @@ let state = (): NotificationsState => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
notifications: []
}
}
@ -252,6 +253,7 @@ describe('Notifications', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
notifications: [notification1]
}
}

6
spec/renderer/integration/store/TimelineSpace/Contents/Public.spec.ts
View File

@ -117,7 +117,8 @@ let state = (): PublicState => {
return {
lazyLoading: false,
heading: true,
timeline: []
timeline: [],
scrolling: false
}
}
@ -179,8 +180,7 @@ describe('Home', () => {
lazyLoading: false,
heading: true,
timeline: [status1],
showReblogs: true,
showReplies: true
scrolling: false
}
}
})

6
spec/renderer/unit/store/TimelineSpace/Contents/DirectMessages.spec.ts
View File

@ -136,6 +136,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -150,6 +151,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, rebloggedStatus]
}
})
@ -167,6 +169,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -181,6 +184,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})
@ -197,6 +201,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status2, status1]
}
})
@ -211,6 +216,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})

6
spec/renderer/unit/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts
View File

@ -136,6 +136,7 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -150,6 +151,7 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, rebloggedStatus]
}
})
@ -167,6 +169,7 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -181,6 +184,7 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})
@ -197,6 +201,7 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status2, status1]
}
})
@ -211,6 +216,7 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})

10
spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
View File

@ -98,6 +98,7 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [],
showReblogs: true,
showReplies: true
@ -125,6 +126,7 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1],
showReblogs: true,
showReplies: true
@ -141,6 +143,7 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1],
showReblogs: true,
showReplies: true
@ -159,6 +162,7 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status1],
showReblogs: true,
showReplies: true
@ -174,6 +178,7 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status2, status1],
showReblogs: true,
showReplies: true
@ -192,6 +197,7 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1],
showReblogs: true,
showReplies: true
@ -209,6 +215,7 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1, status2],
showReblogs: true,
showReplies: true
@ -264,6 +271,7 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2],
showReblogs: true,
showReplies: true
@ -283,6 +291,7 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1, status2],
showReblogs: true,
showReplies: true
@ -333,6 +342,7 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2],
showReblogs: true,
showReplies: true

6
spec/renderer/unit/store/TimelineSpace/Contents/Lists/Show.spec.ts
View File

@ -136,6 +136,7 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -150,6 +151,7 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, rebloggedStatus]
}
})
@ -167,6 +169,7 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -181,6 +184,7 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})
@ -197,6 +201,7 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status2, status1]
}
})
@ -211,6 +216,7 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})

6
spec/renderer/unit/store/TimelineSpace/Contents/Local.spec.ts
View File

@ -136,6 +136,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -150,6 +151,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, rebloggedStatus]
}
})
@ -166,6 +168,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -180,6 +183,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})
@ -196,6 +200,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status2, status1]
}
})
@ -210,6 +215,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})

9
spec/renderer/unit/store/TimelineSpace/Contents/Mentions.spec.ts
View File

@ -173,6 +173,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: []
}
})
@ -184,6 +185,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [notification1]
}
})
@ -198,6 +200,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [notification2, notification1]
}
})
@ -214,6 +217,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
mentions: [notification1]
}
})
@ -228,6 +232,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
mentions: [notification2, notification1]
}
})
@ -244,6 +249,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
mentions: [notification2]
}
})
@ -258,6 +264,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
mentions: [notification2, notification1]
}
})
@ -277,6 +284,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [notification2, notification1]
}
})
@ -290,6 +298,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
mentions: [notification2, notification1]
}
})

5
spec/renderer/unit/store/TimelineSpace/Contents/Notifications.spec.ts
View File

@ -175,6 +175,7 @@ describe('TimelineSpace/Contents/Notifications', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
notifications: [notification2, notification1]
}
})
@ -199,6 +200,7 @@ describe('TimelineSpace/Contents/Notifications', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
notifications: [notification1]
}
})
@ -213,6 +215,7 @@ describe('TimelineSpace/Contents/Notifications', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
notifications: [notification2, notification1]
}
})
@ -229,6 +232,7 @@ describe('TimelineSpace/Contents/Notifications', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
notifications: [notification1]
}
})
@ -242,6 +246,7 @@ describe('TimelineSpace/Contents/Notifications', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
notifications: [notification2, notification1]
}
})

8
spec/renderer/unit/store/TimelineSpace/Contents/Public.spec.ts
View File

@ -136,7 +136,8 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
timeline: [status2, status1]
timeline: [status2, status1],
scrolling: false
}
})
it('should be deleted', () => {
@ -150,6 +151,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: true,
timeline: [status2, rebloggedStatus]
}
})
@ -167,6 +169,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: true,
timeline: [status2, status1]
}
})
@ -181,6 +184,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: true,
timeline: [rebloggedStatus, status2, status1]
}
})
@ -197,6 +201,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: true,
timeline: [status2, status1]
}
})
@ -211,6 +216,7 @@ describe('TimelineSpace/Contents/Local', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: true,
timeline: [rebloggedStatus, status2, status1]
}
})

39
src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
View File

@ -28,6 +28,7 @@
<script>
import { mapState, mapGetters } from 'vuex'
import moment from 'moment'
import Toot from '~/src/renderer/components/organisms/Toot'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
@ -40,15 +41,18 @@ export default {
data() {
return {
focusedId: null,
scroll: null,
observer: null
scrollPosition: null,
observer: null,
scrollTime: null,
resizeTime: null
}
},
computed: {
...mapState('TimelineSpace/Contents/DirectMessages', {
timeline: state => state.timeline,
lazyLoading: state => state.lazyLoading,
heading: state => state.heading
heading: state => state.heading,
scrolling: state => state.scrolling
}),
...mapState({
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
@ -88,12 +92,13 @@ export default {
})
})
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.scrollPosition = new ScrollPosition(el)
this.scrollPosition.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
this.resizeTime = moment()
this.scrollPosition.restore()
}
})
@ -104,7 +109,9 @@ export default {
if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
}
this.scroll.prepare()
if (this.scrollPosition) {
this.scrollPosition.prepare()
}
},
beforeDestroy() {
if (!this.unreadNotification.direct) {
@ -153,6 +160,14 @@ export default {
this.$store.dispatch('TimelineSpace/startDirectMessagesStreaming')
},
onScroll(event) {
if (moment().diff(this.resizeTime) < 500) {
return
}
this.scrollTime = moment()
if (!this.scrolling) {
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeScrolling', true)
}
// for lazyLoading
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
@ -173,6 +188,14 @@ export default {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
}
setTimeout(() => {
const now = moment()
if (now.diff(this.scrollTime) >= 150) {
this.scrollTime = null
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeScrolling', false)
}
}, 150)
},
updateToot(message) {
this.$store.commit('TimelineSpace/Contents/DirectMessages/updateToot', message)

39
src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
View File

@ -28,6 +28,7 @@
<script>
import { mapState, mapGetters } from 'vuex'
import moment from 'moment'
import Toot from '~/src/renderer/components/organisms/Toot'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
@ -41,8 +42,10 @@ export default {
data() {
return {
focusedId: null,
scroll: null,
observer: null
scrollPosition: null,
observer: null,
scrollTime: null,
resizeTime: null
}
},
computed: {
@ -52,7 +55,8 @@ export default {
startReload: state => state.TimelineSpace.HeaderMenu.reload,
timeline: state => state.TimelineSpace.Contents.Hashtag.Tag.timeline,
lazyLoading: state => state.TimelineSpace.Contents.Hashtag.Tag.lazyLoading,
heading: state => state.TimelineSpace.Contents.Hashtag.Tag.heading
heading: state => state.TimelineSpace.Contents.Hashtag.Tag.heading,
scrolling: state => state.TimelineSpace.Contents.Hashtag.Tag.scrolling
}),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function () {
@ -83,12 +87,13 @@ export default {
})
})
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.scrollPosition = new ScrollPosition(el)
this.scrollPosition.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
this.resizeTime = moment()
this.scrollPosition.restore()
}
})
@ -96,7 +101,9 @@ export default {
this.observer.observe(scrollWrapper)
},
beforeUpdate() {
this.scroll.prepare()
if (this.scrollPosition) {
this.scrollPosition.prepare()
}
},
watch: {
tag: function (newTag, _oldTag) {
@ -159,6 +166,14 @@ export default {
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/deleteToot', toot.id)
},
onScroll(event) {
if (moment().diff(this.resizeTime) < 500) {
return
}
this.scrollTime = moment()
if (!this.scrolling) {
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', true)
}
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
!this.lazyloading
@ -174,6 +189,14 @@ export default {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
}
setTimeout(() => {
const now = moment()
if (now.diff(this.scrollTime) >= 150) {
this.scrollTime = null
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', false)
}
}, 150)
},
async reload() {
const tag = this.tag

39
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -29,6 +29,7 @@
<script>
import { mapState, mapGetters } from 'vuex'
import moment from 'moment'
import Toot from '~/src/renderer/components/organisms/Toot'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
@ -41,8 +42,10 @@ export default {
data() {
return {
focusedId: null,
scroll: null,
observer: null
scrollPosition: null,
observer: null,
scrollTime: null,
resizeTime: null
}
},
computed: {
@ -51,7 +54,8 @@ export default {
lazyLoading: state => state.lazyLoading,
heading: state => state.heading,
showReblogs: state => state.showReblogs,
showReplies: state => state.showReplies
showReplies: state => state.showReplies,
scrolling: state => state.scrolling
}),
...mapState({
backgroundColor: state => state.App.theme.background_color,
@ -99,12 +103,13 @@ export default {
this.$store.dispatch('TimelineSpace/Contents/Home/saveMarker', this.timeline[0].id)
}
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.scrollPosition = new ScrollPosition(el)
this.scrollPosition.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
this.resizeTime = moment()
this.scrollPosition.restore()
}
})
@ -115,7 +120,9 @@ export default {
if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
}
this.scroll.prepare()
if (this.scrollPosition) {
this.scrollPosition.prepare()
}
},
beforeDestroy() {
Event.$off('focus-timeline')
@ -152,6 +159,14 @@ export default {
},
methods: {
onScroll(event) {
if (moment().diff(this.resizeTime) < 500) {
return
}
this.scrollTime = moment()
if (!this.scrolling) {
this.$store.commit('TimelineSpace/Contents/Home/changeScrolling', true)
}
// for lazyLoading
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
@ -170,6 +185,14 @@ export default {
} else if (event.target.scrollTop <= 5 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
}
setTimeout(() => {
const now = moment()
if (now.diff(this.scrollTime) >= 150) {
this.scrollTime = null
this.$store.commit('TimelineSpace/Contents/Home/changeScrolling', false)
}
}, 150)
},
updateToot(message) {
this.$store.commit('TimelineSpace/Contents/Home/updateToot', message)

39
src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
View File

@ -28,6 +28,7 @@
<script>
import { mapState, mapGetters } from 'vuex'
import moment from 'moment'
import Toot from '~/src/renderer/components/organisms/Toot'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
@ -41,8 +42,10 @@ export default {
data() {
return {
focusedId: null,
scroll: null,
observer: null
scrollPosition: null,
observer: null,
scrollTime: null,
resizeTime: null
}
},
computed: {
@ -52,7 +55,8 @@ export default {
startReload: state => state.TimelineSpace.HeaderMenu.reload,
timeline: state => state.TimelineSpace.Contents.Lists.Show.timeline,
lazyLoading: state => state.TimelineSpace.Contents.Lists.Show.lazyLoading,
heading: state => state.TimelineSpace.Contents.Lists.Show.heading
heading: state => state.TimelineSpace.Contents.Lists.Show.heading,
scrolling: state => state.TimelineSpace.Contents.Lists.Show.scrolling
}),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function () {
@ -84,12 +88,13 @@ export default {
})
})
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.scrollPosition = new ScrollPosition(el)
this.scrollPosition.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
this.resizeTime = moment()
this.scrollPosition.restore()
}
})
@ -97,7 +102,9 @@ export default {
this.observer.observe(scrollWrapper)
},
beforeUpdate() {
this.scroll.prepare()
if (this.scrollPosition) {
this.scrollPosition.prepare()
}
},
watch: {
list_id: function () {
@ -160,6 +167,14 @@ export default {
this.$store.commit('TimelineSpace/Contents/Lists/Show/deleteToot', message.id)
},
onScroll(event) {
if (moment().diff(this.resizeTime) < 500) {
return
}
this.scrollTime = moment()
if (!this.scrolling) {
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeScrolling', true)
}
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
!this.lazyloading
@ -175,6 +190,14 @@ export default {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
}
setTimeout(() => {
const now = moment()
if (now.diff(this.scrollTime) >= 150) {
this.scrollTime = null
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeScrolling', false)
}
}, 150)
},
async reload() {
this.$store.commit('TimelineSpace/changeLoading', true)

39
src/renderer/components/TimelineSpace/Contents/Local.vue
View File

@ -28,6 +28,7 @@
<script>
import { mapState, mapGetters } from 'vuex'
import moment from 'moment'
import Toot from '~/src/renderer/components/organisms/Toot'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
@ -40,15 +41,18 @@ export default {
data() {
return {
focusedId: null,
scroll: null,
observer: null
scrollPosition: null,
observer: null,
scrollTime: null,
resizeTime: null
}
},
computed: {
...mapState('TimelineSpace/Contents/Local', {
timeline: state => state.timeline,
lazyLoading: state => state.lazyLoading,
heading: state => state.heading
heading: state => state.heading,
scrolling: state => state.scrolling
}),
...mapState({
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
@ -88,12 +92,13 @@ export default {
})
})
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.scrollPosition = new ScrollPosition(el)
this.scrollPosition.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
this.resizeTime = moment()
this.scrollPosition.restore()
}
})
@ -104,7 +109,9 @@ export default {
if (this.$store.state.TimelineSpace.SideMenu.unreadLocalTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
}
this.scroll.prepare()
if (this.scrollPosition) {
this.scrollPosition.prepare()
}
},
beforeDestroy() {
if (!this.unreadNotification.local) {
@ -159,6 +166,14 @@ export default {
this.$store.commit('TimelineSpace/Contents/Local/deleteToot', message.id)
},
onScroll(event) {
if (moment().diff(this.resizeTime) < 500) {
return
}
this.scrollTime = moment()
if (!this.scrolling) {
this.$store.commit('TimelineSpace/Contents/Local/changeScrolling', true)
}
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
!this.lazyloading
@ -175,6 +190,14 @@ export default {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
}
setTimeout(() => {
const now = moment()
if (now.diff(this.scrollTime) >= 150) {
this.scrollTime = null
this.$store.commit('TimelineSpace/Contents/Local/changeScrolling', false)
}
}, 150)
},
async reload() {
this.$store.commit('TimelineSpace/changeLoading', true)

39
src/renderer/components/TimelineSpace/Contents/Mentions.vue
View File

@ -27,6 +27,7 @@
<script>
import { mapState, mapGetters } from 'vuex'
import moment from 'moment'
import Notification from '~/src/renderer/components/organisms/Notification'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
@ -39,8 +40,10 @@ export default {
data() {
return {
focusedId: null,
scroll: null,
observer: null
scrollPosition: null,
observer: null,
scrollTime: null,
resizeTime: null
}
},
computed: {
@ -55,7 +58,8 @@ export default {
}),
...mapState('TimelineSpace/Contents/Mentions', {
lazyLoading: state => state.lazyLoading,
heading: state => state.heading
heading: state => state.heading,
scrolling: state => state.scrolling
}),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
...mapGetters('TimelineSpace/Contents/Mentions', ['mentions']),
@ -83,12 +87,13 @@ export default {
})
})
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.scrollPosition = new ScrollPosition(el)
this.scrollPosition.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
this.resizeTime = moment()
this.scrollPosition.restore()
}
})
@ -99,7 +104,9 @@ export default {
if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
}
this.scroll.prepare()
if (this.scrollPosition) {
this.scrollPosition.prepare()
}
},
beforeDestroy() {
Event.$off('focus-timeline')
@ -131,6 +138,14 @@ export default {
},
methods: {
onScroll(event) {
if (moment().diff(this.resizeTime) < 500) {
return
}
this.scrollTime = moment()
if (!this.scrolling) {
this.$store.commit('TimelineSpace/Contents/Mentions/changeScrolling', true)
}
// for lazyLoading
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
@ -149,6 +164,14 @@ export default {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
}
setTimeout(() => {
const now = moment()
if (now.diff(this.scrollTime) >= 150) {
this.scrollTime = null
this.$store.commit('TimelineSpace/Contents/Mentions/changeScrolling', false)
}
}, 150)
},
async reload() {
this.$store.commit('TimelineSpace/changeLoading', true)

39
src/renderer/components/TimelineSpace/Contents/Notifications.vue
View File

@ -27,6 +27,7 @@
<script>
import { mapState, mapGetters } from 'vuex'
import moment from 'moment'
import Notification from '~/src/renderer/components/organisms/Notification'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
@ -39,8 +40,10 @@ export default {
data() {
return {
focusedId: null,
scroll: null,
observer: null
scrollPosition: null,
observer: null,
scrollTime: null,
resizeTime: null
}
},
computed: {
@ -51,7 +54,8 @@ export default {
}),
...mapState('TimelineSpace/Contents/Notifications', {
lazyLoading: state => state.lazyLoading,
heading: state => state.heading
heading: state => state.heading,
scrolling: state => state.scrolling
}),
...mapGetters('TimelineSpace/Contents/Notifications', ['handledNotifications', 'filters']),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
@ -85,12 +89,13 @@ export default {
this.$store.dispatch('TimelineSpace/Contents/Notifications/saveMarker', this.handledNotifications[0].id)
}
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.scrollPosition = new ScrollPosition(el)
this.scrollPosition.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
this.resizeTime = moment()
this.scrollPosition.restore()
}
})
@ -101,7 +106,9 @@ export default {
if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
}
this.scroll.prepare()
if (this.scrollPosition) {
this.scrollPosition.prepare()
}
},
beforeDestroy() {
Event.$off('focus-timeline')
@ -139,6 +146,14 @@ export default {
},
methods: {
onScroll(event) {
if (moment().diff(this.resizeTime) < 500) {
return
}
this.scrollTime = moment()
if (!this.scrolling) {
this.$store.commit('TimelineSpace/Contents/Notifications/changeScrolling', true)
}
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
!this.lazyloading
@ -162,6 +177,14 @@ export default {
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
}
setTimeout(() => {
const now = moment()
if (now.diff(this.scrollTime) >= 150) {
this.scrollTime = null
this.$store.commit('TimelineSpace/Contents/Notifications/changeScrolling', false)
}
}, 150)
},
async reload() {
this.$store.commit('TimelineSpace/changeLoading', true)

40
src/renderer/components/TimelineSpace/Contents/Public.vue
View File

@ -28,6 +28,7 @@
<script>
import { mapState, mapGetters } from 'vuex'
import moment from 'moment'
import Toot from '~/src/renderer/components/organisms/Toot'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
@ -40,15 +41,18 @@ export default {
data() {
return {
focusedId: null,
scroll: null,
observer: null
scrollPosition: null,
observer: null,
scrollTime: null,
resizeTime: null
}
},
computed: {
...mapState('TimelineSpace/Contents/Public', {
timeline: state => state.timeline,
lazyLoading: state => state.lazyLoading,
heading: state => state.heading
heading: state => state.heading,
scrolling: state => state.scrolling
}),
...mapState({
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
@ -89,12 +93,13 @@ export default {
})
})
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
this.scrollPosition = new ScrollPosition(el)
this.scrollPosition.prepare()
this.observer = new ResizeObserver(() => {
if (this.scroll && !this.heading && !this.lazyLoading) {
this.scroll.restore()
if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
this.resizeTime = moment()
this.scrollPosition.restore()
}
})
@ -105,7 +110,9 @@ export default {
if (this.$store.state.TimelineSpace.SideMenu.unreadPublicTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
}
this.scroll.prepare()
if (this.scrollPosition) {
this.scrollPosition.prepare()
}
},
beforeDestroy() {
if (!this.unreadNotification.public) {
@ -160,6 +167,15 @@ export default {
this.$store.commit('TimelineSpace/Contents/Public/deleteToot', message.id)
},
onScroll(event) {
if (moment().diff(this.resizeTime) < 500) {
return
}
this.scrollTime = moment()
if (!this.scrolling) {
this.$store.commit('TimelineSpace/Contents/Public/changeScrolling', true)
}
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
!this.lazyloading
@ -177,6 +193,14 @@ export default {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
}
setTimeout(() => {
const now = moment()
if (now.diff(this.scrollTime) >= 150) {
this.scrollTime = null
this.$store.commit('TimelineSpace/Contents/Public/changeScrolling', false)
}
}, 150)
},
async reload() {
this.$store.commit('TimelineSpace/changeLoading', true)

10
src/renderer/store/TimelineSpace/Contents/DirectMessages.ts
View File

@ -6,12 +6,14 @@ export type DirectMessagesState = {
lazyLoading: boolean
heading: boolean
timeline: Array<Entity.Status>
scrolling: boolean
}
const state = (): DirectMessagesState => ({
lazyLoading: false,
heading: true,
timeline: []
timeline: [],
scrolling: false
})
export const MUTATION_TYPES = {
@ -23,7 +25,8 @@ export const MUTATION_TYPES = {
ARCHIVE_TIMELINE: 'archiveTimeline',
CLEAR_TIMELINE: 'clearTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot'
DELETE_TOOT: 'deleteToot',
CHANGE_SCROLLING: 'changeScrolling'
}
const mutations: MutationTree<DirectMessagesState> = {
@ -76,6 +79,9 @@ const mutations: MutationTree<DirectMessagesState> = {
return toot.id !== id
}
})
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}

10
src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts
View File

@ -10,12 +10,14 @@ export type TagState = {
timeline: Array<Entity.Status>
lazyLoading: boolean
heading: boolean
scrolling: boolean
}
const state = (): TagState => ({
timeline: [],
lazyLoading: false,
heading: true
heading: true,
scrolling: false
})
export const MUTATION_TYPES = {
@ -27,7 +29,8 @@ export const MUTATION_TYPES = {
CLEAR_TIMELINE: 'clearTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
CHANGE_LAZY_LOADING: 'changeLazyLoading'
CHANGE_LAZY_LOADING: 'changeLazyLoading',
CHANGE_SCROLLING: 'changeScrolling'
}
const mutations: MutationTree<TagState> = {
@ -79,6 +82,9 @@ const mutations: MutationTree<TagState> = {
},
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
state.lazyLoading = value
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}

10
src/renderer/store/TimelineSpace/Contents/Home.ts
View File

@ -12,6 +12,7 @@ export type HomeState = {
showReblogs: boolean
showReplies: boolean
timeline: Array<Entity.Status>
scrolling: boolean
}
const state = (): HomeState => ({
@ -19,7 +20,8 @@ const state = (): HomeState => ({
heading: true,
timeline: [],
showReblogs: true,
showReplies: true
showReplies: true,
scrolling: false
})
export const MUTATION_TYPES = {
@ -33,7 +35,8 @@ export const MUTATION_TYPES = {
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
SHOW_REBLOGS: 'showReblogs',
SHOW_REPLIES: 'showReplies'
SHOW_REPLIES: 'showReplies',
CHANGE_SCROLLING: 'changeScrolling'
}
const mutations: MutationTree<HomeState> = {
@ -92,6 +95,9 @@ const mutations: MutationTree<HomeState> = {
},
[MUTATION_TYPES.SHOW_REPLIES]: (state, visible: boolean) => {
state.showReplies = visible
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}

10
src/renderer/store/TimelineSpace/Contents/Lists/Show.ts
View File

@ -10,12 +10,14 @@ export type ShowState = {
timeline: Array<Entity.Status>
lazyLoading: boolean
heading: boolean
scrolling: boolean
}
const state = (): ShowState => ({
timeline: [],
lazyLoading: false,
heading: true
heading: true,
scrolling: false
})
export const MUTATION_TYPES = {
@ -27,7 +29,8 @@ export const MUTATION_TYPES = {
CLEAR_TIMELINE: 'clearTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
CHANGE_LAZY_LOADING: 'changeLazyLoading'
CHANGE_LAZY_LOADING: 'changeLazyLoading',
CHANGE_SCROLLING: 'changeScrolling'
}
const mutations: MutationTree<ShowState> = {
@ -79,6 +82,9 @@ const mutations: MutationTree<ShowState> = {
},
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
state.lazyLoading = value
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}

10
src/renderer/store/TimelineSpace/Contents/Local.ts
View File

@ -6,12 +6,14 @@ export type LocalState = {
timeline: Array<Entity.Status>
lazyLoading: boolean
heading: boolean
scrolling: boolean
}
const state = (): LocalState => ({
timeline: [],
lazyLoading: false,
heading: true
heading: true,
scrolling: false
})
export const MUTATION_TYPES = {
@ -23,7 +25,8 @@ export const MUTATION_TYPES = {
CLEAR_TIMELINE: 'clearTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
CHANGE_LAZY_LOADING: 'changeLazyLoading'
CHANGE_LAZY_LOADING: 'changeLazyLoading',
CHANGE_SCROLLING: 'changeScrolling'
}
const mutations: MutationTree<LocalState> = {
@ -75,6 +78,9 @@ const mutations: MutationTree<LocalState> = {
},
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
state.lazyLoading = value
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}

10
src/renderer/store/TimelineSpace/Contents/Mentions.ts
View File

@ -6,12 +6,14 @@ export type MentionsState = {
lazyLoading: boolean
heading: boolean
mentions: Array<Entity.Notification>
scrolling: boolean
}
const state = (): MentionsState => ({
lazyLoading: false,
heading: true,
mentions: []
mentions: [],
scrolling: false
})
export const MUTATION_TYPES = {
@ -23,7 +25,8 @@ export const MUTATION_TYPES = {
ARCHIVE_MENTIONS: 'archiveMentions',
CLEAR_MENTIONS: 'clearMentions',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot'
DELETE_TOOT: 'deleteToot',
CHANGE_SCROLLING: 'changeScrolling'
}
const mutations: MutationTree<MentionsState> = {
@ -75,6 +78,9 @@ const mutations: MutationTree<MentionsState> = {
return true
}
})
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}

10
src/renderer/store/TimelineSpace/Contents/Notifications.ts
View File

@ -10,12 +10,14 @@ export type NotificationsState = {
lazyLoading: boolean
heading: boolean
notifications: Array<Entity.Notification>
scrolling: boolean
}
const state = (): NotificationsState => ({
lazyLoading: false,
heading: true,
notifications: []
notifications: [],
scrolling: false
})
export const MUTATION_TYPES = {
@ -27,7 +29,8 @@ export const MUTATION_TYPES = {
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
CLEAR_NOTIFICATIONS: 'clearNotifications',
ARCHIVE_NOTIFICATIONS: 'archiveNotifications'
ARCHIVE_NOTIFICATIONS: 'archiveNotifications',
CHANGE_SCROLLING: 'changeScrolling'
}
const mutations: MutationTree<NotificationsState> = {
@ -81,6 +84,9 @@ const mutations: MutationTree<NotificationsState> = {
},
[MUTATION_TYPES.ARCHIVE_NOTIFICATIONS]: state => {
state.notifications = state.notifications.slice(0, 30)
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}

10
src/renderer/store/TimelineSpace/Contents/Public.ts
View File

@ -6,12 +6,14 @@ export type PublicState = {
timeline: Array<Entity.Status>
lazyLoading: boolean
heading: boolean
scrolling: boolean
}
const state = (): PublicState => ({
timeline: [],
lazyLoading: false,
heading: true
heading: true,
scrolling: false
})
export const MUTATION_TYPES = {
@ -23,7 +25,8 @@ export const MUTATION_TYPES = {
CLEAR_TIMELINE: 'clearTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot',
CHANGE_LAZY_LOADING: 'changeLazyLoading'
CHANGE_LAZY_LOADING: 'changeLazyLoading',
CHANGE_SCROLLING: 'changeScrolling'
}
const mutations: MutationTree<PublicState> = {
@ -75,6 +78,9 @@ const mutations: MutationTree<PublicState> = {
},
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
state.lazyLoading = value
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}