deepcrayon/lila
deepcrayon/lila
1
0
Fork 0
Code Releases Activity

nanoscroller wip

Browse source
This commit is contained in:
Thibault Duplessis 2013-02-14 13:32:50 +01:00
parent f8d8e65d52
commit f961ec7984
8 changed files with 99 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/views/lobby/home.scala.html
View file

@ -2,7 +2,7 @@
@chat = {
@for(m <- ctx.me; if m.canChat) {
<div class="lichess_chat anon_chat lobby_chat">
<div id="asrtoien" class="lichess_chat anon_chat lobby_chat">
<div class="lichess_chat_top">
<span class="title">@trans.chatRoom()</span>
<input
@ -13,11 +13,13 @@
type="checkbox" />
</div>
<div class="lichess_chat_inner">
<ol class="lichess_messages">
<li><a href="@routes.Lobby.log()">View older messages</a></li>
</ol>
<div class="nano">
<ol class="lichess_messages content">
<li><a href="@routes.Lobby.log()">View older messages</a></li>
</ol>
</div>
<form action="#">
<input class="lichess_say lichess_hint" value="@trans.talkInChat()" />
<input class="lichess_say" value="" placeholder="@trans.talkInChat()" />
<a class="send"></a>
</form>
</div>
@ -86,17 +88,21 @@ underchat = underchat.some) {
<a class="more" title="@trans.seeTheGamesBeingPlayedInRealTime()" href="@routes.Game.realtime()">@trans.games() »</a>
<span class="title">@trans.gamesBeingPlayedRightNow()</span>
</div>
<div class="undertable_inner">
<div class="undertable_inner nano">
<div class="content">
<table class="lichess_messages"></table>
</div>
</div>
</div>
<div class="new_posts undertable" data-url="@routes.ForumPost.recent">
<div class="undertable_top">
<a class="more" title="@trans.talkAboutChessAndDiscussLichessFeaturesInTheForum()" href="@routes.ForumCateg.index">@trans.forum() »</a>
<span class="title">@trans.forum()</span>
</div>
<div class="undertable_inner">
<ol>@forum.post.recent(forumRecent)</ol>
<div class="undertable_inner nano">
<div class="content">
<ol>@forum.post.recent(forumRecent)</ol>
</div>
</div>
</div>
</div>

2
app/views/round/room.scala.html
View file

@ -15,7 +15,7 @@
<div class="lichess_chat_inner">
<ol class="lichess_messages">@roomHtml</ol>
<form action="" method="post">
<input class="lichess_say lichess_hint" value="@trans.talkInChat()" />
<input class="lichess_say" value="" placeholder="@trans.talkInChat()" />
<a class="send"></a>
</form>
</div>

2
app/views/tournament/show/layout.scala.html
View file

@ -15,7 +15,7 @@
<div class="lichess_chat_inner">
<ol class="lichess_messages">@roomHtml</ol>
<form action="#">
<input class="lichess_say lichess_hint" value="@trans.talkInChat()" />
<input class="lichess_say" value="" placeholder="@trans.talkInChat()" />
<a class="send"></a>
</form>
</div>

58
public/javascripts/big.js
View file

@ -450,12 +450,12 @@ var lichess_translations = [];
});
$.fn.scrollable = function() {
this.mousewheel(function(e, delta) {
this.scrollTop -= delta * 30;
return false;
});
};
setTimeout(function() {
$('.nano').nanoScroller({ scroll: 'bottom' });
}, 1500);
$('body').on('lichess.content_loaded', function() {
$('.nano').nanoScroller();
});
$.fn.orNot = function() {
return this.length == 0 ? false: this;
@ -1122,18 +1122,13 @@ var lichess_translations = [];
_create: function() {
var self = this;
self.$msgs = self.element.find('.lichess_messages');
self.$nano = self.element.find('.nano');
var headerHeight = self.element.parent().height();
self.element.css("top", headerHeight + 13);
self.$msgs.css("height", 454 - headerHeight);
self.$msgs.find('>li').each(function() {
$(this).html(urlToLink($(this).html()));
});
self.$msgs.scrollable();
self.$msgs.find('>li').each(function() { $(this).html(urlToLink($(this).html())); });
var $form = self.element.find('form');
self.$msgs[0].scrollTop = 9999999;
var $input = self.element.find('input.lichess_say').one("focus", function() {
$input.val('').removeClass('lichess_hint');
});
var $input = self.element.find('input.lichess_say');
// send a message
$form.submit(function() {
@ -1166,10 +1161,9 @@ var lichess_translations = [];
$chatToggle[0].checked = $chatToggle.data("enabled");
},
append: function(msg) {
var self = this;
self.$msgs.append(urlToLink(msg));
this.$msgs.append(urlToLink(msg));
$('body').trigger('lichess.content_loaded');
self.$msgs[0].scrollTop = 9999999;
this.$nano.nanoScroller({scroll:'bottom'});
}
});
@ -1493,6 +1487,7 @@ var lichess_translations = [];
var $chat = $("div.lichess_chat");
var $chatToggle = $chat.find('input.toggle_chat');
var $chatMessages = $chat.find('.lichess_messages');
var chatExists = $chat.length > 0;
var $bot = $("div.lichess_bot");
var $newposts = $("div.new_posts");
@ -1555,14 +1550,10 @@ var lichess_translations = [];
if (chatExists) {
var $form = $chat.find('form');
$chat.find('.lichess_messages').scrollable();
var $input = $chat.find('input.lichess_say').one("focus", function() {
$input.val('').removeClass('lichess_hint');
});
var $input = $chat.find('input.lichess_say');
// send a message
$form.submit(function() {
if ($input.hasClass("lichess_hint")) return false;
var text = $.trim($input.val());
if (!text) return false;
if (text.length > 140) {
@ -1588,10 +1579,7 @@ var lichess_translations = [];
}
function addToChat(html) {
var $messages = $chat.find('.lichess_messages');
var shouldScroll = ($messages.height() + $messages.scrollTop()) >= ($messages[0].scrollHeight - 10);
$messages.append(html);
if (shouldScroll) $messages.scrollTop($messages[0].scrollHeight);
$chatMessages.append(html);
$('body').trigger('lichess.content_loaded');
}
function buildChatMessage(txt, username) {
@ -1606,22 +1594,17 @@ var lichess_translations = [];
}
function removeFromChat(regex) {
var r = new RegExp(regex);
$chat.find('.lichess_messages li').filter(function() {
$chatMessages.find('li').filter(function() {
return r.test($(this).html());
}).remove();
}
$bot.on("click", "tr", function() { location.href = $(this).find('a.watch').attr("href"); });
$bot.find('.undertable_inner').scrollable();
$newpostsinner.scrollable();
$newpostsinner[0].scrollTop = 9999999;
$newpostsinner.scrollable();
setInterval(function() {
$.ajax($newposts.data('url'), {
timeout: 10000,
success: function(data) {
$newpostsinner.find('ol').html(data);
$newpostsinner[0].scrollTop = 9999999;
$('body').trigger('lichess.content_loaded');
}
});
@ -1669,7 +1652,7 @@ var lichess_translations = [];
function renderTimeline(data) {
var html = "";
for (i in data) { html += '<tr>' + data[i] + '</tr>'; }
$bot.find('.lichess_messages').append(html).parent()[0].scrollTop = 9999999;
$bot.find('.lichess_messages').append(html).parent();
$('body').trigger('lichess.content_loaded');
}
@ -1800,15 +1783,10 @@ var lichess_translations = [];
if (chatExists) {
var $form = $chat.find('form');
var $msgs = $chat.find('.lichess_messages');
$msgs.scrollable();
$msgs[0].scrollTop = 9999999;
var $input = $chat.find('input.lichess_say').one("focus", function() {
$input.val('').removeClass('lichess_hint');
});
var $input = $chat.find('input.lichess_say');
// send a message
$form.submit(function() {
if ($input.hasClass("lichess_hint")) return false;
var text = $.trim($input.val());
if (!text) return false;
if (text.length > 140) {
@ -1834,7 +1812,7 @@ var lichess_translations = [];
}
function addToChat(html) {
$chat.find('.lichess_messages').append(html)[0].scrollTop = 9999999;
$chat.find('.lichess_messages').append(html);
$('body').trigger('lichess.content_loaded');
}

4
public/javascripts/deps.min.js vendored
View file

File diff suppressed because one or more lines are too long

17
public/stylesheets/board.css
View file

@ -611,9 +611,6 @@ div.lichess_chat_top span.title {
div.lichess_chat_top span.title span {
font-weight: normal;
}
div.lichess_chat_inner {
position: relative;
}
div.lichess_chat input.toggle_chat {
cursor: pointer;
@ -623,21 +620,22 @@ div.lichess_chat input.toggle_chat {
z-index:1;
}
div.lichess_chat ol {
div.lichess_chat .nano {
height: 263px;
width: 216px;
border: 1px solid #ccc;
border-top: none;
padding: 2px 5px;
position:relative;
overflow:hidden;
}
div.lichess_chat.small_chat ol {
div.lichess_chat.small_chat .nano {
width: 186px;
}
div.lichess_chat.lobby_chat ol {
div.lichess_chat.lobby_chat .nano {
height: 341px;
}
div.lichess_chat .nano .content {
overflow: hidden;
}
div.lichess_chat form {
position: relative;
@ -652,9 +650,6 @@ div.lichess_chat form input {
div.lichess_chat.small_chat form input {
width: 172px;
}
div.lichess_chat input.lichess_hint {
color: #888;
}
div.lichess_chat a.send {
position: absolute;
top: 0px;

57
public/stylesheets/common.css
View file

@ -47,12 +47,12 @@ div.header strong {
font-weight: normal;
}
div.content {
body > div.content {
width: 1005px;
min-height: 590px;
margin: 30px auto 30px auto;
}
body.tight div.content {
body.tight > div.content {
width: auto;
min-width: 780px;
margin-top: 5px;
@ -890,3 +890,56 @@ div.notifications > div a.close:hover {
display: block;
margin-left: 8px;
}
/* scroll */
.nano {
position : relative;
width : 100%;
height : 100%;
overflow : hidden;
}
.nano .content {
position : absolute;
overflow : scroll;
overflow-x : hidden;
top : 0;
right : 0;
bottom : 0;
left : 0;
}
.nano .content:focus {
outline: thin dotted;
}
.nano .content::-webkit-scrollbar {
visibility: hidden;
}
.has-scrollbar .content::-webkit-scrollbar {
visibility: visible;
}
.nano > .pane {
background : rgba(0,0,0,.15);
position : absolute;
width : 10px;
right : 0;
top : 0;
bottom : 0;
visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
opacity : .01;
-webkit-transition : .2s;
-moz-transition : .2s;
-o-transition : .2s;
transition : .2s;
}
.nano > .pane > .slider {
background: #444;
background: rgba(0,0,0,.4);
position : relative;
margin : 0 1px;
-moz-border-radius : 3px;
-webkit-border-radius : 3px;
border-radius : 3px;
}
.nano:hover > .pane, .pane.active, .pane.flashed {
visibility : visible\9; /* Target only IE7 and IE8 with this hack */
opacity : 0.99;
}

4
public/stylesheets/dark.css
View file

@ -37,7 +37,7 @@ body.dark div.content_box
body.dark #top,
body.dark #nb_connected_players,
body.dark div.lichess_chat_top,
body.dark div.lichess_chat ol,
body.dark div.lichess_chat .nano,
body.dark div.undertable_top,
body.dark div.undertable_inner,
body.dark div.undertable td,
@ -141,7 +141,7 @@ body.dark #top span.new_messages {
background: #606060;
}
body.dark div.lichess_chat_inner,
body.dark div.lichess_chat .nano,
body.dark div.undertable_inner,
body.dark div.lichess_goodies div.box,
body.dark div.undergame_box,