Skip to content

Commit

Permalink
Optimize and add support for position by percent to halign and valign…
Browse files Browse the repository at this point in the history 
…, and update gulp to 4.0.0
  • Loading branch information
@prurigro
prurigro committed May 11, 2018
1 parent aee18dc commit 9d23286
Show file tree
Hide file tree
Showing 7 changed files with 3,169 additions and 1,202 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
});
Expand Down
82 changes: 48 additions & 34 deletions contain-element-module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
}

Expand Down
82 changes: 48 additions & 34 deletions contain-element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
}

Expand Down
2 changes: 1 addition & 1 deletion contain-element.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ gulp.task("minify", function() {
.pipe(gulp.dest("./"));
});

gulp.task("default", [
gulp.task("default", gulp.parallel(
"module",
"minify"
]);
));
Loading

0 comments on commit 9d23286

Please sign in to comment.