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

Fix to image preview load bug

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

90
chat/ImagePreview.vue
View File

@ -18,6 +18,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import * as _ from 'lodash';
import {Component, Hook} from '@f-list/vue-ts'; import {Component, Hook} from '@f-list/vue-ts';
import Vue from 'vue'; import Vue from 'vue';
import { EventBus, EventBusEvent } from './event-bus'; import { EventBus, EventBusEvent } from './event-bus';
@ -50,6 +51,8 @@
externalUrl: string | null = null; externalUrl: string | null = null;
internalUrl: string | null = null; internalUrl: string | null = null;
lastExternalUrl = '';
url: string | null = null; url: string | null = null;
domain: string | undefined; domain: string | undefined;
@ -74,7 +77,7 @@
(eventData: EventBusEvent) => { (eventData: EventBusEvent) => {
// console.log('Event dismiss', eventData.url); // 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( webview.addEventListener(
'did-fail-load', 'did-fail-load',
(event: Event) => { (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( setInterval(
() => { () => {
if (((this.visible) && (!this.exitInterval) && (!this.shouldDismiss)) || (this.interval)) if (((this.visible) && (!this.exitInterval) && (!this.shouldDismiss)) || (this.interval))
this.initialCursorPosition = screen.getCursorScreenPoint(); 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(); this.hide();
}
}, },
10 10
); );
} }
hide(): void { hide(): void {
if (this.debug)
console.log('ImagePreview: hide', this.externalUrlVisible, this.internalUrlVisible);
this.cancelExitTimer(); this.cancelExitTimer();
this.url = null; this.url = null;
@ -181,6 +207,9 @@
if (this.externalUrlVisible) { if (this.externalUrlVisible) {
const webview = this.getWebview(); const webview = this.getWebview();
if (this.debug)
console.log('ImagePreview: exec hide mutator');
webview.executeJavaScript(this.jsMutator.getHideMutator()); webview.executeJavaScript(this.jsMutator.getHideMutator());
} }
@ -198,7 +227,11 @@
this.sticky = false; 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) if (this.url !== url)
return; // simply ignore return; // simply ignore
@ -220,9 +253,12 @@
this.exitUrl = this.url; this.exitUrl = this.url;
this.shouldDismiss = true; this.shouldDismiss = true;
if (!this.hasMouseMovedSince()) if ((!this.hasMouseMovedSince()) && (!force))
return; 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 // 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 // when dealing with situations such as quickly scrolling text that moves the cursor away
// from the link // from the link
@ -234,16 +270,37 @@
} }
show(url: string): void { 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'); // 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; return;
}
if ((this.url === url) && ((this.visible) || (this.interval))) if ((this.url === url) && ((this.visible) || (this.interval))) {
return; if (this.debug) {
console.log('ImagePreview: same url');
}
if ((this.url) && (this.sticky) && (this.visible))
return; 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; const due = ((url === this.exitUrl) && (this.exitInterval)) ? 0 : 100;
@ -258,6 +315,9 @@
// tslint:disable-next-line no-unnecessary-type-assertion // tslint:disable-next-line no-unnecessary-type-assertion
this.interval = setTimeout( this.interval = setTimeout(
() => { () => {
if (this.debug)
console.log('ImagePreview: show.timeout', this.url);
const isInternal = this.isInternalUrl(); const isInternal = this.isInternalUrl();
this.internalUrlVisible = isInternal; this.internalUrlVisible = isInternal;
@ -269,14 +329,22 @@
const webview = this.getWebview(); const webview = this.getWebview();
try { 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()); 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) { } catch (err) {
console.log('Webview reuse error', err); console.error('ImagePreview: Webview reuse error', err);
} }
this.externalUrl = this.url; this.externalUrl = this.url;
this.lastExternalUrl = this.url as string;
} }
this.visible = true; this.visible = true;
@ -297,7 +365,7 @@
return ((p.x !== this.initialCursorPosition.x) || (p.y !== this.initialCursorPosition.y)); return ((p.x !== this.initialCursorPosition.x) || (p.y !== this.initialCursorPosition.y));
} catch (err) { } catch (err) {
console.error(err); console.error('ImagePreview', err);
return true; return true;
} }
} }

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

@ -36,7 +36,7 @@ export class ImagePreviewMutator {
if (!mutator) if (!mutator)
mutator = this.hostMutators['default']; mutator = this.hostMutators['default'];
return this.wrapJs(mutator.injectJs); return this.wrapJs(mutator.injectJs) + this.getReShowMutator();
} }
matchMutator(url: string): PreviewMutator | undefined { matchMutator(url: string): PreviewMutator | undefined {
@ -253,15 +253,27 @@ export class ImagePreviewMutator {
opacity: 1 !important; opacity: 1 !important;
text-align: center !important; text-align: center !important;
"></div> "></div>
`); `) + this.wrapJs(
`
window.__flistUnhide = () => {
const elements = document.querySelectorAll('#flistHider');
if (elements) {
elements.forEach( (el) => el.remove() );
}
};
`
);
} }
getReShowMutator(): string { getReShowMutator(): string {
return this.wrapJs( 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 { beforeMount(): void {
this.shared.authenticated = this.authenticated; this.shared.authenticated = this.authenticated;
console.log('Beforemount'); // console.log('Beforemount');
} }
@Hook('mounted') @Hook('mounted')
async mounted(): Promise<void> { async mounted(): Promise<void> {
await this.load(false); await this.load(false);
console.log('mounted'); // console.log('mounted');
} }
@Watch('tab') @Watch('tab')