StageResizer.js

/* global window */

function StageResizer (stageElement, options) {
    
    options = options || {};
    
    this._element = stageElement;
    this._stageWidth = options.stageWidth || stageElement.offsetWidth || 1;
    this._stageHeight = options.stageWidth || stageElement.offsetWidth || 1;
    this._snapToEdge = options.snapToEdge || true;
    this._snapThresholdX = options.snapThresholdX || 20;
    this._snapThresholdY = options.snapThresholdY || 16;
}

StageResizer.resizeElementToWindow = function (el, STAGE_WIDTH, STAGE_HEIGHT, snapToEdge,
        diffLimitX, diffLimitY) {
    
    var ratio, sw, sh, ratioW, ratioH, diffX = 0, diffY = 0;
    
    snapToEdge = snapToEdge === false ? false : true;
    diffLimitX = typeof diffLimitX === "number" ? diffLimitX : 20;
    diffLimitY = typeof diffLimitY === "number" ? diffLimitY : 16;
    
    sw = window.innerWidth;
    sh = window.innerHeight;
    
    ratioW = sw / STAGE_WIDTH;
    ratioH = sh / STAGE_HEIGHT;
    
    ratio = ratioW > ratioH ? ratioH : ratioW;
    
    diffX = Math.abs(100 - ((STAGE_WIDTH * ratio) / (sw / 100)));
    diffY = Math.abs(100 - ((STAGE_HEIGHT * ratio) / (sh / 100)));
    
    if (snapToEdge && (!diffLimitX || diffX < diffLimitX) &&
            (!diffLimitY || diffY < diffLimitY)) {
        
        el.setAttribute('style',
            el.getAttribute('style') + 
                ' -moz-transform: scale(' + ratioW + ',' + ratioH + ') rotate(0.01deg);' +
                ' -ms-transform: scale(' + ratioW + ',' + ratioH + ');' +
                ' -o-transform: scale(' + ratioW + ',' + ratioH + ');' +
                ' -webkit-transform: scale(' + ratioW + ',' + ratioH + ');' +
                ' transform: scale(' + ratioW + ',' + ratioH + ');');
    }
    else {
        
        el.setAttribute('style',
            el.getAttribute('style') + 
                ' -moz-transform: scale(' + ratio + ',' + ratio + ') rotate(0.01deg);' +
                ' -ms-transform: scale(' + ratio + ',' + ratio + ');' +
                ' -o-transform: scale(' + ratio + ',' + ratio + ');' +
                ' -webkit-transform: scale(' + ratio + ',' + ratio + ');' +
                ' transform: scale(' + ratio + ',' + ratio + ');');
        
    }
    
    el.setAttribute('style', el.getAttribute("style") + 'position: absolute; left: ' +
        ((sw - STAGE_WIDTH) / 2) + 'px; top: ' +
        ((sh - STAGE_HEIGHT) / 2) + 'px;');
};

StageResizer.prototype.resizeToWindow = function () {
    StageResizer.resizeElementToWindow(this._element, this._stageWidth, this._stageHeight,
        this._snapToEdge, this._snapThresholdX, this._snapThresholdY);
};