oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-10-14 06:51:58 +00:00
Code Wiki Activity

Add support for clickable stream metadata. Add helper utility for detecting clicks outside of elements. Add support for manually shown/hidden tooltips, which is used for custom pop-ups.

Browse source
This commit is contained in:
SirStendec 2017-12-04 18:58:19 -05:00
parent dfa0c9c88f
commit e224800fb9
7 changed files with 241 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/utilities/dom.js
View file

@ -146,4 +146,26 @@ export class ManagedStyle {
this._blocks[key] = null;
}
}
}
export class ClickOutside {
constructor(element, callback) {
this.el = element;
this.cb = callback;
this._fn = this.handleClick.bind(this);
document.documentElement.addEventListener('click', this._fn);
}
destroy() {
if ( this._fn )
document.documentElement.removeEventListener('click', this._fn);
this.cb = this.el = this._fn = null;
}
handleClick(e) {
if ( ! this.el.contains(e.target) )
this.cb(e);
}
}

29
src/utilities/tooltip.js
View file

@ -67,7 +67,10 @@ export class Tooltip {
this._onMouseOut = e => this._exit(e.target);
if ( this.live ) {
if ( this.options.manual ) {
// Do nothing~!
} else if ( this.live ) {
this._onMouseOver = e => {
const target = e.target;
if ( target.classList.contains(this.cls) )
@ -99,7 +102,9 @@ export class Tooltip {
}
destroy() {
if ( this.live || this.elements.size > 5 ) {
if ( this.options.manual ) {
// Do nothing~!
} else if ( this.live || this.elements.size > 5 ) {
parent.removeEventListener('mouseover', this._onMouseOver);
parent.removeEventListener('mouseout', this._onMouseOut);
} else
@ -215,17 +220,19 @@ export class Tooltip {
const interactive = maybe_call(opts.interactive, null, target, tip);
el.classList.toggle('interactive', interactive || false);
el.addEventListener('mouseover', () => {
if ( ! document.contains(target) )
this.hide(tip);
if ( ! opts.manual ) {
el.addEventListener('mouseover', () => {
if ( ! document.contains(target) )
this.hide(tip);
else if ( maybe_call(opts.interactive, null, target, tip) )
this._enter(target);
else
this._exit(target);
});
else if ( maybe_call(opts.interactive, null, target, tip) )
this._enter(target);
else
this._exit(target);
});
el.addEventListener('mouseout', () => this._exit(target));
el.addEventListener('mouseout', () => this._exit(target));
}
// Assign our content. If there's a Promise, we'll need
// to do this weirdly.