mirror of
https://github.com/WilliamsNY/contain-element.git
synced 2024-12-21 23:40:23 -05:00
Remove pointless multiplication against the scaleFactor in the scale factor conditions, and add a new option called "fit" that allows the object-fit strategy to be configured to either contain within the parent element or cover it (with the default set to the original behavior)
This commit is contained in:
Kevin MacMartin
parent
8c6a306374
commit
7dae4c63fa
3 changed files with 28 additions and 8 deletions
|
|
@ -23,8 +23,9 @@ 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: top|bottom (unset: center)
|
||||
halign: "left", // (optional) horizontal alignment: left|right (unset: center)
|
||||
valign: "top", // (optional) vertical alignment: center|top|bottom (unset: center)
|
||||
halign: "left", // (optional) horizontal alignment: 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)
|
||||
});
|
||||
|
||||
|
|
@ -43,10 +44,12 @@ window.onload = function() {
|
|||
* `setHeight(height)`: Set the height (run `update()` to apply).
|
||||
* `setValign(valign)`: Set the vertical alignment (run `update()` to apply).
|
||||
* `setHalign(halign)`: Set the horizontal alignment (run `update()` to apply).
|
||||
* `setFit(fit)`: Set the object fit (run `update()` to apply).
|
||||
* `getWidth()`: Return the current width.
|
||||
* `getHeight()`: Return the current height.
|
||||
* `getValign()`: Return the current vertical alignment.
|
||||
* `getHalign()`: Return the current horizontal alignment.
|
||||
* `getFit()`: Return the current object fit.
|
||||
* `getScale()`: Return the current scale factor being applied to the contained element.
|
||||
|
||||
## Credits
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ function ContainElement(options) {
|
|||
elementHeight = options.height || element.offsetHeight,
|
||||
valign = options.valign || "center",
|
||||
halign = options.halign || "center",
|
||||
fit = options.fit || "cover",
|
||||
scale = options.scale;
|
||||
|
||||
// Apply required attributes to the element
|
||||
|
|
@ -28,10 +29,20 @@ function ContainElement(options) {
|
|||
// 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;
|
||||
if (fit === "cover") {
|
||||
if (parentWidth > parentHeight / elementHeight * elementWidth) {
|
||||
scaleFactor = parentWidth / elementWidth;
|
||||
} else {
|
||||
scaleFactor = parentHeight / elementHeight;
|
||||
}
|
||||
} else if (fit === "contain") {
|
||||
if (parentHeight > parentWidth / elementWidth * elementHeight) {
|
||||
scaleFactor = parentWidth / elementWidth;
|
||||
} else {
|
||||
scaleFactor = parentHeight / elementHeight;
|
||||
}
|
||||
} else {
|
||||
scaleFactor = parentHeight / elementHeight;
|
||||
scaleFactor = 1;
|
||||
}
|
||||
|
||||
// Scale the element using the scale factor
|
||||
|
|
@ -43,7 +54,7 @@ function ContainElement(options) {
|
|||
}
|
||||
|
||||
// Anchor the element horizontally to the left/center/right
|
||||
if (parentWidth < elementWidth * scaleFactor) {
|
||||
if (parentWidth !== elementWidth * scaleFactor) {
|
||||
switch (halign) {
|
||||
case "left":
|
||||
// Anchor horizontally to the left of the parent element
|
||||
|
|
@ -64,7 +75,7 @@ function ContainElement(options) {
|
|||
}
|
||||
|
||||
// Anchor the element vertically to the top/center/bottom
|
||||
if (elementHeight * scaleFactor > parentHeight) {
|
||||
if (parentHeight !== elementHeight * scaleFactor) {
|
||||
switch (valign) {
|
||||
case "top":
|
||||
// Anchor vertically to the top of the parent element
|
||||
|
|
@ -107,6 +118,9 @@ function ContainElement(options) {
|
|||
// External function to set halign
|
||||
this.setHalign = function(newHalign) { halign = newHalign; };
|
||||
|
||||
// External function to set fit
|
||||
this.setFit = function(newFit) { fit = newFit; };
|
||||
|
||||
// External function to return the current elementWidth
|
||||
this.getWidth = function() { return elementWidth; };
|
||||
|
||||
|
|
@ -119,6 +133,9 @@ function ContainElement(options) {
|
|||
// External function to return the current halign
|
||||
this.getHalign = function() { return halign; };
|
||||
|
||||
// External function to return the current fit
|
||||
this.getFit = function() { return fit; };
|
||||
|
||||
// External function to return the current scale factor
|
||||
this.getScale = function() { return scaleFactor; };
|
||||
}
|
||||
|
|
|
|||
2
contain-element.min.js
vendored
2
contain-element.min.js
vendored
|
|
@ -1 +1 @@
|
|||
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}}
|
||||
function ContainElement(t){function e(){var t=n.parentElement.offsetWidth,h=n.parentElement.offsetHeight;if(t&&h){if(i="cover"===r?t>h/l*s?t/s:h/l:"contain"===r?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(f){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",f=t.halign||"center",r=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){f=t},this.setFit=function(t){r=t},this.getWidth=function(){return s},this.getHeight=function(){return l},this.getValign=function(){return o},this.getHalign=function(){return f},this.getFit=function(){return r},this.getScale=function(){return i}}
|
||||
Loading…
Reference in a new issue