Parse vertical and horizontal alignment separately so one set function doesn't cause the other value to divide itself by 100

contain-element-module.js

@@ -22,25 +22,7 @@ module.exports = function(options) {
         element.parentElement.style.position = "relative";
     }
 
-    function parseAlignment() {
-        // 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;
-        }
-
+    function parseVerticalAlignment() {
         // Convert valign to decimal percent
         switch (valign) {
             case "top":
@@ -60,6 +42,26 @@ module.exports = function(options) {
         }
     }
 
+    function parseHorizontalAlignment() {
+        // 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;
+        }
+    }
+
     function updateContain() {
         var parentWidth = element.parentElement.offsetWidth,
             parentHeight = element.parentElement.offsetHeight,
@@ -117,7 +119,8 @@ module.exports = function(options) {
     }
 
     // Parse the valign and halign options
-    parseAlignment();
+    parseVerticalAlignment();
+    parseHorizontalAlignment();
 
     // Run the function to scale and anchor the element
     updateContain();
@@ -127,24 +130,24 @@ module.exports = function(options) {
 
     // External function to set elementWidth
     this.setWidth = function(newWidth) {
-        elementWidth = newWidth;
+        elementWidth = Number(newWidth);
     };
 
     // External function to set elementHeight
     this.setHeight = function(newHeight) {
-        elementHeight = newHeight;
+        elementHeight = Number(newHeight);
     };
 
     // External function to set valign
     this.setValign = function(newValign) {
         valign = newValign;
-        parseAlignment();
+        parseVerticalAlignment();
     };
 
     // External function to set halign
     this.setHalign = function(newHalign) {
         halign = newHalign;
-        parseAlignment();
+        parseHorizontalAlignment();
     };
 
     // External function to set fit

contain-element.js

@@ -22,25 +22,7 @@ function ContainElement(options) {
         element.parentElement.style.position = "relative";
     }
 
-    function parseAlignment() {
-        // 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;
-        }
-
+    function parseVerticalAlignment() {
         // Convert valign to decimal percent
         switch (valign) {
             case "top":
@@ -60,6 +42,26 @@ function ContainElement(options) {
         }
     }
 
+    function parseHorizontalAlignment() {
+        // 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;
+        }
+    }
+
     function updateContain() {
         var parentWidth = element.parentElement.offsetWidth,
             parentHeight = element.parentElement.offsetHeight,
@@ -117,7 +119,8 @@ function ContainElement(options) {
     }
 
     // Parse the valign and halign options
-    parseAlignment();
+    parseVerticalAlignment();
+    parseHorizontalAlignment();
 
     // Run the function to scale and anchor the element
     updateContain();
@@ -138,13 +141,13 @@ function ContainElement(options) {
     // External function to set valign
     this.setValign = function(newValign) {
         valign = newValign;
-        parseAlignment();
+        parseVerticalAlignment();
     };
 
     // External function to set halign
     this.setHalign = function(newHalign) {
         halign = newHalign;
-        parseAlignment();
+        parseHorizontalAlignment();
     };
 
     // External function to set fit

contain-element.min.js

@@ -1 +1 @@
-function ContainElement(t){var r=1,s=t.element||document.getElementById(t.id),o=Number(t.width)||s.offsetWidth,u=Number(t.height)||s.offsetHeight,a=t.valign||"center",l=t.halign||"center",c=t.fit||"cover",f=t.scale;function e(){switch(l){case"left":l=0;break;case"center":l=.5;break;case"right":l=1;break;default:l=Number(l)/100}switch(a){case"top":a=0;break;case"center":a=.5;break;case"bottom":a=1;break;default:a=Number(a)/100}}function h(){var t=s.parentElement.offsetWidth,e=s.parentElement.offsetHeight,n=0-(o*r-t),i=0-(u*r-e);t&&e?(r="cover"===c?e/u*o<t?t/o:e/u:"contain"===c?t/o*u<e?t/o:e/u:1,f?s.style.transform="scale("+r+")":(s.style.width=o*r+"px",s.style.height=u*r+"px"),s.style.left=t!==o*r?n*l+"px":"0px",s.style.top=e!==u*r?i*a+"px":"0px"):setTimeout(h,30)}s.style.position="absolute",s.parentElement.style.overflow="hidden",f&&(s.style.transformOrigin="left top"),-1===["relative","absolute","fixed"].indexOf(window.getComputedStyle(s.parentElement,null).getPropertyValue("position"))&&(s.parentElement.style.position="relative"),e(),h(),this.update=h,this.setWidth=function(t){o=t},this.setHeight=function(t){u=t},this.setValign=function(t){a=t,e()},this.setHalign=function(t){l=t,e()},this.setFit=function(t){c=t},this.getWidth=function(){return Number(o)},this.getHeight=function(){return Number(u)},this.getCurrentWidth=function(){return r*o},this.getCurrentHeight=function(){return r*u},this.getValign=function(){return a},this.getHalign=function(){return l},this.getFit=function(){return c},this.getScale=function(){return r}}
+function ContainElement(t){var r=1,s=t.element||document.getElementById(t.id),o=Number(t.width)||s.offsetWidth,u=Number(t.height)||s.offsetHeight,a=t.valign||"center",l=t.halign||"center",c=t.fit||"cover",f=t.scale;function e(){switch(a){case"top":a=0;break;case"center":a=.5;break;case"bottom":a=1;break;default:a=Number(a)/100}}function n(){switch(l){case"left":l=0;break;case"center":l=.5;break;case"right":l=1;break;default:l=Number(l)/100}}function h(){var t=s.parentElement.offsetWidth,e=s.parentElement.offsetHeight,n=0-(o*r-t),i=0-(u*r-e);t&&e?(r="cover"===c?e/u*o<t?t/o:e/u:"contain"===c?t/o*u<e?t/o:e/u:1,f?s.style.transform="scale("+r+")":(s.style.width=o*r+"px",s.style.height=u*r+"px"),s.style.left=t!==o*r?n*l+"px":"0px",s.style.top=e!==u*r?i*a+"px":"0px"):setTimeout(h,30)}s.style.position="absolute",s.parentElement.style.overflow="hidden",f&&(s.style.transformOrigin="left top"),-1===["relative","absolute","fixed"].indexOf(window.getComputedStyle(s.parentElement,null).getPropertyValue("position"))&&(s.parentElement.style.position="relative"),e(),n(),h(),this.update=h,this.setWidth=function(t){o=Number(t)},this.setHeight=function(t){u=Number(t)},this.setValign=function(t){a=t,e()},this.setHalign=function(t){l=t,n()},this.setFit=function(t){c=t},this.getWidth=function(){return Number(o)},this.getHeight=function(){return Number(u)},this.getCurrentWidth=function(){return r*o},this.getCurrentHeight=function(){return r*u},this.getValign=function(){return a},this.getHalign=function(){return l},this.getFit=function(){return c},this.getScale=function(){return r}}