All files / src/mixins BaseResizeObserverMixin.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
 
 
 
 
 
 
 
 
1x
 
16x
 
 
 
 
17x
17x
 
 
17x
 
 
 
 
 
 
 
17x
 
 
 
 
1x
 
21x
 
 
20x
 
 
 
 
// @ts-check
 
import { invoke } from "lodash";
import { mixinMaker } from "../utils";
 
/**
 * @typedef {import("vue").ComponentOptionsMixin} ComponentOptionsMixin
 */
 
const resizeObserver = new ResizeObserver(
  function(entries) {
    entries.forEach((e) => {
      // get size (width and heigth)
      // see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry
      let width, height;
 
      if (e.contentBoxSize) { // using latest properties
        width = e.contentBoxSize?.[0]?.inlineSize ??
          // @ts-ignore: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverSize/inlineSize
          e.contentBoxSize?.inlineSize; // for old version of Firefox
        height = e.contentBoxSize?.[0]?.blockSize ??
          // @ts-ignore: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverSize/blockSize
          e.contentBoxSize?.blockSize; // ditto
      }
      else E{
        width = e.contentRect?.width;
        height = e.contentRect?.height;
      }
      invoke(e.target, [ "__vue__", "onResize" ], width, height);
    });
  }
);
 
const component = mixinMaker({
  mounted() {
    resizeObserver.observe(this.$el);
  },
  beforeDestroy() {
    resizeObserver.unobserve(this.$el);
  }
});
export default component;