Skip to content

Instantly share code, notes, and snippets.

@joseluisq
Created August 12, 2014 18:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joseluisq/d8c1484edb1407743714 to your computer and use it in GitHub Desktop.
Save joseluisq/d8c1484edb1407743714 to your computer and use it in GitHub Desktop.
Useful class for resize DOM Javascript objects
/*
name: uSizer
description: Useful class for resize DOM objects
license: MIT-Style License <http://joseluisquintana.pe/license.txt>
copyright: Jose Luis Quintana <http://joseluisquintana.pe/>
authors: Jose Luis Quintana <joseluisquintana20@gmail.com>
*/
function uSizer(parent, child) {
this.version = '1.0';
this.child = null;
this.parent = null;
this.initialize = function(parent, child) {
this.setParent(parent);
this.setChild(child);
};
this.setChild = function(element) {
this.child = element;
};
this.setParent = function(element) {
this.parent = element;
};
this.resizeToHeight = function(height) {
this.resize(this.getPropWidth(height), height);
};
this.resizeToWidth = function(width) {
this.resize(width, this.getPropHeight(width));
};
this.getPropWidth = function(height) {
return this.child.offsetWidth * (height / this.child.offsetHeight);
};
this.getPropHeight = function(width) {
return this.child.offsetHeight * (width / this.child.offsetWidth);
};
this.scale = function(scale) {
this.resize(this.child.offsetWidth * scale / 100, this.child.offsetHeight * scale / 100);
};
this.centerCropResize = function() {
var width, height, pwidth, pheight;
if (arguments.length === 2) {
width = arguments[0];
height = arguments[1];
} else {
width = this.parent.offsetWidth;
height = this.parent.offsetHeight;
}
pwidth = this.getPropWidth(height);
pheight = this.getPropHeight(width);
if (pwidth === width && pheight === height) {
this.resizeToWidth(width);
} else {
if (pheight > height) {
this.resizeToWidth(width);
} else {
pheight += height - pheight;
this.resizeToHeight(pheight);
}
this.croper(width, height, (this.child.offsetWidth - width) / 2, (this.child.offsetHeight - height) / 2);
}
};
this.centerCrop = function() {
var width = this.parent.offsetWidth, height = this.parent.offsetHeight;
this.croper(width, height, (this.child.offsetWidth - width) / 2, (this.child.offsetHeight - height) / 2);
};
this.crop = function(x, y) {
this.croper(this.parent.offsetWidth, this.parent.offsetHeight, x, y);
};
this.croper = function(width, height, x, y) {
this.resize(width, height, x, y, true);
};
this.resize = function(width, height, x, y, crop) {
if (crop) {
if (this.parent) {
this.parent.style.height = height + 'px';
this.parent.style.width = width + 'px';
}
if (this.child) {
this.child.style.position = 'absolute';
this.child.style.marginTop = -y + 'px';
this.child.style.marginLeft = -x + 'px';
}
} else {
if (this.child) {
this.child.style.height = height + 'px';
this.child.style.width = width + 'px';
}
}
};
if (parent && child) {
this.initialize(parent, child);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment