Optimize and add support for position by percent to halign and valign, and update gulp to 4.0.0
This commit is contained in:
Kevin MacMartin
parent
aee18dc3b2
commit
9d23286d9b
|
|
@ -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)
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
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<t?t/o:e/a:"contain"===h?t/o*a<e?t/o:e/a:1,c?s.style.transform="scale("+r+")":(s.style.width=o*r+"px",s.style.height=a*r+"px"),s.style.left=t!==o*r?n*u+"px":"0px",s.style.top=e!==a*r?i*l+"px":"0px"):setTimeout(f,30)}f(),this.update=f,this.setWidth=function(t){o=t},this.setHeight=function(t){a=t},this.setValign=function(t){l=t},this.setHalign=function(t){u=t},this.setFit=function(t){h=t},this.getWidth=function(){return o},this.getHeight=function(){return a},this.getCurrentWidth=function(){return r*o},this.getCurrentHeight=function(){return r*a},this.getValign=function(){return l},this.getHalign=function(){return u},this.getFit=function(){return h},this.getScale=function(){return r}}
|
||||
|
|
@ -21,7 +21,7 @@ gulp.task("minify", function() {
|
|||
.pipe(gulp.dest("./"));
|
||||
});
|
||||
|
||||
gulp.task("default", [
|
||||
gulp.task("default", gulp.parallel(
|
||||
"module",
|
||||
"minify"
|
||||
]);
|
||||
));
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "contain-element",
|
||||
"description": "A JavaScript plugin to contain an element within its parent element.",
|
||||
"version": "1.6.4",
|
||||
"version": "1.7.0",
|
||||
"license": "MIT",
|
||||
"main": "contain-element.min.js",
|
||||
"homepage": "https://github.com/WilliamsNY/contain-element",
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
"aspect-ratio"
|
||||
],
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.1",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-insert": "^0.5.0",
|
||||
"gulp-uglify": "^3.0.0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue