From 9304e309f6247d2bdcc60a86126cfd65901ac34d Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Fri, 5 Aug 2016 20:00:07 +0200
Subject: [PATCH] client/settings: add posts per page option

---
 client/css/forms.styl                         | 3 ++-
 client/html/settings.tpl                      | 3 +++
 client/js/controllers/post_list_controller.js | 2 +-
 client/js/models/settings.js                  | 1 +
 client/js/util/misc.js                        | 2 +-
 client/js/util/views.js                       | 6 ++++++
 client/js/views/settings_view.js              | 2 ++
 7 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/client/css/forms.styl b/client/css/forms.styl
index dc05c80c..b0c3b49a 100644
--- a/client/css/forms.styl
+++ b/client/css/forms.styl
@@ -137,7 +137,8 @@ select,
 textarea,
 input[type=text],
 input[type=email],
-input[type=password]
+input[type=password],
+input[type=number]
     vertical-align: top
     font-family: 'Droid Sans', sans-serif
     font-size: 100%
diff --git a/client/html/settings.tpl b/client/html/settings.tpl
index dd453e5b..743d6cdc 100644
--- a/client/html/settings.tpl
+++ b/client/html/settings.tpl
@@ -8,6 +8,9 @@
                     <%= ctx.makeCheckbox({text: 'Enable keyboard shortcuts', id: 'keyboard-shortcuts', name: 'keyboard-shortcuts', checked: ctx.browsingSettings.keyboardShortcuts}) %>
                     <a class='append icon' href='/help/keyboard'><i class='fa fa-question-circle-o'></i></a>
                 </li>
+                <li>
+                    <%= ctx.makeNumericInput({text: 'Number of posts per page', id: 'posts-per-page', name: 'posts-per-page', checked: ctx.browsingSettings.postCount, min: 10, max: 100, value: ctx.browsingSettings.postsPerPage}) %>
+                </li>
                 <li>
                     <%= ctx.makeCheckbox({text: 'Upscale small posts', id: 'upscale-small-posts', name: 'upscale-small-posts', checked: ctx.browsingSettings.upscaleSmallPosts}) %>
                 </li>
diff --git a/client/js/controllers/post_list_controller.js b/client/js/controllers/post_list_controller.js
index 0ab6173b..3da718d1 100644
--- a/client/js/controllers/post_list_controller.js
+++ b/client/js/controllers/post_list_controller.js
@@ -29,7 +29,7 @@ class PostListController {
             requestPage: page => {
                 return PostList.search(
                     this._decorateSearchQuery(ctx.parameters.query),
-                    page, 40, fields);
+                    page, settings.get().postsPerPage, fields);
             },
             headerRenderer: headerCtx => {
                 Object.assign(headerCtx, {
diff --git a/client/js/models/settings.js b/client/js/models/settings.js
index 1324e6a1..6e49332f 100644
--- a/client/js/models/settings.js
+++ b/client/js/models/settings.js
@@ -14,6 +14,7 @@ const defaultSettings = {
     transparencyGrid: true,
     fitMode: 'fit-both',
     tagSuggestions: true,
+    postsPerPage: 40,
 };
 
 class Settings extends events.EventTarget {
diff --git a/client/js/util/misc.js b/client/js/util/misc.js
index 21647c38..5c05d738 100644
--- a/client/js/util/misc.js
+++ b/client/js/util/misc.js
@@ -244,7 +244,7 @@ function makeCssName(text, suffix) {
 }
 
 function escapeHtml(unsafe) {
-    return unsafe
+    return unsafe.toString()
         .replace(/&/g, '&amp;')
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;')
diff --git a/client/js/util/views.js b/client/js/util/views.js
index 41fde35b..49a62c7b 100644
--- a/client/js/util/views.js
+++ b/client/js/util/views.js
@@ -148,6 +148,11 @@ function makeColorInput(options) {
         'label', {class: 'color'}, colorInput + textInput);
 }
 
+function makeNumericInput(options) {
+    options.type = 'number';
+    return makeInput(options);
+}
+
 function getPostUrl(id, parameters) {
     let url = '/post/' + encodeURIComponent(id);
     if (parameters && parameters.query) {
@@ -344,6 +349,7 @@ function getTemplate(templatePath) {
             makeFlexboxAlign: makeFlexboxAlign,
             makeAccessKey: makeAccessKey,
             makeCssName: misc.makeCssName,
+            makeNumericInput: makeNumericInput,
         });
         return htmlToDom(templateFactory(ctx));
     };
diff --git a/client/js/views/settings_view.js b/client/js/views/settings_view.js
index b8e3555b..6b534c18 100644
--- a/client/js/views/settings_view.js
+++ b/client/js/views/settings_view.js
@@ -41,6 +41,8 @@ class SettingsView extends events.EventTarget {
                         '#transparency-grid').checked,
                     tagSuggestions: this._formNode.querySelector(
                         '#tag-suggestions').checked,
+                    postsPerPage: this._formNode.querySelector(
+                        '#posts-per-page').value,
                 },
             },
         }));