mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-07-30 14:38:31 +00:00
3.5.58 to 3.5.62. Added enhanced following controls to the profile page. New Conversations options. Tweaked conversation styles.
This commit is contained in:
SirStendec
parent
c40b3ba337
commit
4f6dcc9999
15 changed files with 3017 additions and 38 deletions
252
src/ember/conversations.js
Normal file
252
src/ember/conversations.js
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
var FFZ = window.FrankerFaceZ,
|
||||
utils = require('../utils'),
|
||||
constants = require('../constants');
|
||||
|
||||
|
||||
// ---------------
|
||||
// Settings
|
||||
// ---------------
|
||||
|
||||
FFZ.settings_info.conv_title_clickable = {
|
||||
type: "boolean",
|
||||
value: false,
|
||||
no_mobile: true,
|
||||
|
||||
category: "Conversations",
|
||||
name: "Clickable Header Name",
|
||||
help: "Make the conversation header a link that takes you to that person's page.",
|
||||
on_update: function(val) {
|
||||
document.body.classList.toggle('ffz-conv-title-clickable', val);
|
||||
}
|
||||
};
|
||||
|
||||
FFZ.settings_info.conv_focus_on_click = {
|
||||
type: "boolean",
|
||||
value: false,
|
||||
no_mobile: true,
|
||||
|
||||
category: "Conversations",
|
||||
name: "Focus Input on Click",
|
||||
help: "Focus on a conversation's input box when you click it."
|
||||
};
|
||||
|
||||
FFZ.settings_info.top_conversations = {
|
||||
type: "boolean",
|
||||
value: false,
|
||||
no_mobile: true,
|
||||
|
||||
category: "Conversations",
|
||||
name: "Position on Top",
|
||||
help: "Display the new conversation-style whisper UI at the top of the window instead of the bottom.",
|
||||
on_update: function(val) {
|
||||
document.body.classList.toggle('ffz-top-conversations', val);
|
||||
}
|
||||
};
|
||||
|
||||
FFZ.settings_info.conv_beta_enable = {
|
||||
type: "boolean",
|
||||
value: false,
|
||||
no_mobile: true,
|
||||
|
||||
category: "Conversations",
|
||||
name: "Enable Conversations",
|
||||
help: "Twitch hasn't enabled them yet, but they're in the code for testing. Try them out!",
|
||||
on_update: function(val) {
|
||||
App.__container__.lookup('route:application').controller.set('isConversationsEnabled', val);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// ---------------
|
||||
// Initialization
|
||||
// ---------------
|
||||
|
||||
FFZ.prototype.setup_conversations = function() {
|
||||
document.body.classList.toggle('ffz-top-conversations', this.settings.top_conversations);
|
||||
document.body.classList.toggle('ffz-conv-title-clickable', this.settings.conv_title_clickable);;
|
||||
|
||||
if ( this.settings.conv_beta_enable )
|
||||
App.__container__.lookup('route:application').controller.set('isConversationsEnabled', true);
|
||||
|
||||
this.log("Hooking the Ember Conversation Window component.");
|
||||
var ConvWindow = App.__container__.resolve('component:conversation-window');
|
||||
if ( ConvWindow )
|
||||
this._modify_conversation_window(ConvWindow);
|
||||
|
||||
|
||||
this.log("Hooking the Ember Conversation Line component.");
|
||||
var ConvLine = App.__container__.resolve('component:conversation-line');
|
||||
if ( ConvLine )
|
||||
this._modify_conversation_line(ConvLine);
|
||||
}
|
||||
|
||||
|
||||
FFZ.prototype._modify_conversation_window = function(component) {
|
||||
var f = this,
|
||||
|
||||
Layout = App.__container__.lookup('controller:layout'),
|
||||
Settings = App.__container__.lookup('controller:settings');
|
||||
|
||||
component.reopen({
|
||||
onConversationClick: Ember.on('click', function() {
|
||||
this.markConversationRead();
|
||||
if ( f.settings.conv_focus_on_click )
|
||||
this.$(".conversation-input-bar textarea").focus();
|
||||
}),
|
||||
|
||||
headerBadges: Ember.computed("conversation.participants", "currentUsername", function() {
|
||||
var e = this.get("conversation.participants").rejectBy("username", this.get("currentUsername")).objectAt(0),
|
||||
badges = {},
|
||||
|
||||
ut = e.get("userType");
|
||||
|
||||
if ( ut === "staff" )
|
||||
badges[0] = {classes: 'badge staff', title: 'Staff'};
|
||||
else if ( ut === 'admin' )
|
||||
badges[0] = {classes: 'badge admin', title: 'Admin'};
|
||||
else if ( ut === 'global_mod' )
|
||||
badges[0] = {classes: 'badge global-moderator', title: 'Global Moderator'};
|
||||
|
||||
if ( e.get('hasTurbo') )
|
||||
badges[15] = {classes: 'badge turbo', title: 'Turbo'}
|
||||
|
||||
// FFZ Badges
|
||||
var data = f.users[e.get('username')];
|
||||
if ( data && data.badges ) {
|
||||
for(var slot in data.badges) {
|
||||
if ( ! data.badges.hasOwnProperty(slot) )
|
||||
continue;
|
||||
|
||||
var badge = data.badges[slot],
|
||||
full_badge = f.badges[badge.id] || {},
|
||||
old_badge = badges[slot];
|
||||
|
||||
if ( full_badge.visible !== undefined ) {
|
||||
var visible = full_badge.visible;
|
||||
if ( typeof visible === "function" )
|
||||
try {
|
||||
visible = visible.bind(f)(null, e.get('username'), null, badges);
|
||||
} catch(err) {
|
||||
f.error("badge " + badge.id + " visible: " + err);
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( ! visible )
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( old_badge ) {
|
||||
var replaces = badge.hasOwnProperty('replaces') ? badge.replaces : full_badge.replaces;
|
||||
if ( ! replaces )
|
||||
continue;
|
||||
|
||||
old_badge.klass = 'badge ffz-badge-' + badge.id;
|
||||
old_badge.title += ', ' + (badge.title || full_badge.title);
|
||||
continue;
|
||||
}
|
||||
|
||||
badges[slot] = {
|
||||
classes: 'badge ffz-badge-' + badge.id,
|
||||
title: badge.title || full_badge.title
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var out = [];
|
||||
for(var slot in badges)
|
||||
out.push(badges[slot]);
|
||||
|
||||
return out;
|
||||
}),
|
||||
|
||||
didInsertElement: function() {
|
||||
var el = this.get('element'),
|
||||
header = el && el.querySelector('.conversation-header'),
|
||||
header_name = header && header.querySelector('.conversation-header-name'),
|
||||
|
||||
new_header_name = document.createElement('span'),
|
||||
|
||||
raw_color = this.get('otherUser.color'),
|
||||
colors = raw_color && f._handle_color(raw_color),
|
||||
|
||||
is_dark = (Layout && Layout.get('isTheatreMode')) || f.settings.dark_twitch;
|
||||
|
||||
if ( header_name ) {
|
||||
new_header_name.className = 'conversation-header-name';
|
||||
new_header_name.textContent = header_name.textContent;
|
||||
header.insertBefore(new_header_name, header_name);
|
||||
|
||||
if ( raw_color ) {
|
||||
header_name.style.color = (is_dark ? colors[1] : colors[0]);
|
||||
header_name.classList.add('has-color');
|
||||
header_name.setAttribute('data-color', raw_color);
|
||||
|
||||
new_header_name.style.color = (is_dark ? colors[1] : colors[0]);
|
||||
new_header_name.classList.add('has-color');
|
||||
new_header_name.setAttribute('data-color', raw_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
FFZ.prototype._modify_conversation_line = function(component) {
|
||||
var f = this,
|
||||
|
||||
Layout = App.__container__.lookup('controller:layout'),
|
||||
Settings = App.__container__.lookup('controller:settings');
|
||||
|
||||
component.reopen({
|
||||
tokenizedMessage: function() {
|
||||
try {
|
||||
return f.tokenize_conversation_line(this.get('message'));
|
||||
} catch(err) {
|
||||
f.error("convo-line tokenizedMessage: " + err);
|
||||
return this._super();
|
||||
}
|
||||
|
||||
}.property("message", "currentUsername"),
|
||||
|
||||
click: function(e) {
|
||||
if ( e.target && e.target.classList.contains('deleted-link') )
|
||||
return f._deleted_link_click.bind(e.target)(e);
|
||||
|
||||
if ( f._click_emote(e.target, e) )
|
||||
return;
|
||||
|
||||
return this._super(e);
|
||||
},
|
||||
|
||||
render: function(e) {
|
||||
var user = this.get('message.from.username'),
|
||||
raw_color = this.get('message.from.color'),
|
||||
colors = raw_color && f._handle_color(raw_color),
|
||||
|
||||
is_dark = (Layout && Layout.get('isTheatreMode')) || f.settings.dark_twitch;
|
||||
|
||||
e.push('<div class="indicator"></div>');
|
||||
|
||||
var alias = f.aliases[user],
|
||||
name = this.get('message.from.displayName') || (user && user.capitalize()) || "unknown user",
|
||||
style = colors && 'color:' + (is_dark ? colors[1] : colors[0]),
|
||||
colored = style ? ' has-color' : '';
|
||||
|
||||
if ( alias )
|
||||
e.push('<span class="from ffz-alias tooltip' + colored + '" style="' + style + (colors ? '" data-color="' + raw_color : '') + '" title="' + utils.sanitize(name) + '">' + utils.sanitize(alias) + '</span>');
|
||||
else
|
||||
e.push('<span class="from' + colored + '" style="' + style + (colors ? '" data-color="' + raw_color : '') + '">' + utils.sanitize(name) + '</span>');
|
||||
|
||||
e.push('<span class="colon">:</span> ');
|
||||
|
||||
if ( ! this.get('isActionMessage') ) {
|
||||
style = '';
|
||||
colored = '';
|
||||
}
|
||||
|
||||
e.push('<span class="message' + colored + '" style="' + style + (colors ? '" data-color="' + raw_color : '') + '">');
|
||||
e.push(f.render_tokens(this.get('tokenizedMessage'), true));
|
||||
e.push('</span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue