From 1be5d7615ef66d981a55a0c741d5f4997ab11a74 Mon Sep 17 00:00:00 2001
From: fatchan <tom@69420.me>
Date: Wed, 29 Apr 2020 00:41:45 +1000
Subject: [PATCH] catalog filter and sort

---
 gulp/res/css/style.css       |  9 ++----
 gulp/res/js/catalog.js       | 61 ++++++++++++++++++++++++++++++++++++
 gulpfile.js                  |  2 ++
 views/mixins/catalogtile.pug |  7 ++++-
 views/pages/catalog.pug      | 18 ++++++++---
 views/pages/thread.pug       |  2 +-
 6 files changed, 85 insertions(+), 14 deletions(-)
 create mode 100644 gulp/res/js/catalog.js

diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css
index b2a26496..efea5830 100644
--- a/gulp/res/css/style.css
+++ b/gulp/res/css/style.css
@@ -205,7 +205,7 @@ pre {
 	font-weight: bold;
 }
 
-.statwrap {
+.wrapbar {
 	display: flex;
 	justify-content: space-between;
 	flex-flow: row wrap;
@@ -1307,13 +1307,8 @@ row.wrap.sb .col {
 	}
 
 	.catalog-tile {
-		width: 50%;
-		margin: 0 0 10px 0;
-	}
-
-	.catalog-tile:nth-child(odd) {
-		margin-right: 10px;
 		width: calc(50% - 10px);
+		margin: 5px;
 	}
 
 	table {
diff --git a/gulp/res/js/catalog.js b/gulp/res/js/catalog.js
new file mode 100644
index 00000000..90e02155
--- /dev/null
+++ b/gulp/res/js/catalog.js
@@ -0,0 +1,61 @@
+if (isCatalog) {
+	window.addEventListener('DOMContentLoaded', (event) => {
+
+		const getFilterSelector = (filter) => {
+			filter = filter.replace(/["\\]/g, '\\$&').toLowerCase();
+			return `.catalog-tile:not([data-filter*="${filter}"])`;
+		}
+		const catalogFilter = document.getElementById('catalogfilter');
+		catalogFilter.value = '';
+		const filterCatalog = () => {
+			let existingRule;
+			let i = 0;
+		    for (; i < renderSheet[rulesKey].length; i++) {
+	            if (renderSheet[rulesKey][i].selectorText.startsWith('.catalog-tile:not([data-filter*=')) {
+					existingRule = renderSheet[rulesKey][i];
+					break;
+	            }
+	        }
+			if (catalogFilter.value.length > 0) {
+				if (existingRule) {
+					existingRule.selectorText = getFilterSelector(catalogFilter.value);
+				} else {
+		            renderSheet.insertRule(getFilterSelector(catalogFilter.value) + ' { display: none; }');
+				}
+	        } else {
+		        renderSheet.deleteRule(i);
+			}
+		}
+		catalogFilter.addEventListener('input', filterCatalog, false);
+
+		const sorts = {
+			date: (a, b) => {
+				//date newest first
+				return new Date(b.dataset.date) - new Date(a.dataset.date);
+			},
+			bump: (a, b) => {
+				//bump date most recent first
+				return a.dataset.bump - b.dataset.bump;
+			},
+			replies: (a, b) => {
+				//replies most first
+				return b.dataset.replies - a.dataset.replies;
+			},
+		}
+		const tiles = document.getElementsByClassName('catalog-tile');
+		const catalogSort = document.getElementById('catalogsort');
+		catalogSort.value = '';
+		const sortCatalog = (mode) => {
+			console.log('sorting catalog', mode);
+			const tiles = document.getElementsByClassName('catalog-tile');
+			const tilesArray = Array.from(tiles);
+			tilesArray
+				.sort(sorts[mode] || (() => 1))
+				.forEach((tile, index) => {
+					tile.style.order = index;
+				});
+		}
+		catalogSort.addEventListener('change', (e) => { sortCatalog(e.target.value) }, false);
+
+	});
+}
diff --git a/gulpfile.js b/gulpfile.js
index 648e10ae..50772418 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -213,6 +213,7 @@ function scripts() {
 			`${paths.scripts.src}/*.js`,
 			`!${paths.scripts.src}/dragable.js`,
 			`!${paths.scripts.src}/hide.js`,
+			`!${paths.scripts.src}/catalog.js`,
 			`!${paths.scripts.src}/time.js`,
 		])
 		.pipe(concat('all.js'))
@@ -221,6 +222,7 @@ function scripts() {
 	return gulp.src([
 			`${paths.scripts.src}/dragable.js`,
 			`${paths.scripts.src}/hide.js`,
+			`${paths.scripts.src}/catalog.js`,
 			`${paths.scripts.src}/time.js`,
 		])
 		.pipe(concat('render.js'))
diff --git a/views/mixins/catalogtile.pug b/views/mixins/catalogtile.pug
index 6c68ab82..915fb7ad 100644
--- a/views/mixins/catalogtile.pug
+++ b/views/mixins/catalogtile.pug
@@ -1,5 +1,10 @@
 mixin catalogtile(board, post, index)
-	.catalog-tile(data-board=post.board data-post-id=post.postId data-user-id=post.userId)
+	.catalog-tile(data-board=post.board
+		data-post-id=post.postId
+		data-filter=((post.subject+post.nomarkup).toLowerCase() || '')
+		data-date=post.date
+		data-replies=post.replyposts
+		data-bump=post.bumped)
 		- const postURL = `/${board._id}/thread/${post.postId}.html#${post.postId}`
 		.post-info
 			input.left.post-check(type='checkbox', name='checkedposts' value=post.postId)
diff --git a/views/pages/catalog.pug b/views/pages/catalog.pug
index 3c548425..36f11db2 100644
--- a/views/pages/catalog.pug
+++ b/views/pages/catalog.pug
@@ -14,11 +14,19 @@ block content
 	br
 	include ../includes/announcements.pug
 	include ../includes/stickynav.pug
-	if modview
-		+managenav('catalog')
-	else
-		.pages
-			+boardnav('catalog', true, false)
+	.wrapbar
+		if modview
+			+managenav('catalog')
+		else
+			.pages
+				+boardnav('catalog', true, false)
+		.pages.jsonly
+			input#catalogfilter(type='text' placeholder='Filter')
+			select.ml-5.right#catalogsort
+				option(value="" disabled selected hidden) Sort by
+				option(value="bump") Bump order
+				option(value="date") Creation date
+				option(value="replies") Reply count
 	form(target='_blank' action=`/forms/board/${board._id}/${modview ? 'mod' : ''}actions` method='POST' enctype='application/x-www-form-urlencoded')
 		if modview
 			input(type='hidden' name='_csrf' value=csrf)
diff --git a/views/pages/thread.pug b/views/pages/thread.pug
index d70a84a7..4125f250 100644
--- a/views/pages/thread.pug
+++ b/views/pages/thread.pug
@@ -52,7 +52,7 @@ block content
 				- uids && post.userId && uids.add(post.userId)
 				+post(post)
 		hr(size=1)
-		.statwrap
+		.wrapbar
 			if modview
 				+managenav(null, true)
 			else