Character preview for [icon]

bbcode/IconView.vue

@@ -0,0 +1,75 @@
+<template>
+<a
+  :href="`${Utils.siteDomain}c/${character}`"
+  target="_blank"
+  @mouseover.prevent="show()"
+  @mouseenter.prevent="show()"
+  @mouseleave.prevent="dismiss()"
+  @click.middle.prevent="toggleStickyness()"
+  @click.right.passive="dismiss(true)"
+  @click.left.passive="dismiss(true)"
+  ><img :src="`${Utils.staticDomain}images/avatar/${character.toLowerCase()}.png`" class="character-avatar icon" :title="character" :alt="character" v-once></a>
+</template>
+
+<script lang="ts">
+import {Component, Hook, Prop} from '@f-list/vue-ts';
+import Vue from 'vue';
+import { EventBus } from '../chat/preview/event-bus';
+import * as Utils from '../site/utils';
+
+@Component
+export default class IconView extends Vue {
+    Utils = Utils;
+
+    @Prop({required: true})
+    readonly character!: string;
+
+    @Hook('mounted')
+    mounted(): void {
+      // do nothing
+    }
+
+
+    @Hook('beforeDestroy')
+    beforeDestroy(): void {
+        this.dismiss();
+    }
+
+    @Hook('deactivated')
+    deactivate(): void {
+        this.dismiss();
+    }
+
+
+    getCharacterUrl(): string {
+      return `flist-character://${this.character}`;
+    }
+
+
+    dismiss(force: boolean = false): void {
+        // if (!this.preview) {
+        //   return;
+        // }
+
+        EventBus.$emit('imagepreview-dismiss', {url: this.getCharacterUrl(), force});
+    }
+
+
+    show(): void {
+        // if (!this.preview) {
+        //   return;
+        // }
+
+        EventBus.$emit('imagepreview-show', {url: this.getCharacterUrl()});
+    }
+
+
+    toggleStickyness(): void {
+        // if (!this.preview) {
+        //   return;
+        // }
+
+        EventBus.$emit('imagepreview-toggle-stickyness', {url: this.getCharacterUrl()});
+    }
+}
+</script>

bbcode/standard.ts

@@ -5,7 +5,7 @@ import * as Utils from '../site/utils';
 import {analyzeUrlTag, CoreBBCodeParser} from './core';
 import {BBCodeCustomTag, BBCodeSimpleTag, BBCodeTextTag} from './parser';
 import UrlTagView from './UrlTagView.vue';
-
+import {default as IconView} from '../bbcode/IconView.vue';
 
 const usernameRegex = /^[a-zA-Z0-9_\-\s]+$/;
 
@@ -118,16 +118,26 @@ export class StandardBBCodeParser extends CoreBBCodeParser {
                 parser.warning('Unexpected parameter on icon tag.');
             if(!usernameRegex.test(content))
                 return;
-            const a = parser.createElement('a');
-            a.href = `${Utils.siteDomain}c/${content}`;
-            a.target = '_blank';
-            const img = parser.createElement('img');
-            img.src = `${Utils.staticDomain}images/avatar/${content.toLowerCase()}.png`;
-            img.className = 'character-avatar icon';
-            img.title = img.alt = content;
-            a.appendChild(img);
-            parent.appendChild(a);
-            return a;
+
+            const root = parser.createElement('span');
+            const el = parser.createElement('span');
+            parent.appendChild(root);
+            root.appendChild(el);
+            const view = new IconView({ el, propsData: { character: content }});
+
+            this.cleanup.push(view);
+            return root;
+
+            // const a = parser.createElement('a');
+            // a.href = `${Utils.siteDomain}c/${content}`;
+            // a.target = '_blank';
+            // const img = parser.createElement('img');
+            // img.src = `${Utils.staticDomain}images/avatar/${content.toLowerCase()}.png`;
+            // img.className = 'character-avatar icon';
+            // img.title = img.alt = content;
+            // a.appendChild(img);
+            // parent.appendChild(a);
+            // return a;
         }));
         this.addTag(new BBCodeTextTag('eicon', (parser, parent, param, content) => {
             if(param !== '')

chat/bbcode.ts

@@ -4,10 +4,11 @@ import {BBCodeElement, CoreBBCodeParser, analyzeUrlTag} from '../bbcode/core';
 import BaseEditor from '../bbcode/Editor.vue';
 import {BBCodeTextTag} from '../bbcode/parser';
 import ChannelView from './ChannelTagView.vue';
-import {characterImage} from './common';
+// import {characterImage} from './common';
 import core from './core';
-import {Character} from './interfaces';
+// import {Character} from './interfaces';
 import {default as UrlView} from '../bbcode/UrlTagView.vue';
+import {default as IconView} from '../bbcode/IconView.vue';
 import UserView from './UserView.vue';
 
 export class Editor extends BaseEditor {
@@ -36,14 +37,24 @@ export default class BBCodeParser extends CoreBBCodeParser {
             const uregex = /^[a-zA-Z0-9_\-\s]+$/;
             if(!uregex.test(content))
                 return;
-            const img = parser.createElement('img');
+
+            const root = parser.createElement('span');
+            const el = parser.createElement('span');
+            parent.appendChild(root);
+            root.appendChild(el);
+            const view = new IconView({ el, propsData: { character: content }});
+
+            this.cleanup.push(view);
+            return root;
+
+            /* const img = parser.createElement('img');
             img.src = characterImage(content);
             img.style.cursor = 'pointer';
             img.className = 'character-avatar icon';
             img.title = img.alt = content;
             (<HTMLImageElement & {character: Character}>img).character = core.characters.get(content);
             parent.appendChild(img);
-            return img;
+            return img; */
         }));
         this.addTag(new BBCodeTextTag('eicon', (parser, parent, param, content) => {
             if(param.length > 0)