client/settings: add option to upscale small posts

client/html/settings.tpl

@@ -4,6 +4,9 @@
         <p>These settings are saved to the browser's local storage and are not coupled to the user account, so they don't apply to other devices or browsers alike.</p>
         <div class='input'>
             <ul>
+                <li>
+                    <%= ctx.makeCheckbox({text: 'Upscale small posts', id: 'upscale-small-posts', name: 'upscale-small-posts', checked: ctx.browsingSettings.upscaleSmallPosts}) %>
+                </li>
                 <li>
                     <%= ctx.makeCheckbox({text: 'Endless scroll', id: 'endless-scroll', name: 'endless-scroll', checked: ctx.browsingSettings.endlessScroll}) %>
                     <p class='hint'>Rather than using a paged navigation, smoothly scroll through the content.</p>

client/js/controls/post_content_control.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const settings = require('../settings.js');
 const views = require('../util/views.js');
 const optimizedResize = require('../util/optimized_resize.js');
 
@@ -22,23 +23,30 @@ class PostContentControl {
     fitWidth() {
         this._currentFitFunction = this.fitWidth;
         const mul = this._post.canvasHeight / this._post.canvasWidth;
-        this._resize(this._viewportWidth, this._viewportWidth * mul);
+        let width = this._viewportWidth;
+        if (!settings.getSettings().upscaleSmallPosts) {
+            width = Math.min(this._post.canvasWidth, width);
+        }
+        this._resize(width, width * mul);
     }
 
     fitHeight() {
         this._currentFitFunction = this.fitHeight;
         const mul = this._post.canvasWidth / this._post.canvasHeight;
-        this._resize(this._viewportHeight * mul, this._viewportHeight);
+        let height = this._viewportHeight;
+        if (!settings.getSettings().upscaleSmallPosts) {
+            height = Math.min(this._post.canvasHeight, height);
+        }
+        this._resize(height * mul, height);
     }
 
     fitBoth() {
         this._currentFitFunction = this.fitBoth;
         let mul = this._post.canvasHeight / this._post.canvasWidth;
         if (this._viewportWidth * mul < this._viewportHeight) {
-            this._resize(this._viewportWidth, this._viewportWidth * mul);
+            this.fitWidth();
         } else {
-            mul = this._post.canvasWidth / this._post.canvasHeight;
+            this.fitHeight();
-            this._resize(this._viewportHeight * mul, this._viewportHeight);
         }
     }
 

client/js/settings.js

@@ -10,6 +10,7 @@ function saveSettings(browsingSettings) {
 
 function getSettings(settings) {
     const defaultSettings = {
+        upscaleSmallPosts: false,
         endlessScroll: false,
         keyboardShortcuts: true,
     };

client/js/views/settings_view.js

@@ -18,6 +18,8 @@ class SettingsView {
             e.preventDefault();
             views.clearMessages(source);
             ctx.saveSettings({
+                upscaleSmallPosts:
+                    form.querySelector('#upscale-small-posts').checked,
                 endlessScroll:
                     form.querySelector('#endless-scroll').checked,
                 keyboardShortcuts: