From a186d886361c01f2928dd10df3a2faf2eefe1f7c Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Sat, 1 Oct 2016 15:00:00 -0400
Subject: [PATCH] Improve Hidden Badges with badge previews.

---
 changelog.html |  1 +
 src/badges.js  | 66 +++++++++++++++++++++++++++++++++++---------------
 style.css      |  2 ++
 3 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/changelog.html b/changelog.html
index 4f2cdc06..2332c46e 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,5 +1,6 @@
 <div class="list-header">3.5.305 <time datetime="2016-10-01T17:40">(2016-10-01)</time></div>
 <ul class="chat-menu-content menu-side-padding">
+	<li>Added: Badge previews to the <code>Hidden Badges</code> setting to make it more obvious how to hide any given badge when the names don't quite lien up.</li>
 	<li>Added: Shortcuts to GitHub's Issues pages to the FFZ About menu so people can submit bugs and ideas.</li>
 	<li>Added: Seperate option to hide the banner at the top of channel pages.</li>
 	<li>Changed: Allow tab-completion of global emoticons by default.</li>
diff --git a/src/badges.js b/src/badges.js
index 7cfc9fb0..cccf23b4 100644
--- a/src/badges.js
+++ b/src/badges.js
@@ -78,13 +78,21 @@ FFZ.settings_info.hidden_badges = {
 		if ( badgeCollection ) {
 			if ( badgeCollection.global )
 				for(var badge in badgeCollection.global)
-					if ( badgeCollection.global.hasOwnProperty(badge) && badge !== 'broadcasterName' )
-						values.push('<code>' + badge + '</code>');
+					if ( badgeCollection.global.hasOwnProperty(badge) && badge !== 'broadcasterName' ) {
+						var badge_data = badgeCollection.global[badge],
+							version = Object.keys(badge_data.versions)[0];
+
+						values.push([badge, f.render_badges(f.get_twitch_badges(badge + "/" + version))]);
+					}
 
 			if ( badgeCollection.channel )
 				for(var badge in badgeCollection.channel)
-					if ( badgeCollection.channel.hasOwnProperty(badge) && badge !== 'broadcasterName' )
-						values.push('<code>' + badge + '</code>');
+					if ( badgeCollection.channel.hasOwnProperty(badge) && badge !== 'broadcasterName' ) {
+						var badge_data = badgeCollection.channel[badge],
+							version = Object.keys(badge_data.versions)[0];
+
+						values.push([badge, f.render_badges(f.get_twitch_badges(badge + "/" + version))]);
+					}
 		}
 
 		for(var badge_id in f.badges) {
@@ -92,26 +100,40 @@ FFZ.settings_info.hidden_badges = {
 				continue;
 
 			var badge = f.badges[badge_id],
-				hide_key = (badge.source_ext ? f._apis[badge.source_ext].name_key : 'ffz') + '-' + (badge.name || badge.id);
+				hide_key = (badge.source_ext ? f._apis[badge.source_ext].name_key : 'ffz') + '-' + (badge.name || badge.id),
+				render_badge = {};
 
-			values.push('<code>' + hide_key + '</code>');
+			render_badge[badge.slot] = f._get_badge_object({}, badge);
+			values.push([hide_key, f.render_badges(render_badge)]);
 		}
 
 		if ( this.has_bttv && window.BetterTTV ) {
 			try {
 				for(var badge_id in BetterTTV.chat.store.__badgeTypes)
-					values.push('<code>bttv-' + badge_id + '</code>');
+					values.push(['bttv-' + badge_id, null]);
 
-				values.push('<code>bot</code>');
+				values.push(['bot', null]);
 
 			} catch(err) {
 				this.error("Unable to load known BetterTTV badges.", err);
 			}
 		}
 
+		var already_used = [],
+			output = [];
+
+		for(var i=0; i < values.length; i++) {
+			var badge = values[i];
+			if ( already_used.indexOf(badge[0]) !== -1 )
+				continue;
+
+			already_used.push(badge[0]);
+			output.push((badge[1] ? '<div class="ffz-hidden-badges badges">' + badge[1] + '</div>' : '') + '<code>' + badge[0] + '</code>');
+		}
+
 		utils.prompt(
 			"Hidden Badges",
-			"Please enter a comma-separated list of badges that you would like to be hidden in chat.</p><p><b>Possible Values:</b> " + _.unique(values).join(", "),
+			"Please enter a comma-separated list of badges that you would like to be hidden in chat.</p><p><b>Possible Values:</b> " + output.join(", "),
 			old_val,
 			function(new_val) {
 				if ( new_val === null || new_val === undefined )
@@ -306,22 +328,26 @@ FFZ.prototype.get_badges = function(user, room_id, badges, msg) {
 			continue;
 		}
 
-		badges[slot] = {
-			klass: 'ffz-badge-' + badge.id,
-			title: badge.title || full_badge.title || ('Unknown FFZ Badge\nID: ' + badge.id),
-			image: badge.image,
-			full_image: full_badge.image,
-			color: badge.color,
-			no_invert: badge.no_invert || full_badge.no_invert,
-			invert_invert: badge.invert_invert || full_badge.invert_invert,
-			transparent: badge.transparent || full_badge.transparent || (badge.color || full_badge.color) === "transparent",
-			extra_css: badge.extra_css
-		};
+		badges[slot] = this._get_badge_object(badge, full_badge);
 	}
 
 	return badges;
 }
 
+FFZ.prototype._get_badge_object = function(badge, full_badge) {
+	return {
+		klass: 'ffz-badge-' + (badge.id || full_badge.id),
+		title: badge.title || full_badge.title || ('Unknown FFZ Badge\nID: ' + (badge.id | full_badge.id)),
+		image: badge.image,
+		full_image: full_badge.image,
+		color: badge.color,
+		no_invert: badge.no_invert || full_badge.no_invert,
+		invert_invert: badge.invert_invert || full_badge.invert_invert,
+		transparent: badge.transparent || full_badge.transparent || (badge.color || full_badge.color) === "transparent",
+		extra_css: (badge.extra_css || full_badge.extra_css)
+	}
+}
+
 
 FFZ.prototype.get_line_badges = function(msg) {
 	var room = msg.get && msg.get('room') || msg.room,
diff --git a/style.css b/style.css
index 08cc7a62..c60064a6 100644
--- a/style.css
+++ b/style.css
@@ -3120,6 +3120,8 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 
 }
 
+.ffz-hidden-badges.badges { margin-left: 5px }
+
 
 /* Odd Badges */
 .badge.click_url { cursor: pointer }