Merge pull request #11 from mgrabovsky/catalog-search

Add a simple search functionality to the catalog page

js/catalog-search.js

@@ -0,0 +1,50 @@
+/*
+ * catalog-search.js
+ * https://github.com/mgrabovsky/lainchan/blob/catalog-search/js/catalog-search.js
+ *
+ * Released under the MIT license
+ * Copyright (c) 2015 Matěj Grabovský <matej.grabovsky@gmail.com>
+ *
+ * Usage:
+ *   $config['additional_javascript'][] = 'js/jquery.min.js';
+ *   $config['additional_javascript'][] = 'js/catalog-search.js';
+ */
+
+(function() {
+
+var catalogSearch = function() {
+	var $controls = $('.controls'),
+		$threads = $('.threads .thread'),
+		$searchLabel = $('<label for="catalog_search">Search: </label>'),
+		$searchBox = $('<input id="catalog_search" type="search" placeholder="Search" />');
+
+	$controls.append($searchLabel)
+			.append($searchBox);
+
+	$searchBox.keyup(function() {
+		var $found = searchThreads($threads, this.value);
+		$threads.hide();
+		$found.show();
+	});
+
+	var m = location.hash.match(/[#&]s=([^&]+)/);
+	if(m) {
+		$searchBox.val(decodeURIComponent(m[1])).keyup();
+	}
+};
+
+// Filter threads by their content, given a regex. Can be extended to load data
+// remotely and filter by multiple fields
+var searchThreads = function($threads, query) {
+	var re = new RegExp(query, 'mi');
+	return $threads.filter(function() {
+		return re.test($('.replies', this).text());
+	});
+};
+
+// Only load in the catalog
+if (active_page == 'catalog') {
+	onready(catalogSearch);
+}
+
+}());

templates/themes/catalog/catalog.html

@@ -18,6 +18,7 @@
 		<div class="subtitle">{{ settings.subtitle }}</div>
 	</header>
 
+	<div class="controls">
 		<ul style="display: none">
 			<li id="sort-bump-order" class="sort" data-sort="data-bump" data-order="asc">{% trans 'Bump order' %}</li>
 			<li id="sort-creation-date" class="sort" data-sort="data-time" data-order="asc">{% trans 'Creation date' %}</li>
@@ -39,6 +40,8 @@
 			<option selected value="small">{% trans 'Small' %}</option>
 			<option value="large">{% trans 'Large' %}</option>
 		</select>
+	</div>
+
 	<div class="threads">
 		<ul id="Grid">
 		{% for post in recent_posts %}