3.5.381. Fix page scrolling. Add clickable mentions.

changelog.html

@@ -1,4 +1,10 @@
-<div class="list-header">3.5.380 <time datetime="2016-11-23">(2016-11-23)</time></div>
+<div class="list-header">3.5.381 <time datetime="2016-11-28">(2016-11-28)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Setting to make mentions clickable. They open moderation cards. (Note: Only at signs (<code>@</code>) followed by usernames are clickable. Localized display names will not work.)</li>
+	<li>Fixed: Typo in new scrolling logic making it not scroll down to the video on channel pages.</li>
+</ul>
+
+<div class="list-header">3.5.380 <time datetime="2016-11-27">(2016-11-27)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Lazy load bits rendering information to avoid a race condition.</li>
 	<li>Fixed: Hook the new scrolling logic in the Ember service layout.</li>
@@ -64,22 +70,5 @@
 	<li>Fixed: Properly darken new clips UI.</li>
 </ul>
 
-<div class="list-header">3.5.370 <time datetime="2016-11-13">(2016-11-13)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Added: Temporary setting to remove messages with banned words from chat to hold people over until I finish proper chat filtering.</li>
-	<li>Fixed: Purple links in the sidebar when using FFZ's dark theme.</li>
-</ul>
-
-<div class="list-header">3.5.369 <time datetime="2016-11-12">(2016-11-12)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Option to Hide Promoted Games had been removed because I thought that feature was gone. Clearly, it's not.</li>
-</ul>
-
-<div class="list-header">3.5.368 <time datetime="2016-11-11">(2016-11-11)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Sending multiple lines via moderation card additional buttons was broken.</li>
-	<li>Changed: Use high-DPI images for FrankerFaceZ badges and Transparent (Colored) badges.</li>
-</ul>
-
 <div class="list-header" id="ffz-old-news-button"><a href="#">View Older</a></div>
 <div id="ffz-old-news"></div>

old_changes.html

@@ -1,3 +1,20 @@
+<div class="list-header">3.5.370 <time datetime="2016-11-13">(2016-11-13)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Temporary setting to remove messages with banned words from chat to hold people over until I finish proper chat filtering.</li>
+	<li>Fixed: Purple links in the sidebar when using FFZ's dark theme.</li>
+</ul>
+
+<div class="list-header">3.5.369 <time datetime="2016-11-12">(2016-11-12)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Option to Hide Promoted Games had been removed because I thought that feature was gone. Clearly, it's not.</li>
+</ul>
+
+<div class="list-header">3.5.368 <time datetime="2016-11-11">(2016-11-11)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Sending multiple lines via moderation card additional buttons was broken.</li>
+	<li>Changed: Use high-DPI images for FrankerFaceZ badges and Transparent (Colored) badges.</li>
+</ul>
+
 <div class="list-header">3.5.367 <time datetime="2016-11-09">(2016-11-09)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Bug showing button to dismiss a pinned cheer twice.</li>

src/ember/layout.js

@@ -195,7 +195,7 @@ FFZ.prototype.setup_layout = function() {
 			var setting = f.settings.hide_channel_banner,
 				banner_hidden = setting === 1 ? f.settings.channel_bar_bottom : setting > 0;
 
-			return ( banner_hidden || ! route_helper || route_helper.routeMatches && route_helper.routeMatches(this.get('globals.currentPath'), route_helper.ROUTES.CHANNEL_ANY) ) ?
+			return ( banner_hidden || ! route_helper || route_helper.routeMatches && !route_helper.routeMatches(this.get('globals.currentPath'), route_helper.ROUTES.CHANNEL_ANY) ) ?
 				0 : 380;
 
 		}.property("globals.currentPath"),

src/ember/line.js

@@ -1217,8 +1217,8 @@ FFZ.prototype._modify_chat_subline = function(component) {
 			} else if ( f._click_emote(e.target, e) )
 				return;
 
-			else if ( cl.contains('ban-target') || cl.contains('from') || cl.contains('to') || e.target.parentElement.classList.contains('from') || e.target.parentElement.classList.contains('to') ) {
+			else if ( (f.settings.clickable_mentions && cl.contains('user-token')) || cl.contains('from') || cl.contains('to') || e.target.parentElement.classList.contains('from') || e.target.parentElement.classList.contains('to') ) {
-				var target = cl.contains('ban-target') ?
+				var target = cl.contains('user-token') ?
 						e.target.getAttribute('data-user') :
 					(cl.contains('from') || e.target.parentElement.classList.contains('from')) ?
 						from :

src/ember/room.js

@@ -180,7 +180,7 @@ FFZ.prototype.format_ban_notice = function(username, is_me, duration, count, rea
 		duration_tip.push(utils.sanitize(mod_id) + ' - ' + nd + (notice[1] ? ': ' + utils.sanitize(notice[1]) : ''));
 	}
 
-	return (is_me ? 'You have' : '<span data-user="' + utils.quote_san(username) + '" class="ban-target html-tooltip" title="' + utils.quote_attr(name[1] || '') + '">' + name[0] + '</span> has') +
+	return (is_me ? 'You have' : '<span data-user="' + utils.quote_san(username) + '" class="user-token html-tooltip" title="' + utils.quote_attr(name[1] || '') + '">' + name[0] + '</span> has') +
 		' been ' + (duration_tip.length ? '<span class="ban-tip html-tooltip" title="' + utils.quote_attr(duration_tip.join('<br>')) + '">' : '') + (duration === -Infinity ? 'unbanned' :
 		(duration === -1 ? 'untimed out' :
 		(duration === 1 ? 'purged' : isFinite(duration) ? 'timed out for ' + utils.duration_string(duration) : 'banned'))) +

src/main.js

@@ -61,7 +61,7 @@ FFZ.channel_metadata = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 380,
+	major: 3, minor: 5, revision: 381,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}

src/tokenize.js

@@ -184,6 +184,20 @@ FFZ.settings_info.show_deleted_links = {
 };
 
 
+FFZ.settings_info.clickable_mentions = {
+	type: 'boolean',
+	value: true,
+
+	category: 'Chat Moderation',
+	no_bttv: true,
+
+	name: 'Clickable Mentions',
+	help: 'Make mentions in chat starting with an at sign (<code>@</code>) open the user\'s moderation card when clicked.',
+
+	on_update: utils.toggle_cls('ffz-clickable-mentions')
+}
+
+
 // ---------------------
 // Setup
 // ---------------------
@@ -196,6 +210,7 @@ FFZ.prototype.setup_tokenization = function() {
 	this._link_data = {};
 
 	this.load_twitch_emote_data();
+	utils.toggle_cls('ffz-clickable-mentions')(this.settings.clickable_mentions);
 
 	try {
 		helpers = window.require && window.require("web-client/helpers/chat/chat-line-helpers");
@@ -843,6 +858,9 @@ FFZ.prototype.tokenize_chat_line = function(msgObject, prevent_notification, del
 		}
 	}
 
+	// Tokenize users last.
+	tokens = this.tokenize_users(tokens);
+
 	msgObject.cachedTokens = tokens;
 	return tokens;
 }
@@ -872,6 +890,8 @@ FFZ.prototype.tokenize_line = function(user, room, message, no_emotes, no_emoji)
 	if ( this.settings.parse_emoji && ! no_emoji )
 		message = this.tokenize_emoji(message);
 
+	message = this.tokenize_users(message);
+
 	return message;
 }
 
@@ -933,6 +953,9 @@ FFZ.prototype.render_token = function(render_links, warn_links, render_bits, tok
 	else if ( token.type === "raw" )
 		return token.html;
 
+	else if ( token.type === "user" )
+		return '<span data-user="' + utils.quote_attr(token.user) + '" class="user-token">' + utils.sanitize(token.text) + '</span>';
+
 	else if ( token.type === "emoticon" ) {
 		var src = token.imgSrc, srcset, cls, extra;
 		if ( token.ffzEmote ) {
@@ -1134,6 +1157,42 @@ FFZ.prototype.tokenize_ctags = function(tokens, tags_only) {
 // Emoticon Processing
 // ---------------------
 
+FFZ.prototype.tokenize_users = function(tokens) {
+	"use strict";
+
+	if ( typeof tokens === "string" )
+		tokens = [tokens];
+
+	var new_tokens = [];
+	for(var i=0, l=tokens.length; i < l; i++) {
+		var token = tokens[i];
+		if ( ! token )
+			continue;
+
+		if ( typeof token !== "string" )
+			if ( token.type === "text" )
+				token = token.text;
+			else {
+				new_tokens.push(token);
+				continue;
+			}
+
+		var segments = token.split(/(@[a-z0-9][a-z0-9_]{3,24})/i);
+		for(var x=0, y = segments.length; x < y; x += 2) {
+			var text = segments[x] || '',
+				match = segments[x+1] || '';
+
+			if ( text.length )
+				new_tokens.push({type: 'text', text: text});
+
+			if ( match.length )
+				new_tokens.push({type: 'user', text: match, user: match.substr(1)});
+		}
+	}
+
+	return new_tokens;
+}
+
 FFZ.prototype.tokenize_emotes = function(user, room, tokens, do_report) {
 	"use strict";
 

style.css

@@ -3726,8 +3726,8 @@ body:not(.ffz-channel-bar-bottom).ffz-small-player.ffz-minimal-channel-bar .js-p
 
 .ban-tip { border-bottom: 1px dotted rgba(102,102,102,0.5); }
 
-.chat-display .chat-line .ban-target { font-weight: bold }
+.ffz-clickable-mentions .chat-display .chat-line .user-token { font-weight: bold }
-.chat-display .chat-line .ban-target:hover {
+.ffz-clickable-mentions .chat-display .chat-line .user-token:hover {
 	text-decoration: underline;
 	cursor: pointer;
 }