From 6380043a9a3fa67127467abbfa157c554200f1e3 Mon Sep 17 00:00:00 2001
From: rr- <mkurczew@gmail.com>
Date: Sun, 19 Jul 2015 18:30:20 +0200
Subject: [PATCH] Added option to upscale small posts
---
public_html/js/BrowsingSettings.js | 1 +
.../js/Presenters/PostContentPresenter.js | 78 ++++++++++---------
public_html/js/Presenters/PostPresenter.js | 11 ++-
.../UserBrowsingSettingsPresenter.js | 1 +
public_html/templates/browsing-settings.tpl | 8 ++
5 files changed, 61 insertions(+), 38 deletions(-)
diff --git a/public_html/js/BrowsingSettings.js b/public_html/js/BrowsingSettings.js
index 4f1f3fd4..856057a0 100644
--- a/public_html/js/BrowsingSettings.js
+++ b/public_html/js/BrowsingSettings.js
@@ -34,6 +34,7 @@ App.BrowsingSettings = function(
},
keyboardShortcuts: true,
fitMode: 'fit-width',
+ upscale: false,
};
}
diff --git a/public_html/js/Presenters/PostContentPresenter.js b/public_html/js/Presenters/PostContentPresenter.js
index 4cb93778..698037be 100644
--- a/public_html/js/Presenters/PostContentPresenter.js
+++ b/public_html/js/Presenters/PostContentPresenter.js
@@ -13,6 +13,7 @@ App.Presenters.PostContentPresenter = function(
var post;
var templates = {};
var $target;
+ var $wrapper;
function init(params, loaded) {
$target = params.$target;
@@ -29,57 +30,67 @@ App.Presenters.PostContentPresenter = function(
});
}
- var fitters = {
- 'fit-height': function($wrapper) {
- var originalWidth = $wrapper.attr('data-width');
- var originalHeight = $wrapper.attr('data-height');
- var ratio = originalWidth / originalHeight;
- var height = jQuery(window).height() - $wrapper.offset().top;
- var width = (height - 10) * ratio;
- if (width > originalWidth) {
- width = originalWidth;
- }
- $wrapper.css({maxWidth: width + 'px', width: ''});
- },
- 'fit-width': function($wrapper) {
- var originalWidth = $wrapper.attr('data-width');
- $wrapper.css({maxWidth: originalWidth + 'px', width: ''});
- },
- 'original': function($wrapper) {
- var originalWidth = $wrapper.attr('data-width');
- $wrapper.css({maxWidth: '', width: originalWidth + 'px'});
- }
- };
- var fitterNames = Object.keys(fitters);
+ function getFitters() {
+ var originalWidth = $wrapper.attr('data-width');
+ var originalHeight = $wrapper.attr('data-height');
+ var ratio = originalWidth / originalHeight;
+ var containerHeight = jQuery(window).height() - $wrapper.offset().top - 10;
+ var containerWidth = $wrapper.parent().outerWidth() - 10;
- function getFitMode() {
- var $wrapper = $target.find('.object-wrapper');
- return $wrapper.data('current-fit');
+ return {
+ 'fit-height': function(allowUpscale) {
+ var width = containerHeight * ratio;
+ if (width > originalWidth && !allowUpscale) {
+ width = originalWidth;
+ }
+ $wrapper.css({maxWidth: width + 'px', width: ''});
+ },
+ 'fit-width': function(allowUpscale) {
+ if (allowUpscale) {
+ $wrapper.css({maxWidth: containerWidth + 'px', width: ''});
+ } else {
+ $wrapper.css({maxWidth: originalWidth + 'px', width: ''});
+ }
+ },
+ 'original': function(allowUpscale) {
+ $wrapper.css({maxWidth: '', width: originalWidth + 'px'});
+ }
+ };
}
- function changeFitMode(mode) {
- var $wrapper = $target.find('.object-wrapper');
- $wrapper.data('current-fit', mode);
- fitters[$wrapper.data('current-fit')]($wrapper);
+ function getFitMode() {
+ return $wrapper.data('fit-mode');
+ }
+
+ function changeFitMode(fitMode) {
+ $wrapper.data('fit-mode', fitMode);
+ getFitters()[fitMode.style](fitMode.upscale);
updatePostNotesSize();
}
function cycleFitMode() {
- var $wrapper = $target.find('.object-wrapper');
var oldMode = getFitMode();
- var newMode = fitterNames[(fitterNames.indexOf(oldMode) + 1) % fitterNames.length];
+ var fitterNames = Object.keys(getFitters());
+ var newMode = {
+ style: fitterNames[(fitterNames.indexOf(oldMode.style) + 1) % fitterNames.length],
+ upscale: oldMode.upscale,
+ };
changeFitMode(newMode);
}
function render() {
$target.html(templates.postContent({post: post}));
+ $wrapper = $target.find('.object-wrapper');
if (post.contentType === 'image') {
loadPostNotes();
updatePostNotesSize();
}
- changeFitMode(browsingSettings.getSettings().fitMode);
+ changeFitMode({
+ style: browsingSettings.getSettings().fitMode,
+ upscale: browsingSettings.getSettings().upscale,
+ });
keyboard.keyup('f', cycleFitMode);
jQuery(window).resize(updatePostNotesSize);
@@ -111,9 +122,6 @@ App.Presenters.PostContentPresenter = function(
render: render,
addNewPostNote: addNewPostNote,
updatePostNotesSize: updatePostNotesSize,
- fitWidth: function() { changeFitMode('fit-width'); },
- fitHeight: function() { changeFitMode('fit-height'); },
- fitOriginal: function() { changeFitMode('original'); },
getFitMode: getFitMode,
changeFitMode: changeFitMode,
cycleFitMode: cycleFitMode,
diff --git a/public_html/js/Presenters/PostPresenter.js b/public_html/js/Presenters/PostPresenter.js
index 15218af8..d313c232 100644
--- a/public_html/js/Presenters/PostPresenter.js
+++ b/public_html/js/Presenters/PostPresenter.js
@@ -212,10 +212,10 @@ App.Presenters.PostPresenter = function(
}
function syncFitModeButtons() {
- var fitMode = postContentPresenter.getFitMode();
+ var fitStyle = postContentPresenter.getFitMode().style;
$el.find('#sidebar .fit-mode a').each(function(i, item) {
var $item = jQuery(item);
- $item.toggleClass('active', $item.attr('data-fit-mode') === fitMode);
+ $item.toggleClass('active', $item.attr('data-fit-mode') === fitStyle);
});
}
@@ -229,7 +229,12 @@ App.Presenters.PostPresenter = function(
function fitModeButtonsClicked(e) {
e.preventDefault();
- postContentPresenter.changeFitMode(jQuery(e.target).attr('data-fit-mode'));
+ var oldMode = postContentPresenter.getFitMode();
+ var newMode = {
+ style: jQuery(e.target).attr('data-fit-mode'),
+ upscale: oldMode.upscale,
+ };
+ postContentPresenter.changeFitMode(newMode);
syncFitModeButtons();
}
diff --git a/public_html/js/Presenters/UserBrowsingSettingsPresenter.js b/public_html/js/Presenters/UserBrowsingSettingsPresenter.js
index db129e21..3c8d5b2c 100644
--- a/public_html/js/Presenters/UserBrowsingSettingsPresenter.js
+++ b/public_html/js/Presenters/UserBrowsingSettingsPresenter.js
@@ -53,6 +53,7 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
},
keyboardShortcuts: $el.find('[name=keyboardShortcuts]').is(':checked'),
fitMode: $el.find('[name=fitMode]:checked').val(),
+ upscale: $el.find('[name=upscale]').is(':checked'),
};
promise.wait(browsingSettings.setSettings(newSettings))
diff --git a/public_html/templates/browsing-settings.tpl b/public_html/templates/browsing-settings.tpl
index fc51a058..7747b71d 100644
--- a/public_html/templates/browsing-settings.tpl
+++ b/public_html/templates/browsing-settings.tpl
@@ -58,16 +58,24 @@
<label for="browsing-settings-fit-width">
Fit width
</label>
+ <br/>
<input <% print(settings.fitMode === 'fit-height' ? 'checked="checked"' : '') %> type="radio" id="browsing-settings-fit-height" name="fitMode" value="fit-height"/>
<label for="browsing-settings-fit-height">
Fit height
</label>
+ <br/>
<input <% print(settings.fitMode === 'original' ? 'checked="checked"' : '') %> type="radio" id="browsing-settings-fit-original" name="fitMode" value="original"/>
<label for="browsing-settings-fit-original">
Original
</label>
+ <br/>
+
+ <input <% print(settings.upscale ? 'checked="checked"' : '') %> type="checkbox" id="browsing-settings-upscale" name="upscale" value="upscale"/>
+ <label for="browsing-settings-upscale">
+ Upscale small posts
+ </label>
</div>
</div>