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.20.22

Browse source 
This release implements a massive change to how link tool-tips and embeds work. They might act up a bit while we get the new back-end installed and tweaked.

* Added: Options to use custom formats for dates and times, under `Appearance > Localization`.
* Added: Options to change the colors of tool-tips.
* Changed: Completely rewrite how link information is formatted together with a complete rewrite of the link information service.
* Changed: The FFZ Control Center now remembers you previously open settings if you reload the page.
* Fixed: Update chat lines when i18n data loads.
* Fixed: i18n not correctly formatting certain numbers.
* Fixed: Theater mode automatically enabling on user home pages. (Closes #866)
* Fixed: Theater metadata overlapping chat with Swap Sidebars enabled. (Closes #835)
* API Added: New icons: `location`, `link`, and `volume-off`
* API Fixed: `createElement` not properly handling `<video>` related attributes.
This commit is contained in:
SirStendec 2020-08-04 18:26:11 -04:00
parent eec65551fb
commit 6310a2ed49
49 changed files with 2432 additions and 884 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/utilities/tooltip.js
View file

@ -42,10 +42,14 @@ export class Tooltip {
this.options = Object.assign({}, DefaultOptions, options);
this.live = this.options.live;
this.check_modifiers = this.options.check_modifiers;
this.parent = parent;
this.cls = cls;
if ( this.check_modifiers )
this.installModifiers();
if ( ! this.live ) {
if ( typeof cls === 'string' )
this.elements = parent.querySelectorAll(cls);
@ -65,16 +69,18 @@ export class Tooltip {
this._accessor = `_ffz_tooltip$${last_id++}`;
this._onMouseOut = e => this._exit(e.target);
this._onMouseOut = e => e.target && e.target.dataset.forceOpen !== 'true' && this._exit(e.target);
if ( this.options.manual ) {
// Do nothing~!
} else if ( this.live ) {
this._onMouseOver = e => {
this.updateShift(e.shiftKey);
const target = e.target;
if ( target && target.classList && target.classList.contains(this.cls) )
if ( target && target.classList && target.classList.contains(this.cls) && target.dataset.forceOpen !== 'true' ) {
this._enter(target);
}
};
parent.addEventListener('mouseover', this._onMouseOver);
@ -82,9 +88,11 @@ export class Tooltip {
} else {
this._onMouseOver = e => {
this.updateShift(e.shiftKey);
const target = e.target;
if ( this.elements.has(target) )
if ( this.elements.has(target) && target.dataset.forceOpen !== 'true' ) {
this._enter(e.target);
}
}
if ( this.elements.size <= 5 )
@ -102,6 +110,8 @@ export class Tooltip {
}
destroy() {
this.removeModifiers();
if ( this.options.manual ) {
// Do nothing~!
} else if ( this.live || this.elements.size > 5 ) {
@ -128,6 +138,43 @@ export class Tooltip {
}
installModifiers() {
if ( this._keyUpdate )
return;
this._keyUpdate = e => this.updateShift(e.shiftKey);
window.addEventListener('keydown', this._keyUpdate);
window.addEventListener('keyup', this._keyUpdate);
}
removeModifiers() {
if ( ! this._keyUpdate )
return;
window.removeEventListener('keydown', this._keyUpdate);
window.removeEventListener('keyup', this._keyUpdate);
this._keyUpdate = null;
}
updateShift(state) {
if ( state === this.shift_state )
return;
this.shift_state = state;
if ( ! this._shift_af )
this._shift_af = requestAnimationFrame(() => {
this._shift_af = null;
for(const el of this.elements) {
const tip = el[this._accessor];
if ( tip && tip.outer ) {
tip.outer.dataset.shift = this.shift_state;
tip.update();
}
}
});
}
cleanup() {
if ( this.options.manual )
return;
@ -238,7 +285,8 @@ export class Tooltip {
inner = tip.element = createElement('div', opts.innerClass),
el = tip.outer = createElement('div', {
className: opts.tooltipClass
className: opts.tooltipClass,
'data-shift': this.shift_state
}, [inner, arrow]);
arrow.setAttribute('x-arrow', true);
@ -259,6 +307,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);
opts.onMove(target, tip, event);
});
@ -273,7 +322,7 @@ export class Tooltip {
/* no-op */
} else if ( maybe_call(opts.interactive, null, target, tip) )
this._enter(target);
else
else if ( target.dataset.forceOpen !== 'true' )
this._exit(target);
});
@ -281,7 +330,7 @@ export class Tooltip {
if ( hover_events && opts.onLeave )
opts.onLeave(target, tip, event);
if ( ! opts.manual )
if ( ! opts.manual && target.dataset.forceOpen !== 'true' )
this._exit(target);
});
}