nanoscroller wip
This commit is contained in:
parent
f8d8e65d52
commit
f961ec7984
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
4
public/javascripts/deps.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue