oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-07-27 13:08:30 +00:00
Code Wiki Activity

4.55.0

Browse source 
* Added: Link Cards. As an option, you can open a preview card when clicking on links in chat. These preview cards function similarly to the existing tool-tip or rich embed options but can provide for enhanced interaction (e.g. an embedded video player), with potential for more in the future.
* Changed: When using a custom theme with a dark background, use lighter border colors.
* Changed: Draw the FFZ Control Center and other dialogs with rounded corners.
* Fixed: Issue when clicking certain global Twitch emotes preventing the emote card from appearing correctly.
* Fixed: Issue with URL/safety data not being loaded correctly from the link service when the overall result was an error.
* Fixed: Issue with link tool-tips still appearing, but with no content, when link tool-tips are disabled.
* Fixed: Issue where (re)subscription notices in chat for multiple-month-at-once subscriptions would not be displayed correctly.
* Fixed: Tool-tips not displaying correctly in chat pop-outs in some circumstances.
* Fixed: Incorrect border styles when the chat is in portrait mode.
* Experiment Added: Set up an MQTT-based PubSub system. Let's see how well this scales.
This commit is contained in:
SirStendec 2023-09-26 17:40:25 -04:00
parent d01f66c6f3
commit 98e5373e9a
36 changed files with 1554 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/utilities/tooltip.js
View file

@ -15,6 +15,8 @@ import {createPopper} from '@popperjs/core';
let last_id = 0;
export const NoContent = Symbol('NoContent');
export const DefaultOptions = {
html: false,
delayShow: 0,
@ -77,7 +79,7 @@ export class Tooltip {
} else if ( this.live ) {
this._onMouseOver = e => {
this.updateShift(e.shiftKey);
this.updateShift(e.shiftKey, e.ctrlKey);
const target = e.target;
if ( target && target.classList && target.classList.contains(this.cls) && target.dataset.forceOpen !== 'true' ) {
this._enter(target);
@ -89,7 +91,7 @@ export class Tooltip {
} else {
this._onMouseOver = e => {
this.updateShift(e.shiftKey);
this.updateShift(e.shiftKey, e.ctrlKey);
const target = e.target;
if ( this.elements.has(target) && target.dataset.forceOpen !== 'true' ) {
this._enter(e.target);
@ -144,7 +146,7 @@ export class Tooltip {
if ( this._keyUpdate )
return;
this._keyUpdate = e => this.updateShift(e.shiftKey);
this._keyUpdate = e => this.updateShift(e.shiftKey, e.ctrlKey);
window.addEventListener('keydown', this._keyUpdate);
window.addEventListener('keyup', this._keyUpdate);
}
@ -158,11 +160,13 @@ export class Tooltip {
this._keyUpdate = null;
}
updateShift(state) {
if ( state === this.shift_state )
updateShift(state, ctrl_state) {
if ( state === this.shift_state && ctrl_state === this.ctrl_state )
return;
this.shift_state = state;
this.ctrl_state = ctrl_state;
if ( ! this._shift_af )
this._shift_af = requestAnimationFrame(() => {
this._shift_af = null;
@ -171,7 +175,9 @@ export class Tooltip {
const tip = el[this._accessor];
if ( tip && tip.outer ) {
tip.outer.dataset.shift = this.shift_state;
tip.outer.dataset.ctrl = this.ctrl_state;
tip.update();
//tip.updateVideo();
}
}
});
@ -268,19 +274,30 @@ export class Tooltip {
tip = target[this._accessor] = {target};
this.show(tip);
};
tip.updateVideo = () => {
if ( ! tip.element )
return;
const videos = tip.element.querySelectorAll('video');
for(const video of videos) {
if ( this.ctrl_state )
video.play();
else
video.pause();
}
};
tip.hide = () => this.hide(tip);
tip.rerender = () => {
if ( tip.visible ) {
tip.hide();
tip.show();
}
}
};
let content = maybe_call(opts.content, null, target, tip);
if ( content === undefined )
content = tip.target.title;
if ( tip.visible || (! content && ! opts.onShow) )
if ( tip.visible || content === NoContent || (! content && ! opts.onShow) )
return;
// Build the DOM.
@ -289,7 +306,8 @@ export class Tooltip {
el = tip.outer = createElement('div', {
className: opts.tooltipClass,
'data-shift': this.shift_state
'data-shift': this.shift_state,
'data-ctrl': this.ctrl_state
}, [inner, arrow]);
arrow.setAttribute('x-arrow', true);
@ -314,7 +332,7 @@ export class Tooltip {
if ( ! opts.manual || (hover_events && (opts.onHover || opts.onLeave || opts.onMove)) ) {
if ( hover_events && opts.onMove )
el.addEventListener('mousemove', el._ffz_move_handler = event => {
this.updateShift(event.shiftKey);
this.updateShift(event.shiftKey, event.ctrlKey);
opts.onMove(target, tip, event);
});
@ -388,7 +406,7 @@ export class Tooltip {
tip._promises = null;
if ( content instanceof Promise || (content.then && content.toString() === '[object Promise]') ) {
if ( content instanceof Promise || (content?.then && content.toString() === '[object Promise]') ) {
inner.innerHTML = '<div class="ffz-i-zreknarf loader"></div>';
content.then(content => {
if ( ! content )