5b1fbe1e2f
Major refactoring using ESLint with rules from AirBnb and Vue. Enable most of the ESLint rules and do necessary linting in the code. Also add more information for rules that are disabled to describe what they are and why they are disabled. Allow logging (`console.log`) in test files, and in development mode (e.g. when working with `npm run serve`), but disable it when environment is production (as pre-configured by Vue). Also add flag (`--mode production`) in `lint:eslint` command so production linting is executed earlier in lifecycle. Disable rules that requires a separate work. Such as ESLint rules that are broken in TypeScript: no-useless-constructor (eslint/eslint#14118) and no-shadow (eslint/eslint#13014).
89 lines
2.1 KiB
Vue
89 lines
2.1 KiB
Vue
<template>
|
|
<div ref="containerElement" class="container">
|
|
<slot ref="containerElement"></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Emit } from 'vue-property-decorator';
|
|
import { throttle } from './Throttle';
|
|
|
|
@Component
|
|
export default class Responsive extends Vue {
|
|
private width: number;
|
|
|
|
private height: number;
|
|
|
|
private observer: ResizeObserver;
|
|
|
|
private get container(): HTMLElement { return this.$refs.containerElement as HTMLElement; }
|
|
|
|
public async mounted() {
|
|
this.width = this.container.offsetWidth;
|
|
this.height = this.container.offsetHeight;
|
|
const resizeCallback = throttle(() => this.updateSize(), 200);
|
|
|
|
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.fireChangeEvents();
|
|
}
|
|
|
|
public updateSize() {
|
|
let sizeChanged = false;
|
|
if (this.isWidthChanged()) {
|
|
this.updateWidth(this.container.offsetWidth);
|
|
sizeChanged = true;
|
|
}
|
|
if (this.isHeightChanged()) {
|
|
this.updateHeight(this.container.offsetHeight);
|
|
sizeChanged = true;
|
|
}
|
|
if (sizeChanged) {
|
|
this.$emit('sizeChanged');
|
|
}
|
|
}
|
|
|
|
@Emit('widthChanged') public updateWidth(width: number) {
|
|
this.width = width;
|
|
}
|
|
|
|
@Emit('heightChanged') public updateHeight(height: number) {
|
|
this.height = height;
|
|
}
|
|
|
|
public destroyed() {
|
|
if (this.observer) {
|
|
this.observer.disconnect();
|
|
}
|
|
}
|
|
|
|
private fireChangeEvents() {
|
|
this.updateWidth(this.container.offsetWidth);
|
|
this.updateHeight(this.container.offsetHeight);
|
|
this.$emit('sizeChanged');
|
|
}
|
|
|
|
private isWidthChanged(): boolean {
|
|
return this.width !== this.container.offsetWidth;
|
|
}
|
|
|
|
private isHeightChanged(): boolean {
|
|
return this.height !== this.container.offsetHeight;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block; // if inline then it has no height or weight
|
|
}
|
|
</style>
|