client/help: split search help into sections

2 files changed, 34 insertions, 3 deletions

diff --git a/client/js/controllers/help_controller.js b/client/js/controllers/help_controller.js
index 2cc53a2..797d2ac 100644
--- a/client/js/controllers/help_controller.js
+++ b/client/js/controllers/help_controller.js
@@ -14,12 +14,18 @@ class HelpController {
         page(
             '/help/:section',
             (ctx, next) => { this.showHelpRoute(ctx.params.section); });
+        page(
+            '/help/:section/:subsection',
+            (ctx, next) => {
+                this.showHelpRoute(ctx.params.section, ctx.params.subsection);
+            });
     }
 
-    showHelpRoute(section) {
+    showHelpRoute(section, subsection) {
         topNavController.activate('help');
         this.helpView.render({
             section: section,
+            subsection: subsection,
         });
     }
 }
diff --git a/client/js/views/help_view.js b/client/js/views/help_view.js
index 12439d2..0c6bebf 100644
--- a/client/js/views/help_view.js
+++ b/client/js/views/help_view.js
@@ -12,6 +12,14 @@ class HelpView {
             const templateName = 'help-' + section;
             this.sectionTemplates[section] = views.getTemplate(templateName);
         }
+        this.subsectionTemplates = {
+            'search': {
+                'default': views.getTemplate('help-search-general'),
+                'posts': views.getTemplate('help-search-posts'),
+                'users': views.getTemplate('help-search-users'),
+                'tags': views.getTemplate('help-search-tags'),
+            }
+        }
     }
 
     render(ctx) {
@@ -27,8 +35,17 @@ class HelpView {
                 }));
         }
 
-        const allItemsSelector = '[data-name]';
-        for (let item of source.querySelectorAll(allItemsSelector)) {
+        ctx.subsection = ctx.subsection || 'default';
+        if (ctx.section in this.subsectionTemplates &&
+                ctx.subsection in this.subsectionTemplates[ctx.section]) {
+            views.showView(
+                source.querySelector('.subcontent'),
+                this.subsectionTemplates[ctx.section][ctx.subsection]({
+                    name: config.name,
+                }));
+        }
+
+        for (let item of source.querySelectorAll('.primary [data-name]')) {
             if (item.getAttribute('data-name') === ctx.section) {
                 item.className = 'active';
             } else {
@@ -36,6 +53,14 @@ class HelpView {
             }
         }
 
+        for (let item of source.querySelectorAll('.secondary [data-name]')) {
+            if (item.getAttribute('data-name') === ctx.subsection) {
+                item.className = 'active';
+            } else {
+                item.className = '';
+            }
+        }
+
         views.listenToMessages(target);
         views.showView(target, source);