Capture clicks on statuses to hijack mention clicks, match mention href to user somehow

This commit is contained in:
shpuld 2019-01-30 19:15:35 +02:00
parent 3cfbf0141f
commit 15603981f8
4 changed files with 88 additions and 3 deletions

View file

@ -9,6 +9,7 @@ import LinkPreview from '../link-preview/link-preview.vue'
import { filter, find } from 'lodash' import { filter, find } from 'lodash'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mentionMatchesUrl } from 'src/services/mention_matcher/mention_matcher.js'
const Status = { const Status = {
name: 'Status', name: 'Status',
@ -237,11 +238,23 @@ const Status = {
return 'icon-globe' return 'icon-globe'
} }
}, },
linkClicked ({target}) { linkClicked (event) {
let { target } = event
if (target.tagName === 'SPAN') { if (target.tagName === 'SPAN') {
target = target.parentNode target = target.parentNode
} }
if (target.tagName === 'A') { if (target.tagName === 'A') {
if (target.className.match(/mention/)) {
const href = target.getAttribute('href')
const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
if (attn) {
event.stopPropagation()
event.preventDefault()
const link = this.generateUserProfileLink(attn.id, attn.screen_name)
this.$router.push(link)
return
}
}
window.open(target.href, '_blank') window.open(target.href, '_blank')
} }
}, },

View file

@ -24,9 +24,9 @@
<div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status"> <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
<div v-if="!noHeading" class="media-left"> <div v-if="!noHeading" class="media-left">
<a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
<StillImage class='avatar' :class="{'avatar-compact': compact, 'better-shadow': betterShadow}" :src="status.user.profile_image_url_original"/> <StillImage class='avatar' :class="{'avatar-compact': compact, 'better-shadow': betterShadow}" :src="status.user.profile_image_url_original"/>
</a> </router-link>
</div> </div>
<div class="status-body"> <div class="status-body">
<div class="usercard media-body" v-if="userExpanded"> <div class="usercard media-body" v-if="userExpanded">

View file

@ -0,0 +1,9 @@
export const mentionMatchesUrl = (attention, url) => {
if (url === attention.statusnet_profile_url) {
return true
}
const [namepart, instancepart] = attention.screen_name.split('@')
const matchstring = new RegExp('://' + instancepart + '/.*' + namepart + '$', 'g')
return !!url.match(matchstring)
}

View file

@ -0,0 +1,63 @@
import * as MentionMatcher from 'src/services/mention_matcher/mention_matcher.js'
const localAttn = () => ({
id: 123,
is_local: true,
name: 'Guy',
screen_name: 'person',
statusnet_profile_url: 'https://instance.com/users/person'
})
const externalAttn = () => ({
id: 123,
is_local: false,
name: 'Guy',
screen_name: 'person@instance.com',
statusnet_profile_url: 'https://instance.com/users/person'
})
describe('MentionMatcher', () => {
describe.only('mentionMatchesUrl', () => {
it('should match local mention', () => {
const attention = localAttn()
const url = 'https://instance.com/users/person'
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
})
it('should not match a local mention with same name but different instance', () => {
const attention = localAttn()
const url = 'https://website.com/users/person'
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
})
it('should match external pleroma mention', () => {
const attention = externalAttn()
const url = 'https://instance.com/users/person'
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
})
it('should not match external pleroma mention with same name but different instance', () => {
const attention = externalAttn()
const url = 'https://website.com/users/person'
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
})
it('should match external mastodon mention', () => {
const attention = externalAttn()
const url = 'https://instance.com/@person'
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
})
it('should not match external mastodon mention with same name but different instance', () => {
const attention = externalAttn()
const url = 'https://website.com/@person'
expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
})
})
})