preceptorjs/taxi

View on GitHub
lib/scripts/devicePixelRatio.js

Summary

Maintainability
A
3 hrs
Test Coverage
module.exports = {

    // This is done to fix some issues with Chrome:
    // http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
    // The property window.devicePixelRatio cannot be trusted in most browsers (if even available).

    /**
     * Initialize the device-pixel-ratio determination,
     * collecting information that need to be reverted later on and
     * modifying the document for device-pixel-ratio data.
     *
     * @method init
     * @param {int} horizontalPadding
     */
    init: function (horizontalPadding) {
        var de = document.documentElement,
            body = document.body,
            el, initData;

        // Create a div to figure out the size of the view-port across browsers
        el = document.createElement('div');
        el.style.position = "fixed";
        el.style.top = 0;
        el.style.left = 0;
        el.style.bottom = 0;
        el.style.right = 0;
        de.insertBefore(el, de.firstChild);

        initData = {
            bodyOverflow: body.style.overflow,
            bodyWidth: body.style.width,
            bodyHeight: body.style.height,
            documentWidth: Math.max(body.scrollWidth, body.offsetWidth, de.clientWidth, de.scrollWidth, de.offsetWidth),
            devicePixelRatio: window.devicePixelRatio || 1,
            padding: body.style.padding,
            viewPortWidth: el.offsetWidth,
            horizontalPadding: horizontalPadding
        };

        de.removeChild(el);

        // Remove scrollbars
        body.style.overflow = 'hidden';

        // Make document only one pixel height and as wide as the view-port
        body.style.width = (initData.viewPortWidth - horizontalPadding) + 'px';
        body.style.height = '1px';
        body.style.minHeight = '0';
        body.style.minWidth = '0';

        de.style.width = (initData.viewPortWidth - horizontalPadding) + 'px';
        de.style.height = '1px';
        de.style.minHeight = '0';
        de.style.minWidth = '0';
        de.style.overflow = 'hidden';

        return JSON.stringify(initData);
    },

    /**
     * Reverts all changes done to the document in the init
     *
     * @method revert
     * @param {object} initData Data gathered during init-phase
     */
    revert: function (initData) {
        var body = document.body;

        body.style.overflow = initData.bodyOverflow;
        body.style.width = initData.bodyWidth;
        body.style.height = initData.bodyHeight;
    }
};