libretic/etherpad-lite
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Beautify infinite scroll

Browse source
This commit is contained in:
Marcel Klehr 2013-09-12 16:37:37 +02:00
parent 8073c62de3
commit 2b46bc40a1
3 changed files with 41 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/static/css/admin.css
View file

@ -142,11 +142,13 @@ td, th {
width:100%; width:100%;
} }
.messages td>* { .messages {
height: 5em;
}
.messages * {
display: none; display: none;
text-align: center; text-align: center;
} }
.messages .fetching { .messages .fetching {
display: block; display: block;
} }
@ -162,7 +164,7 @@ td, th {
#search-progress.progress { #search-progress.progress {
padding-top: 20%; padding-top: 20%;
background: rgba(255,255,255,0.7); background: rgba(255,255,255,0.3);
} }
.progress * { .progress * {

32
src/static/js/admin/plugins.js
View file

@ -22,22 +22,29 @@ $(document).ready(function () {
search.searchTerm = searchTerm; search.searchTerm = searchTerm;
socket.emit("search", {searchTerm: searchTerm, offset:search.offset, limit: limit, sortBy: search.sortBy, sortDir: search.sortDir}); socket.emit("search", {searchTerm: searchTerm, offset:search.offset, limit: limit, sortBy: search.sortBy, sortDir: search.sortDir});
search.offset += limit; search.offset += limit;
$('#search-progress').show() $('#search-progress').show()
search.messages.show('fetching')
storeScrollPosition()
search.searching = true
} }
search.searching = false;
search.offset = 0; search.offset = 0;
search.limit = 12; search.limit = 25;
search.results = []; search.results = [];
search.sortBy = 'name'; search.sortBy = 'name';
search.sortDir = /*DESC?*/true; search.sortDir = /*DESC?*/true;
search.end = true;// have we received all results already? search.end = true;// have we received all results already?
search.messages = { search.messages = {
show: function(msg) { show: function(msg) {
$('.search-results .messages').show() //$('.search-results .messages').show()
$('.search-results .messages .'+msg+'').show() $('.search-results .messages .'+msg+'').show()
$('.search-results .messages .'+msg+' *').show()
}, },
hide: function(msg) { hide: function(msg) {
$('.search-results .messages').hide() //$('.search-results .messages').hide()
$('.search-results .messages .'+msg+'').hide() $('.search-results .messages .'+msg+'').hide()
$('.search-results .messages .'+msg+' *').hide()
} }
} }
@ -97,13 +104,25 @@ $(document).ready(function () {
} }
// Infinite scroll // Infinite scroll
var scrollPosition
function storeScrollPosition() {
scrollPosition = $(window).scrollTop()
}
function restoreScrollPosition() {
setTimeout(function() {
$(window).scrollTop(scrollPosition)
}, 0)
}
$(window).scroll(checkInfiniteScroll) $(window).scroll(checkInfiniteScroll)
function checkInfiniteScroll() { function checkInfiniteScroll() {
if(search.end) return;// don't keep requesting if there are no more results if(search.end || search.searching) return;// don't keep requesting if there are no more results
setTimeout(function() {
try{ try{
var top = $('.search-results .results > tr:last').offset().top var top = $('.results>tr:last').offset().top
if($(window).scrollTop()+$(window).height() > top) search(search.searchTerm) if($(window).scrollTop()+$(window).height() > top) search(search.searchTerm)
}catch(e){} }catch(e){}
}, 1)
} }
function updateHandlers() { function updateHandlers() {
@ -181,8 +200,11 @@ $(document).ready(function () {
}else { }else {
search.messages.show('nothing-found') search.messages.show('nothing-found')
} }
search.messages.hide('fetching')
$('#search-progress').hide() $('#search-progress').hide()
restoreScrollPosition()
checkInfiniteScroll() checkInfiniteScroll()
search.searching = false
}); });
socket.on('results:installed', function (data) { socket.on('results:installed', function (data) {

8
src/templates/admin/plugins.html
View file

@ -96,11 +96,13 @@
</tbody> </tbody>
<tbody class="results"> <tbody class="results">
</tbody> </tbody>
<tbody class="messages"> <tbody>
<tr><td></td><td> <tr><td></td><td>
<div class="search-progress" class="progress"><img src="../static/img/loading.gif"/></div> <div class="messages">
<div id="search-progress" class="progress"><p>&nbsp;</p></div>
<p class="nothing-found">No plugins found.</p> <p class="nothing-found">No plugins found.</p>
<p class="fetching"><img src="../static/img/loading.gif"/><br/>Fetching catalogue...</p> <p class="fetching"><img src="../static/img/loading.gif"/><br/>Fetching...</p>
</div>
</td><td></td></tr> </td><td></td></tr>
</tbody> </tbody>
</table> </table>