mirror of
https://github.com/WilliamsNY/contain-element.git
synced 2024-11-23 22:24:10 -05:00
Fix setting setValign and setHalign by left/top/center/right/bottom and quoted numbers, and allow quoted values for the width and height
This commit is contained in:
Kevin MacMartin
parent
b44d7ffcdc
commit
1c672e883e
3 changed files with 151 additions and 85 deletions
|
|
@ -1,8 +1,8 @@
|
|||
module.exports = function(options) {
|
||||
var scaleFactor = 1,
|
||||
element = options.element || document.getElementById(options.id),
|
||||
elementWidth = options.width || element.offsetWidth,
|
||||
elementHeight = options.height || element.offsetHeight,
|
||||
elementWidth = Number(options.width) || element.offsetWidth,
|
||||
elementHeight = Number(options.height) || element.offsetHeight,
|
||||
valign = options.valign || "center",
|
||||
halign = options.halign || "center",
|
||||
fit = options.fit || "cover",
|
||||
|
|
@ -22,6 +22,7 @@ module.exports = function(options) {
|
|||
element.parentElement.style.position = "relative";
|
||||
}
|
||||
|
||||
function parseAlignment() {
|
||||
// Convert halign to decimal percent
|
||||
switch (halign) {
|
||||
case "left":
|
||||
|
|
@ -57,6 +58,7 @@ module.exports = function(options) {
|
|||
default:
|
||||
valign = Number(valign) / 100;
|
||||
}
|
||||
}
|
||||
|
||||
function updateContain() {
|
||||
var parentWidth = element.parentElement.offsetWidth,
|
||||
|
|
@ -114,6 +116,9 @@ module.exports = function(options) {
|
|||
}
|
||||
}
|
||||
|
||||
// Parse the valign and halign options
|
||||
parseAlignment();
|
||||
|
||||
// Run the function to scale and anchor the element
|
||||
updateContain();
|
||||
|
||||
|
|
@ -121,41 +126,69 @@ module.exports = function(options) {
|
|||
this.update = updateContain;
|
||||
|
||||
// External function to set elementWidth
|
||||
this.setWidth = function(newWidth) { elementWidth = newWidth; };
|
||||
this.setWidth = function(newWidth) {
|
||||
elementWidth = newWidth;
|
||||
};
|
||||
|
||||
// External function to set elementHeight
|
||||
this.setHeight = function(newHeight) { elementHeight = newHeight; };
|
||||
this.setHeight = function(newHeight) {
|
||||
elementHeight = newHeight;
|
||||
};
|
||||
|
||||
// External function to set valign
|
||||
this.setValign = function(newValign) { valign = newValign; };
|
||||
this.setValign = function(newValign) {
|
||||
valign = newValign;
|
||||
parseAlignment();
|
||||
};
|
||||
|
||||
// External function to set halign
|
||||
this.setHalign = function(newHalign) { halign = newHalign; };
|
||||
this.setHalign = function(newHalign) {
|
||||
halign = newHalign;
|
||||
parseAlignment();
|
||||
};
|
||||
|
||||
// External function to set fit
|
||||
this.setFit = function(newFit) { fit = newFit; };
|
||||
this.setFit = function(newFit) {
|
||||
fit = newFit;
|
||||
};
|
||||
|
||||
// External function to return the elementWidth
|
||||
this.getWidth = function() { return elementWidth; };
|
||||
this.getWidth = function() {
|
||||
return Number(elementWidth);
|
||||
};
|
||||
|
||||
// External function to return the elementHeight
|
||||
this.getHeight = function() { return elementHeight; };
|
||||
this.getHeight = function() {
|
||||
return Number(elementHeight);
|
||||
};
|
||||
|
||||
// External function to return the current width
|
||||
this.getCurrentWidth = function() { return scaleFactor * elementWidth; };
|
||||
this.getCurrentWidth = function() {
|
||||
return scaleFactor * elementWidth;
|
||||
};
|
||||
|
||||
// External function to return the current height
|
||||
this.getCurrentHeight = function() { return scaleFactor * elementHeight; };
|
||||
this.getCurrentHeight = function() {
|
||||
return scaleFactor * elementHeight;
|
||||
};
|
||||
|
||||
// External function to return the current valign
|
||||
this.getValign = function() { return valign; };
|
||||
this.getValign = function() {
|
||||
return valign;
|
||||
};
|
||||
|
||||
// External function to return the current halign
|
||||
this.getHalign = function() { return halign; };
|
||||
this.getHalign = function() {
|
||||
return halign;
|
||||
};
|
||||
|
||||
// External function to return the current fit
|
||||
this.getFit = function() { return fit; };
|
||||
this.getFit = function() {
|
||||
return fit;
|
||||
};
|
||||
|
||||
// External function to return the current scale factor
|
||||
this.getScale = function() { return scaleFactor; };
|
||||
this.getScale = function() {
|
||||
return scaleFactor;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
function ContainElement(options) {
|
||||
var scaleFactor = 1,
|
||||
element = options.element || document.getElementById(options.id),
|
||||
elementWidth = options.width || element.offsetWidth,
|
||||
elementHeight = options.height || element.offsetHeight,
|
||||
elementWidth = Number(options.width) || element.offsetWidth,
|
||||
elementHeight = Number(options.height) || element.offsetHeight,
|
||||
valign = options.valign || "center",
|
||||
halign = options.halign || "center",
|
||||
fit = options.fit || "cover",
|
||||
|
|
@ -22,6 +22,7 @@ function ContainElement(options) {
|
|||
element.parentElement.style.position = "relative";
|
||||
}
|
||||
|
||||
function parseAlignment() {
|
||||
// Convert halign to decimal percent
|
||||
switch (halign) {
|
||||
case "left":
|
||||
|
|
@ -57,6 +58,7 @@ function ContainElement(options) {
|
|||
default:
|
||||
valign = Number(valign) / 100;
|
||||
}
|
||||
}
|
||||
|
||||
function updateContain() {
|
||||
var parentWidth = element.parentElement.offsetWidth,
|
||||
|
|
@ -114,6 +116,9 @@ function ContainElement(options) {
|
|||
}
|
||||
}
|
||||
|
||||
// Parse the valign and halign options
|
||||
parseAlignment();
|
||||
|
||||
// Run the function to scale and anchor the element
|
||||
updateContain();
|
||||
|
||||
|
|
@ -121,41 +126,69 @@ function ContainElement(options) {
|
|||
this.update = updateContain;
|
||||
|
||||
// External function to set elementWidth
|
||||
this.setWidth = function(newWidth) { elementWidth = newWidth; };
|
||||
this.setWidth = function(newWidth) {
|
||||
elementWidth = Number(newWidth);
|
||||
};
|
||||
|
||||
// External function to set elementHeight
|
||||
this.setHeight = function(newHeight) { elementHeight = newHeight; };
|
||||
this.setHeight = function(newHeight) {
|
||||
elementHeight = Number(newHeight);
|
||||
};
|
||||
|
||||
// External function to set valign
|
||||
this.setValign = function(newValign) { valign = newValign; };
|
||||
this.setValign = function(newValign) {
|
||||
valign = newValign;
|
||||
parseAlignment();
|
||||
};
|
||||
|
||||
// External function to set halign
|
||||
this.setHalign = function(newHalign) { halign = newHalign; };
|
||||
this.setHalign = function(newHalign) {
|
||||
halign = newHalign;
|
||||
parseAlignment();
|
||||
};
|
||||
|
||||
// External function to set fit
|
||||
this.setFit = function(newFit) { fit = newFit; };
|
||||
this.setFit = function(newFit) {
|
||||
fit = newFit;
|
||||
};
|
||||
|
||||
// External function to return the elementWidth
|
||||
this.getWidth = function() { return elementWidth; };
|
||||
this.getWidth = function() {
|
||||
return Number(elementWidth);
|
||||
};
|
||||
|
||||
// External function to return the elementHeight
|
||||
this.getHeight = function() { return elementHeight; };
|
||||
this.getHeight = function() {
|
||||
return Number(elementHeight);
|
||||
};
|
||||
|
||||
// External function to return the current width
|
||||
this.getCurrentWidth = function() { return scaleFactor * elementWidth; };
|
||||
this.getCurrentWidth = function() {
|
||||
return scaleFactor * elementWidth;
|
||||
};
|
||||
|
||||
// External function to return the current height
|
||||
this.getCurrentHeight = function() { return scaleFactor * elementHeight; };
|
||||
this.getCurrentHeight = function() {
|
||||
return scaleFactor * elementHeight;
|
||||
};
|
||||
|
||||
// External function to return the current valign
|
||||
this.getValign = function() { return valign; };
|
||||
this.getValign = function() {
|
||||
return valign;
|
||||
};
|
||||
|
||||
// External function to return the current halign
|
||||
this.getHalign = function() { return halign; };
|
||||
this.getHalign = function() {
|
||||
return halign;
|
||||
};
|
||||
|
||||
// External function to return the current fit
|
||||
this.getFit = function() { return fit; };
|
||||
this.getFit = function() {
|
||||
return fit;
|
||||
};
|
||||
|
||||
// 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){var r=1,s=t.element||document.getElementById(t.id),o=t.width||s.offsetWidth,a=t.height||s.offsetHeight,l=t.valign||"center",u=t.halign||"center",h=t.fit||"cover",c=t.scale;switch(s.style.position="absolute",s.parentElement.style.overflow="hidden",c&&(s.style.transformOrigin="left top"),-1===["relative","absolute","fixed"].indexOf(window.getComputedStyle(s.parentElement,null).getPropertyValue("position"))&&(s.parentElement.style.position="relative"),u){case"left":u=0;break;case"center":u=.5;break;case"right":u=1;break;default:u=Number(u)/100}switch(l){case"top":l=0;break;case"center":l=.5;break;case"bottom":l=1;break;default:l=Number(l)/100}function f(){var t=s.parentElement.offsetWidth,e=s.parentElement.offsetHeight,n=0-(o*r-t),i=0-(a*r-e);t&&e?(r="cover"===h?e/a*o<t?t/o:e/a:"contain"===h?t/o*a<e?t/o:e/a:1,c?s.style.transform="scale("+r+")":(s.style.width=o*r+"px",s.style.height=a*r+"px"),s.style.left=t!==o*r?n*u+"px":"0px",s.style.top=e!==a*r?i*l+"px":"0px"):setTimeout(f,30)}f(),this.update=f,this.setWidth=function(t){o=t},this.setHeight=function(t){a=t},this.setValign=function(t){l=t},this.setHalign=function(t){u=t},this.setFit=function(t){h=t},this.getWidth=function(){return o},this.getHeight=function(){return a},this.getCurrentWidth=function(){return r*o},this.getCurrentHeight=function(){return r*a},this.getValign=function(){return l},this.getHalign=function(){return u},this.getFit=function(){return h},this.getScale=function(){return r}}
|
||||
function ContainElement(t){var r=1,s=t.element||document.getElementById(t.id),o=Number(t.width)||s.offsetWidth,u=Number(t.height)||s.offsetHeight,a=t.valign||"center",l=t.halign||"center",c=t.fit||"cover",f=t.scale;function e(){switch(l){case"left":l=0;break;case"center":l=.5;break;case"right":l=1;break;default:l=Number(l)/100}switch(a){case"top":a=0;break;case"center":a=.5;break;case"bottom":a=1;break;default:a=Number(a)/100}}function h(){var t=s.parentElement.offsetWidth,e=s.parentElement.offsetHeight,n=0-(o*r-t),i=0-(u*r-e);t&&e?(r="cover"===c?e/u*o<t?t/o:e/u:"contain"===c?t/o*u<e?t/o:e/u:1,f?s.style.transform="scale("+r+")":(s.style.width=o*r+"px",s.style.height=u*r+"px"),s.style.left=t!==o*r?n*l+"px":"0px",s.style.top=e!==u*r?i*a+"px":"0px"):setTimeout(h,30)}s.style.position="absolute",s.parentElement.style.overflow="hidden",f&&(s.style.transformOrigin="left top"),-1===["relative","absolute","fixed"].indexOf(window.getComputedStyle(s.parentElement,null).getPropertyValue("position"))&&(s.parentElement.style.position="relative"),e(),h(),this.update=h,this.setWidth=function(t){o=t},this.setHeight=function(t){u=t},this.setValign=function(t){a=t,e()},this.setHalign=function(t){l=t,e()},this.setFit=function(t){c=t},this.getWidth=function(){return Number(o)},this.getHeight=function(){return Number(u)},this.getCurrentWidth=function(){return r*o},this.getCurrentHeight=function(){return r*u},this.getValign=function(){return a},this.getHalign=function(){return l},this.getFit=function(){return c},this.getScale=function(){return r}}
|
||||
Loading…
Reference in a new issue