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

Add a new alternative to the "id" option named "element" that allows the contained element to be passed directly, update the readme to reflect this change, update gulp-concat and re-generate the minified version

Browse source
This commit is contained in:
Kevin MacMartin 2017-01-13 15:47:52 -05:00
parent a10f958daf
commit bf8fede52f
4 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
README.md
View file

@ -6,7 +6,7 @@ A JavaScript plugin to contain an element within its parent element.
The plugin scales an element to the minimum size required for it to be completely contained within its parent, and retains its original aspect ratio by cropping portions that don't fit based on its vertical and horizontal alignment (by default both are set to: `center`).
[Demo](http://williamsny.github.io/contain-element/)
[Demo](http://williamsny.github.io/contain-element)
## Features
@ -19,11 +19,12 @@ The plugin scales an element to the minimum size required for it to be completel
```javascript
window.onload = function() {
var contain = new ContainElement({
id: 'element', // the id of the element to be contained
width: '100', // (optional) native element width in pixels (unset: detected element width)
height: '100', // (optional) native element height in pixels (unset: detected element height)
valign: 'top', // (optional) vertical alignment: top|bottom (unset: center)
halign: 'left' // (optional) horizontal alignment: left|right (unset: center)
element: document.getElementById("element"), // the element to be contained (alternative to 'id')
id: "element", // the id of the element to be contained (alternative to 'element')
width: 100, // (optional) native element width in pixels (unset: detected element width)
height: 100, // (optional) native element height in pixels (unset: detected element height)
valign: "top", // (optional) vertical alignment: top|bottom (unset: center)
halign: "left" // (optional) horizontal alignment: left|right (unset: center)
});
// (example) update the size and positioning on window resize

2
contain-element.js
View file

@ -1,6 +1,6 @@
function ContainElement(options) {
var scaleFactor = 1,
element = document.getElementById(options.id),
element = options.element || document.getElementById(options.id),
elementWidth = options.width || element.offsetWidth,
elementHeight = options.height || element.offsetHeight,
valign = options.valign || "center",

2
contain-element.min.js vendored
View file

@ -1 +1 @@
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}}
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",t<l*i)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=t.element||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",["relative","absolute","fixed"].indexOf(window.getComputedStyle(n.parentElement,null).getPropertyValue("position"))===-1&&(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}}

2
package.json
View file

@ -2,6 +2,6 @@
"devDependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-uglify": "^1.5.3"
"gulp-uglify": "^2.0.0"
}
}