Merge remote-tracking branch 'upstream/develop' into shigusegubu
* upstream/develop: (29 commits)
add hideISP to defaultState of config module
add changelog entry
mrf transparency panel: refactor to use vuex mapState
mrf transparency panel: remove unneeded components{}
boot: cleanup resolveStaffAccounts
lint
about: add MRF transparency panel
about: add staff panel
about page: fix hiding of instance-specific panel, flow ToS and ISP better
nav panel: add link to about page
redirect /remote-users/:username@:hostname -> /users/:id, /remote-users/:hostname/:username -> /users/:id
clear filter on reopen, fix error message in console
reset position when reopening emoji picker
eslint fix
fix not being able to see unicode emojis when there few of them when searching on emoji-a-ton instances
replace sanity button with loading on scroll
fix search not working, use computer property instead of state
fix eslint warnings
Lightbox/modal multi image improvements - #381
'/api/pleroma/profile/mfa' -> '/api/pleroma/accounts/mfa'
...
This commit is contained in:
Henry Jameson
commit
45a1d30bd6
31 changed files with 590 additions and 105 deletions
|
|
@ -1,9 +1,12 @@
|
|||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
import { set } from 'vue'
|
||||
|
||||
const LOAD_EMOJI_BY = 50
|
||||
const LOAD_EMOJI_INTERVAL = 100
|
||||
const LOAD_EMOJI_SANE_AMOUNT = 500
|
||||
// At widest, approximately 20 emoji are visible in a row,
|
||||
// loading 3 rows, could be overkill for narrow picker
|
||||
const LOAD_EMOJI_BY = 60
|
||||
|
||||
// When to start loading new batch emoji, in pixels
|
||||
const LOAD_EMOJI_MARGIN = 64
|
||||
|
||||
const filterByKeyword = (list, keyword = '') => {
|
||||
return list.filter(x => x.displayText.includes(keyword))
|
||||
|
|
@ -24,10 +27,8 @@ const EmojiPicker = {
|
|||
showingStickers: false,
|
||||
groupsScrolledClass: 'scrolled-top',
|
||||
keepOpen: false,
|
||||
customEmojiBuffer: (this.$store.state.instance.customEmoji || [])
|
||||
.slice(0, LOAD_EMOJI_BY),
|
||||
customEmojiBufferSlice: LOAD_EMOJI_BY,
|
||||
customEmojiTimeout: null,
|
||||
customEmojiCounter: LOAD_EMOJI_BY,
|
||||
customEmojiLoadAllConfirmed: false
|
||||
}
|
||||
},
|
||||
|
|
@ -36,10 +37,22 @@ const EmojiPicker = {
|
|||
Checkbox
|
||||
},
|
||||
methods: {
|
||||
onStickerUploaded (e) {
|
||||
this.$emit('sticker-uploaded', e)
|
||||
},
|
||||
onStickerUploadFailed (e) {
|
||||
this.$emit('sticker-upload-failed', e)
|
||||
},
|
||||
onEmoji (emoji) {
|
||||
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
|
||||
this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
|
||||
},
|
||||
onScroll (e) {
|
||||
const target = (e && e.target) || this.$refs['emoji-groups']
|
||||
this.updateScrolledClass(target)
|
||||
this.scrolledGroup(target)
|
||||
this.triggerLoadMore(target)
|
||||
},
|
||||
highlight (key) {
|
||||
const ref = this.$refs['group-' + key]
|
||||
const top = ref[0].offsetTop
|
||||
|
|
@ -49,9 +62,7 @@ const EmojiPicker = {
|
|||
this.$refs['emoji-groups'].scrollTop = top + 1
|
||||
})
|
||||
},
|
||||
scrolledGroup (e) {
|
||||
const target = (e && e.target) || this.$refs['emoji-groups']
|
||||
const top = target.scrollTop + 5
|
||||
updateScrolledClass (target) {
|
||||
if (target.scrollTop <= 5) {
|
||||
this.groupsScrolledClass = 'scrolled-top'
|
||||
} else if (target.scrollTop >= target.scrollTopMax - 5) {
|
||||
|
|
@ -59,6 +70,28 @@ const EmojiPicker = {
|
|||
} else {
|
||||
this.groupsScrolledClass = 'scrolled-middle'
|
||||
}
|
||||
},
|
||||
triggerLoadMore (target) {
|
||||
const ref = this.$refs['group-end-custom'][0]
|
||||
if (!ref) return
|
||||
const bottom = ref.offsetTop + ref.offsetHeight
|
||||
|
||||
const scrollerBottom = target.scrollTop + target.clientHeight
|
||||
const scrollerTop = target.scrollTop
|
||||
const scrollerMax = target.scrollHeight
|
||||
|
||||
// Loads more emoji when they come into view
|
||||
const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
|
||||
// Always load when at the very top in case there's no scroll space yet
|
||||
const atTop = scrollerTop < 5
|
||||
// Don't load when looking at unicode category or at the very bottom
|
||||
const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
|
||||
if (!bottomAboveViewport && (approachingBottom || atTop)) {
|
||||
this.loadEmoji()
|
||||
}
|
||||
},
|
||||
scrolledGroup (target) {
|
||||
const top = target.scrollTop + 5
|
||||
this.$nextTick(() => {
|
||||
this.emojisView.forEach(group => {
|
||||
const ref = this.$refs['group-' + group.id]
|
||||
|
|
@ -68,67 +101,40 @@ const EmojiPicker = {
|
|||
})
|
||||
})
|
||||
},
|
||||
loadEmojiInsane () {
|
||||
this.customEmojiLoadAllConfirmed = true
|
||||
this.continueEmojiLoad()
|
||||
},
|
||||
loadEmoji () {
|
||||
const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
|
||||
const saneLoaded = this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT &&
|
||||
!this.customEmojiLoadAllConfirmed
|
||||
|
||||
if (allLoaded || saneLoaded) {
|
||||
if (allLoaded) {
|
||||
return
|
||||
}
|
||||
|
||||
this.customEmojiBuffer.push(
|
||||
...this.filteredEmoji.slice(
|
||||
this.customEmojiCounter,
|
||||
this.customEmojiCounter + LOAD_EMOJI_BY
|
||||
)
|
||||
)
|
||||
this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL)
|
||||
this.customEmojiCounter += LOAD_EMOJI_BY
|
||||
this.customEmojiBufferSlice += LOAD_EMOJI_BY
|
||||
},
|
||||
startEmojiLoad (forceUpdate = false) {
|
||||
if (!forceUpdate) {
|
||||
this.keyword = ''
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs['emoji-groups'].scrollTop = 0
|
||||
})
|
||||
const bufferSize = this.customEmojiBuffer.length
|
||||
const bufferPrefilledSane = bufferSize === LOAD_EMOJI_SANE_AMOUNT && !this.customEmojiLoadAllConfirmed
|
||||
const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
|
||||
if (forceUpdate || bufferPrefilledSane || bufferPrefilledAll) {
|
||||
if (bufferPrefilledAll && !forceUpdate) {
|
||||
return
|
||||
}
|
||||
if (this.customEmojiTimeout) {
|
||||
window.clearTimeout(this.customEmojiTimeout)
|
||||
}
|
||||
|
||||
set(
|
||||
this,
|
||||
'customEmojiBuffer',
|
||||
this.filteredEmoji.slice(0, LOAD_EMOJI_BY)
|
||||
)
|
||||
this.customEmojiCounter = LOAD_EMOJI_BY
|
||||
this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL)
|
||||
},
|
||||
continueEmojiLoad () {
|
||||
this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL)
|
||||
this.customEmojiBufferSlice = LOAD_EMOJI_BY
|
||||
},
|
||||
toggleStickers () {
|
||||
this.showingStickers = !this.showingStickers
|
||||
},
|
||||
setShowStickers (value) {
|
||||
this.showingStickers = value
|
||||
},
|
||||
onStickerUploaded (e) {
|
||||
this.$emit('sticker-uploaded', e)
|
||||
},
|
||||
onStickerUploadFailed (e) {
|
||||
this.$emit('sticker-upload-failed', e)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyword () {
|
||||
this.customEmojiLoadAllConfirmed = false
|
||||
this.scrolledGroup()
|
||||
this.onScroll()
|
||||
this.startEmojiLoad(true)
|
||||
}
|
||||
},
|
||||
|
|
@ -142,19 +148,14 @@ const EmojiPicker = {
|
|||
}
|
||||
return 0
|
||||
},
|
||||
saneAmount () {
|
||||
// for UI
|
||||
return LOAD_EMOJI_SANE_AMOUNT
|
||||
},
|
||||
filteredEmoji () {
|
||||
return filterByKeyword(
|
||||
this.$store.state.instance.customEmoji || [],
|
||||
this.keyword
|
||||
)
|
||||
},
|
||||
askForSanity () {
|
||||
return this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT &&
|
||||
!this.customEmojiLoadAllConfirmed
|
||||
customEmojiBuffer () {
|
||||
return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
|
||||
},
|
||||
emojis () {
|
||||
const standardEmojis = this.$store.state.instance.emoji || []
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
ref="emoji-groups"
|
||||
class="emoji-groups"
|
||||
:class="groupsScrolledClass"
|
||||
@scroll="scrolledGroup"
|
||||
@scroll="onScroll"
|
||||
>
|
||||
<div
|
||||
v-for="group in emojisView"
|
||||
|
|
@ -73,6 +73,7 @@
|
|||
:src="emoji.imageUrl"
|
||||
>
|
||||
</span>
|
||||
<span :ref="'group-end-' + group.id" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="keep-open">
|
||||
|
|
@ -80,20 +81,6 @@
|
|||
{{ $t('emoji.keep_open') }}
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
v-if="askForSanity"
|
||||
class="too-many-emoji"
|
||||
>
|
||||
<div class="alert warning hint">
|
||||
{{ $t('emoji.load_all_hint', { saneAmount } ) }}
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-default"
|
||||
@click.prevent="loadEmojiInsane"
|
||||
>
|
||||
{{ $t('emoji.load_all', { emojiAmount: filteredEmoji.length } ) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="showingStickers"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue