Rewrite Modals/NewToot/Quote with composition API

This commit is contained in:
AkiraFukushima 2022-04-30 01:50:09 +09:00
parent 29f3776c08
commit ebc09cdf55
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
6 changed files with 86 additions and 70 deletions

View File

@ -4,15 +4,21 @@ describe('emojify', () => {
const emoji = [ const emoji = [
{ {
shortcode: 'python', shortcode: 'python',
url: 'https://example.com/python' static_url: 'https://example.com/python',
url: 'https://example.com/python',
visible_in_picker: true
}, },
{ {
shortcode: 'nodejs', shortcode: 'nodejs',
url: 'https://example.com/nodejs' static_url: 'https://example.com/nodejs',
url: 'https://example.com/nodejs',
visible_in_picker: true
}, },
{ {
shortcode: 'slack', shortcode: 'slack',
url: 'https://example.com/slack' static_url: 'https://example.com/slack',
url: 'https://example.com/slack',
visible_in_picker: true
} }
] ]
describe('Does not contain shortcode', () => { describe('Does not contain shortcode', () => {

View File

@ -20,12 +20,14 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { defineComponent, toRefs } from 'vue'
import DisplayStyle from '~/src/constants/displayStyle' import DisplayStyle from '~/src/constants/displayStyle'
import FailoverImg from '@/components/atoms/FailoverImg' import FailoverImg from '@/components/atoms/FailoverImg.vue'
import emojify from '@/utils/emojify' import emojify from '@/utils/emojify'
import { Entity } from 'megalodon'
export default { export default defineComponent({
new: 'quote-target', new: 'quote-target',
components: { components: {
FailoverImg FailoverImg
@ -40,9 +42,10 @@ export default {
default: 0 default: 0
} }
}, },
methods: { setup(props) {
username(account) { const { displayNameStyle } = toRefs(props)
switch (this.displayNameStyle) { const username = (account: Entity.Account) => {
switch (displayNameStyle.value) {
case DisplayStyle.DisplayNameAndUsername.value: case DisplayStyle.DisplayNameAndUsername.value:
if (account.display_name !== '') { if (account.display_name !== '') {
return emojify(account.display_name, account.emojis) return emojify(account.display_name, account.emojis)
@ -55,24 +58,30 @@ export default {
} else { } else {
return account.acct return account.acct
} }
case DisplayStyle.Username.value: default:
return account.acct return account.acct
} }
}, }
accountName(account) { const accountName = (account: Entity.Account) => {
switch (this.displayNameStyle) { switch (displayNameStyle.value) {
case DisplayStyle.DisplayNameAndUsername.value: case DisplayStyle.DisplayNameAndUsername.value:
return `@${account.acct}` return `@${account.acct}`
case DisplayStyle.DisplayName.value: case DisplayStyle.DisplayName.value:
case DisplayStyle.Username.value: default:
return '' return ''
} }
}, }
emojiText(content, emojis) { const emojiText = (content: string, emojis: Array<Entity.Emoji>) => {
return emojify(content, emojis) return emojify(content, emojis)
} }
return {
username,
accountName,
emojiText
}
} }
} })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -45,7 +45,6 @@
set="twitter" set="twitter"
:autoFocus="true" :autoFocus="true"
@select="selectEmoji" @select="selectEmoji"
:custom="pickerEmojis"
:perLine="7" :perLine="7"
:emojiSize="24" :emojiSize="24"
:showPreview="false" :showPreview="false"
@ -96,7 +95,7 @@ export default defineComponent({
setup(props, ctx) { setup(props, ctx) {
const space = 'TimelineSpace/Modals/NewToot/Status' const space = 'TimelineSpace/Modals/NewToot/Status'
const store = useStore() const store = useStore()
const emojiIndex = new EmojiIndex(data)
const { modelValue } = toRefs(props) const { modelValue } = toRefs(props)
const highlightedIndex = ref(0) const highlightedIndex = ref(0)
const statusRef = ref<HTMLTextAreaElement>() const statusRef = ref<HTMLTextAreaElement>()
@ -110,7 +109,10 @@ export default defineComponent({
}) })
const startIndex = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.startIndex) const startIndex = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.startIndex)
const matchWord = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.matchWord) const matchWord = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.matchWord)
const pickerEmojis = computed(() => store.getters[`${space}/pickerEmojis`]) const customEmojis = computed(() => store.getters[`${space}/pickerEmojis`])
const emojiIndex = new EmojiIndex(data, {
custom: customEmojis.value
})
const closeSuggest = () => { const closeSuggest = () => {
store.dispatch(`${space}/${ACTION_TYPES.CLOSE_SUGGEST}`) store.dispatch(`${space}/${ACTION_TYPES.CLOSE_SUGGEST}`)
@ -223,7 +225,6 @@ export default defineComponent({
filteredAccounts, filteredAccounts,
filteredHashtags, filteredHashtags,
filteredSuggestion, filteredSuggestion,
pickerEmojis,
openSuggest, openSuggest,
startSuggest, startSuggest,
suggestHighlight, suggestHighlight,

View File

@ -10,69 +10,72 @@
/> />
</template> </template>
<script> <script lang="ts">
import { defineComponent, ref, toRefs, onMounted, watch } from 'vue'
import exifImageUrl from '@/components/utils/exifImageUrl' import exifImageUrl from '@/components/utils/exifImageUrl'
export default { export default defineComponent({
name: 'FailoverImg', name: 'FailoverImg',
props: { props: {
src: { src: {
type: String, type: String,
default: '', default: ''
}, },
title: { title: {
type: String, type: String,
default: '', default: ''
}, },
alt: { alt: {
type: String, type: String,
default: '', default: ''
}, },
readExif: { readExif: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
failoverSrc: { failoverSrc: {
type: String, type: String,
default: default:
'data:image/png;base64,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8uyu8TbiNgXmedEw05izs7P8Fjrdad3pzMSyT9ylsyYpjwipvI2p/fBe+djEq1evGofN8qLr7PLptJane13xzkgK3Gjx2bn2BQ58QJVXf0yN6t9CeeDReNpz4Ltqy9jyucT6jwjNrtBOz5g+5rtowtnmtPB6fLPznZEU2NjhOAtMyt15/eflyw268WCm3MIG+JRA5ZbxrsPgxv9fo+/dbTnmNzY28CJaq+no3AJzh2l4mUqBafXHxppGj/r/MWM5ZWr8NG25Tf/69WuYUb180k7fp1R+bKLxCD9f7pu9jzSeMf/HOC6tP8E2/CJakwhrCpzb4cgLzCc2aq4jl1tYvjKeTqguOnsUG2L5/WLDfP9AumCdn7f86EOnYTB2LvUR5q/VmP2Yb/x7vgsi3VizaIiLRyizn+7d3nfGVmBlXjqJAlMnp6enLUebcu4693JZbJfl1c4h76jKO4X0Af8eE8vyXu1Fynlv5ZNNlVlxrP258/byK/C67i9u9UjYssDcYf3x1djEllcOIzXnP9JVmbLD/LHX9AUq5YQ2Rs4hb7OMd/Hu3buuf6v82ESbS03xZvOMIIa72H+Ve5m0iNKqj39Gh2mIjr+1tbV179696LacdMSP6vcXsVLa/H+j4zXUfEfGOkTYqcA8aZnWLu3k5KTxvHz6tXJ4j+1p0Z2NabMY/xcBl3PRljPn2LPkoSyiKitKH5nf29srK1q0d0sfEG98usFuexj1dLScPKyrll8oFNvN4eFh4zmP+LWjo6NJnPQrP8Lb8qaL8tdmT8/ETz9+/Nh4K1n8WiyiqX9b+XAj4XRvrYw1nfajbVZ27ODzd9rXZBYPFVtPuq5Y+SBf/Cjdi9z761hj281PPZtE+dOuN0zm86XlW4sXn/cU7W+hTsd+Naey0q4qLZ9Kpekt1JyzyUeenT6DsqqY/zk4OFjG41Zm4XGYMfDtRen76svD+pHfQJhe5+35OHm/RZT+RxRr9r62rNqRkN+tXUS+3gJECCIcxpAXu8zucEw4x9nZ2fn5+TDnSK+urm7JV1YiwrYGvlR694+NKV8XQYR/WZubhsAxISBCMB39W9K9V6N6q+t3pwUibNjix3yPGJiOAiIEEQIiBBGCCC0CECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBDG6D8BBgBNIRvwsstoqwAAAABJRU5ErkJggg==', 'data:image/png;base64,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8uyu8TbiNgXmedEw05izs7P8Fjrdad3pzMSyT9ylsyYpjwipvI2p/fBe+djEq1evGofN8qLr7PLptJane13xzkgK3Gjx2bn2BQ58QJVXf0yN6t9CeeDReNpz4Ltqy9jyucT6jwjNrtBOz5g+5rtowtnmtPB6fLPznZEU2NjhOAtMyt15/eflyw268WCm3MIG+JRA5ZbxrsPgxv9fo+/dbTnmNzY28CJaq+no3AJzh2l4mUqBafXHxppGj/r/MWM5ZWr8NG25Tf/69WuYUb180k7fp1R+bKLxCD9f7pu9jzSeMf/HOC6tP8E2/CJakwhrCpzb4cgLzCc2aq4jl1tYvjKeTqguOnsUG2L5/WLDfP9AumCdn7f86EOnYTB2LvUR5q/VmP2Yb/x7vgsi3VizaIiLRyizn+7d3nfGVmBlXjqJAlMnp6enLUebcu4693JZbJfl1c4h76jKO4X0Af8eE8vyXu1Fynlv5ZNNlVlxrP258/byK/C67i9u9UjYssDcYf3x1djEllcOIzXnP9JVmbLD/LHX9AUq5YQ2Rs4hb7OMd/Hu3buuf6v82ESbS03xZvOMIIa72H+Ve5m0iNKqj39Gh2mIjr+1tbV179696LacdMSP6vcXsVLa/H+j4zXUfEfGOkTYqcA8aZnWLu3k5KTxvHz6tXJ4j+1p0Z2NabMY/xcBl3PRljPn2LPkoSyiKitKH5nf29srK1q0d0sfEG98usFuexj1dLScPKyrll8oFNvN4eFh4zmP+LWjo6NJnPQrP8Lb8qaL8tdmT8/ETz9+/Nh4K1n8WiyiqX9b+XAj4XRvrYw1nfajbVZ27ODzd9rXZBYPFVtPuq5Y+SBf/Cjdi9z761hj281PPZtE+dOuN0zm86XlW4sXn/cU7W+hTsd+Naey0q4qLZ9Kpekt1JyzyUeenT6DsqqY/zk4OFjG41Zm4XGYMfDtRen76svD+pHfQJhe5+35OHm/RZT+RxRr9r62rNqRkN+tXUS+3gJECCIcxpAXu8zucEw4x9nZ2fn5+TDnSK+urm7JV1YiwrYGvlR694+NKV8XQYR/WZubhsAxISBCMB39W9K9V6N6q+t3pwUibNjix3yPGJiOAiIEEQIiBBGCCC0CECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBDG6D8BBgBNIRvwsstoqwAAAABJRU5ErkJggg=='
},
},
data() {
return {
loading: true,
originalSrc: this.src,
} }
}, },
async mounted() { setup(props) {
if (this.readExif) { const { src, readExif, failoverSrc } = toRefs(props)
try { const loading = ref<boolean>(false)
const transformed = await exifImageUrl(this.src) const originalSrc = ref<string>(src.value)
this.originalSrc = transformed
} catch (err) { onMounted(async () => {
console.warn(err) if (readExif.value) {
}
}
},
watch: {
src: async function (newSrc, _oldSrc) {
this.originalSrc = newSrc
if (this.readExif) {
try { try {
const transformed = await exifImageUrl(newSrc) const transformed = await exifImageUrl(src.value)
this.originalSrc = transformed originalSrc.value = transformed
} catch (err) { } catch (err) {
console.warn(err) console.warn(err)
} }
} }
}, })
},
methods: { watch(src, async (newSrc, _oldSrc) => {
failover() { originalSrc.value = newSrc
this.originalSrc = this.failoverSrc if (readExif.value) {
}, try {
}, const transformed = await exifImageUrl(newSrc)
} originalSrc.value = transformed
} catch (err) {}
}
})
const failover = () => {
originalSrc.value = failoverSrc.value
}
return {
loading,
originalSrc,
failover
}
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,15 +1,10 @@
import loadImage from 'blueimp-load-image' import loadImage from 'blueimp-load-image'
const parseExtension = (url) => { const parseExtension = (url: string) => {
if (!url) { if (!url) {
return null return null
} }
if ( if (url.match(/\.jpg$/) || url.match(/\.jpeg$/) || url.match(/\.JPG$/) || url.match(/\.JPEG$/)) {
url.match(/\.jpg$/) ||
url.match(/\.jpeg$/) ||
url.match(/\.JPG$/) ||
url.match(/\.JPEG$/)
) {
return 'image/jpeg' return 'image/jpeg'
} else if (url.match(/\.png$/) || url.match(/\.PNG$/)) { } else if (url.match(/\.png$/) || url.match(/\.PNG$/)) {
return 'image/png' return 'image/png'
@ -23,7 +18,7 @@ const parseExtension = (url) => {
return null return null
} }
const exifImageUrl = (url) => { const exifImageUrl = (url: string): Promise<string> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const extension = parseExtension(url) const extension = parseExtension(url)
if (!extension) { if (!extension) {
@ -31,7 +26,7 @@ const exifImageUrl = (url) => {
} }
loadImage( loadImage(
url, url,
(canvas) => { canvas => {
if (canvas.type === 'error') { if (canvas.type === 'error') {
return reject(Error(`can not load image: ${url}`)) return reject(Error(`can not load image: ${url}`))
} }
@ -41,7 +36,7 @@ const exifImageUrl = (url) => {
{ {
canvas: true, canvas: true,
meta: true, meta: true,
orientation: true, orientation: true
} }
) )
}) })

View File

@ -1,6 +1,8 @@
const emojify = (str, customEmoji = []) => { import { Entity } from 'megalodon'
const emojify = (str: string, customEmoji: Array<Entity.Emoji> = []): string => {
let result = str let result = str
customEmoji.map((emoji) => { customEmoji.map(emoji => {
const reg = new RegExp(`:${emoji.shortcode}:`, 'g') const reg = new RegExp(`:${emoji.shortcode}:`, 'g')
const match = result.match(reg) const match = result.match(reg)
if (!match) return emoji if (!match) return emoji