diff --git a/client/js/controllers/post_controller.js b/client/js/controllers/post_controller.js index ebaa80f1..c00e87b8 100644 --- a/client/js/controllers/post_controller.js +++ b/client/js/controllers/post_controller.js @@ -39,6 +39,8 @@ class PostController { 'unfavorite', e => this._evtUnfavoritePost(e)); this._view.sidebarControl.addEventListener( 'score', e => this._evtScorePost(e)); + this._view.sidebarControl.addEventListener( + 'fitModeChange', e => this._evtFitModeChange(e)); } if (this._view.commentFormControl) { this._view.commentFormControl.addEventListener( @@ -74,6 +76,12 @@ class PostController { return text.trim(); } + _evtFitModeChange(e) { + const browsingSettings = settings.get(); + browsingSettings.fitMode = e.detail.mode; + settings.save(browsingSettings); + } + _evtCommentChange(e) { misc.enableExitConfirmation(); } diff --git a/client/js/controls/post_content_control.js b/client/js/controls/post_content_control.js index 886caa15..b35e7382 100644 --- a/client/js/controls/post_content_control.js +++ b/client/js/controls/post_content_control.js @@ -13,7 +13,12 @@ class PostContentControl { this._install(); - this._currentFitFunction = this.fitBoth; + this._currentFitFunction = { + 'fit-both': this.fitBoth, + 'fit-original': this.fitOriginal, + 'fit-width': this.fitWidth, + 'fit-height': this.fitHeight, + }[settings.get().fitMode] || this.fitBoth; this._currentFitFunction(); } diff --git a/client/js/controls/post_readonly_sidebar_control.js b/client/js/controls/post_readonly_sidebar_control.js index c163ad6b..72db0be3 100644 --- a/client/js/controls/post_readonly_sidebar_control.js +++ b/client/js/controls/post_readonly_sidebar_control.js @@ -131,17 +131,25 @@ class PostReadonlySidebarControl extends events.EventTarget { e.target.blur(); func(); this._syncFitButton(); + this.dispatchEvent(new CustomEvent('fitModeChange', { + detail: { + mode: this._getFitMode(), + }, + })); }; } + _getFitMode() { + const funcToName = {}; + funcToName[this._postContentControl.fitBoth] = 'fit-both'; + funcToName[this._postContentControl.fitOriginal] = 'fit-original'; + funcToName[this._postContentControl.fitWidth] = 'fit-width'; + funcToName[this._postContentControl.fitHeight] = 'fit-height'; + return funcToName[this._postContentControl._currentFitFunction]; + } + _syncFitButton() { - const funcToClassName = {}; - funcToClassName[this._postContentControl.fitBoth] = 'fit-both'; - funcToClassName[this._postContentControl.fitOriginal] = 'fit-original'; - funcToClassName[this._postContentControl.fitWidth] = 'fit-width'; - funcToClassName[this._postContentControl.fitHeight] = 'fit-height'; - const className = funcToClassName[ - this._postContentControl._currentFitFunction]; + const className = this._getFitMode(); const oldNode = this._hostNode.querySelector('.zoom a.active'); const newNode = this._hostNode.querySelector(`.zoom a.${className}`); if (oldNode) { diff --git a/client/js/models/settings.js b/client/js/models/settings.js index 31eb862b..04c202d3 100644 --- a/client/js/models/settings.js +++ b/client/js/models/settings.js @@ -12,6 +12,7 @@ const defaultSettings = { endlessScroll: false, keyboardShortcuts: true, transparencyGrid: true, + fitMode: 'fit-both', }; class Settings extends events.EventTarget {