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

Clean up syntax, upgrade gulp-uglify and rebuild the minified version

Browse source
This commit is contained in:
Kevin MacMartin 2016-06-20 16:53:45 -04:00
parent 5cae38513c
commit a10f958daf
8 changed files with 64 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
.editorconfig Normal file
View file

@ -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

2
.gitignore vendored
View file

@ -1,4 +1,2 @@
.DS_Store
# Folders
node_modules

1
LICENSE
View file

@ -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.

1
README.md
View file

@ -59,4 +59,3 @@ Written by [Williams New York](http://williamsnewyork.com)
## LICENSE
Licensed under the [MIT license](http://opensource.org/licenses/MIT).

69
contain-element.js
View file

@ -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; };
}

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",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}}

16
gulpfile.js
View file

@ -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')
gulp.task("min", function() {
return gulp.src("contain-element.js")
.pipe(ugly())
.pipe(concat('contain-element.min.js'))
.pipe(gulp.dest('./'));
.pipe(concat("contain-element.min.js"))
.pipe(gulp.dest("./"));
});
gulp.task('default', ['min']);
gulp.task("default", [ "min" ]);

4
package.json
View file

@ -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"
}
}