Skip to content

Instantly share code, notes, and snippets.

@yi
Forked from jsteinbeck/StageResizer.js
Created September 30, 2015 19:16
Show Gist options
  • Save yi/48b0b866f8d3bdd63cd3 to your computer and use it in GitHub Desktop.
Save yi/48b0b866f8d3bdd63cd3 to your computer and use it in GitHub Desktop.
/* 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);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment