2015-06-30 17:40:10 -04:00
|
|
|
function ContainElement(options) {
|
2015-09-08 00:23:16 -04:00
|
|
|
var scaleFactor = 1,
|
|
|
|
element = document.getElementById(options.id),
|
|
|
|
elementWidth = options.width || element.offsetWidth,
|
|
|
|
elementHeight = options.height || element.offsetHeight,
|
|
|
|
valign = options.valign || 'center',
|
|
|
|
halign = options.halign || 'center';
|
2015-06-30 16:10:22 -04:00
|
|
|
|
2015-09-04 14:15:36 -04:00
|
|
|
// Apply required attributes to the element and its parents
|
|
|
|
element.style.position = 'absolute';
|
|
|
|
element.parentElement.style.overflow = 'hidden';
|
|
|
|
if (['relative', 'absolute', 'fixed'].indexOf(window.getComputedStyle(element.parentElement, null).getPropertyValue('position')) === -1)
|
|
|
|
element.parentElement.style.position = 'relative';
|
2015-06-30 16:10:22 -04:00
|
|
|
|
2015-09-04 14:15:36 -04:00
|
|
|
function updateContain() {
|
2015-09-08 00:23:16 -04:00
|
|
|
var parentWidth = element.parentElement.offsetWidth,
|
|
|
|
parentHeight = element.parentElement.offsetHeight;
|
2015-06-30 16:10:22 -04:00
|
|
|
|
2015-09-04 14:15:36 -04:00
|
|
|
// Run the scale/position functionality if able to determine the parent element's width and height
|
|
|
|
if ((parentWidth) && (parentHeight)) {
|
|
|
|
// Calculate the scale factor
|
|
|
|
if (parentWidth > ((parentHeight / (elementHeight * scaleFactor)) * (elementWidth * scaleFactor)))
|
|
|
|
scaleFactor = (parentWidth / elementWidth);
|
|
|
|
else
|
|
|
|
scaleFactor = (parentHeight / elementHeight);
|
2015-06-30 16:10:22 -04:00
|
|
|
|
2015-09-04 14:15:36 -04:00
|
|
|
// Scale the element using the scale factor
|
|
|
|
element.style.width = (elementWidth * scaleFactor) + 'px';
|
|
|
|
element.style.height = (elementHeight * scaleFactor) + 'px';
|
2015-06-30 16:10:22 -04:00
|
|
|
|
2015-09-04 14:15:36 -04:00
|
|
|
// Anchor the element horizontally to the left/center/right
|
|
|
|
if (parentWidth < (elementWidth * scaleFactor)) {
|
2015-09-08 00:23:16 -04:00
|
|
|
switch(halign) {
|
2015-09-04 14:15:36 -04:00
|
|
|
case 'left':
|
|
|
|
// Anchor horizontally to the left of the parent element
|
|
|
|
element.style.left = 0 + 'px';
|
|
|
|
break;
|
|
|
|
case 'right':
|
|
|
|
// Anchor horizontally to the right of the parent element
|
|
|
|
element.style.left = (0 - ((elementWidth * scaleFactor) - parentWidth)) + 'px';
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
// Anchor horizontally to the center of the parent element
|
|
|
|
element.style.left = (0 - (((elementWidth * scaleFactor) - parentWidth) / 2)) + 'px';
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
element.style.left = 0 + 'px';
|
|
|
|
}
|
2015-06-30 16:10:22 -04:00
|
|
|
|
2015-09-04 14:15:36 -04:00
|
|
|
// Anchor the element vertically to the top/center/bottom
|
|
|
|
if ((elementHeight * scaleFactor) > parentHeight) {
|
2015-09-08 00:23:16 -04:00
|
|
|
switch(valign) {
|
2015-09-04 14:15:36 -04:00
|
|
|
case 'top':
|
|
|
|
// Anchor vertically to the top of the parent element
|
|
|
|
element.style.top = 0 + 'px';
|
|
|
|
break;
|
|
|
|
case 'bottom':
|
|
|
|
// Anchor veritcally to the bottom of the parent element
|
|
|
|
element.style.top = (0 - ((elementHeight * scaleFactor) - parentHeight)) + 'px';
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
// Anchor vertically to the center of the parent element
|
|
|
|
element.style.top = (0 - (((elementHeight * scaleFactor) - parentHeight) / 2)) + 'px';
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
element.style.top = 0 + 'px';
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
// Try again in 30ms if the document didn't load enough to determine the parent element's width and height yet
|
|
|
|
window.setTimeout(updateContain, 30);
|
|
|
|
}
|
|
|
|
}
|
2015-06-30 16:10:22 -04:00
|
|
|
|
2015-09-04 14:15:36 -04:00
|
|
|
// Run the function to scale and anchor the element
|
|
|
|
updateContain();
|
2015-06-30 17:40:10 -04:00
|
|
|
|
2015-09-08 00:23:16 -04:00
|
|
|
// External scale and anchor update function
|
2015-09-04 14:15:36 -04:00
|
|
|
this.update = updateContain;
|
2015-09-04 14:26:56 -04:00
|
|
|
|
2015-09-08 00:23:16 -04:00
|
|
|
// External function to set elementWidth
|
|
|
|
this.setWidth = function(newWidth) { elementWidth = newWidth; };
|
|
|
|
|
|
|
|
// External function to set elementHeight
|
|
|
|
this.setHeight = function(newHeight) { elementHeight = newHeight; };
|
|
|
|
|
|
|
|
// External function to set valign
|
|
|
|
this.setValign = function(newValign) { valign = newValign; };
|
|
|
|
|
|
|
|
// External function to set halign
|
|
|
|
this.setHalign = function(newHalign) { halign = newHalign; };
|
|
|
|
|
2015-09-08 00:24:22 -04:00
|
|
|
// External function to return the current elementWidth
|
2015-09-08 00:23:16 -04:00
|
|
|
this.getWidth = function() { return elementWidth; };
|
|
|
|
|
2015-09-08 00:24:22 -04:00
|
|
|
// External function to return the current elementHeight
|
2015-09-08 00:23:16 -04:00
|
|
|
this.getHeight = function() { return elementHeight; };
|
|
|
|
|
2015-09-08 00:24:22 -04:00
|
|
|
// External function to return the current valign
|
2015-09-08 00:23:16 -04:00
|
|
|
this.getValign = function() { return valign; };
|
|
|
|
|
2015-09-08 00:24:22 -04:00
|
|
|
// External function to return the current halign
|
2015-09-08 00:23:16 -04:00
|
|
|
this.getHalign = function() { return halign; };
|
|
|
|
|
|
|
|
// External function to return the current scale factor
|
2015-09-04 14:26:56 -04:00
|
|
|
this.getScale = function() { return scaleFactor; };
|
2015-06-30 16:10:22 -04:00
|
|
|
}
|
|
|
|
|