From bf8fede52ffa6464319c89f840e7e91515da952b Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Fri, 13 Jan 2017 15:47:52 -0500 Subject: [PATCH] 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 --- README.md | 13 +++++++------ contain-element.js | 2 +- contain-element.min.js | 2 +- package.json | 2 +- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 43e4393..d0d4fe7 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/contain-element.js b/contain-element.js index 580c993..643a24d 100644 --- a/contain-element.js +++ b/contain-element.js @@ -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", diff --git a/contain-element.min.js b/contain-element.min.js index 95cdd61..4a82094 100644 --- a/contain-element.min.js +++ b/contain-element.min.js @@ -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}} \ 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",ta)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}} \ No newline at end of file diff --git a/package.json b/package.json index d1808e4..fffb73d 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,6 @@ "devDependencies": { "gulp": "^3.9.1", "gulp-concat": "^2.6.0", - "gulp-uglify": "^1.5.3" + "gulp-uglify": "^2.0.0" } }