Vertical 2-page layout for viewer.js

crocodoc.viewer.layout-vertical-two-page.js

/**
 * @fileoverview layout-vertical-two-page component definition
 * @author lakenen
 */

/**
 * The vertical-two-page layout
 */
Crocodoc.addComponent('layout-vertical-two-page', ['layout-' + Crocodoc.LAYOUT_VERTICAL], function (scope, vertical) {

    'use strict';

    //--------------------------------------------------------------------------
    // Public
    //--------------------------------------------------------------------------

    return vertical.extend({
        /**
         * Initialize the vertical-two-page layout component
         * @returns {void}
         */
        init: function () {
            this.twoPageMode = true;
            vertical.init.call(this);
        },

        /**
         * Calculates the next page
         * @returns {int} The next page number
         */
        calculateNextPage: function () {
            return this.state.currentPage + 2;
        },

        /**
         * Calculates the previous page
         * @returns {int} The previous page number
         */
        calculatePreviousPage: function () {
            return this.state.currentPage - 2;
        },

        /**
         * Calculate the numeric value for a given zoom mode (or return the value if it's already numeric)
         * @param   {string} mode The mode to zoom to
         * @returns {float}       The zoom value
         */
        calculateZoomValue: function (mode) {
            var baseVal = vertical.calculateZoomValue.call(this, mode);
            if (mode === Crocodoc.ZOOM_FIT_WIDTH) {
                baseVal /= 2;
            }
            return baseVal;
        },

        /**
         * Scroll to the given page number
         * @param   {int} page The page number to scroll to
         * @returns {void}
         */
        scrollToPage: function (page) {
            // pick the left page
            vertical.scrollToPage.call(this, page - (page + 1) % 2);
        },

        /**
         * Updates the layout elements (pages, doc, etc) CSS
         * appropriately for the current zoom level
         * @returns {void}
         */
        updateLayout: function () {
            vertical.updateLayout.call(this);

            var state = this.state,
                zoomState = state.zoomState,
                zoom = zoomState.zoom,
                page = this.currentPage || 1,
                currentPage = state.pages[page - 1],
                secondPage = this.twoPageMode ? state.pages[page] : currentPage,
                zoomedWidth;

            zoomedWidth = Math.floor((currentPage.totalActualWidth + secondPage.totalActualWidth) * zoom);

            this.$doc.css({
                margin: '0 auto',
                width: zoomedWidth + 2 // account for rounding errors
            });
        }
    });
});

See box/viewer.js#59 for more details.