Skip to content

Commit 5ad5b48

Browse files
jspaaksjspaaks
authored
Merge pull request #295 from citation-file-format/288-nexttick
settimeout based scrolltobottom replaced with nexttick
2 parents d2f8111 + 207bf54 commit 5ad5b48

4 files changed

Lines changed: 87 additions & 75 deletions

File tree

‎src/components/ScreenAuthors.vue‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,14 @@
5252
</template>
5353

5454
<script lang="ts">
55-
import { defineComponent, ref } from 'vue'
55+
import { defineComponent, nextTick, ref } from 'vue'
5656
import Stepper from 'components/Stepper.vue'
5757
import StepperActions from 'components/StepperActions.vue'
5858
import AuthorCardEditing from 'components/AuthorCardEditing.vue'
5959
import AuthorCardViewing from 'components/AuthorCardViewing.vue'
6060
import { AuthorType } from 'src/types'
6161
import { useCff } from 'src/store/cff'
62+
import { scrollToBottom } from '../scroll-to-bottom'
6263
6364
export default defineComponent({
6465
name: 'ScreenAuthors',
@@ -71,31 +72,33 @@ export default defineComponent({
7172
setup () {
7273
const { authors, setAuthors } = useCff()
7374
const editingId = ref(0)
75+
const addAuthor = async () => {
76+
const newAuthor: AuthorType = {}
77+
const newAuthors = [...authors.value, newAuthor]
78+
setAuthors(newAuthors)
79+
editingId.value = newAuthors.length - 1
80+
// await the DOM update that resulted from updating the authors list
81+
await nextTick()
82+
scrollToBottom()
83+
}
84+
const removeAuthor = () => {
85+
const newAuthors = [...authors.value]
86+
newAuthors.splice(editingId.value, 1)
87+
setAuthors(newAuthors)
88+
editingId.value = -1
89+
}
90+
const setAuthorField = (field: keyof AuthorType, value: string) => {
91+
const author = { ...authors.value[editingId.value] }
92+
author[field] = value
93+
authors.value[editingId.value] = author
94+
setAuthors(authors.value)
95+
}
7496
return {
97+
addAuthor,
7598
authors,
7699
editingId,
77-
setAuthorField (field: keyof AuthorType, value: string) {
78-
const author = { ...authors.value[editingId.value] }
79-
author[field] = value
80-
authors.value[editingId.value] = author
81-
setAuthors(authors.value)
82-
},
83-
removeAuthor () {
84-
const newAuthors = [...authors.value]
85-
newAuthors.splice(editingId.value, 1)
86-
setAuthors(newAuthors)
87-
editingId.value = -1
88-
},
89-
addAuthor () {
90-
const newAuthor: AuthorType = {}
91-
const newAuthors = [...authors.value, newAuthor]
92-
setAuthors(newAuthors)
93-
editingId.value = newAuthors.length - 1
94-
setTimeout(() => {
95-
// FIXME shouldn't have to use a timeout but it seems the DOM doesn't update in time
96-
document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth' })
97-
}, 100)
98-
}
100+
removeAuthor,
101+
setAuthorField
99102
}
100103
}
101104
})

‎src/components/ScreenIdentifiers.vue‎

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,14 @@
5454
</template>
5555

5656
<script lang="ts">
57-
import { defineComponent, ref } from 'vue'
57+
import { defineComponent, nextTick, ref } from 'vue'
5858
import Stepper from 'components/Stepper.vue'
5959
import StepperActions from 'components/StepperActions.vue'
6060
import IdentifierCardEditing from 'components/IdentifierCardEditing.vue'
6161
import IdentifierCardViewing from 'components/IdentifierCardViewing.vue'
6262
import { IdentifierType, IdentifierTypeType } from 'src/types'
6363
import { useCff } from 'src/store/cff'
64+
import { scrollToBottom } from '../scroll-to-bottom'
6465
6566
export default defineComponent({
6667
name: 'ScreenIdentifiers',
@@ -73,47 +74,51 @@ export default defineComponent({
7374
setup () {
7475
const { identifiers, setIdentifiers } = useCff()
7576
const editingId = ref(-1)
77+
const addIdentifier = async () => {
78+
const newIdentifier: IdentifierType = {
79+
type: 'doi',
80+
value: '',
81+
description: ''
82+
}
83+
const newIdentifiers = [...identifiers.value, newIdentifier]
84+
setIdentifiers(newIdentifiers)
85+
editingId.value = newIdentifiers.length - 1
86+
// await the DOM update that resulted from updating the identifiers list
87+
await nextTick()
88+
scrollToBottom()
89+
}
90+
const removeIdentifier = () => {
91+
const newIdentifiers = [...identifiers.value]
92+
newIdentifiers.splice(editingId.value, 1)
93+
setIdentifiers(newIdentifiers)
94+
editingId.value = -1
95+
}
96+
const setIdentifierDescriptionField = (field: keyof IdentifierType, value: string) => {
97+
const identifier = { ...identifiers.value[editingId.value] }
98+
identifier.description = value
99+
identifiers.value[editingId.value] = identifier
100+
setIdentifiers(identifiers.value)
101+
}
102+
const setIdentifierTypeField = (field: keyof IdentifierType, value: IdentifierTypeType) => {
103+
const identifier = { ...identifiers.value[editingId.value] }
104+
identifier.type = value
105+
identifiers.value[editingId.value] = identifier
106+
setIdentifiers(identifiers.value)
107+
}
108+
const setIdentifierValueField = (field: keyof IdentifierType, value: string) => {
109+
const identifier = { ...identifiers.value[editingId.value] }
110+
identifier.value = value
111+
identifiers.value[editingId.value] = identifier
112+
setIdentifiers(identifiers.value)
113+
}
76114
return {
77-
identifiers,
115+
addIdentifier,
78116
editingId,
79-
setIdentifierTypeField (field: keyof IdentifierType, value: IdentifierTypeType) {
80-
const identifier = { ...identifiers.value[editingId.value] }
81-
identifier.type = value
82-
identifiers.value[editingId.value] = identifier
83-
setIdentifiers(identifiers.value)
84-
},
85-
setIdentifierValueField (field: keyof IdentifierType, value: string) {
86-
const identifier = { ...identifiers.value[editingId.value] }
87-
identifier.value = value
88-
identifiers.value[editingId.value] = identifier
89-
setIdentifiers(identifiers.value)
90-
},
91-
setIdentifierDescriptionField (field: keyof IdentifierType, value: string) {
92-
const identifier = { ...identifiers.value[editingId.value] }
93-
identifier.description = value
94-
identifiers.value[editingId.value] = identifier
95-
setIdentifiers(identifiers.value)
96-
},
97-
removeIdentifier () {
98-
const newIdentifiers = [...identifiers.value]
99-
newIdentifiers.splice(editingId.value, 1)
100-
setIdentifiers(newIdentifiers)
101-
editingId.value = -1
102-
},
103-
addIdentifier () {
104-
const newIdentifier: IdentifierType = {
105-
type: 'doi',
106-
value: '',
107-
description: ''
108-
}
109-
const newIdentifiers = [...identifiers.value, newIdentifier]
110-
setIdentifiers(newIdentifiers)
111-
editingId.value = newIdentifiers.length - 1
112-
setTimeout(() => {
113-
// FIXME shouldn't have to use a timeout but it seems the DOM doesn't update in time
114-
document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth' })
115-
}, 100)
116-
}
117+
identifiers,
118+
removeIdentifier,
119+
setIdentifierDescriptionField,
120+
setIdentifierTypeField,
121+
setIdentifierValueField
117122
}
118123
}
119124
})

‎src/components/ScreenKeywords.vue‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,9 @@
4747
import Stepper from 'components/Stepper.vue'
4848
import StepperActions from 'components/StepperActions.vue'
4949
import Keyword from 'components/Keyword.vue'
50-
import { defineComponent } from 'vue'
50+
import { defineComponent, nextTick } from 'vue'
5151
import { useCff } from '../store/cff'
52+
import { scrollToBottom } from '../scroll-to-bottom'
5253
5354
export default defineComponent({
5455
name: 'ScreenKeywords',
@@ -59,31 +60,27 @@ export default defineComponent({
5960
},
6061
setup () {
6162
const { keywords, setKeywords } = useCff()
62-
63-
function addKeyword () {
63+
const addKeyword = async () => {
6464
const newKeyword = ''
6565
const newKeywords = [...keywords.value, newKeyword]
6666
setKeywords(newKeywords)
67-
setTimeout(() => {
68-
// FIXME shouldn't have to use a timeout but it seems the DOM doesn't update in time
69-
document.getElementsByClassName('bottom')[0].scrollIntoView({ behavior: 'smooth' })
70-
}, 100)
67+
// await the DOM update that resulted from updating the keywords list
68+
await nextTick()
69+
scrollToBottom()
7170
}
72-
73-
function removeKeyword (index: number) {
71+
const removeKeyword = (index: number) => {
7472
const newKeywords = [...keywords.value]
7573
newKeywords.splice(index, 1)
7674
setKeywords(newKeywords)
7775
}
78-
79-
function setKeyword (index: number, newKeyword: string) {
76+
const setKeyword = (index: number, newKeyword: string) => {
8077
const newKeywords = [...keywords.value]
8178
newKeywords[index] = newKeyword
8279
setKeywords(newKeywords)
8380
}
8481
return {
85-
keywords,
8682
addKeyword,
83+
keywords,
8784
removeKeyword,
8885
setKeyword
8986
}

‎src/scroll-to-bottom.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const scrollToBottom = (targetClass = 'bottom') => {
2+
document.getElementsByClassName(targetClass)[0].scrollIntoView({
3+
behavior: 'smooth',
4+
block: 'nearest',
5+
inline: 'nearest'
6+
})
7+
}

0 commit comments

Comments
 (0)