Update to include a new "scale" option that sizes the element using the transform scale property instead of width and height, to allow for the contents of a contained element to be sized along with the element when necessary

This commit is contained in:
Kevin MacMartin 2017-05-24 14:32:16 -04:00
parent 591b150bb8
commit 8c6a306374
5 changed files with 1119 additions and 7 deletions

View file

@ -24,14 +24,15 @@ window.onload = function() {
width: 100, // (optional) native element width in pixels (unset: detected element width) width: 100, // (optional) native element width in pixels (unset: detected element width)
height: 100, // (optional) native element height in pixels (unset: detected element height) height: 100, // (optional) native element height in pixels (unset: detected element height)
valign: "top", // (optional) vertical alignment: top|bottom (unset: center) valign: "top", // (optional) vertical alignment: top|bottom (unset: center)
halign: "left" // (optional) horizontal alignment: left|right (unset: center) halign: "left", // (optional) horizontal alignment: left|right (unset: center)
scale: true // (optional) use transform scale instead of width and height (unset: false)
}); });
// (example) update the size and positioning on window resize // (example) update the size and positioning on window resize
window.onresize = contain.update; window.onresize = contain.update;
// (example) update the size and positioning on orientation change // (example) update the size and positioning on orientation change
window.addEventListener('orientationchange', contain.update); window.addEventListener("orientationchange", contain.update);
}; };
``` ```

View file

@ -4,12 +4,18 @@ function ContainElement(options) {
elementWidth = options.width || element.offsetWidth, elementWidth = options.width || element.offsetWidth,
elementHeight = options.height || element.offsetHeight, elementHeight = options.height || element.offsetHeight,
valign = options.valign || "center", valign = options.valign || "center",
halign = options.halign || "center"; halign = options.halign || "center",
scale = options.scale;
// Apply required attributes to the element // Apply required attributes to the element
element.style.position = "absolute"; element.style.position = "absolute";
element.parentElement.style.overflow = "hidden"; element.parentElement.style.overflow = "hidden";
// Apply required transform-origin if the scale option is set to true
if (scale) {
element.style.transformOrigin = "left top";
}
// Apply relative position to the parent if it doesn't already have relative, absolute or fixed positioning // 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) { if ([ "relative", "absolute", "fixed" ].indexOf(window.getComputedStyle(element.parentElement, null).getPropertyValue("position")) === -1) {
element.parentElement.style.position = "relative"; element.parentElement.style.position = "relative";
@ -29,8 +35,12 @@ function ContainElement(options) {
} }
// Scale the element using the scale factor // Scale the element using the scale factor
element.style.width = elementWidth * scaleFactor + "px"; if (scale) {
element.style.height = elementHeight * scaleFactor + "px"; element.style.transform = "scale(" + scaleFactor + ")";
} else {
element.style.width = elementWidth * scaleFactor + "px";
element.style.height = elementHeight * scaleFactor + "px";
}
// Anchor the element horizontally to the left/center/right // Anchor the element horizontally to the left/center/right
if (parentWidth < elementWidth * scaleFactor) { if (parentWidth < elementWidth * scaleFactor) {

View file

@ -1 +1 @@
function ContainElement(t){function e(){var t=n.parentElement.offsetWidth,a=n.parentElement.offsetHeight;if(t&&a){if(i=t>a/(s*i)*(l*i)?t/l:a/s,n.style.width=l*i+"px",n.style.height=s*i+"px",t<l*i)switch(f){case"left":n.style.left="0px";break;case"right":n.style.left=0-(l*i-t)+"px";break;default:n.style.left=0-(l*i-t)/2+"px"}else n.style.left="0px";if(s*i>a)switch(o){case"top":n.style.top="0px";break;case"bottom":n.style.top=0-(s*i-a)+"px";break;default:n.style.top=0-(s*i-a)/2+"px"}else n.style.top="0px"}else window.setTimeout(e,30)}var i=1,n=t.element||document.getElementById(t.id),l=t.width||n.offsetWidth,s=t.height||n.offsetHeight,o=t.valign||"center",f=t.halign||"center";n.style.position="absolute",n.parentElement.style.overflow="hidden",["relative","absolute","fixed"].indexOf(window.getComputedStyle(n.parentElement,null).getPropertyValue("position"))===-1&&(n.parentElement.style.position="relative"),e(),this.update=e,this.setWidth=function(t){l=t},this.setHeight=function(t){s=t},this.setValign=function(t){o=t},this.setHalign=function(t){f=t},this.getWidth=function(){return l},this.getHeight=function(){return s},this.getValign=function(){return o},this.getHalign=function(){return f},this.getScale=function(){return i}} function ContainElement(t){function e(){var t=n.parentElement.offsetWidth,r=n.parentElement.offsetHeight;if(t&&r){if(i=t>r/(s*i)*(l*i)?t/l:r/s,f?n.style.transform="scale("+i+")":(n.style.width=l*i+"px",n.style.height=s*i+"px"),t<l*i)switch(a){case"left":n.style.left="0px";break;case"right":n.style.left=0-(l*i-t)+"px";break;default:n.style.left=0-(l*i-t)/2+"px"}else n.style.left="0px";if(s*i>r)switch(o){case"top":n.style.top="0px";break;case"bottom":n.style.top=0-(s*i-r)+"px";break;default:n.style.top=0-(s*i-r)/2+"px"}else n.style.top="0px"}else window.setTimeout(e,30)}var i=1,n=t.element||document.getElementById(t.id),l=t.width||n.offsetWidth,s=t.height||n.offsetHeight,o=t.valign||"center",a=t.halign||"center",f=t.scale;n.style.position="absolute",n.parentElement.style.overflow="hidden",f&&(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){l=t},this.setHeight=function(t){s=t},this.setValign=function(t){o=t},this.setHalign=function(t){a=t},this.getWidth=function(){return l},this.getHeight=function(){return s},this.getValign=function(){return o},this.getHalign=function(){return a},this.getScale=function(){return i}}

View file

@ -2,6 +2,6 @@
"devDependencies": { "devDependencies": {
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-concat": "^2.6.0", "gulp-concat": "^2.6.0",
"gulp-uglify": "^2.0.0" "gulp-uglify": "^3.0.0"
} }
} }

1101
yarn.lock Normal file

File diff suppressed because it is too large Load diff