Add setters and getters for the width and alignment properties

README.md

@@ -37,6 +37,14 @@ window.onload = function() {
 ## Functions
 
 * `update()`: Update the size and position of the contained element.
+* `setWidth(width)`: Set the width (run `update()` to apply).
+* `setHeight(height)`: Set the height (run `update()` to apply).
+* `setValign(valign)`: Set the vertical alignment (run `update()` to apply).
+* `setHalign(halign)`: Set the horizontal alignment (run `update()` to apply).
+* `getWidth()`: Return the current width.
+* `getHeight()`: Return the current height.
+* `getValign()`: Return the current vertical alignment.
+* `getHalign()`: Return the current horizontal alignment.
 * `getScale()`: Return the current scale factor being applied to the contained element.
 
 ## Credits

contain-element.js

@@ -1,8 +1,10 @@
 function ContainElement(options) {
-    var scaleFactor = 1;
-    var element = document.getElementById(options.id);
-    var elementWidth = options.width || element.offsetWidth;
-    var elementHeight = options.height || element.offsetHeight;
+    var scaleFactor = 1,
+        element = document.getElementById(options.id),
+        elementWidth = options.width || element.offsetWidth,
+        elementHeight = options.height || element.offsetHeight,
+        valign = options.valign || 'center',
+        halign = options.halign || 'center';
 
     // Apply required attributes to the element and its parents
     element.style.position = 'absolute';
@@ -11,8 +13,8 @@ function ContainElement(options) {
         element.parentElement.style.position = 'relative';
 
     function updateContain() {
-        var parentWidth = element.parentElement.offsetWidth;
-        var parentHeight = element.parentElement.offsetHeight;
+        var parentWidth = element.parentElement.offsetWidth,
+            parentHeight = element.parentElement.offsetHeight;
 
         // Run the scale/position functionality if able to determine the parent element's width and height
         if ((parentWidth) && (parentHeight)) {
@@ -28,7 +30,7 @@ function ContainElement(options) {
 
             // Anchor the element horizontally to the left/center/right
             if (parentWidth < (elementWidth * scaleFactor)) {
-                switch(options.halign) {
+                switch(halign) {
                     case 'left':
                         // Anchor horizontally to the left of the parent element
                         element.style.left = 0 + 'px';
@@ -47,7 +49,7 @@ function ContainElement(options) {
 
             // Anchor the element vertically to the top/center/bottom
             if ((elementHeight * scaleFactor) > parentHeight) {
-                switch(options.valign) {
+                switch(valign) {
                     case 'top':
                         // Anchor vertically to the top of the parent element
                         element.style.top = 0 + 'px';
@@ -72,10 +74,34 @@ function ContainElement(options) {
     // Run the function to scale and anchor the element
     updateContain();
 
-    // Add an external scale and anchor update function
+    // External scale and anchor update function
     this.update = updateContain;
 
-    // Add function to return the current scale factor
+    // External function to set elementWidth
+    this.setWidth = function(newWidth) { elementWidth = newWidth; };
+
+    // External function to set elementHeight
+    this.setHeight = function(newHeight) { elementHeight = newHeight; };
+
+    // External function to set valign
+    this.setValign = function(newValign) { valign = newValign; };
+
+    // External function to set halign
+    this.setHalign = function(newHalign) { halign = newHalign; };
+
+    // External function to get the current elementWidth
+    this.getWidth = function() { return elementWidth; };
+
+    // External function to get the current elementHeight
+    this.getHeight = function() { return elementHeight; };
+
+    // External function to get the current valign
+    this.getValign = function() { return valign; };
+
+    // External function to get the current halign
+    this.getHalign = function() { return halign; };
+
+    // External function to return the current scale factor
     this.getScale = function() { return scaleFactor; };
 }
 

contain-element.min.js

@@ -1 +1 @@
-function ContainElement(e){function t(){var o=i.parentElement.offsetWidth,a=i.parentElement.offsetHeight;if(o&&a){if(l=o>a/(n*l)*s*l?o/s:a/n,i.style.width=s*l+"px",i.style.height=n*l+"px",s*l>o)switch(e.halign){case"left":i.style.left="0px";break;case"right":i.style.left=0-(s*l-o)+"px";break;default:i.style.left=0-(s*l-o)/2+"px"}else i.style.left="0px";if(n*l>a)switch(e.valign){case"top":i.style.top="0px";break;case"bottom":i.style.top=0-(n*l-a)+"px";break;default:i.style.top=0-(n*l-a)/2+"px"}else i.style.top="0px"}else window.setTimeout(t,30)}var l=1,i=document.getElementById(e.id),s=e.width||i.offsetWidth,n=e.height||i.offsetHeight;i.style.position="absolute",i.parentElement.style.overflow="hidden",-1===["relative","absolute","fixed"].indexOf(window.getComputedStyle(i.parentElement,null).getPropertyValue("position"))&&(i.parentElement.style.position="relative"),t(),this.update=t,this.getScale=function(){return l}}
+function ContainElement(t){function e(){var t=n.parentElement.offsetWidth,a=n.parentElement.offsetHeight;if(t&&a){if(i=t>a/(s*i)*l*i?t/l:a/s,n.style.width=l*i+"px",n.style.height=s*i+"px",l*i>t)switch(f){case"left":n.style.left="0px";break;case"right":n.style.left=0-(l*i-t)+"px";break;default:n.style.left=0-(l*i-t)/2+"px"}else n.style.left="0px";if(s*i>a)switch(o){case"top":n.style.top="0px";break;case"bottom":n.style.top=0-(s*i-a)+"px";break;default:n.style.top=0-(s*i-a)/2+"px"}else n.style.top="0px"}else window.setTimeout(e,30)}var i=1,n=document.getElementById(t.id),l=t.width||n.offsetWidth,s=t.height||n.offsetHeight,o=t.valign||"center",f=t.halign||"center";n.style.position="absolute",n.parentElement.style.overflow="hidden",-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){l=t},this.setHeight=function(t){s=t},this.setValign=function(t){o=t},this.setHalign=function(t){f=t},this.getWidth=function(){return l},this.getHeight=function(){return s},this.getValign=function(){return o},this.getHalign=function(){return f},this.getScale=function(){return i}}