@microsoft/sp-webpart-base
Version:
SharePoint Framework support for building web parts
86 lines • 3.64 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var sp_core_library_1 = require("@microsoft/sp-core-library");
/**
* Web part cache manager. Key is `layout index - section factor` which maps to a width in px
* This is primarily used to reduce browser reflow caused by dom dimension calculations.
*
* @internal
*/
var WebPartWidthCacheManager = /** @class */ (function () {
function WebPartWidthCacheManager() {
}
/**
* Returns cached width
* @param key - string in format '<layoutIndex>-<sectionFactor>'
* @returns width of given sectionFactor or undefined if it does not exist.
*/
WebPartWidthCacheManager.get = function (key) {
return WebPartWidthCacheManager._sectionWidthCache.get(key);
};
/**
* If key exist in cache it returns the value stored.
* Otherwise, it will calculate the width of dom element and store it in the cache.
* Calculating the width will cause a reflow.
*
* @param domElement - dom element width we want to calculate
* @param key - cache's key
*
* @returns width of domElement
*/
WebPartWidthCacheManager.getOrCalculateWidth = function (domElement, key) {
if (key === undefined) {
return WebPartWidthCacheManager.calculateWebPartWidth(domElement);
}
var width = WebPartWidthCacheManager.get(key);
if (width === undefined) {
width = WebPartWidthCacheManager.calculateWebPartWidth(domElement);
if (width > 0) {
WebPartWidthCacheManager._put(key, width);
}
}
return width;
};
/**
* Removes all key-value pairs from the cache
* It is used when window resizes as all section factor widths needs to be cached again.
*/
WebPartWidthCacheManager.clear = function () {
WebPartWidthCacheManager._sectionWidthCache.clear();
};
/**
*
* This value is the available width of the area in which the web part can render itself.
* Instead of "Element.clientWidth" which returns an integer, "getComputedStyle" returns
* a number which is more accurate in sub-pixel.
* This function uses getBoundingClientRect or getComputedStyle which causes
* browser reflows. Please use with caution.
*
* @remarks
* {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth | clientWidth}
* {@link https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseFloat | parseFloat}
* {@link https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle | getComputedStyle}
*
*/
WebPartWidthCacheManager.calculateWebPartWidth = function (domElement) {
var browser = sp_core_library_1._BrowserDetection.getBrowserInformation().browser;
if (browser === sp_core_library_1._Browser.Edge || browser === sp_core_library_1._Browser.IE) {
return domElement.getBoundingClientRect().width;
}
else {
return parseFloat(window.getComputedStyle(domElement).width) || 0;
}
};
/**
* Caches width sectionFactor.
* @param key - string in format '<layoutIndex>-<sectionFactor>'
* @param width - width of canvas section factor in px
*/
WebPartWidthCacheManager._put = function (key, width) {
WebPartWidthCacheManager._sectionWidthCache.set(key, width);
};
WebPartWidthCacheManager._sectionWidthCache = new Map();
return WebPartWidthCacheManager;
}());
exports.default = WebPartWidthCacheManager;
//# sourceMappingURL=WebPartWidthCacheManager.js.map