mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-09-16 01:56:55 +00:00
3.5.399. Refactor metadata rendering so it can be used on the dashboard. Generate less CSS for bits since there's way more of them now. Allow stacking of all cheer emotes, or just by type. Fix a bug with the My Emoticons menu not rendering if the user has a non-existent set.
This commit is contained in:
SirStendec
parent
b253f1a4d1
commit
48f2f331b7
9 changed files with 242 additions and 216 deletions
|
|
@ -7,6 +7,25 @@ var FFZ = window.FrankerFaceZ,
|
|||
// Settings
|
||||
// --------------------
|
||||
|
||||
FFZ.settings_info.collect_bits = {
|
||||
type: "select",
|
||||
options: {
|
||||
0: "Disabled",
|
||||
1: "Grouped by Type",
|
||||
2: "All in One"
|
||||
},
|
||||
|
||||
value: 0,
|
||||
process_value: utils.process_int(0),
|
||||
|
||||
category: "Chat Appearance",
|
||||
no_bttv: true,
|
||||
|
||||
name: "Bits Stacking",
|
||||
help: "Collect all the bits emoticons in a message into a single one at the start of the message."
|
||||
};
|
||||
|
||||
|
||||
FFZ.settings_info.bits_animated = {
|
||||
type: "boolean",
|
||||
value: true,
|
||||
|
|
@ -17,7 +36,11 @@ FFZ.settings_info.bits_animated = {
|
|||
name: "Bits Animation",
|
||||
help: "Display bits with animation.",
|
||||
|
||||
on_update: utils.toggle_cls('ffz-animate-bits')
|
||||
on_update: function() {
|
||||
var bits = utils.ember_lookup('service:bits-rendering-config');
|
||||
if ( bits && bits.ffz_has_css )
|
||||
bits.ffz_update_css();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -79,7 +102,6 @@ FFZ.settings_info.bits_pinned_expand = {
|
|||
// --------------------
|
||||
|
||||
FFZ.prototype.setup_bits = function() {
|
||||
utils.toggle_cls('ffz-animate-bits')(this.settings.bits_animated);
|
||||
utils.toggle_cls('ffz-show-bits-tags')(this.settings.bits_tags_container);
|
||||
utils.toggle_cls('ffz-hide-pinned-cheers')(!this.settings.bits_pinned);
|
||||
utils.toggle_cls('ffz-pinned-cheer-expand-hover')(this.settings.bits_pinned_expand === 1);
|
||||
|
|
@ -134,20 +156,17 @@ FFZ.prototype.setup_bits = function() {
|
|||
_ffz_tier_css: function(ind, prefix, tier) {
|
||||
var selector = '.ffz-bit.bit-prefix-' + prefix + '.bit-tier-' + ind,
|
||||
color = f._handle_color(tier.color),
|
||||
animated = f.settings.bits_animated,
|
||||
output;
|
||||
|
||||
output = selector + '{' +
|
||||
'color: ' + color[0] + ';' +
|
||||
this._ffz_image_css(tier.images.light.static) +
|
||||
'}.ffz-animate-bits ' + selector + '{' +
|
||||
this._ffz_image_css(tier.images.light.animated) +
|
||||
this._ffz_image_css(tier.images.light[animated ? 'animated' : 'static']) +
|
||||
'}';
|
||||
|
||||
return output + '.tipsy ' + selector + ',.dark ' + selector + ',.force-dark ' + selector + ',.theatre ' + selector + '{' +
|
||||
'color: ' + color[1] + ';' +
|
||||
this._ffz_image_css(tier.images.dark.static) +
|
||||
'}.ffz-animate-bits .tipsy ' + selector + ',.ffz-animate-bits .dark ' + selector + ',.ffz-animate-bits .force-dark ' + selector + ',.ffz-animate-bits .theatre ' + selector + '{' +
|
||||
this._ffz_image_css(tier.images.dark.animated) +
|
||||
this._ffz_image_css(tier.images.dark[animated ? 'animated' : 'static']) +
|
||||
'}';
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -366,6 +366,8 @@ FFZ.prototype.modify_channel_live = function(view) {
|
|||
basic_info = [this, this.get(is_hosting ? 'channel.hostModeTarget' : 'channel'), is_hosting, this.get('channel')],
|
||||
timers = this.ffz_timers = this.ffz_timers || {},
|
||||
|
||||
refresh_func = this.ffzUpdateMetadata.bind(this),
|
||||
|
||||
container = this.get('element'),
|
||||
metabar = container && container.querySelector(is_hosting ? '.cn-hosting--bottom' : '.cn-metabar__more');
|
||||
|
||||
|
|
@ -374,162 +376,7 @@ FFZ.prototype.modify_channel_live = function(view) {
|
|||
return;
|
||||
|
||||
for(var i=0; i < keys.length; i++)
|
||||
this._ffzUpdateStat(keys[i], basic_info, timers, metabar, is_hosting);
|
||||
},
|
||||
|
||||
_ffzUpdateStat: function(key, basic_info, timers, metabar, is_hosting) {
|
||||
var t = this,
|
||||
info = FFZ.channel_metadata[key];
|
||||
|
||||
if ( timers[key] )
|
||||
clearTimeout(timers[key]);
|
||||
if ( ! info )
|
||||
return;
|
||||
|
||||
// Build the data we use for function calls.
|
||||
var data = info.setup ? info.setup.apply(f, basic_info) : basic_info,
|
||||
refresh = typeof info.refresh === "function" ? info.refresh.apply(f, data) : info.refresh;
|
||||
|
||||
// If we have a positive refresh value, schedule another go.
|
||||
if ( refresh )
|
||||
timers[key] = setTimeout(this.ffzUpdateMetadata.bind(this, key), typeof refresh === "number" ? refresh : 1000);
|
||||
|
||||
var el = metabar.querySelector('.cn-metabar__ffz[data-key="' + key + '"]'),
|
||||
je,
|
||||
stat,
|
||||
dynamic_tooltip = typeof info.tooltip === "function",
|
||||
label = typeof info.label === "function" ? info.label.apply(f, data) : info.label;
|
||||
|
||||
if ( ! label ) {
|
||||
if ( el )
|
||||
el.parentElement.removeChild(el);
|
||||
|
||||
if ( f._popup && f._popup.id === 'ffz-metadata-popup' && f._popup.getAttribute('data-key') === key )
|
||||
f.close_popup();
|
||||
|
||||
return;
|
||||
|
||||
} else if ( ! el ) {
|
||||
var btn,
|
||||
static_label = typeof info.static_label === "function" ? info.static_label.apply(f, data) : info.static_label,
|
||||
lbl_start = static_label && static_label.substr(0,4);
|
||||
|
||||
if ( ! static_label )
|
||||
static_label = '';
|
||||
else if ( lbl_start === '<svg' || lbl_start === '<img' )
|
||||
static_label = utils.createElement('figure', 'icon cn-metabar__icon', static_label + ' ');
|
||||
|
||||
if ( info.popup ) {
|
||||
btn = utils.createElement('button', 'button button--dropmenu', static_label)
|
||||
el = utils.createElement('div', 'cn-metabar__ffz flex__item ember-view balloon-wrapper inline-block', btn);
|
||||
|
||||
btn.classList.add(info.button ? 'button--hollow' : 'button--text');
|
||||
|
||||
} else if ( info.button ) {
|
||||
btn = utils.createElement('button', 'button', static_label);
|
||||
el = utils.createElement('div', 'cn-metabar__ffz flex__item ember-view inline-block', btn);
|
||||
|
||||
btn.classList.add(typeof info.button === 'string' ? info.button : 'button--hollow');
|
||||
|
||||
} else
|
||||
btn = el = utils.createElement('div', 'cn-metabar__ffz flex__item', static_label);
|
||||
|
||||
el.setAttribute('data-key', key);
|
||||
var order = (is_hosting ? info.host_order : null) || info.order;
|
||||
if ( order )
|
||||
el.style.order = order;
|
||||
|
||||
if ( ! dynamic_tooltip && info.tooltip ) {
|
||||
btn.classList.add('html-tooltip');
|
||||
btn.title = info.tooltip;
|
||||
}
|
||||
|
||||
stat = utils.createElement('span', 'ffz-label');
|
||||
btn.appendChild(stat);
|
||||
|
||||
if ( dynamic_tooltip ) {
|
||||
je = jQuery(btn)
|
||||
je.hover(
|
||||
function() { je.data("hover", true).tipsy("show") },
|
||||
function() { je.data("hover", false).tipsy("hide") })
|
||||
.data("hover", false)
|
||||
.tipsy({
|
||||
trigger: 'manual',
|
||||
html: true,
|
||||
gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n'),
|
||||
title: function() {
|
||||
var data = info.setup ? info.setup.apply(f, basic_info) : basic_info;
|
||||
return info.tooltip.apply(f, data);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if ( info.click )
|
||||
btn.addEventListener('click', function(e) {
|
||||
if ( btn.disabled || btn.classList.contains('disabled') )
|
||||
return false;
|
||||
|
||||
e.update_stat = t._ffzUpdateStat.bind(t, key, basic_info, timers, metabar);
|
||||
|
||||
var data = info.setup ? info.setup.apply(f, basic_info) : basic_info;
|
||||
data.unshift(btn);
|
||||
data.unshift(e);
|
||||
return info.click.apply(f, data);
|
||||
});
|
||||
|
||||
if ( info.popup ) {
|
||||
btn.classList.add('button--dropmenu');
|
||||
btn.addEventListener('click', function(el, e) {
|
||||
if ( btn.disabled || btn.classList.contains('disabled') )
|
||||
return false;
|
||||
|
||||
var popup = f.close_popup();
|
||||
if ( popup && popup.id === 'ffz-metadata-popup' && popup.getAttribute('data-key') === key )
|
||||
return;
|
||||
|
||||
var data = info.setup ? info.setup.apply(f, basic_info) : basic_info,
|
||||
balloon = utils.createElement('div', 'balloon balloon--up show');
|
||||
|
||||
data.unshift(balloon);
|
||||
|
||||
balloon.id = 'ffz-metadata-popup';
|
||||
balloon.setAttribute('data-key', key);
|
||||
|
||||
var result = info.popup.apply(f, data);
|
||||
if ( result === false )
|
||||
return false;
|
||||
|
||||
// Set the balloon to face away from the nearest side of the channel.
|
||||
var container = t.get('element'),
|
||||
outer = container.getBoundingClientRect(),
|
||||
rect = el.getBoundingClientRect();
|
||||
|
||||
balloon.classList.toggle('balloon--right', (rect.left - outer.left) > (outer.right - rect.right));
|
||||
|
||||
f._popup_kill = info.on_popup_close ? function() { info.on_popup_close.apply(f, data) } : null;
|
||||
f._popup_allow_parent = true;
|
||||
f._popup = balloon;
|
||||
|
||||
el.appendChild(balloon);
|
||||
}.bind(this, el));
|
||||
}
|
||||
|
||||
metabar.appendChild(el);
|
||||
el = btn;
|
||||
|
||||
} else {
|
||||
stat = el.querySelector('span.ffz-label');
|
||||
if ( dynamic_tooltip )
|
||||
je = jQuery(el);
|
||||
}
|
||||
|
||||
stat.innerHTML = label;
|
||||
|
||||
if ( dynamic_tooltip && je.data("hover") )
|
||||
je.tipsy("hide").tipsy("show");
|
||||
|
||||
if ( info.hasOwnProperty('disabled') )
|
||||
el.classList.toggle('disabled', typeof info.disabled === "function" ? info.disabled.apply(f, data) : info.disabled);
|
||||
f.render_metadata(keys[i], basic_info, metabar, timers, refresh_func, is_hosting);
|
||||
},
|
||||
|
||||
ffzUpdateHostButton: function() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue