iridium/neko
2
2
Fork 0
mirror of https://github.com/m1k1o/neko.git synced 2024-07-24 14:40:50 +12:00
Code Issues Packages Projects Releases Wiki Activity

added tooltip to emoji in chat

Browse Source
This commit is contained in:
Craig 2020-02-02 22:52:07 +00:00
parent c0b54fd4de
commit 6e119249d8
2 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/components/markdown.ts
View File

@ -71,7 +71,7 @@ function htmlTag(
let attributeString = '' let attributeString = ''
for (const attr in attributes) { for (const attr in attributes) {
if (Object.prototype.hasOwnProperty.call(attributes, attr) && attributes[attr]) { if (Object.prototype.hasOwnProperty.call(attributes, attr) && attributes[attr]) {
attributeString += ` ${md.sanitizeText(attr)}="${md.sanitizeText(attributes[attr])}"` attributeString += ` ${attr}="${attributes[attr]}"` // md.sanitizeText(attr)
} }
} }
@ -221,7 +221,16 @@ const rules: MarkdownRules = {
} }
}, },
html(node, output, state) { html(node, output, state) {
return htmlTag('span', '', { class: `emoji`, 'data-emoji': node.id }, state) return htmlTag(
'span',
'',
{
class: `emoji`,
'data-emoji': node.id,
'v-tooltip.top-center': `{ content:':${node.id}:', offset: 2, delay: { show: 1000, hide: 100 } }`,
},
state,
)
}, },
}, },
emoticon: { emoticon: {
@ -246,7 +255,7 @@ const rules: MarkdownRules = {
} }
}, },
html(node, output, state) { html(node, output, state) {
return htmlTag('span', htmlTag('span', output(node.content, state), {}, state), { class: 'spoiler' }, state) //htmlTag('span', , { }, state) return htmlTag('span', htmlTag('span', output(node.content, state), {}, state), { class: 'spoiler' }, state)
}, },
}, },
} }
@ -258,37 +267,16 @@ const htmlOutput = md.outputFor<HtmlOutputRule, 'html'>(rules, 'html')
name: 'neko-markdown', name: 'neko-markdown',
}) })
export default class extends Vue { export default class extends Vue {
html = ''
@Prop({ required: true }) @Prop({ required: true })
source!: string source!: string
@Watch('source') render(h: any) {
onSourceChanged(source: string) {
const state: MarkdownState = { const state: MarkdownState = {
inline: true, inline: true,
inQuote: false, inQuote: false,
escapeHTML: true, escapeHTML: true,
cssModuleNames: null, cssModuleNames: null,
} }
return h({ template: `<div>${htmlOutput(parser(this.source, state), state)}</div>` })
this.html = htmlOutput(parser(source, state), state)
}
render(createElement: any) {
const state: MarkdownState = {
inline: true,
inQuote: false,
escapeHTML: true,
cssModuleNames: null,
}
this.html = htmlOutput(parser(this.source, state), state)
return createElement('div', {
domProps: {
innerHTML: this.html,
},
})
} }
} }

1
client/vue.config.js
View File

@ -13,6 +13,7 @@ module.exports = {
configureWebpack: { configureWebpack: {
resolve: { resolve: {
alias: { alias: {
vue$: 'vue/dist/vue.esm.js',
'~': path.resolve(__dirname, 'src/'), '~': path.resolve(__dirname, 'src/'),
}, },
}, },