From 730c2c64032ca19eb67da4f2e77552e7542ead1c Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Tue, 14 May 2013 20:27:39 -0700
Subject: [PATCH] Overflow tabs

---
 js/client.js     | 93 +++++++++++++++++++++++++++++++++++++++++++-----
 style/client.css | 26 ++++++++++----
 2 files changed, 104 insertions(+), 15 deletions(-)

diff --git a/js/client.js b/js/client.js
index e46ccc0d2..e62ab2dc2 100644
--- a/js/client.js
+++ b/js/client.js
@@ -1010,8 +1010,8 @@
 			'click button': 'dispatchClickButton'
 		},
 		initialize: function() {
-			this.$el.html('<img class="logo" src="//dev.pokemonshowdown.com/pokemonshowdownbeta.png" alt="Pokemon Showdown! (beta)" /><div class="tabbar maintabbar"></div><div class="userbar"></div>');
-			this.$tabbar = this.$('.maintabbar');
+			this.$el.html('<img class="logo" src="//dev.pokemonshowdown.com/pokemonshowdownbeta.png" alt="Pokemon Showdown! (beta)" /><div class="maintabbarbottom"></div><div class="tabbar maintabbar"><div class="inner"></div></div><div class="userbar"></div>');
+			this.$tabbar = this.$('.maintabbar .inner');
 			// this.$sidetabbar = this.$('.sidetabbar');
 			this.$userbar = this.$('.userbar');
 			this.updateTabbar();
@@ -1087,12 +1087,19 @@
 				buf += '<li><a class="button'+(curId===id?' cur':'')+(room.notifications?' notifying':'')+' closable" href="'+app.root+id+'">'+name+'</a><a class="closebutton" href="'+app.root+id+'"><i class="icon-remove-sign"></i></a></li>';
 			}
 			if (atLeastOne) buf += '</ul>';
-			if (app.curSideRoom) {
-				if (sideBuf) buf += '<ul class="siderooms" style="float:none;margin-left:'+(app.curSideRoom.leftWidth-144)+'px">'+sideBuf+'</ul>';
-				this.$tabbar.html(buf);
-			} else {
-				if (sideBuf) buf += '<ul>'+sideBuf+'</ul>';
-				this.$tabbar.html(buf);
+			if (sideBuf) {
+				if (app.curSideRoom) {
+					buf += '<ul class="siderooms" style="float:none;margin-left:'+(app.curSideRoom.leftWidth-144)+'px">'+sideBuf+'</ul>';
+				} else {
+					buf += '<ul>'+sideBuf+'</ul>';
+				}
+			}
+			this.$tabbar.html(buf);
+			var $lastLi = this.$tabbar.children().last().children().last();
+			var offset = $lastLi.offset();
+			var width = $lastLi.outerWidth();
+			if (offset.top >= 37 || offset.left + width > $(window).width() - 165) {
+				this.$tabbar.append('<div class="overflow"><button name="tablist"><i class="icon-caret-down"></i></button></div>');
 			}
 
 			if (app.rooms['']) app.rooms[''].updateRightMenu();
@@ -1122,6 +1129,9 @@
 			} else {
 				app.focusRoom(id);
 			}
+		},
+		tablist: function() {
+			app.addPopup(TabListPopup);
 		}
 	});
 
@@ -1816,4 +1826,71 @@
 		}
 	});
 
+	var TabListPopup = this.TabListPopup = Popup.extend({
+		type: 'semimodal',
+		initialize: function() {
+			var curId = (app.curRoom ? app.curRoom.id : '');
+			var curSideId = (app.curSideRoom ? app.curSideRoom.id : '');
+
+			var buf = '<ul><li><a class="button'+(curId===''?' cur':'')+(app.rooms['']&&app.rooms[''].notifications?' notifying':'')+'" href="'+app.root+'"><i class="icon-home"></i> <span>Home</span></a></li>';
+			if (app.rooms['teambuilder']) buf += '<li><a class="button'+(curId==='teambuilder'?' cur':'')+' closable" href="'+app.root+'teambuilder"><i class="icon-edit"></i> <span>Teambuilder</span></a><a class="closebutton" href="'+app.root+'teambuilder"><i class="icon-remove-sign"></i></a></li>';
+			if (app.rooms['ladder']) buf += '<li><a class="button'+(curId==='ladder'?' cur':'')+' closable" href="'+app.root+'ladder"><i class="icon-list-ol"></i> <span>Ladder</span></a><a class="closebutton" href="'+app.root+'ladder"><i class="icon-remove-sign"></i></a></li>';
+			buf += '</ul>';
+			var atLeastOne = false;
+			var sideBuf = '';
+			for (var id in app.rooms) {
+				if (!id || id === 'teambuilder' || id === 'ladder') continue;
+				var room = app.rooms[id];
+				var name = '<i class="icon-comment-alt"></i> <span>'+id+'</span>';
+				if (id === 'lobby') name = '<i class="icon-comments-alt"></i> <span>Lobby</span>';
+				if (id.substr(0,7) === 'battle-') {
+					var parts = id.substr(7).split('-');
+					var p1 = (room && room.battle && room.battle.p1 && room.battle.p1.name) || '';
+					var p2 = (room && room.battle && room.battle.p2 && room.battle.p2.name) || '';
+					if (p1 && p2) {
+						name = ''+Tools.escapeHTML(p1)+' v. '+Tools.escapeHTML(p2);
+					} else if (p1 || p2) {
+						name = ''+Tools.escapeHTML(p1)+Tools.escapeHTML(p2);
+					} else {
+						name = '(empty room)';
+					}
+					name = '<i class="text">'+parts[0]+'</i><span>'+name+'</span>';
+				}
+				if (room.isSideRoom) {
+					sideBuf += '<li><a class="button'+(curId===id||curSideId===id?' cur':'')+(room.notifications?' notifying':'')+' closable" href="'+app.root+id+'">'+name+'</a><a class="closebutton" href="'+app.root+id+'"><i class="icon-remove-sign"></i></a></li>';
+					continue;
+				}
+				if (!atLeastOne) {
+					buf += '<ul>';
+					atLeastOne = true;
+				}
+				buf += '<li><a class="button'+(curId===id?' cur':'')+(room.notifications?' notifying':'')+' closable" href="'+app.root+id+'">'+name+'</a><a class="closebutton" href="'+app.root+id+'"><i class="icon-remove-sign"></i></a></li>';
+			}
+			if (atLeastOne) buf += '</ul>';
+			if (sideBuf) {
+				buf += '<ul>'+sideBuf+'</ul>';
+			}
+			this.$el.addClass('tablist').html(buf);
+		},
+		events: {
+			'click a': 'click'
+		},
+		click: function(e) {
+			if (e.cmdKey || e.metaKey || e.ctrlKey) return;
+			e.preventDefault();
+			var $target = $(e.currentTarget);
+			var id = $target.attr('href');
+			if (id.substr(0, app.root.length) === app.root) {
+				id = id.substr(app.root.length);
+			}
+			if ($target.hasClass('closebutton')) {
+				app.leaveRoom(id);
+				this.initialize();
+			} else {
+				this.close();
+				app.focusRoom(id);
+			}
+		}
+	});
+
 }).call(this, jQuery);
diff --git a/style/client.css b/style/client.css
index 8a4f130b2..eb006ef33 100644
--- a/style/client.css
+++ b/style/client.css
@@ -104,7 +104,7 @@ body {
 
 .tabbar {
 	position: absolute;
-	bottom: -6px;
+	bottom: 1px;
 	left: 0;
 	right: 0;
 
@@ -112,7 +112,7 @@ body {
 	list-style: none;
 	margin: 0;
 	padding: 0 0 0 0;
-	height: 44px;
+	height: 37px;
 	text-align: left;
 
 	color: white;
@@ -121,13 +121,13 @@ body {
 
 	line-height: 100%;
 }
-.tabbar:before {
+.maintabbarbottom {
 	content: "";
 	display: block;
 	position: absolute;
 	left: 0;
 	right: 0;
-	bottom: 0;
+	bottom: -6px;
 	height: 6px;
 	background: #f8f8f8;
 	border: solid 1px #AAAAAA;
@@ -138,10 +138,22 @@ body {
 	box-shadow: 0 1px 2px rgba(0,0,0,.2);
 }
 .tabbar.maintabbar {
-	padding-left: 144px;
+	margin-left: 144px;
+	margin-right: 165px;
+	overflow: hidden;
 }
-.tabbar.maintabbar:after {
-	margin-left: -144px;
+.maintabbar .inner {
+	width: 400%;
+}
+.maintabbar .overflow {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	z-index: 12;
+}
+.maintabbar .overflow button {
+	height: 36px;
+	margin: 0;
 }
 
 .tabbar li,