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('
');
- this.$tabbar = this.$('.maintabbar');
+ this.$el.html('
');
+ this.$tabbar = this.$('.maintabbar .inner');
// this.$sidetabbar = this.$('.sidetabbar');
this.$userbar = this.$('.userbar');
this.updateTabbar();
@@ -1087,12 +1087,19 @@
buf += ''+name+'';
}
if (atLeastOne) buf += '';
- if (app.curSideRoom) {
- if (sideBuf) buf += '';
- this.$tabbar.html(buf);
- } else {
- if (sideBuf) buf += '';
- this.$tabbar.html(buf);
+ if (sideBuf) {
+ if (app.curSideRoom) {
+ buf += '';
+ } else {
+ buf += '';
+ }
+ }
+ 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('');
}
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 = '- Home
';
+ if (app.rooms['teambuilder']) buf += '- Teambuilder
';
+ if (app.rooms['ladder']) buf += '- Ladder
';
+ buf += '
';
+ 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 = ' '+id+'';
+ if (id === 'lobby') name = ' Lobby';
+ 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 = ''+parts[0]+''+name+'';
+ }
+ if (room.isSideRoom) {
+ sideBuf += ''+name+'';
+ continue;
+ }
+ if (!atLeastOne) {
+ buf += '';
+ atLeastOne = true;
+ }
+ buf += '- '+name+'
';
+ }
+ if (atLeastOne) buf += '
';
+ if (sideBuf) {
+ buf += '';
+ }
+ 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,