From 5031bfe8c0ea364f27d4f23447122b9478ebd4a0 Mon Sep 17 00:00:00 2001
From: Andrew Rodrigues <psycho.bunny@hotmail.com>
Date: Mon, 4 Feb 2019 13:54:48 -0500
Subject: [PATCH] feat: allow themes to define custom classes for categories
 via filter:admin.category.get

`datalist` isn't supported in all browsers but this will fallback to the original behavior. The first item in the list is the placeholder.
---
 src/controllers/admin/categories.js | 3 +++
 src/views/admin/manage/category.tpl | 7 ++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/controllers/admin/categories.js b/src/controllers/admin/categories.js
index 4c443da076..2ab344607e 100644
--- a/src/controllers/admin/categories.js
+++ b/src/controllers/admin/categories.js
@@ -35,14 +35,17 @@ categoriesController.get = function (req, res, callback) {
 				req: req,
 				res: res,
 				category: category,
+				customClasses: [],
 				allCategories: data.allCategories,
 			}, next);
 		},
 		function (data) {
 			data.category.name = translator.escape(String(data.category.name));
+
 			res.render('admin/manage/category', {
 				category: data.category,
 				allCategories: data.allCategories,
+				customClasses: data.customClasses,
 			});
 		},
 	], callback);
diff --git a/src/views/admin/manage/category.tpl b/src/views/admin/manage/category.tpl
index 4b70b1f8a2..89adea01f3 100644
--- a/src/views/admin/manage/category.tpl
+++ b/src/views/admin/manage/category.tpl
@@ -60,7 +60,12 @@
 							<label for="cid-{category.cid}-class">
 								[[admin/manage/categories:custom-class]]
 							</label>
-							<input id="cid-{category.cid}-class" type="text" class="form-control" placeholder="col-md-6 col-xs-6" data-name="class" value="{category.class}" />
+							<input list="customClasses" id="cid-{category.cid}-class" type="text" class="form-control" placeholder="<!-- IF customClasses.length --><!-- BEGIN customClasses --><!-- IF @first -->{@value}<!-- ENDIF --><!-- END --><!-- ELSE -->col-md-6 col-xs-6<!-- ENDIF -->" data-name="class" value="{category.class}" />
+							<datalist id="customClasses">
+								<!-- BEGIN customClasses -->
+								<option>{@value}</option>
+								<!-- END customClasses -->
+							</datalist>
 						</div>
 					</div>
 					<div class="col-sm-4 col-xs-12">