"Load more" button and functionality.

Signed-off-by: 8n-tech <8n-tech@users.noreply.github.com>

board-search.php

@@ -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'] );
 

boards.php

@@ -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,

js/board-directory.js

@@ -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) );
 				}
 			);

stylesheets/style.css

@@ -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;

templates/8chan/boards-search.html

@@ -83,19 +83,26 @@
 				
 				<tbody class="board-list-tbody">{{html_boards}}</tbody>
 				
-				{% if boards_omitted > 0 %}
+				<tbody class="board-list-loading">
-				<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">
 					<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>