mirror of
https://github.com/WilliamsNY/contain-element.git
synced 2024-09-07 20:41:22 -04:00
Clean up syntax, upgrade gulp-uglify and rebuild the minified version
This commit is contained in:
parent
5cae38513c
commit
a10f958daf
8 changed files with 64 additions and 47 deletions
14
.editorconfig
Normal file
14
.editorconfig
Normal 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
2
.gitignore
vendored
|
@ -1,4 +1,2 @@
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
||||||
# Folders
|
|
||||||
node_modules
|
node_modules
|
||||||
|
|
1
LICENSE
1
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,
|
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
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
SOFTWARE.
|
SOFTWARE.
|
||||||
|
|
||||||
|
|
|
@ -59,4 +59,3 @@ Written by [Williams New York](http://williamsnewyork.com)
|
||||||
## LICENSE
|
## LICENSE
|
||||||
|
|
||||||
Licensed under the [MIT license](http://opensource.org/licenses/MIT).
|
Licensed under the [MIT license](http://opensource.org/licenses/MIT).
|
||||||
|
|
||||||
|
|
|
@ -3,67 +3,75 @@ function ContainElement(options) {
|
||||||
element = document.getElementById(options.id),
|
element = document.getElementById(options.id),
|
||||||
elementWidth = options.width || element.offsetWidth,
|
elementWidth = options.width || element.offsetWidth,
|
||||||
elementHeight = options.height || element.offsetHeight,
|
elementHeight = options.height || element.offsetHeight,
|
||||||
valign = options.valign || 'center',
|
valign = options.valign || "center",
|
||||||
halign = options.halign || 'center';
|
halign = options.halign || "center";
|
||||||
|
|
||||||
// Apply required attributes to the element and its parents
|
// Apply required attributes to the element
|
||||||
element.style.position = 'absolute';
|
element.style.position = "absolute";
|
||||||
element.parentElement.style.overflow = 'hidden';
|
element.parentElement.style.overflow = "hidden";
|
||||||
if (['relative', 'absolute', 'fixed'].indexOf(window.getComputedStyle(element.parentElement, null).getPropertyValue('position')) === -1)
|
|
||||||
element.parentElement.style.position = 'relative';
|
// 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() {
|
function updateContain() {
|
||||||
var parentWidth = element.parentElement.offsetWidth,
|
var parentWidth = element.parentElement.offsetWidth,
|
||||||
parentHeight = element.parentElement.offsetHeight;
|
parentHeight = element.parentElement.offsetHeight;
|
||||||
|
|
||||||
// Run the scale/position functionality if able to determine the parent element's width and height
|
// 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
|
// Calculate the scale factor
|
||||||
if (parentWidth > ((parentHeight / (elementHeight * scaleFactor)) * (elementWidth * scaleFactor)))
|
if (parentWidth > parentHeight / (elementHeight * scaleFactor) * (elementWidth * scaleFactor)) {
|
||||||
scaleFactor = (parentWidth / elementWidth);
|
scaleFactor = parentWidth / elementWidth;
|
||||||
else
|
} else {
|
||||||
scaleFactor = (parentHeight / elementHeight);
|
scaleFactor = parentHeight / elementHeight;
|
||||||
|
}
|
||||||
|
|
||||||
// Scale the element using the scale factor
|
// Scale the element using the scale factor
|
||||||
element.style.width = (elementWidth * scaleFactor) + 'px';
|
element.style.width = elementWidth * scaleFactor + "px";
|
||||||
element.style.height = (elementHeight * scaleFactor) + 'px';
|
element.style.height = elementHeight * scaleFactor + "px";
|
||||||
|
|
||||||
// Anchor the element horizontally to the left/center/right
|
// Anchor the element horizontally to the left/center/right
|
||||||
if (parentWidth < (elementWidth * scaleFactor)) {
|
if (parentWidth < elementWidth * scaleFactor) {
|
||||||
switch(halign) {
|
switch (halign) {
|
||||||
case 'left':
|
case "left":
|
||||||
// Anchor horizontally to the left of the parent element
|
// Anchor horizontally to the left of the parent element
|
||||||
element.style.left = 0 + 'px';
|
element.style.left = "0px";
|
||||||
break;
|
break;
|
||||||
case 'right':
|
|
||||||
|
case "right":
|
||||||
// Anchor horizontally to the right of the parent element
|
// 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;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
// Anchor horizontally to the center of the parent element
|
// 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 {
|
} else {
|
||||||
element.style.left = 0 + 'px';
|
element.style.left = "0px";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Anchor the element vertically to the top/center/bottom
|
// Anchor the element vertically to the top/center/bottom
|
||||||
if ((elementHeight * scaleFactor) > parentHeight) {
|
if (elementHeight * scaleFactor > parentHeight) {
|
||||||
switch(valign) {
|
switch (valign) {
|
||||||
case 'top':
|
case "top":
|
||||||
// Anchor vertically to the top of the parent element
|
// Anchor vertically to the top of the parent element
|
||||||
element.style.top = 0 + 'px';
|
element.style.top = "0px";
|
||||||
break;
|
break;
|
||||||
case 'bottom':
|
|
||||||
|
case "bottom":
|
||||||
// Anchor veritcally to the bottom of the parent element
|
// 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;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
// Anchor vertically to the center of the parent element
|
// 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 {
|
} else {
|
||||||
element.style.top = 0 + 'px';
|
element.style.top = "0px";
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// Try again in 30ms if the document didn't load enough to determine the parent element's width and height yet
|
// 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
|
// External function to return the current scale factor
|
||||||
this.getScale = function() { return scaleFactor; };
|
this.getScale = function() { return scaleFactor; };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
2
contain-element.min.js
vendored
2
contain-element.min.js
vendored
|
@ -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}}
|
18
gulpfile.js
18
gulpfile.js
|
@ -1,12 +1,12 @@
|
||||||
var gulp = require('gulp');
|
const gulp = require("gulp"),
|
||||||
var ugly = require('gulp-uglify');
|
ugly = require("gulp-uglify"),
|
||||||
var concat = require('gulp-concat');
|
concat = require("gulp-concat");
|
||||||
|
|
||||||
gulp.task('min', function() {
|
gulp.task("min", function() {
|
||||||
return gulp.src('contain-element.js')
|
return gulp.src("contain-element.js")
|
||||||
.pipe(ugly())
|
.pipe(ugly())
|
||||||
.pipe(concat('contain-element.min.js'))
|
.pipe(concat("contain-element.min.js"))
|
||||||
.pipe(gulp.dest('./'));
|
.pipe(gulp.dest("./"));
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('default', ['min']);
|
gulp.task("default", [ "min" ]);
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"gulp": "^3.9.0",
|
"gulp": "^3.9.1",
|
||||||
"gulp-concat": "^2.6.0",
|
"gulp-concat": "^2.6.0",
|
||||||
"gulp-uglify": "^1.2.0"
|
"gulp-uglify": "^1.5.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue