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

README.md

@@ -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)
+        valign: "top", // (optional) vertical alignment: 0-100 (percent) or center|top|bottom (unset: center)
-        halign: "left", // (optional) horizontal alignment: center|left|right (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)
     });

contain-element-module.js

@@ -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) {
+                // Align horizontally by percent
-                    case "left":
+                element.style.left = rightAlignment * halign + "px";
-                        // 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";
-                }
             } 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) {
+                // Align vertically by percent
-                    case "top":
+                element.style.top = bottomAlignment * valign + "px";
-                        // 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";
-                }
             } 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);
         }
     }
 

contain-element.js

@@ -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) {
+                // Align horizontally by percent
-                    case "left":
+                element.style.left = rightAlignment * halign + "px";
-                        // 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";
-                }
             } 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) {
+                // Align vertically by percent
-                    case "top":
+                element.style.top = bottomAlignment * valign + "px";
-                        // 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";
-                }
             } 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);
         }
     }
 

contain-element.min.js

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

gulpfile.js

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

package.json

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