diff --git a/README.md b/README.md index 126a7f1..4fbb316 100644 --- a/README.md +++ b/README.md @@ -24,8 +24,8 @@ window.onload = function() { id: "element", // the id of the element to be contained (alternative to 'element') width: 100, // (optional) native element width in pixels (unset: detected element width) height: 100, // (optional) native element height in pixels (unset: detected element height) - valign: "top", // (optional) vertical alignment: center|top|bottom (unset: center) - halign: "left", // (optional) horizontal alignment: center|left|right (unset: center) + valign: "top", // (optional) vertical alignment: 0-100 (percent) or center|top|bottom (unset: center) + halign: "20", // (optional) horizontal alignment: 0-100 (percent) or center|left|right (unset: center) fit: "contain", // (optional) object fit: cover|contain (unset: cover) scale: true // (optional) use transform scale instead of width and height (unset: false) }); diff --git a/contain-element-module.js b/contain-element-module.js index 39963fa..563618d 100644 --- a/contain-element-module.js +++ b/contain-element-module.js @@ -22,9 +22,47 @@ module.exports = function(options) { element.parentElement.style.position = "relative"; } + // Convert halign to decimal percent + switch (halign) { + case "left": + halign = 0; + break; + + case "center": + halign = 0.5; + break; + + case "right": + halign = 1; + break; + + default: + halign = Number(halign) / 100; + } + + // Convert valign to decimal percent + switch (valign) { + case "top": + valign = 0; + break; + + case "center": + valign = 0.5; + break; + + case "bottom": + valign = 1; + break; + + default: + valign = Number(valign) / 100; + } + function updateContain() { var parentWidth = element.parentElement.offsetWidth, - parentHeight = element.parentElement.offsetHeight; + parentHeight = element.parentElement.offsetHeight, + rightAlignment = 0 - (elementWidth * scaleFactor - parentWidth), + bottomAlignment = 0 - (elementHeight * scaleFactor - parentHeight); // Run the scale/position functionality if able to determine the parent element's width and height if (parentWidth && parentHeight) { @@ -53,50 +91,26 @@ module.exports = function(options) { element.style.height = elementHeight * scaleFactor + "px"; } - // Anchor the element horizontally to the left/center/right + // Align the element horizontally if (parentWidth !== elementWidth * scaleFactor) { - switch (halign) { - case "left": - // Anchor horizontally to the left of the parent element - element.style.left = "0px"; - 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"; - } + // Align horizontally by percent + element.style.left = rightAlignment * halign + "px"; } else { + // Align the element against the left if the width of the parent and element are the same element.style.left = "0px"; } - // Anchor the element vertically to the top/center/bottom + // Align the element vertically if (parentHeight !== elementHeight * scaleFactor) { - switch (valign) { - case "top": - // Anchor vertically to the top of the parent element - element.style.top = "0px"; - 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"; - } + // Align vertically by percent + element.style.top = bottomAlignment * valign + "px"; } else { + // Align the element against the top if the height of the parent and element are the same element.style.top = "0px"; } } 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); + setTimeout(updateContain, 30); } } diff --git a/contain-element.js b/contain-element.js index f00d6a2..1c48f96 100644 --- a/contain-element.js +++ b/contain-element.js @@ -22,9 +22,47 @@ function ContainElement(options) { element.parentElement.style.position = "relative"; } + // Convert halign to decimal percent + switch (halign) { + case "left": + halign = 0; + break; + + case "center": + halign = 0.5; + break; + + case "right": + halign = 1; + break; + + default: + halign = Number(halign) / 100; + } + + // Convert valign to decimal percent + switch (valign) { + case "top": + valign = 0; + break; + + case "center": + valign = 0.5; + break; + + case "bottom": + valign = 1; + break; + + default: + valign = Number(valign) / 100; + } + function updateContain() { var parentWidth = element.parentElement.offsetWidth, - parentHeight = element.parentElement.offsetHeight; + parentHeight = element.parentElement.offsetHeight, + rightAlignment = 0 - (elementWidth * scaleFactor - parentWidth), + bottomAlignment = 0 - (elementHeight * scaleFactor - parentHeight); // Run the scale/position functionality if able to determine the parent element's width and height if (parentWidth && parentHeight) { @@ -53,50 +91,26 @@ function ContainElement(options) { element.style.height = elementHeight * scaleFactor + "px"; } - // Anchor the element horizontally to the left/center/right + // Align the element horizontally if (parentWidth !== elementWidth * scaleFactor) { - switch (halign) { - case "left": - // Anchor horizontally to the left of the parent element - element.style.left = "0px"; - 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"; - } + // Align horizontally by percent + element.style.left = rightAlignment * halign + "px"; } else { + // Align the element against the left if the width of the parent and element are the same element.style.left = "0px"; } - // Anchor the element vertically to the top/center/bottom + // Align the element vertically if (parentHeight !== elementHeight * scaleFactor) { - switch (valign) { - case "top": - // Anchor vertically to the top of the parent element - element.style.top = "0px"; - 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"; - } + // Align vertically by percent + element.style.top = bottomAlignment * valign + "px"; } else { + // Align the element against the top if the height of the parent and element are the same element.style.top = "0px"; } } 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); + setTimeout(updateContain, 30); } } diff --git a/contain-element.min.js b/contain-element.min.js index 472b538..f512b22 100644 --- a/contain-element.min.js +++ b/contain-element.min.js @@ -1 +1 @@ -function ContainElement(t){function e(){var t=n.parentElement.offsetWidth,h=n.parentElement.offsetHeight;if(t&&h){if(i="cover"===f?t>h/l*s?t/s:h/l:"contain"===f?h>t/s*l?t/s:h/l:1,a?n.style.transform="scale("+i+")":(n.style.width=s*i+"px",n.style.height=l*i+"px"),t!==s*i)switch(r){case"left":n.style.left="0px";break;case"right":n.style.left=0-(s*i-t)+"px";break;default:n.style.left=0-(s*i-t)/2+"px"}else n.style.left="0px";if(h!==l*i)switch(o){case"top":n.style.top="0px";break;case"bottom":n.style.top=0-(l*i-h)+"px";break;default:n.style.top=0-(l*i-h)/2+"px"}else n.style.top="0px"}else window.setTimeout(e,30)}var i=1,n=t.element||document.getElementById(t.id),s=t.width||n.offsetWidth,l=t.height||n.offsetHeight,o=t.valign||"center",r=t.halign||"center",f=t.fit||"cover",a=t.scale;n.style.position="absolute",n.parentElement.style.overflow="hidden",a&&(n.style.transformOrigin="left top"),-1===["relative","absolute","fixed"].indexOf(window.getComputedStyle(n.parentElement,null).getPropertyValue("position"))&&(n.parentElement.style.position="relative"),e(),this.update=e,this.setWidth=function(t){s=t},this.setHeight=function(t){l=t},this.setValign=function(t){o=t},this.setHalign=function(t){r=t},this.setFit=function(t){f=t},this.getWidth=function(){return s},this.getHeight=function(){return l},this.getCurrentWidth=function(){return i*s},this.getCurrentHeight=function(){return i*l},this.getValign=function(){return o},this.getHalign=function(){return r},this.getFit=function(){return f},this.getScale=function(){return i}} \ No newline at end of file +function ContainElement(t){var r=1,s=t.element||document.getElementById(t.id),o=t.width||s.offsetWidth,a=t.height||s.offsetHeight,l=t.valign||"center",u=t.halign||"center",h=t.fit||"cover",c=t.scale;switch(s.style.position="absolute",s.parentElement.style.overflow="hidden",c&&(s.style.transformOrigin="left top"),-1===["relative","absolute","fixed"].indexOf(window.getComputedStyle(s.parentElement,null).getPropertyValue("position"))&&(s.parentElement.style.position="relative"),u){case"left":u=0;break;case"center":u=.5;break;case"right":u=1;break;default:u=Number(u)/100}switch(l){case"top":l=0;break;case"center":l=.5;break;case"bottom":l=1;break;default:l=Number(l)/100}function f(){var t=s.parentElement.offsetWidth,e=s.parentElement.offsetHeight,n=0-(o*r-t),i=0-(a*r-e);t&&e?(r="cover"===h?e/a*o