devexpress-richedit
Version:
DevExpress Rich Text Editor is an advanced word-processing tool designed for working with rich text documents.
79 lines (78 loc) • 3.35 kB
JavaScript
import { isDefined } from "@devexpress/utils/lib/utils/common";
export class SizeUtils {
static _scrollbarsWidth;
static getScrollbarsWidth() {
if (!isDefined(this._scrollbarsWidth)) {
const scrollDiv = document.createElement('div');
scrollDiv.style.visibility = 'hidden';
scrollDiv.style.overflow = 'scroll';
scrollDiv.style.position = 'absolute';
scrollDiv.style.top = '-9999px';
scrollDiv.style.width = '100px';
scrollDiv.style.height = '100px';
document.body.appendChild(scrollDiv);
const innerDiv = document.createElement('div');
innerDiv.style.width = '100%';
innerDiv.style.height = '100%';
scrollDiv.appendChild(innerDiv);
this._scrollbarsWidth = {
horizontal: SizeUtils.getOffsetHeight(scrollDiv) - SizeUtils.getOffsetHeight(innerDiv),
vertical: SizeUtils.getOffsetWidth(scrollDiv) - SizeUtils.getOffsetWidth(innerDiv)
};
scrollDiv.remove();
}
return this._scrollbarsWidth;
}
static getWidthInfo(element) {
const computedStyle = getComputedStyle(element);
const offsetWidth = this.getOffsetWidth(element);
const offsetWidthWithoutBorder = offsetWidth
- parseCssValue(computedStyle.borderLeftWidth)
- parseCssValue(computedStyle.borderRightWidth);
let scrollbarWidth = 0;
if (Math.round(offsetWidthWithoutBorder) > element.clientWidth)
scrollbarWidth = SizeUtils.getScrollbarsWidth().vertical;
const clientWidth = offsetWidthWithoutBorder - scrollbarWidth;
return new DimensionInfo(offsetWidth, clientWidth, scrollbarWidth);
}
static getClientWidth(element) {
return this.getWidthInfo(element).clientSize;
}
static getHeightInfo(element) {
const computedStyle = getComputedStyle(element);
const offsetHeight = this.getOffsetHeight(element);
const offsetHeightWithoutBorder = offsetHeight
- parseCssValue(computedStyle.borderTopWidth)
- parseCssValue(computedStyle.borderBottomWidth);
let scrollbarWidth = 0;
if (Math.round(offsetHeightWithoutBorder) > element.clientHeight)
scrollbarWidth = SizeUtils.getScrollbarsWidth().horizontal;
const clientHeight = offsetHeightWithoutBorder - scrollbarWidth;
return new DimensionInfo(offsetHeight, clientHeight, scrollbarWidth);
}
static getClientHeight(element) {
return this.getHeightInfo(element).clientSize;
}
static getOffsetSize(element) {
return element.getBoundingClientRect();
}
static getOffsetWidth(element) {
return SizeUtils.getOffsetSize(element).width;
}
static getOffsetHeight(element) {
return SizeUtils.getOffsetSize(element).height;
}
}
function parseCssValue(value) {
return value ? parseFloat(value) : 0;
}
export class DimensionInfo {
offsetSize;
clientSize;
scrollbarSize;
constructor(offsetSize, clientSize, scrollbarSize) {
this.offsetSize = offsetSize;
this.clientSize = clientSize;
this.scrollbarSize = scrollbarSize;
}
}