szurubooru/public_html/js/Presenters/PostContentPresenter.js

var App = App || {};
App.Presenters = App.Presenters || {};

App.Presenters.PostContentPresenter = function(
    jQuery,
    util,
    promise,
    keyboard,
    presenterManager,
    postNotesPresenter,
    browsingSettings) {

    var post;
    var templates = {};
    var $target;
    var $wrapper;

    function init(params, loaded) {
        $target = params.$target;
        post = params.post;

        promise.wait(util.promiseTemplate('post-content'))
            .then(function(postContentTemplate) {
                templates.postContent = postContentTemplate;
                render();
                loaded();
            }).fail(function() {
                console.log(arguments);
                loaded();
            });
    }

    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;

        return {
            'fit-both': function(allowUpscale) {
                var width = containerWidth;
                var height = containerWidth / ratio;
                if (height > containerHeight) {
                    width = containerHeight * ratio;
                    height = containerHeight;
                }
                if (!allowUpscale) {
                    if (width > originalWidth) {
                        width = originalWidth;
                        height = originalWidth / ratio;
                    }
                    if (height > originalHeight) {
                        width = originalHeight * ratio;
                        height = originalHeight;
                    }
                }
                $wrapper.css({maxWidth: width + 'px'});
            },
            'fit-height': function(allowUpscale) {
                var width = containerHeight * ratio;
                if (width > originalWidth && !allowUpscale) {
                    width = originalWidth;
                }
                $wrapper.css({maxWidth: width + 'px'});
            },
            'fit-width': function(allowUpscale) {
                if (allowUpscale) {
                    $wrapper.css({maxWidth: containerWidth + 'px'});
                } else {
                    $wrapper.css({maxWidth: originalWidth + 'px'});
                }
            },
            'original': function(allowUpscale) {
                $wrapper.css({
                    minWidth: originalWidth + 'px',
                    width: originalWidth + 'px'});
            }
        };
    }

    function getFitMode() {
        return $wrapper.data('fit-mode');
    }

    function changeFitMode(fitMode) {
        $wrapper.data('fit-mode', fitMode);
        $wrapper.css({
            width: '', height: '',
            minWidth: '', minHeight: '',
            maxWidth: '', maxHeight: '',
        });
        getFitters()[fitMode.style](fitMode.upscale);
        updatePostNotesSize();
    }

    function cycleFitMode() {
        var oldMode = getFitMode();
        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' || post.contentType === 'animation') {
            loadPostNotes();
            updatePostNotesSize();
        }

        changeFitMode({
            style: browsingSettings.getSettings().fitMode,
            upscale: browsingSettings.getSettings().upscale,
        });
        keyboard.keyup('f', cycleFitMode);

        jQuery(window).resize(updatePostNotesSize);
    }

    function loadPostNotes() {
        presenterManager.initPresenters([
            [postNotesPresenter, {post: post, notes: post.notes, $target: $target.find('.post-notes-target')}]],
            function() {});
    }

    function updatePostNotesSize() {
        var $postNotes = $target.find('.post-notes-target');
        var $wrapper = $target.find('.object-wrapper');
        $postNotes.css({
            width: $wrapper.outerWidth() + 'px',
            height: $wrapper.outerHeight() + 'px',
            left: ($wrapper.offset().left - $wrapper.parent().offset().left) + 'px',
            top: ($wrapper.offset().top - $wrapper.parent().offset().top) + 'px',
        });
    }

    function addNewPostNote() {
        postNotesPresenter.addNewPostNote();
    }

    return {
        init: init,
        render: render,
        addNewPostNote: addNewPostNote,
        updatePostNotesSize: updatePostNotesSize,
        getFitMode: getFitMode,
        changeFitMode: changeFitMode,
        cycleFitMode: cycleFitMode,
    };
};

App.DI.register('postContentPresenter', [
    'jQuery',
    'util',
    'promise',
    'keyboard',
    'presenterManager',
    'postNotesPresenter',
    'browsingSettings'],
    App.Presenters.PostContentPresenter);