kittyfangs
/
fchat-rising
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix to image preview load bug

This commit is contained in:
Mr. Stallion 2019-07-12 17:11:55 -05:00
parent 8dfbe9ba2f
commit dff1f97621
4 changed files with 109 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
bbcode/UrlTagView.vue
View File

@ -1,15 +1,17 @@
<template>
<span>
<i class="fa fa-link"></i>
<!-- No prevent for @click on purpose -->
<a
:href="url"
rel="nofollow noreferrer noopener"
target="_blank"
class="user-link"
@mouseover="show()"
@mouseenter="show()"
@mouseleave="dismiss()"
@mouseout="dismiss()"
@click="handleClick()"
@mouseover.prevent="show()"
@mouseenter.prevent="show()"
@mouseleave.prevent="dismiss()"
@mouseout.prevent="dismiss()"
@click.middle.prevent="toggleStickyness()"
>{{text}}</a>
<span
@ -45,8 +47,8 @@
this.dismiss();
}
dismiss(): void {
EventBus.$emit('imagepreview-dismiss', {url: this.url});
dismiss(force: boolean = false): void {
EventBus.$emit('imagepreview-dismiss', {url: this.url, force});
}
show(): void {
@ -57,5 +59,9 @@
toggleStickyness(): void {
EventBus.$emit('imagepreview-toggle-stickyness', {url: this.url});
}
handleClick(): void {
this.dismiss(true);
}
}
</script>

90
chat/ImagePreview.vue
View File

@ -18,6 +18,7 @@
</template>
<script lang="ts">
import * as _ from 'lodash';
import {Component, Hook} from '@f-list/vue-ts';
import Vue from 'vue';
import { EventBus, EventBusEvent } from './event-bus';
@ -50,6 +51,8 @@
externalUrl: string | null = null;
internalUrl: string | null = null;
lastExternalUrl = '';
url: string | null = null;
domain: string | undefined;
@ -74,7 +77,7 @@
(eventData: EventBusEvent) => {
// console.log('Event dismiss', eventData.url);
this.dismiss(eventData.url as string);
this.dismiss(eventData.url as string, eventData.force as boolean);
}
);
@ -111,6 +114,7 @@
}
);
webview.addEventListener(
'did-fail-load',
(event: Event) => {
@ -160,19 +164,41 @@
);
_.each(
['did-start-loading', 'load-commit', 'will-navigate', 'did-navigate', 'did-navigate-in-page', 'update-target-url'],
(en: string) => {
webview.addEventListener(
en,
(event: Event) => {
if (this.debug)
console.log(`ImagePreview ${en}`, event);
}
);
}
);
setInterval(
() => {
if (((this.visible) && (!this.exitInterval) && (!this.shouldDismiss)) || (this.interval))
this.initialCursorPosition = screen.getCursorScreenPoint();
if ((this.visible) && (this.shouldDismiss) && (this.hasMouseMovedSince()) && (!this.exitInterval) && (!this.interval))
if ((this.visible) && (this.shouldDismiss) && (this.hasMouseMovedSince()) && (!this.exitInterval) && (!this.interval)) {
if (this.debug) {
console.log('ImagePreview: call hide from interval');
}
this.hide();
}
},
10
);
}
hide(): void {
if (this.debug)
console.log('ImagePreview: hide', this.externalUrlVisible, this.internalUrlVisible);
this.cancelExitTimer();
this.url = null;
@ -181,6 +207,9 @@
if (this.externalUrlVisible) {
const webview = this.getWebview();
if (this.debug)
console.log('ImagePreview: exec hide mutator');
webview.executeJavaScript(this.jsMutator.getHideMutator());
}
@ -198,7 +227,11 @@
this.sticky = false;
}
dismiss(url: string): void {
dismiss(url: string, force: boolean = false): void {
if (this.debug) {
console.log('ImagePreview: dismiss', url);
}
if (this.url !== url)
return; // simply ignore
@ -220,9 +253,12 @@
this.exitUrl = this.url;
this.shouldDismiss = true;
if (!this.hasMouseMovedSince())
if ((!this.hasMouseMovedSince()) && (!force))
return;
if (this.debug)
console.log('ImagePreview: dismiss.exec', this.externalUrlVisible, this.internalUrlVisible, url);
// This timeout makes the preview window disappear with a slight delay, which helps UX
// when dealing with situations such as quickly scrolling text that moves the cursor away
// from the link
@ -234,16 +270,37 @@
}
show(url: string): void {
if (this.debug)
console.log('ImagePreview: show', this.externalUrlVisible, this.internalUrlVisible,
this.visible, this.hasMouseMovedSince(), !!this.interval, this.sticky, url);
// console.log('SHOW');
if ((this.visible) && (!this.hasMouseMovedSince()))
if ((this.visible) && (!this.exitInterval) && (!this.hasMouseMovedSince())) {
if (this.debug) {
console.log('ImagePreview: show cancel: visible & not moved');
}
return;
}
if ((this.url === url) && ((this.visible) || (this.interval)))
return;
if ((this.url === url) && ((this.visible) || (this.interval))) {
if (this.debug) {
console.log('ImagePreview: same url');
}
if ((this.url) && (this.sticky) && (this.visible))
return;
}
if ((this.url) && (this.sticky) && (this.visible)) {
if (this.debug) {
console.log('ImagePreview: sticky visible');
}
return;
}
if (this.debug)
console.log('ImagePreview: show.exec', url);
const due = ((url === this.exitUrl) && (this.exitInterval)) ? 0 : 100;
@ -258,6 +315,9 @@
// tslint:disable-next-line no-unnecessary-type-assertion
this.interval = setTimeout(
() => {
if (this.debug)
console.log('ImagePreview: show.timeout', this.url);
const isInternal = this.isInternalUrl();
this.internalUrlVisible = isInternal;
@ -269,14 +329,22 @@
const webview = this.getWebview();
try {
if (webview.getURL() === this.url) {
if ((webview.getURL() === this.url) || (this.url === this.lastExternalUrl)) {
if (this.debug)
console.log('ImagePreview: exec re-show mutator');
webview.executeJavaScript(this.jsMutator.getReShowMutator());
} else {
if (this.debug)
console.log('ImagePreview: skip re-show because urls don\'t match', this.url, webview.getURL());
}
} catch (err) {
console.log('Webview reuse error', err);
console.error('ImagePreview: Webview reuse error', err);
}
this.externalUrl = this.url;
this.lastExternalUrl = this.url as string;
}
this.visible = true;
@ -297,7 +365,7 @@
return ((p.x !== this.initialCursorPosition.x) || (p.y !== this.initialCursorPosition.y));
} catch (err) {
console.error(err);
console.error('ImagePreview', err);
return true;
}
}

20
chat/image-preview-mutator.ts
View File

@ -36,7 +36,7 @@ export class ImagePreviewMutator {
if (!mutator)
mutator = this.hostMutators['default'];
return this.wrapJs(mutator.injectJs);
return this.wrapJs(mutator.injectJs) + this.getReShowMutator();
}
matchMutator(url: string): PreviewMutator | undefined {
@ -253,15 +253,27 @@ export class ImagePreviewMutator {
opacity: 1 !important;
text-align: center !important;
"></div>
`);
`) + this.wrapJs(
`
window.__flistUnhide = () => {
const elements = document.querySelectorAll('#flistHider');
if (elements) {
elements.forEach( (el) => el.remove() );
}
};
`
);
}
getReShowMutator(): string {
return this.wrapJs(
`
const el = document.querySelector('#flistHider');
const elements = document.querySelectorAll('#flistHider');
if (el) { el.remove(); }
if (elements) {
elements.forEach( (el) => el.remove() );
}
`
);
}

4
site/character_page/character_page.vue
View File

@ -141,14 +141,14 @@
beforeMount(): void {
this.shared.authenticated = this.authenticated;
console.log('Beforemount');
// console.log('Beforemount');
}
@Hook('mounted')
async mounted(): Promise<void> {
await this.load(false);
console.log('mounted');
// console.log('mounted');
}
@Watch('tab')