WIP
This commit is contained in:
parent
ad4991cd8b
commit
d558ea1dbf
5 changed files with 189 additions and 79 deletions
|
@ -18,31 +18,13 @@ limitations under the License.
|
|||
implements DOM/CSS operations for resizing.
|
||||
The sizer determines what CSS mechanism is used for sizing items, like flexbox, ...
|
||||
*/
|
||||
class Sizer {
|
||||
export class Sizer {
|
||||
constructor(container, vertical, reverse) {
|
||||
this.container = container;
|
||||
this.reverse = reverse;
|
||||
this.vertical = vertical;
|
||||
}
|
||||
|
||||
getItemPercentage(item) {
|
||||
/*
|
||||
const flexGrow = window.getComputedStyle(item).flexGrow;
|
||||
if (flexGrow === "") {
|
||||
return null;
|
||||
}
|
||||
return parseInt(flexGrow) / 1000;
|
||||
*/
|
||||
const style = window.getComputedStyle(item);
|
||||
const sizeStr = this.vertical ? style.height : style.width;
|
||||
const size = parseInt(sizeStr, 10);
|
||||
return size / this.getTotalSize();
|
||||
}
|
||||
|
||||
setItemPercentage(item, percent) {
|
||||
item.style.flexGrow = Math.round(percent * 1000);
|
||||
}
|
||||
|
||||
/**
|
||||
@param {Element} item the dom element being resized
|
||||
@return {number} how far the edge of the item is from the edge of the container
|
||||
|
@ -97,11 +79,9 @@ class Sizer {
|
|||
}
|
||||
}
|
||||
|
||||
class FlexSizer extends Sizer {
|
||||
export class FlexSizer extends Sizer {
|
||||
setItemSize(item, size) {
|
||||
item.style.flexGrow = `0`;
|
||||
item.style.flexBasis = `${Math.round(size)}px`;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {Sizer, FlexSizer};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue