mirror of
https://github.com/WilliamsNY/contain-element.git
synced 2024-09-07 20:41:22 -04:00
Add setters and getters for the width and alignment properties
This commit is contained in:
parent
7a59f6bc3c
commit
a908761b2a
3 changed files with 45 additions and 11 deletions
|
@ -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
|
||||
|
|
|
@ -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; };
|
||||
}
|
||||
|
||||
|
|
2
contain-element.min.js
vendored
2
contain-element.min.js
vendored
|
@ -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}}
|
Loading…
Reference in a new issue