๐Element+boxes
Last updated
Was this helpful?
Last updated
Was this helpful?
browser โฉ DOM โฉ type โฉ Element โฉ +boxes
extend Element with various box models.
.paddingBox = content + padding
.borderBox = content + padding + border (+ scrollbars, if present) (a Rect relative to .offsetParent)
.boundingBox - a Rect relative to viewport.
.scrollBox = content + padding + overflow
๐ custom
๐ compare๏ผ mouse event, elem.position()
replit โฉ various boxes , require -> Rect
// 2023.01.18 - 16:30 (+) ._box (refactor), .toString(), viewport
// 2023.01.17 - 21:09 (โข) first draft
// -----------------------------------------------
const {log} = console;
// โญ๏ธ import
import {rect} from './Rect.js'; // ๐ Rect
// -----------------------------------------------
// โญ๏ธ viewport
// -----------------------------------------------
// .size, .width, .height
// .origin, .x, .y
// -----------------------------------------------
// .toString()
//
const viewport = {
// private
get _box() {
const {scrollX: x, scrollY: y} = window;
const {innerWidth: w, innerHeight: h} = window;
return rect(x, y, w, h); // ๐ Rect
},
// ๐ธ .size
get size() { return this._box.size },
get width() { return this.size.width }, // .width
get height() { return this.size.height }, // .height
// ๐ธ .origin (relative to document)
get origin() { return this._box.origin },
get x() { return this.origin.x }, // .x
get y() { return this.origin.y }, // .y
// .toString()
toString() { return this._box.toString() }
};
// โญ๏ธ Element + box models
// -----------------------------------------------
// ๐ธ .paddingBox - Rect properties + .info
// ๐ธ .borderBox - Rect properties + .info
// ๐ธ .boundingBox - Rect properties + .info
// ๐ธ .scrollBox
//
Object.defineProperties(Element.prototype, {
// ๐ธ .paddingBox
paddingBox: {
get() {
const {clientLeft: x, clientTop: y} = this;
const {clientWidth: width, clientHeight: height} = this;
const box = rect(x, y, width, height); // ๐ Rect
box.info = [
`๐ฒ padding box`,
`---------------`,
`โข size: ${box.size}`,
` (โ inline elements / elements with no CSS: return (0,0))`,
`โข origin: ${box.origin}`,
` (โญ๏ธ relative to its "border box")`,
` (โ inline elements (like <i>, <code> ...): return (0,0))`,
].join('\n');
return box;
},
},
// ๐ธ .borderBox
borderBox: {
get() {
const {offsetLeft: x, offsetTop: y} = this;
const {offsetWidth: width, offsetHeight: height} = this;
const box = rect(x, y, width, height); // ๐ Rect
box.info = [
`๐ฒ border box`,
`---------------`,
`โข size: ${box.size}`,
`โข origin: ${box.origin}`,
` (โญ๏ธ relative to its "offsetParent")`,
`โข offsetParent: ${this.offsetParent ?. nodeName ?? 'null'}`,
` (โ returns "null" if the element: )`,
` โข display : none (or its parent)`,
` โข position: fixed`,
` โข is <html> or <body>`,
].join('\n');
return box;
},
},
// ๐ธ .boundingBox
boundingBox: {
get() {
const {x, y, width, height} = this.getBoundingClientRect();
const box = rect(x, y, width, height); // ๐ Rect
box.info = [
`๐ฒ bounding box`,
`----------------`,
`โข size: ${box.size}`,
`โข origin: ${box.origin}`,
` (โญ๏ธ relative to the "viewport")`,
].join('\n');
return box;
},
},
// ๐ธ .scrollBox
scrollBox: {
get() {
const {scrollLeft: x, scrollTop: y} = this;
const {scrollWidth: width, scrollHeight: height} = this;
const box = rect(x, y, width, height); // ๐ Rect
box.info = [
`๐ฒ scroll box`,
`----------------`,
`โข size: ${box.size}`,
` (= padding box size, if no overflow.)`,
`โข origin: ${box.origin}`,
` (โญ๏ธ relative to its "origin", = (0,0) if it can't scroll.)`,
].join('\n');
return box;
},
},
});
// export
export {viewport}; // ES module exportscroll progress - use viewport.
scroll me - use .paddingBox, .scrollBox.
0: (?) first recorded// โญ๏ธ viewport
const viewport = {
// .size
get size() {
return vec(innerWidth, innerHeight);
},
// .positionInDocument
get positionInDocument() {
return vec(scrollX, scrollY);
}
};
// โญ๏ธ extending `Element`
// ๐ธ .paddingBox
// ๐ธ .borderBox
// ๐ธ .boundingBox โ .borderBox (integer-valued)
// ๐ธ .scrollBox
Object.defineProperties(Element.prototype, {
// key = "paddingBox"
paddingBox: {
// access descriptor ()
get() {
// save element for future reference
const elem = this;
// return an object
return {
// .paddingBox.size (Vector)
get size() {
return vec(elem.clientWidth, elem.clientHeight);
},
};
},
},
// key = "borderBox"
borderBox: {
// access descriptor
get() {
// save element for future reference
const elem = this;
// return an object
return {
// .borderBox.size (Vector)
get size() {
return vec(elem.offsetWidth, elem.offsetHeight);
},
// .borderBox.position()
position(coordSystem){
// #TODO <-----------------------
switch(coordSystem){
default: return vec(elem.offsetLeft, elem.offsetTop)
}
}
};
},
},
// key = "boundingBox"
boundingBox: {
// access descriptor
get() {
// save element for future reference
const elem = this;
// return an object
return {
// .boundingBox.size (Vector)
get size() {
const {width, height} = elem.getBoundingClientRect();
return vec(width, height);
},
};
},
},
// key = "scrollBox"
scrollBox: {
// access descriptor
get() {
// save element for future reference
const elem = this;
//return an object
return {
// .scrollBox.size (Vector)
get size() {
return vec(elem.scrollWidth, elem.scrollHeight);
},
};
},
},
});bo