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
|
||||
|
||||
# Folders
|
||||
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,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
|
|
|
@ -59,4 +59,3 @@ Written by [Williams New York](http://williamsnewyork.com)
|
|||
## LICENSE
|
||||
|
||||
Licensed under the [MIT license](http://opensource.org/licenses/MIT).
|
||||
|
||||
|
|
|
@ -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
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}}
|
16
gulpfile.js
16
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')
|
||||
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" ]);
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue