diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..78d77b3 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +root = true + +# All +[*] +charset = utf-8 +end_of_line = lf +indent_size = 4 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +# JSON +[*.json] +indent_size = 2 diff --git a/.gitignore b/.gitignore index 63d2d62..9daa824 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,2 @@ .DS_Store - -# Folders node_modules diff --git a/LICENSE b/LICENSE index a4e40e6..6967d37 100644 --- a/LICENSE +++ b/LICENSE @@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - diff --git a/README.md b/README.md index 48236eb..43e4393 100644 --- a/README.md +++ b/README.md @@ -59,4 +59,3 @@ Written by [Williams New York](http://williamsnewyork.com) ## LICENSE Licensed under the [MIT license](http://opensource.org/licenses/MIT). - diff --git a/contain-element.js b/contain-element.js index 5f5d804..580c993 100644 --- a/contain-element.js +++ b/contain-element.js @@ -3,67 +3,75 @@ function ContainElement(options) { element = document.getElementById(options.id), elementWidth = options.width || element.offsetWidth, elementHeight = options.height || element.offsetHeight, - valign = options.valign || 'center', - halign = options.halign || 'center'; + valign = options.valign || "center", + halign = options.halign || "center"; - // Apply required attributes to the element and its parents - element.style.position = 'absolute'; - element.parentElement.style.overflow = 'hidden'; - if (['relative', 'absolute', 'fixed'].indexOf(window.getComputedStyle(element.parentElement, null).getPropertyValue('position')) === -1) - element.parentElement.style.position = 'relative'; + // Apply required attributes to the element + element.style.position = "absolute"; + element.parentElement.style.overflow = "hidden"; + + // Apply relative position to the parent if it doesn't already have relative, absolute or fixed positioning + if ([ "relative", "absolute", "fixed" ].indexOf(window.getComputedStyle(element.parentElement, null).getPropertyValue("position")) === -1) { + element.parentElement.style.position = "relative"; + } function updateContain() { 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)) { + if (parentWidth && parentHeight) { // Calculate the scale factor - if (parentWidth > ((parentHeight / (elementHeight * scaleFactor)) * (elementWidth * scaleFactor))) - scaleFactor = (parentWidth / elementWidth); - else - scaleFactor = (parentHeight / elementHeight); + if (parentWidth > parentHeight / (elementHeight * scaleFactor) * (elementWidth * scaleFactor)) { + scaleFactor = parentWidth / elementWidth; + } else { + scaleFactor = parentHeight / elementHeight; + } // Scale the element using the scale factor - element.style.width = (elementWidth * scaleFactor) + 'px'; - element.style.height = (elementHeight * scaleFactor) + 'px'; + element.style.width = elementWidth * scaleFactor + "px"; + element.style.height = elementHeight * scaleFactor + "px"; // Anchor the element horizontally to the left/center/right - if (parentWidth < (elementWidth * scaleFactor)) { - switch(halign) { - case 'left': + if (parentWidth < elementWidth * scaleFactor) { + switch (halign) { + case "left": // Anchor horizontally to the left of the parent element - element.style.left = 0 + 'px'; + element.style.left = "0px"; break; - case 'right': + + case "right": // Anchor horizontally to the right of the parent element - element.style.left = (0 - ((elementWidth * scaleFactor) - parentWidth)) + 'px'; + element.style.left = 0 - (elementWidth * scaleFactor - parentWidth) + "px"; break; + default: // Anchor horizontally to the center of the parent element - element.style.left = (0 - (((elementWidth * scaleFactor) - parentWidth) / 2)) + 'px'; + element.style.left = 0 - (elementWidth * scaleFactor - parentWidth) / 2 + "px"; } } else { - element.style.left = 0 + 'px'; + element.style.left = "0px"; } // Anchor the element vertically to the top/center/bottom - if ((elementHeight * scaleFactor) > parentHeight) { - switch(valign) { - case 'top': + if (elementHeight * scaleFactor > parentHeight) { + switch (valign) { + case "top": // Anchor vertically to the top of the parent element - element.style.top = 0 + 'px'; + element.style.top = "0px"; break; - case 'bottom': + + case "bottom": // Anchor veritcally to the bottom of the parent element - element.style.top = (0 - ((elementHeight * scaleFactor) - parentHeight)) + 'px'; + element.style.top = 0 - (elementHeight * scaleFactor - parentHeight) + "px"; break; + default: // Anchor vertically to the center of the parent element - element.style.top = (0 - (((elementHeight * scaleFactor) - parentHeight) / 2)) + 'px'; + element.style.top = 0 - (elementHeight * scaleFactor - parentHeight) / 2 + "px"; } } else { - element.style.top = 0 + 'px'; + element.style.top = "0px"; } } else { // Try again in 30ms if the document didn't load enough to determine the parent element's width and height yet @@ -104,4 +112,3 @@ function ContainElement(options) { // 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 99fbf70..95cdd61 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",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 diff --git a/gulpfile.js b/gulpfile.js index 600da95..499e3ef 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,12 +1,12 @@ -var gulp = require('gulp'); -var ugly = require('gulp-uglify'); -var concat = require('gulp-concat'); +const gulp = require("gulp"), + ugly = require("gulp-uglify"), + concat = require("gulp-concat"); -gulp.task('min', function() { - return gulp.src('contain-element.js') - .pipe(ugly()) - .pipe(concat('contain-element.min.js')) - .pipe(gulp.dest('./')); +gulp.task("min", function() { + return gulp.src("contain-element.js") + .pipe(ugly()) + .pipe(concat("contain-element.min.js")) + .pipe(gulp.dest("./")); }); -gulp.task('default', ['min']); +gulp.task("default", [ "min" ]); diff --git a/package.json b/package.json index 54e817b..d1808e4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "devDependencies": { - "gulp": "^3.9.0", + "gulp": "^3.9.1", "gulp-concat": "^2.6.0", - "gulp-uglify": "^1.2.0" + "gulp-uglify": "^1.5.3" } }