All files / src/mixins size.js

63.64% Statements 14/22
42.31% Branches 11/26
63.64% Functions 7/11
65% Lines 13/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80                  20x         39x       39x       39x                             120x 105x 105x     15x   15x   5x                               39x       44x       37x                  
import { watchElementSize } from '../helpers/size'
import { range } from "../utils";
import { RESPONSIVE_CSS, CLD_IMAGE_WRAPPER_CLASS, IMAGE_CLASSES } from '../constants';
 
/**
 * If necessary posts root element
 * size information
 * into components data
 */
export const size = {
  props: {
    responsive: { 
      type: [Boolean, String], 
      default: false,
      validator: value => !value || RESPONSIVE_CSS[value]
    },
    breakpoints: {
      type: [Array, Function, String],
      default: () => range(100, 4000, 100)
    },
  },
  data() {
    return { size: null };
  },
 
  computed: {
    hasResponsiveActive() {
      return this.responsive && this.size && this.size.width && this.size.height
    },
    /* should be overriden */
    shouldMeasureSize() {
      return false;
    }
  },
 
  methods: {
    updateSizeObservation() {
      if (!this.responsive) {
        this.cancelSizeListener && this.cancelSizeListener()
        return
      }
 
      const isElementRendered = !!this.$el && (this.$el.classList?.contains(IMAGE_CLASSES.DEFAULT) || this.$el.classList?.contains(CLD_IMAGE_WRAPPER_CLASS))
 
      if (!isElementRendered || this.cancelSizeListener) return
 
      this.cancelSizeListener = watchElementSize(this.$el, newSize => {
        if (!newSize) return;
 
        if (
          !this.size ||
          this.size.width !== newSize.width ||
          this.size.height !== newSize.height
        ) {
          this.size = newSize
        }
      });
 
    }
  },
 
  created() {
    this.updateSizeObservation();
  },
 
  updated() {
    this.updateSizeObservation();
  },
 
  mounted() {
    this.updateSizeObservation();
  },
 
  destroyed() {
    if (this.cancelSizeListener) {
      this.cancelSizeListener();
    }
  }
};