44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

increase performance by polyfilling ResizeObserver only if required

Browse Source
This commit is contained in:
undergroundwires
2021-03-25 13:24:19 +01:00
parent ac2249f256
commit 448e378dc4
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/presentation/components/Shared/Responsive.vue
View File

@@ -6,7 +6,6 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'; import { Component, Vue, Emit } from 'vue-property-decorator';
import { ResizeObserver } from '@juggle/resize-observer';
import { throttle } from './Throttle'; import { throttle } from './Throttle';
@Component @Component
@@ -16,11 +15,17 @@ export default class Responsive extends Vue {
private observer: ResizeObserver; private observer: ResizeObserver;
private get container(): HTMLElement { return this.$refs.containerElement as HTMLElement; } private get container(): HTMLElement { return this.$refs.containerElement as HTMLElement; }
public mounted() { public async mounted() {
this.width = this.container.offsetWidth; this.width = this.container.offsetWidth;
this.height = this.container.offsetHeight; this.height = this.container.offsetHeight;
const resizeCallback = throttle(() => this.updateSize(), 200); const resizeCallback = throttle(() => this.updateSize(), 200);
this.observer = new ResizeObserver(resizeCallback);
if ('ResizeObserver' in window === false) {
const module = await import('@juggle/resize-observer');
window.ResizeObserver = module.ResizeObserver;
}
this.observer = new window.ResizeObserver(resizeCallback);
this.observer.observe(this.container); this.observer.observe(this.container);
this.fireChangeEvents(); this.fireChangeEvents();
} }