kevin/contain-element
1
0
Fork 0
mirror of https://github.com/WilliamsNY/contain-element.git synced 2024-12-21 15:30:23 -05:00
Code Issues Projects Releases Packages Wiki Activity

Optimize and add support for position by percent to halign and valign, and update gulp to 4.0.0

Browse source
This commit is contained in:
Kevin MacMartin 2018-05-11 15:00:36 -04:00
parent aee18dc3b2
commit 9d23286d9b
7 changed files with 3077 additions and 1110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -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)
});

82
contain-element-module.js
View file

@ -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);
}
}

82
contain-element.js
View file

@ -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);
}
}

2
contain-element.min.js vendored
View file

@ -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}}

4
gulpfile.js
View file

@ -21,7 +21,7 @@ gulp.task("minify", function() {
.pipe(gulp.dest("./"));
});
gulp.task("default", [
gulp.task("default", gulp.parallel(
"module",
"minify"
]);
));

4009
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -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"