2015-06-30 17:40:10 -04:00
|
|
|
function ContainElement(options) {
|
2015-09-08 00:23:16 -04:00
|
|
|
var scaleFactor = 1,
|
2017-01-13 15:47:52 -05:00
|
|
|
element = options.element || document.getElementById(options.id),
|
2015-09-08 00:23:16 -04:00
|
|
|
elementWidth = options.width || element.offsetWidth,
|
|
|
|
elementHeight = options.height || element.offsetHeight,
|
2016-06-20 16:53:45 -04:00
|
|
|
valign = options.valign || "center",
|
2017-05-24 14:32:16 -04:00
|
|
|
halign = options.halign || "center",
|
|
|
|
scale = options.scale;
|
2015-06-30 16:10:22 -04:00
|
|
|
|
2016-06-20 16:53:45 -04:00
|
|
|
// Apply required attributes to the element
|
|
|
|
element.style.position = "absolute";
|
|
|
|
element.parentElement.style.overflow = "hidden";
|
|
|
|
|
2017-05-24 14:32:16 -04:00
|
|
|
// Apply required transform-origin if the scale option is set to true
|
|
|
|
if (scale) {
|
|
|
|
element.style.transformOrigin = "left top";
|
|
|
|
}
|
|
|
|
|
2016-06-20 16:53:45 -04:00
|
|
|
// Apply relative position to the parent if it doesn't already have relative, absolute or fixed positioning
|
|
|
|
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
|
2016-06-20 16:53:45 -04:00
|
|
|
if (parentWidth && parentHeight) {
|
2015-09-04 14:15:36 -04:00
|
|
|
// Calculate the scale factor
|
2016-06-20 16:53:45 -04:00
|
|
|
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
|
2017-05-24 14:32:16 -04:00
|
|
|
if (scale) {
|
|
|
|
element.style.transform = "scale(" + scaleFactor + ")";
|
|
|
|
} else {
|
|
|
|
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
|
2016-06-20 16:53:45 -04:00
|
|
|
if (parentWidth < elementWidth * scaleFactor) {
|
|
|
|
switch (halign) {
|
|
|
|
case "left":
|
2015-09-04 14:15:36 -04:00
|
|
|
// Anchor horizontally to the left of the parent element
|
2016-06-20 16:53:45 -04:00
|
|
|
element.style.left = "0px";
|
2015-09-04 14:15:36 -04:00
|
|
|
break;
|
2016-06-20 16:53:45 -04:00
|
|
|
|
|
|
|
case "right":
|
2015-09-04 14:15:36 -04:00
|
|
|
// Anchor horizontally to the right of the parent element
|
2016-06-20 16:53:45 -04:00
|
|
|
element.style.left = 0 - (elementWidth * scaleFactor - parentWidth) + "px";
|
2015-09-04 14:15:36 -04:00
|
|
|
break;
|
2016-06-20 16:53:45 -04:00
|
|
|
|
2015-09-04 14:15:36 -04:00
|
|
|
default:
|
|
|
|
// Anchor horizontally to the center of the parent element
|
2016-06-20 16:53:45 -04:00
|
|
|
element.style.left = 0 - (elementWidth * scaleFactor - parentWidth) / 2 + "px";
|
2015-09-04 14:15:36 -04:00
|
|
|
}
|
|
|
|
} else {
|
2016-06-20 16:53:45 -04:00
|
|
|
element.style.left = "0px";
|
2015-09-04 14:15:36 -04:00
|
|
|
}
|
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
|
2016-06-20 16:53:45 -04:00
|
|
|
if (elementHeight * scaleFactor > parentHeight) {
|
|
|
|
switch (valign) {
|
|
|
|
case "top":
|
2015-09-04 14:15:36 -04:00
|
|
|
// Anchor vertically to the top of the parent element
|
2016-06-20 16:53:45 -04:00
|
|
|
element.style.top = "0px";
|
2015-09-04 14:15:36 -04:00
|
|
|
break;
|
2016-06-20 16:53:45 -04:00
|
|
|
|
|
|
|
case "bottom":
|
2015-09-04 14:15:36 -04:00
|
|
|
// Anchor veritcally to the bottom of the parent element
|
2016-06-20 16:53:45 -04:00
|
|
|
element.style.top = 0 - (elementHeight * scaleFactor - parentHeight) + "px";
|
2015-09-04 14:15:36 -04:00
|
|
|
break;
|
2016-06-20 16:53:45 -04:00
|
|
|
|
2015-09-04 14:15:36 -04:00
|
|
|
default:
|
|
|
|
// Anchor vertically to the center of the parent element
|
2016-06-20 16:53:45 -04:00
|
|
|
element.style.top = 0 - (elementHeight * scaleFactor - parentHeight) / 2 + "px";
|
2015-09-04 14:15:36 -04:00
|
|
|
}
|
|
|
|
} else {
|
2016-06-20 16:53:45 -04:00
|
|
|
element.style.top = "0px";
|
2015-09-04 14:15:36 -04:00
|
|
|
}
|
|
|
|
} 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
|
|
|
}
|