Added option to upscale small posts
This commit is contained in:
rr-
parent
b75df289e9
commit
6380043a9a
5 changed files with 61 additions and 38 deletions
|
|
@ -34,6 +34,7 @@ App.BrowsingSettings = function(
|
|||
},
|
||||
keyboardShortcuts: true,
|
||||
fitMode: 'fit-width',
|
||||
upscale: false,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue