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(); } } }; |