kevin/contain-element
1
0
Fork 0
mirror of https://github.com/WilliamsNY/contain-element.git synced 2024-11-23 22:24:10 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fix setting setValign and setHalign by left/top/center/right/bottom and quoted numbers, and allow quoted values for the width and height

Browse source
This commit is contained in:
Kevin MacMartin 2018-05-14 14:51:13 -04:00
parent b44d7ffcdc
commit 1c672e883e
3 changed files with 151 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
contain-element-module.js
View file

@ -1,8 +1,8 @@
module.exports = function(options) { module.exports = function(options) {
var scaleFactor = 1, var scaleFactor = 1,
element = options.element || document.getElementById(options.id), element = options.element || document.getElementById(options.id),
elementWidth = options.width || element.offsetWidth, elementWidth = Number(options.width) || element.offsetWidth,
elementHeight = options.height || element.offsetHeight, elementHeight = Number(options.height) || element.offsetHeight,
valign = options.valign || "center", valign = options.valign || "center",
halign = options.halign || "center", halign = options.halign || "center",
fit = options.fit || "cover", fit = options.fit || "cover",
@ -22,40 +22,42 @@ module.exports = function(options) {
element.parentElement.style.position = "relative"; element.parentElement.style.position = "relative";
} }
// Convert halign to decimal percent function parseAlignment() {
switch (halign) { // Convert halign to decimal percent
case "left": switch (halign) {
halign = 0; case "left":
break; halign = 0;
break;
case "center": case "center":
halign = 0.5; halign = 0.5;
break; break;
case "right": case "right":
halign = 1; halign = 1;
break; break;
default: default:
halign = Number(halign) / 100; halign = Number(halign) / 100;
} }
// Convert valign to decimal percent // Convert valign to decimal percent
switch (valign) { switch (valign) {
case "top": case "top":
valign = 0; valign = 0;
break; break;
case "center": case "center":
valign = 0.5; valign = 0.5;
break; break;
case "bottom": case "bottom":
valign = 1; valign = 1;
break; break;
default: default:
valign = Number(valign) / 100; valign = Number(valign) / 100;
}
} }
function updateContain() { function updateContain() {
@ -114,6 +116,9 @@ module.exports = function(options) {
} }
} }
// Parse the valign and halign options
parseAlignment();
// Run the function to scale and anchor the element // Run the function to scale and anchor the element
updateContain(); updateContain();
@ -121,41 +126,69 @@ module.exports = function(options) {
this.update = updateContain; this.update = updateContain;
// External function to set elementWidth // External function to set elementWidth
this.setWidth = function(newWidth) { elementWidth = newWidth; }; this.setWidth = function(newWidth) {
elementWidth = newWidth;
};
// External function to set elementHeight // External function to set elementHeight
this.setHeight = function(newHeight) { elementHeight = newHeight; }; this.setHeight = function(newHeight) {
elementHeight = newHeight;
};
// External function to set valign // External function to set valign
this.setValign = function(newValign) { valign = newValign; }; this.setValign = function(newValign) {
valign = newValign;
parseAlignment();
};
// External function to set halign // External function to set halign
this.setHalign = function(newHalign) { halign = newHalign; }; this.setHalign = function(newHalign) {
halign = newHalign;
parseAlignment();
};
// External function to set fit // External function to set fit
this.setFit = function(newFit) { fit = newFit; }; this.setFit = function(newFit) {
fit = newFit;
};
// External function to return the elementWidth // External function to return the elementWidth
this.getWidth = function() { return elementWidth; }; this.getWidth = function() {
return Number(elementWidth);
};
// External function to return the elementHeight // External function to return the elementHeight
this.getHeight = function() { return elementHeight; }; this.getHeight = function() {
return Number(elementHeight);
};
// External function to return the current width // 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 // 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 // External function to return the current valign
this.getValign = function() { return valign; }; this.getValign = function() {
return valign;
};
// External function to return the current halign // External function to return the current halign
this.getHalign = function() { return halign; }; this.getHalign = function() {
return halign;
};
// External function to return the current fit // 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 // External function to return the current scale factor
this.getScale = function() { return scaleFactor; }; this.getScale = function() {
return scaleFactor;
};
}; };

117
contain-element.js
View file

@ -1,8 +1,8 @@
function ContainElement(options) { function ContainElement(options) {
var scaleFactor = 1, var scaleFactor = 1,
element = options.element || document.getElementById(options.id), element = options.element || document.getElementById(options.id),
elementWidth = options.width || element.offsetWidth, elementWidth = Number(options.width) || element.offsetWidth,
elementHeight = options.height || element.offsetHeight, elementHeight = Number(options.height) || element.offsetHeight,
valign = options.valign || "center", valign = options.valign || "center",
halign = options.halign || "center", halign = options.halign || "center",
fit = options.fit || "cover", fit = options.fit || "cover",
@ -22,40 +22,42 @@ function ContainElement(options) {
element.parentElement.style.position = "relative"; element.parentElement.style.position = "relative";
} }
// Convert halign to decimal percent function parseAlignment() {
switch (halign) { // Convert halign to decimal percent
case "left": switch (halign) {
halign = 0; case "left":
break; halign = 0;
break;
case "center": case "center":
halign = 0.5; halign = 0.5;
break; break;
case "right": case "right":
halign = 1; halign = 1;
break; break;
default: default:
halign = Number(halign) / 100; halign = Number(halign) / 100;
} }
// Convert valign to decimal percent // Convert valign to decimal percent
switch (valign) { switch (valign) {
case "top": case "top":
valign = 0; valign = 0;
break; break;
case "center": case "center":
valign = 0.5; valign = 0.5;
break; break;
case "bottom": case "bottom":
valign = 1; valign = 1;
break; break;
default: default:
valign = Number(valign) / 100; valign = Number(valign) / 100;
}
} }
function updateContain() { function updateContain() {
@ -114,6 +116,9 @@ function ContainElement(options) {
} }
} }
// Parse the valign and halign options
parseAlignment();
// Run the function to scale and anchor the element // Run the function to scale and anchor the element
updateContain(); updateContain();
@ -121,41 +126,69 @@ function ContainElement(options) {
this.update = updateContain; this.update = updateContain;
// External function to set elementWidth // External function to set elementWidth
this.setWidth = function(newWidth) { elementWidth = newWidth; }; this.setWidth = function(newWidth) {
elementWidth = Number(newWidth);
};
// External function to set elementHeight // External function to set elementHeight
this.setHeight = function(newHeight) { elementHeight = newHeight; }; this.setHeight = function(newHeight) {
elementHeight = Number(newHeight);
};
// External function to set valign // External function to set valign
this.setValign = function(newValign) { valign = newValign; }; this.setValign = function(newValign) {
valign = newValign;
parseAlignment();
};
// External function to set halign // External function to set halign
this.setHalign = function(newHalign) { halign = newHalign; }; this.setHalign = function(newHalign) {
halign = newHalign;
parseAlignment();
};
// External function to set fit // External function to set fit
this.setFit = function(newFit) { fit = newFit; }; this.setFit = function(newFit) {
fit = newFit;
};
// External function to return the elementWidth // External function to return the elementWidth
this.getWidth = function() { return elementWidth; }; this.getWidth = function() {
return Number(elementWidth);
};
// External function to return the elementHeight // External function to return the elementHeight
this.getHeight = function() { return elementHeight; }; this.getHeight = function() {
return Number(elementHeight);
};
// External function to return the current width // 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 // 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 // External function to return the current valign
this.getValign = function() { return valign; }; this.getValign = function() {
return valign;
};
// External function to return the current halign // External function to return the current halign
this.getHalign = function() { return halign; }; this.getHalign = function() {
return halign;
};
// External function to return the current fit // 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 // External function to return the current scale factor
this.getScale = function() { return scaleFactor; }; this.getScale = function() {
return scaleFactor;
};
} }

2
contain-element.min.js vendored
View file

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