client/settings: add posts per page option

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%

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>

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, {

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 {

client/js/util/misc.js

@@ -244,7 +244,7 @@ function makeCssName(text, suffix) {
 }
 
 function escapeHtml(unsafe) {
-    return unsafe
+    return unsafe.toString()
         .replace(/&/g, '&')
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;')

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));
     };

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,
                 },
             },
         }));