mirror of
https://github.com/vichan-devel/vichan.git
synced 2024-11-24 07:30:10 +01:00
Main change with this commit is adding board-directory.js which is to handle JS enabled searching.
Highly incomplete. Barely functional. Just lays groundwork. Signed-off-by: 8n-tech <8n-tech@users.noreply.github.com>
This commit is contained in:
8n-tech
parent
ecfe072a4f
commit
f09def2712
10
boards.php
10
boards.php
@ -36,6 +36,11 @@ $posts_hour = number_format( fetchBoardActivity(), 0 );
|
||||
$posts_total = number_format( $boardResult['posts_total'], 0 );
|
||||
|
||||
/* Create and distribute page */
|
||||
$config['additional_javascript'] = array(
|
||||
'js/jquery.min.js',
|
||||
'js/board-directory.js'
|
||||
);
|
||||
|
||||
$boardsHTML = Element("8chan/boards-table.html", array(
|
||||
"config" => $config,
|
||||
"boards" => $boards,
|
||||
@ -67,11 +72,6 @@ $searchHTML = Element("8chan/boards-search.html", array(
|
||||
)
|
||||
);
|
||||
|
||||
$config['additional_javascript'] = array(
|
||||
'js/jquery.min.js',
|
||||
'js/board-directory.js'
|
||||
);
|
||||
|
||||
$pageHTML = Element("page.html", array(
|
||||
"config" => $config,
|
||||
"body" => $searchHTML,
|
||||
|
||||
192
js/board-directory.js
Normal file
192
js/board-directory.js
Normal file
@ -0,0 +1,192 @@
|
||||
// ============================================================
|
||||
// Purpose : Board directory handling
|
||||
// Contributors : 8n-tech
|
||||
// ============================================================
|
||||
|
||||
;( function( window, $, undefined ) {
|
||||
var boardlist = {
|
||||
options : {
|
||||
$boardlist : false,
|
||||
|
||||
// Selectors for finding and binding elements.
|
||||
selector : {
|
||||
'boardlist' : "#boardlist",
|
||||
|
||||
'board-head' : ".board-list-head",
|
||||
'board-body' : ".board-list-tbody",
|
||||
'board-loading' : ".board-list-loading",
|
||||
|
||||
'search' : "#search-form",
|
||||
'search-lang' : "#search-lang-input",
|
||||
'search-sfw' : "#search-sfw-input",
|
||||
'search-tag' : "#search-tag-input",
|
||||
'search-title' : "#search-title-input",
|
||||
'search-submit' : "#search-submit",
|
||||
},
|
||||
|
||||
// HTML Templates for dynamic construction
|
||||
template : {
|
||||
// Board row item
|
||||
'board-row' : "<tr></tr>",
|
||||
|
||||
// Individual cell definitions
|
||||
'board-cell-meta' : "<td class=\"board-meta\"></td>",
|
||||
'board-cell-uri' : "<td class=\"board-uri\"></td>",
|
||||
'board-cell-title' : "<td class=\"board-title\"></td>",
|
||||
'board-cell-pph' : "<td class=\"board-pph\"></td>",
|
||||
'board-cell-max' : "<td class=\"board-max\"></td>",
|
||||
'board-cell-unique' : "<td class=\"board-unique\"></td>",
|
||||
'board-cell-tags' : "<td class=\"board-tags\"></td>",
|
||||
|
||||
// Content wrapper
|
||||
// Used to help constrain contents to their <td>.
|
||||
'board-content-wrap' : "<div class=\"board-cell\"></div>",
|
||||
|
||||
|
||||
// Tagging
|
||||
'board-datum-tags' : "<a class=\"tag-link\" href=\"#\"></a>"
|
||||
}
|
||||
},
|
||||
|
||||
bind : {
|
||||
form : function() {
|
||||
var selectors = boardlist.options.selector;
|
||||
|
||||
var $search = $( selectors['search'] ),
|
||||
$searchLang = $( selectors['search-lang'] ),
|
||||
$searchSfw = $( selectors['search-sfw'] ),
|
||||
$searchTag = $( selectors['search-tag'] ),
|
||||
$searchTitle = $( selectors['search-title'] ),
|
||||
$searchSubmit = $( selectors['search-submit'] );
|
||||
|
||||
var searchForms = {
|
||||
'boardlist' : boardlist.$boardlist,
|
||||
'search' : $search,
|
||||
'searchLang' : $searchLang,
|
||||
'searchSfw' : $searchSfw,
|
||||
'searchTag' : $searchTag,
|
||||
'searchTitle' : $searchTitle,
|
||||
'searchSubmit' : $searchSubmit
|
||||
};
|
||||
|
||||
|
||||
if ($search.length > 0) {
|
||||
// Bind form events.
|
||||
$search.on( 'submit', searchForms, boardlist.events.searchSubmit );
|
||||
$searchSubmit.on( 'click', searchForms, boardlist.events.searchSubmit );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
build : {
|
||||
boardlist : function(data) {
|
||||
boardlist.build.boards(data['boards']);
|
||||
boardlist.build.tags(data['tags']);
|
||||
|
||||
},
|
||||
|
||||
boards : function(data) {
|
||||
// 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( data, function( index, row ) {
|
||||
var $row = $( boardlist.options.template['board-row'] );
|
||||
|
||||
$cols.each( function( index, col ) {
|
||||
var $col = $(col),
|
||||
column = $col.attr('data-column'),
|
||||
value = row[column]
|
||||
$cell = $( boardlist.options.template['board-cell-' + column] ),
|
||||
$wrap = $( boardlist.options.template['board-content-wrap'] );
|
||||
|
||||
if (value instanceof Array) {
|
||||
if (typeof boardlist.options.template['board-datum-' + column] !== "undefined") {
|
||||
$.each( value, function( index, singleValue ) {
|
||||
$( boardlist.options.template['board-datum-' + column] )
|
||||
.text( singleValue )
|
||||
.appendTo( $wrap );
|
||||
} );
|
||||
}
|
||||
else {
|
||||
$wrap.text( value.join(" ") );
|
||||
}
|
||||
}
|
||||
else {
|
||||
$wrap.text( value );
|
||||
}
|
||||
|
||||
$wrap.appendTo( $cell );
|
||||
$cell.appendTo( $row );
|
||||
} );
|
||||
|
||||
if( index >= 100 ) return false;
|
||||
|
||||
$row.appendTo( $body );
|
||||
} );
|
||||
|
||||
},
|
||||
|
||||
tags : function(data) {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
events : {
|
||||
searchSubmit : function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
var $boardlist = event.data.boardlist,
|
||||
$boardbody = $( boardlist.options.selector['board-body'], $boardlist ),
|
||||
$boardload = $( boardlist.options.selector['board-loading'], $boardlist );
|
||||
|
||||
$boardbody.html("");
|
||||
$boardload.show();
|
||||
|
||||
$.get(
|
||||
"/board-search.php",
|
||||
{
|
||||
'lang' : event.data.searchLang.val(),
|
||||
'tags' : event.data.searchTag.val(),
|
||||
//'time' : event.data.searchTag.val(),
|
||||
'title' : event.data.searchTitle.val(),
|
||||
'sfw' : event.data.searchSfw.prop('checked') ? 1 : 0
|
||||
},
|
||||
function(data) {
|
||||
$boardload.hide();
|
||||
boardlist.build.boardlist( $.parseJSON(data) );
|
||||
}
|
||||
);
|
||||
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
init : function( target ) {
|
||||
if (typeof target !== "string") {
|
||||
target = boardlist.options.selector.boardlist;
|
||||
}
|
||||
|
||||
var $target = $(target);
|
||||
|
||||
if ($target.length > 0 ) {
|
||||
boardlist.$boardlist = $target;
|
||||
boardlist.bind.form();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Tie to the vichan object.
|
||||
if (typeof window.vichan === "undefined") {
|
||||
window.vichan = {};
|
||||
}
|
||||
window.vichan.boardlist = boardlist;
|
||||
|
||||
// Initialize the boardlist when the document is ready.
|
||||
$( document ).on( 'ready', window.vichan.boardlist.init );
|
||||
// Run it now if we're already ready.
|
||||
if (document.readyState === 'complete') {
|
||||
window.vichan.boardlist.init();
|
||||
}
|
||||
} )( window, jQuery );
|
||||
@ -1383,6 +1383,13 @@ table.board-list-table div.board-cell {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
tfoot.board-list-loading {
|
||||
display: none;
|
||||
}
|
||||
tfoot.board-list-loading .loading {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
aside.search-container {
|
||||
}
|
||||
aside.search-container .box {
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
<col class="board-unique" />
|
||||
<col class="board-tags" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<thead class="board-list-head">
|
||||
<tr>
|
||||
<th class="board-meta" data-column="meta"></th>
|
||||
<th class="board-uri" data-column="uri">{% trans %}Board{% endtrans %}</th>
|
||||
@ -73,7 +73,11 @@
|
||||
|
||||
<tbody class="board-list-tbody">{{html_boards}}</tbody>
|
||||
|
||||
<tfoot class="board-list-loading loading"></tfoot>
|
||||
<tfoot class="board-list-loading">
|
||||
<tr>
|
||||
<td colspan="7" class="loading"></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user