From a908761b2ab89f8bd01dfc8f7959d1d408895632 Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Tue, 8 Sep 2015 00:23:16 -0400 Subject: [PATCH] Add setters and getters for the width and alignment properties --- README.md | 8 ++++++++ contain-element.js | 46 +++++++++++++++++++++++++++++++++--------- contain-element.min.js | 2 +- 3 files changed, 45 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index c4a1021..48236eb 100644 --- a/README.md +++ b/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 diff --git a/contain-element.js b/contain-element.js index 331e30e..7713b0b 100644 --- a/contain-element.js +++ b/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; }; } diff --git a/contain-element.min.js b/contain-element.min.js index ff0aa91..99fbf70 100644 --- a/contain-element.min.js +++ b/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}} \ No newline at end of file +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}} \ No newline at end of file