imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

prevent reflow in app when accessing window dimensions

Browse source
This commit is contained in:
Germain Souquet 2021-05-25 10:25:36 +01:00
parent a57887cc61
commit f156c2db15
14 changed files with 59 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/stores/UIStore.ts
View file

@ -15,6 +15,8 @@ limitations under the License.
*/
import EventEmitter from "events";
import ResizeObserver from 'resize-observer-polyfill';
import ResizeObserverEntry from 'resize-observer-polyfill/src/ResizeObserverEntry';
export enum UI_EVENTS {
Resize = "resize"
@ -28,13 +30,15 @@ export default class UIStore extends EventEmitter {
private resizeObserver: ResizeObserver;
public windowWith: number;
public windowWidth: number;
public windowHeight: number;
constructor() {
super();
this.windowWith = window.innerWidth;
// eslint-disable-next-line no-restricted-properties
this.windowWidth = window.innerWidth;
// eslint-disable-next-line no-restricted-properties
this.windowHeight = window.innerHeight;
this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
@ -61,7 +65,7 @@ export default class UIStore extends EventEmitter {
.find(entry => entry.target === document.body)
.contentRect;
this.windowWith = width;
this.windowWidth = width;
this.windowHeight = height;
this.emit(UI_EVENTS.Resize, entries);