From 1c672e883e1b312c43639b106a75472760dfb754 Mon Sep 17 00:00:00 2001
From: Kevin MacMartin <prurigro@gmail.com>
Date: Mon, 14 May 2018 14:51:13 -0400
Subject: [PATCH] Fix setting setValign and setHalign by
 left/top/center/right/bottom and quoted numbers, and allow quoted values for
 the width and height

---
 contain-element-module.js | 117 ++++++++++++++++++++++++--------------
 contain-element.js        | 117 ++++++++++++++++++++++++--------------
 contain-element.min.js    |   2 +-
 3 files changed, 151 insertions(+), 85 deletions(-)

diff --git a/contain-element-module.js b/contain-element-module.js
index 563618d..bfee9d4 100644
--- a/contain-element-module.js
+++ b/contain-element-module.js
@@ -1,8 +1,8 @@
 module.exports = function(options) {
     var scaleFactor = 1,
         element = options.element || document.getElementById(options.id),
-        elementWidth = options.width || element.offsetWidth,
-        elementHeight = options.height || element.offsetHeight,
+        elementWidth = Number(options.width) || element.offsetWidth,
+        elementHeight = Number(options.height) || element.offsetHeight,
         valign = options.valign || "center",
         halign = options.halign || "center",
         fit = options.fit || "cover",
@@ -22,40 +22,42 @@ module.exports = function(options) {
         element.parentElement.style.position = "relative";
     }
 
-    // Convert halign to decimal percent
-    switch (halign) {
-        case "left":
-            halign = 0;
-            break;
+    function parseAlignment() {
+        // Convert halign to decimal percent
+        switch (halign) {
+            case "left":
+                halign = 0;
+                break;
 
-        case "center":
-            halign = 0.5;
-            break;
+            case "center":
+                halign = 0.5;
+                break;
 
-        case "right":
-            halign = 1;
-            break;
+            case "right":
+                halign = 1;
+                break;
 
-        default:
-            halign = Number(halign) / 100;
-    }
+            default:
+                halign = Number(halign) / 100;
+        }
 
-    // Convert valign to decimal percent
-    switch (valign) {
-        case "top":
-            valign = 0;
-            break;
+        // Convert valign to decimal percent
+        switch (valign) {
+            case "top":
+                valign = 0;
+                break;
 
-        case "center":
-            valign = 0.5;
-            break;
+            case "center":
+                valign = 0.5;
+                break;
 
-        case "bottom":
-            valign = 1;
-            break;
+            case "bottom":
+                valign = 1;
+                break;
 
-        default:
-            valign = Number(valign) / 100;
+            default:
+                valign = Number(valign) / 100;
+        }
     }
 
     function updateContain() {
@@ -114,6 +116,9 @@ module.exports = function(options) {
         }
     }
 
+    // Parse the valign and halign options
+    parseAlignment();
+
     // Run the function to scale and anchor the element
     updateContain();
 
@@ -121,41 +126,69 @@ module.exports = function(options) {
     this.update = updateContain;
 
     // External function to set elementWidth
-    this.setWidth = function(newWidth) { elementWidth = newWidth; };
+    this.setWidth = function(newWidth) {
+        elementWidth = newWidth;
+    };
 
     // External function to set elementHeight
-    this.setHeight = function(newHeight) { elementHeight = newHeight; };
+    this.setHeight = function(newHeight) {
+        elementHeight = newHeight;
+    };
 
     // External function to set valign
-    this.setValign = function(newValign) { valign = newValign; };
+    this.setValign = function(newValign) {
+        valign = newValign;
+        parseAlignment();
+    };
 
     // External function to set halign
-    this.setHalign = function(newHalign) { halign = newHalign; };
+    this.setHalign = function(newHalign) {
+        halign = newHalign;
+        parseAlignment();
+    };
 
     // External function to set fit
-    this.setFit = function(newFit) { fit = newFit; };
+    this.setFit = function(newFit) {
+        fit = newFit;
+    };
 
     // External function to return the elementWidth
-    this.getWidth = function() { return elementWidth; };
+    this.getWidth = function() {
+        return Number(elementWidth);
+    };
 
     // External function to return the elementHeight
-    this.getHeight = function() { return elementHeight; };
+    this.getHeight = function() {
+        return Number(elementHeight);
+    };
 
     // External function to return the current width
-    this.getCurrentWidth = function() { return scaleFactor * elementWidth; };
+    this.getCurrentWidth = function() {
+        return scaleFactor * elementWidth;
+    };
 
     // External function to return the current height
-    this.getCurrentHeight = function() { return scaleFactor * elementHeight; };
+    this.getCurrentHeight = function() {
+        return scaleFactor * elementHeight;
+    };
 
     // External function to return the current valign
-    this.getValign = function() { return valign; };
+    this.getValign = function() {
+        return valign;
+    };
 
     // External function to return the current halign
-    this.getHalign = function() { return halign; };
+    this.getHalign = function() {
+        return halign;
+    };
 
     // External function to return the current fit
-    this.getFit = function() { return fit; };
+    this.getFit = function() {
+        return fit;
+    };
 
     // External function to return the current scale factor
-    this.getScale = function() { return scaleFactor; };
+    this.getScale = function() {
+        return scaleFactor;
+    };
 };
diff --git a/contain-element.js b/contain-element.js
index 1c48f96..db8c881 100644
--- a/contain-element.js
+++ b/contain-element.js
@@ -1,8 +1,8 @@
 function ContainElement(options) {
     var scaleFactor = 1,
         element = options.element || document.getElementById(options.id),
-        elementWidth = options.width || element.offsetWidth,
-        elementHeight = options.height || element.offsetHeight,
+        elementWidth = Number(options.width) || element.offsetWidth,
+        elementHeight = Number(options.height) || element.offsetHeight,
         valign = options.valign || "center",
         halign = options.halign || "center",
         fit = options.fit || "cover",
@@ -22,40 +22,42 @@ function ContainElement(options) {
         element.parentElement.style.position = "relative";
     }
 
-    // Convert halign to decimal percent
-    switch (halign) {
-        case "left":
-            halign = 0;
-            break;
+    function parseAlignment() {
+        // Convert halign to decimal percent
+        switch (halign) {
+            case "left":
+                halign = 0;
+                break;
 
-        case "center":
-            halign = 0.5;
-            break;
+            case "center":
+                halign = 0.5;
+                break;
 
-        case "right":
-            halign = 1;
-            break;
+            case "right":
+                halign = 1;
+                break;
 
-        default:
-            halign = Number(halign) / 100;
-    }
+            default:
+                halign = Number(halign) / 100;
+        }
 
-    // Convert valign to decimal percent
-    switch (valign) {
-        case "top":
-            valign = 0;
-            break;
+        // Convert valign to decimal percent
+        switch (valign) {
+            case "top":
+                valign = 0;
+                break;
 
-        case "center":
-            valign = 0.5;
-            break;
+            case "center":
+                valign = 0.5;
+                break;
 
-        case "bottom":
-            valign = 1;
-            break;
+            case "bottom":
+                valign = 1;
+                break;
 
-        default:
-            valign = Number(valign) / 100;
+            default:
+                valign = Number(valign) / 100;
+        }
     }
 
     function updateContain() {
@@ -114,6 +116,9 @@ function ContainElement(options) {
         }
     }
 
+    // Parse the valign and halign options
+    parseAlignment();
+
     // Run the function to scale and anchor the element
     updateContain();
 
@@ -121,41 +126,69 @@ function ContainElement(options) {
     this.update = updateContain;
 
     // External function to set elementWidth
-    this.setWidth = function(newWidth) { elementWidth = newWidth; };
+    this.setWidth = function(newWidth) {
+        elementWidth = Number(newWidth);
+    };
 
     // External function to set elementHeight
-    this.setHeight = function(newHeight) { elementHeight = newHeight; };
+    this.setHeight = function(newHeight) {
+        elementHeight = Number(newHeight);
+    };
 
     // External function to set valign
-    this.setValign = function(newValign) { valign = newValign; };
+    this.setValign = function(newValign) {
+        valign = newValign;
+        parseAlignment();
+    };
 
     // External function to set halign
-    this.setHalign = function(newHalign) { halign = newHalign; };
+    this.setHalign = function(newHalign) {
+        halign = newHalign;
+        parseAlignment();
+    };
 
     // External function to set fit
-    this.setFit = function(newFit) { fit = newFit; };
+    this.setFit = function(newFit) {
+        fit = newFit;
+    };
 
     // External function to return the elementWidth
-    this.getWidth = function() { return elementWidth; };
+    this.getWidth = function() {
+        return Number(elementWidth);
+    };
 
     // External function to return the elementHeight
-    this.getHeight = function() { return elementHeight; };
+    this.getHeight = function() {
+        return Number(elementHeight);
+    };
 
     // External function to return the current width
-    this.getCurrentWidth = function() { return scaleFactor * elementWidth; };
+    this.getCurrentWidth = function() {
+        return scaleFactor * elementWidth;
+    };
 
     // External function to return the current height
-    this.getCurrentHeight = function() { return scaleFactor * elementHeight; };
+    this.getCurrentHeight = function() {
+        return scaleFactor * elementHeight;
+    };
 
     // External function to return the current valign
-    this.getValign = function() { return valign; };
+    this.getValign = function() {
+        return valign;
+    };
 
     // External function to return the current halign
-    this.getHalign = function() { return halign; };
+    this.getHalign = function() {
+        return halign;
+    };
 
     // External function to return the current fit
-    this.getFit = function() { return fit; };
+    this.getFit = function() {
+        return fit;
+    };
 
     // External function to return the current scale factor
-    this.getScale = function() { return scaleFactor; };
+    this.getScale = function() {
+        return scaleFactor;
+    };
 }
diff --git a/contain-element.min.js b/contain-element.min.js
index f512b22..837aa81 100644
--- a/contain-element.min.js
+++ b/contain-element.min.js
@@ -1 +1 @@
-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}}
\ No newline at end of file
+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}}
\ No newline at end of file