kevin/contain-element
1
0
Fork 0
mirror of https://github.com/WilliamsNY/contain-element.git synced 2024-11-27 16:01:25 -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

63
contain-element-module.js
View file

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

63
contain-element.js
View file

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