mirror of
https://github.com/vichan-devel/vichan.git
synced 2025-01-19 01:24:05 +01:00
"Load more" button and functionality.
Signed-off-by: 8n-tech <8n-tech@users.noreply.github.com>
This commit is contained in:
8n-tech
parent
ec90c96459
commit
497e554f49
@ -199,6 +199,7 @@ array_multisort(
|
||||
$boardLimit = $search['index'] ? 50 : 100;
|
||||
|
||||
$response['omitted'] = count( $response['boards'] ) - $boardLimit;
|
||||
$response['omitted'] = $response['omitted'] < 0 ? 0 : $response['omitted'];
|
||||
$response['boards'] = array_splice( $response['boards'], $search['page'], $boardLimit );
|
||||
$response['order'] = array_keys( $response['boards'] );
|
||||
|
||||
|
||||
@ -70,6 +70,8 @@ $tagsHTML = Element("8chan/boards-tags.html", array(
|
||||
|
||||
$searchHTML = Element("8chan/boards-search.html", array(
|
||||
"config" => $config,
|
||||
"boards" => $boards,
|
||||
"tags" => $tags,
|
||||
"search" => $searchJson['search'],
|
||||
|
||||
"boards_total" => $boards_total,
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
'board-head' : ".board-list-head",
|
||||
'board-body' : ".board-list-tbody",
|
||||
'board-loading' : ".board-list-loading",
|
||||
'board-omitted' : ".board-list-omitted",
|
||||
|
||||
'search' : "#search-form",
|
||||
'search-lang' : "#search-lang-input",
|
||||
@ -23,7 +24,12 @@
|
||||
'search-title' : "#search-title-input",
|
||||
'search-submit' : "#search-submit",
|
||||
|
||||
'tag-link' : ".tag-link"
|
||||
'tag-link' : ".tag-link",
|
||||
|
||||
'footer-page' : ".board-page-num",
|
||||
'footer-count' : ".board-page-count",
|
||||
'footer-total' : ".board-page-total",
|
||||
'footer-more' : ".board-page-loadmore"
|
||||
},
|
||||
|
||||
// HTML Templates for dynamic construction
|
||||
@ -78,6 +84,8 @@
|
||||
if ($search.length > 0) {
|
||||
// Bind form events.
|
||||
boardlist.$boardlist
|
||||
// Load more
|
||||
.on( 'click', selectors['board-omitted'], searchForms, boardlist.events.loadMore )
|
||||
// Tag click
|
||||
.on( 'click', selectors['tag-link'], searchForms, boardlist.events.tagClick )
|
||||
// Form Submission
|
||||
@ -94,18 +102,19 @@
|
||||
boardlist : function(data) {
|
||||
boardlist.build.boards(data['boards'], data['order']);
|
||||
boardlist.build.lastSearch(data['search']);
|
||||
boardlist.build.footer(data);
|
||||
boardlist.build.tags(data['tags']);
|
||||
|
||||
},
|
||||
|
||||
boards : function(data, order) {
|
||||
boards : function(boards, order) {
|
||||
// Find our head, columns, and body.
|
||||
var $head = $( boardlist.options.selector['board-head'], boardlist.$boardlist ),
|
||||
$cols = $("[data-column]", $head ),
|
||||
$body = $( boardlist.options.selector['board-body'], boardlist.$boardlist );
|
||||
|
||||
$.each( order, function( index, uri ) {
|
||||
var row = data[uri];
|
||||
var row = boards[uri];
|
||||
$row = $( boardlist.options.template['board-row'] );
|
||||
|
||||
$cols.each( function( index, col ) {
|
||||
@ -114,6 +123,7 @@
|
||||
|
||||
$row.appendTo( $body );
|
||||
} );
|
||||
|
||||
},
|
||||
board : function(row, col) {
|
||||
var $col = $(col),
|
||||
@ -192,14 +202,46 @@
|
||||
};
|
||||
},
|
||||
|
||||
footer : function(data) {
|
||||
var selector = boardlist.options.selector,
|
||||
$page = $( selector['footer-page'], boardlist.$boardlist ),
|
||||
$count = $( selector['footer-count'], boardlist.$boardlist ),
|
||||
$total = $( selector['footer-total'], boardlist.$boardlist ),
|
||||
$more = $( selector['footer-more'], boardlist.$boardlist );
|
||||
|
||||
var boards = Object.keys(data['boards']).length,
|
||||
omitted = data['omitted'] - data['search']['page'];
|
||||
|
||||
if (omitted < 0) {
|
||||
omitted = 0;
|
||||
}
|
||||
|
||||
var total = boards + omitted + data['search']['page'];
|
||||
|
||||
//$page.text( data['search']['page'] );
|
||||
$count.text( data['search']['page'] + boards );
|
||||
$total.text( total );
|
||||
$more.toggle( omitted != 0 );
|
||||
},
|
||||
|
||||
tags : function(data) {
|
||||
}
|
||||
},
|
||||
|
||||
events : {
|
||||
loadMore : function(event) {
|
||||
var parameters = $.extend( {}, boardlist.lastSearch );
|
||||
|
||||
parameters.page = $( boardlist.options.selector['board-body'], boardlist.$boardlist ).children().length;
|
||||
|
||||
boardlist.submit( parameters );
|
||||
},
|
||||
|
||||
searchSubmit : function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
$( boardlist.options.selector['board-body'], boardlist.$boardlist ).html("");
|
||||
|
||||
boardlist.submit( {
|
||||
'lang' : event.data.searchLang.val(),
|
||||
'tags' : event.data.searchTag.val(),
|
||||
@ -227,17 +269,19 @@
|
||||
|
||||
submit : function( parameters ) {
|
||||
var $boardlist = boardlist.$boardlist,
|
||||
$boardbody = $( boardlist.options.selector['board-body'], $boardlist ),
|
||||
$boardload = $( boardlist.options.selector['board-loading'], $boardlist );
|
||||
$boardload = $( boardlist.options.selector['board-loading'], $boardlist ),
|
||||
$searchSubmit = $( boardlist.options.selector['search-submit'] );
|
||||
|
||||
$boardbody.html("");
|
||||
$searchSubmit.prop( 'disabled', true );
|
||||
$boardload.show();
|
||||
|
||||
$.get(
|
||||
return $.get(
|
||||
"/board-search.php",
|
||||
parameters,
|
||||
function(data) {
|
||||
$searchSubmit.prop( 'disabled', false );
|
||||
$boardload.hide();
|
||||
|
||||
boardlist.build.boardlist( $.parseJSON(data) );
|
||||
}
|
||||
);
|
||||
|
||||
@ -1356,6 +1356,7 @@ div.boardlist a {
|
||||
table.board-list-table {
|
||||
display: table;
|
||||
margin: -2px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
table-layout: fixed;
|
||||
}
|
||||
@ -1404,14 +1405,26 @@ table.board-list-table div.board-cell {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
tfoot.board-list-loading {
|
||||
tbody.board-list-loading {
|
||||
display: none;
|
||||
}
|
||||
tfoot.board-list-loading .loading {
|
||||
tbody.board-list-loading .loading {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
tbody.board-list-omitted td {
|
||||
background: #98E;
|
||||
border-top: 1px solid #000333;
|
||||
padding: 8px;
|
||||
font-size: 125%;
|
||||
text-align: center;
|
||||
}
|
||||
tbody.board-list-omitted .board-page-loadmore {
|
||||
display: none;
|
||||
}
|
||||
|
||||
aside.search-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
aside.search-container .box {
|
||||
margin-right: 12px;
|
||||
|
||||
@ -83,19 +83,26 @@
|
||||
|
||||
<tbody class="board-list-tbody">{{html_boards}}</tbody>
|
||||
|
||||
{% if boards_omitted > 0 %}
|
||||
<tbody class="board-list-omitted" data-omitted="{{boards_omitted}}">
|
||||
<tr>
|
||||
<td colspan="7">{{boards_omitted}} board{% if boards_omitted != 1 %}s were{% else %} was{% endif %} omitted.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
{% endif %}
|
||||
|
||||
<tfoot class="board-list-loading">
|
||||
<tbody class="board-list-loading">
|
||||
<tr>
|
||||
<td colspan="7" class="loading"></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</tbody>
|
||||
|
||||
<tbody class="board-list-omitted" data-omitted="{{boards_omitted}}">
|
||||
<tr>
|
||||
<td colspan="7">Displaying results <span class="board-page-num">{{search.page}}</span> through <span class="board-page-count">{{ boards|count + search.page}}</span> out of <span class="board-page-total">{{ boards|count + boards_omitted }}</span>. <span class="board-page-loadmore">Click to load more.</span></td>
|
||||
|
||||
{% if boards_omitted > 0 %}
|
||||
<script type="text/javascript">
|
||||
/* Cheeky hack redux.
|
||||
We want to show the loadmore for JS users when we have omitted boards.
|
||||
However, the board-directory.js isn't designed to manipulate the page index on immediate load. */
|
||||
document.getElementsByClassName("board-page-loadmore")[0].style.display = "inline";
|
||||
</script>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user