From 69f4248f724b53a02fc367d9c867cbb34a14cb1e Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Fri, 28 Jun 2019 15:34:05 -0400
Subject: [PATCH] feat: functioning category dropdown in recent/unread/etc
 without js (#483)

* 10.1.0

* feat: WIP nojs category dropdown in recent

* feat: allowing new topic button to be clicked without js

It now opens a category dropdown which then sends user to
the discrete composer page.

WARNING: Does not work on tag.tpl. Needs core update to send
categories data through...

* fix: removed unneeded data-toggle attribute
---
 less/category.less                      |  4 ++++
 templates/partials/buttons/newTopic.tpl | 15 +++++++++++++++
 templates/popular.tpl                   |  2 +-
 templates/recent.tpl                    |  2 +-
 templates/tag.tpl                       |  2 +-
 templates/top.tpl                       |  2 +-
 templates/unread.tpl                    |  2 +-
 7 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 templates/partials/buttons/newTopic.tpl

diff --git a/less/category.less b/less/category.less
index 6b86ab0..b267624 100644
--- a/less/category.less
+++ b/less/category.less
@@ -169,6 +169,10 @@
 		font-size: 65%;
 		border-radius: 50%;
 	}
+
+	#category-dropdown-check:checked + .dropdown-menu {
+		display: block;
+	}
 }
 
 .category-dropdown-menu {
diff --git a/templates/partials/buttons/newTopic.tpl b/templates/partials/buttons/newTopic.tpl
new file mode 100644
index 0000000..58dc9d8
--- /dev/null
+++ b/templates/partials/buttons/newTopic.tpl
@@ -0,0 +1,15 @@
+<noscript><div class="dropdown" component="category-selector"></noscript>
+<label component="category/post" for="category-dropdown-check" class="btn btn-primary" id="new_topic">
+	[[category:new_topic_button]]
+</label>
+<noscript>
+	<input type="checkbox" class="hidden" id="category-dropdown-check" aria-hidden="true">
+	<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+		{{{each categories}}}
+		<li role="presentation" class="category {{{if categories.disabledClass}}}disabled{{{end}}}">
+			<a role="menu-item" href="{config.relative_path}/compose?cid={categories.cid}">{categories.level}<span component="category-markup">{{{if categories.icon}}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i style="color: {categories.color};" class="fa fa-stack-1x fa-fw {categories.icon}"></i></span>{{{end}}} {categories.name}</span></a>
+		</li>
+		{{{end}}}
+	</ul>
+</div>
+</noscript>
\ No newline at end of file
diff --git a/templates/popular.tpl b/templates/popular.tpl
index 4f7363f..0337670 100644
--- a/templates/popular.tpl
+++ b/templates/popular.tpl
@@ -8,7 +8,7 @@
 	<div class="btn-toolbar">
 		<div class="pull-left">
 			<!-- IF canPost -->
-			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<!-- ELSE -->
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
 			<!-- ENDIF canPost -->
diff --git a/templates/recent.tpl b/templates/recent.tpl
index 47af6a3..999240f 100644
--- a/templates/recent.tpl
+++ b/templates/recent.tpl
@@ -8,7 +8,7 @@
 	<div class="btn-toolbar">
 		<div class="pull-left">
 			<!-- IF canPost -->
-			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<!-- ELSE -->
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
 			<!-- ENDIF canPost -->
diff --git a/templates/tag.tpl b/templates/tag.tpl
index eca4d05..c509d9d 100644
--- a/templates/tag.tpl
+++ b/templates/tag.tpl
@@ -4,7 +4,7 @@
 	<div class="btn-toolbar">
 		<div class="pull-left">
 			<!-- IF loggedIn -->
-			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<!-- ELSE -->
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
 			<!-- ENDIF loggedIn -->
diff --git a/templates/top.tpl b/templates/top.tpl
index f7e161d..d8ebb84 100644
--- a/templates/top.tpl
+++ b/templates/top.tpl
@@ -8,7 +8,7 @@
 	<div class="btn-toolbar">
 		<div class="pull-left">
 			<!-- IF loggedIn -->
-			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<!-- ELSE -->
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
 			<!-- ENDIF loggedIn -->
diff --git a/templates/unread.tpl b/templates/unread.tpl
index 5fa1ed3..19ea779 100644
--- a/templates/unread.tpl
+++ b/templates/unread.tpl
@@ -7,7 +7,7 @@
 <div class="unread">
 	<div class="btn-toolbar">
 		<div class="pull-left">
-			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<a href="{config.relative_path}/{selectedFilter.url}{querystring}" class="inline-block">
 				<div class="alert alert-warning hide" id="new-topics-alert"></div>
 			</a>