kevin/contain-element
1
0
Fork 0
mirror of https://github.com/WilliamsNY/contain-element.git synced 2024-11-21 13:52:32 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add new external functions to return the current width and height, and update the description of the getWidth and getHeight functions to make it more clear that they return the original width and height supplied for the element

Browse source
This commit is contained in:
Kevin MacMartin 2017-07-14 14:20:53 -04:00
parent 7dae4c63fa
commit 23a7babcfb
3 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -45,8 +45,10 @@ window.onload = function() {
* `setValign(valign)`: Set the vertical alignment (run `update()` to apply). * `setValign(valign)`: Set the vertical alignment (run `update()` to apply).
* `setHalign(halign)`: Set the horizontal alignment (run `update()` to apply). * `setHalign(halign)`: Set the horizontal alignment (run `update()` to apply).
* `setFit(fit)`: Set the object fit (run `update()` to apply). * `setFit(fit)`: Set the object fit (run `update()` to apply).
* `getWidth()`: Return the current width. * `getWidth()`: Return the element width.
* `getHeight()`: Return the current height. * `getHeight()`: Return the element height.
* `getCurrentWidth()`: Return the current width.
* `getCurrentHeight()`: Return the current height.
* `getValign()`: Return the current vertical alignment. * `getValign()`: Return the current vertical alignment.
* `getHalign()`: Return the current horizontal alignment. * `getHalign()`: Return the current horizontal alignment.
* `getFit()`: Return the current object fit. * `getFit()`: Return the current object fit.

10
contain-element.js
View file

@ -121,12 +121,18 @@ function ContainElement(options) {
// External function to set fit // External function to set fit
this.setFit = function(newFit) { fit = newFit; }; this.setFit = function(newFit) { fit = newFit; };
// External function to return the current elementWidth // External function to return the elementWidth
this.getWidth = function() { return elementWidth; }; this.getWidth = function() { return elementWidth; };
// External function to return the current elementHeight // External function to return the elementHeight
this.getHeight = function() { return elementHeight; }; this.getHeight = function() { return elementHeight; };
// External function to return the current width
this.getCurrentWidth = function() { return scaleFactor * elementWidth; };
// External function to return the current height
this.getCurrentHeight = function() { return scaleFactor * elementHeight; };
// External function to return the current valign // External function to return the current valign
this.getValign = function() { return valign; }; this.getValign = function() { return valign; };

2
contain-element.min.js vendored
View file

@ -1 +1 @@
function ContainElement(t){function e(){var t=n.parentElement.offsetWidth,h=n.parentElement.offsetHeight;if(t&&h){if(i="cover"===r?t>h/l*s?t/s:h/l:"contain"===r?h>t/s*l?t/s:h/l:1,a?n.style.transform="scale("+i+")":(n.style.width=s*i+"px",n.style.height=l*i+"px"),t!==s*i)switch(f){case"left":n.style.left="0px";break;case"right":n.style.left=0-(s*i-t)+"px";break;default:n.style.left=0-(s*i-t)/2+"px"}else n.style.left="0px";if(h!==l*i)switch(o){case"top":n.style.top="0px";break;case"bottom":n.style.top=0-(l*i-h)+"px";break;default:n.style.top=0-(l*i-h)/2+"px"}else n.style.top="0px"}else window.setTimeout(e,30)}var i=1,n=t.element||document.getElementById(t.id),s=t.width||n.offsetWidth,l=t.height||n.offsetHeight,o=t.valign||"center",f=t.halign||"center",r=t.fit||"cover",a=t.scale;n.style.position="absolute",n.parentElement.style.overflow="hidden",a&&(n.style.transformOrigin="left top"),-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){s=t},this.setHeight=function(t){l=t},this.setValign=function(t){o=t},this.setHalign=function(t){f=t},this.setFit=function(t){r=t},this.getWidth=function(){return s},this.getHeight=function(){return l},this.getValign=function(){return o},this.getHalign=function(){return f},this.getFit=function(){return r},this.getScale=function(){return i}} function ContainElement(t){function e(){var t=n.parentElement.offsetWidth,h=n.parentElement.offsetHeight;if(t&&h){if(i="cover"===f?t>h/l*s?t/s:h/l:"contain"===f?h>t/s*l?t/s:h/l:1,a?n.style.transform="scale("+i+")":(n.style.width=s*i+"px",n.style.height=l*i+"px"),t!==s*i)switch(r){case"left":n.style.left="0px";break;case"right":n.style.left=0-(s*i-t)+"px";break;default:n.style.left=0-(s*i-t)/2+"px"}else n.style.left="0px";if(h!==l*i)switch(o){case"top":n.style.top="0px";break;case"bottom":n.style.top=0-(l*i-h)+"px";break;default:n.style.top=0-(l*i-h)/2+"px"}else n.style.top="0px"}else window.setTimeout(e,30)}var i=1,n=t.element||document.getElementById(t.id),s=t.width||n.offsetWidth,l=t.height||n.offsetHeight,o=t.valign||"center",r=t.halign||"center",f=t.fit||"cover",a=t.scale;n.style.position="absolute",n.parentElement.style.overflow="hidden",a&&(n.style.transformOrigin="left top"),-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){s=t},this.setHeight=function(t){l=t},this.setValign=function(t){o=t},this.setHalign=function(t){r=t},this.setFit=function(t){f=t},this.getWidth=function(){return s},this.getHeight=function(){return l},this.getCurrentWidth=function(){return i*s},this.getCurrentHeight=function(){return i*l},this.getValign=function(){return o},this.getHalign=function(){return r},this.getFit=function(){return f},this.getScale=function(){return i}}