{"version":3,"file":"base_image-B7bLic3S.js","sources":["../../../app/javascript/bits/intersection.ts","../../../app/javascript/vuecomponents/base_image.vue"],"sourcesContent":["// @file intersection observer\n\ntype CallbackFunctionType = (element: HTMLElement) => void\n\nconst canObserveIntersection: boolean = 'IntersectionObserver' in window\n\nfunction isIntersecting(entry: IntersectionObserverEntry): boolean {\n  // Most browsers support isIntersecting, fall back to intersectionRatio > 0 for things like Edge 15 and Samsung Internet 5 (they are both released in 2017)\n  // Reference: https://github.com/w3c/IntersectionObserver/issues/211\n  return (\n    ('isIntersecting' in IntersectionObserverEntry.prototype && entry.isIntersecting) || entry.intersectionRatio > 0\n  )\n}\n\n/**\n * @deprecated please use observeElementIntersection instead, or the vue composable useViewportIntersection\n * Observe the visibility of a dom element and call a function when visibile.\n * Returns false if intersection observer is not supported by the browser.\n * @param element The dom element to observe the intersection of\n * @param callback The method to call\n */\nfunction observeIntersection(element: HTMLElement, callback: CallbackFunctionType): boolean {\n  if (canObserveIntersection) {\n    const intersectionObserver = new IntersectionObserver((entries, observer) => {\n      entries.forEach((entry: IntersectionObserverEntry) => {\n        if (isIntersecting(entry)) {\n          const target = entry.target\n          observer.unobserve(target)\n          callback(element)\n        }\n      })\n    })\n    intersectionObserver.observe(element)\n    return true\n  }\n  return false\n}\n\n/**\n * Observe the visibility of a dom element and call a function when visibile.\n * Returns false if intersection observer is not supported by the browser.\n * @param element The dom element to observe the intersection of\n * @param callback The method to call\n */\nconst observeElementIntersection = (\n  element: HTMLElement,\n  callback: CallbackFunctionType,\n  options = {},\n): IntersectionObserver => {\n  const intersectionObserver = new IntersectionObserver((entries, observer) => {\n    entries.forEach((entry: IntersectionObserverEntry) => {\n      if (isIntersecting(entry)) {\n        const target = entry.target\n        observer.unobserve(target)\n        callback(element)\n      }\n    })\n  }, options)\n  intersectionObserver.observe(element)\n\n  return intersectionObserver\n}\n\nexport { canObserveIntersection, observeElementIntersection, observeIntersection }\n","<template>\n  <img\n    :fetchPriority=\"fetchPriority\"\n    :alt=\"alt\"\n    :data-testid=\"dataTestid\"\n    :loading=\"loading\"\n    :class=\"{ 'beethoven-success': success, 'beethoven-fail': !success && failed }\"\n    :src=\"computedSrc\"\n    :width=\"computedWidth\"\n    :height=\"computedHeight\"\n    :style=\"style\"\n    @load=\"onLoad\"\n    @error=\"onError\"\n  />\n</template>\n\n<script>\nimport { BLANK_IMAGE } from '@@/bits/attachments'\nimport { browserCan } from '@@/bits/browser'\nimport device from '@@/bits/device'\nimport { canObserveIntersection, observeIntersection } from '@@/bits/intersection'\nconst canNativelyLazyLoad = browserCan('lazyLoad')\n\nexport default {\n  props: {\n    alt: {\n      type: String,\n      default: '',\n    },\n    dataTestid: String,\n    src: {\n      type: String,\n      default: BLANK_IMAGE,\n    },\n    backgroundColor: String,\n    width: Number,\n    height: Number,\n    postWidth: Number,\n    postHeight: Number,\n    loading: {\n      type: String,\n      default: 'auto',\n      validator(value) {\n        return ['auto', 'eager', 'lazy'].includes(value)\n      },\n    },\n    fetchPriority: {\n      type: String,\n      default: 'auto',\n      validator(value) {\n        return ['auto', 'low', 'high'].includes(value)\n      },\n    },\n  },\n  data() {\n    return {\n      success: false,\n      failed: false,\n      isVisible: !canObserveIntersection,\n    }\n  },\n  computed: {\n    computedSrc() {\n      // Browser can natively lazy load. No need to do anything special.\n      if (canNativelyLazyLoad) return this.src\n      // Image is visible now. Send the real src.\n      if (this.loading !== 'lazy' || this.isVisible) return this.src\n      // Image is invisible. Use blank.\n      return BLANK_IMAGE\n    },\n    computedWidth() {\n      return this.postWidth || this.width\n    },\n    computedHeight() {\n      return this.postHeight || this.height\n    },\n    style() {\n      // Since Safari 15 a border is included by default around lazy loaded images, and the following hack is a revised version of a solution online\n      // as found here: https://stackoverflow.com/questions/71992334/how-to-remove-white-border-on-lazy-loaded-images-in-safari\n      // and we only apply the hack when the image has not finished loading\n      const hideSafariBorderStyle =\n        this.loading === 'lazy' && device?.safari && !this.success ? { 'clip-path': 'inset(1px)' } : {}\n      return {\n        ...hideSafariBorderStyle,\n        'background-color': this.success ? '' : this.backgroundColor,\n        width: this.computedWidth + 'px',\n        height: this.computedHeight + 'px',\n      }\n    },\n  },\n  mounted() {\n    if (!canNativelyLazyLoad) {\n      if (this.loading === 'lazy' && !this.isVisible) {\n        observeIntersection(this.$el, () => {\n          this.isVisible = true\n        })\n      }\n    }\n  },\n  methods: {\n    triggerCustomEvent(element) {\n      const event = new CustomEvent('Event', { bubbles: false, cancelable: true })\n      element.dispatchEvent(event)\n    },\n    onLoad() {\n      if (this.computedSrc !== BLANK_IMAGE) {\n        this.success = true\n        this.$emit('load')\n        const beethovenLoadEvent = new Event('beethoven-load', {\n          bubbles: true,\n        })\n        this.$el.dispatchEvent(beethovenLoadEvent)\n      }\n    },\n    onError(e) {\n      if (this.computedSrc !== BLANK_IMAGE) {\n        this.failed = true\n        const error = new Error(`Failed to load image. Src: ${this.src}`)\n        error.event = e\n        this.$emit('error', error)\n        const beethovenErrorEvent = new Event('beethoven-error', {\n          bubbles: true,\n        })\n        this.$el.dispatchEvent(beethovenErrorEvent)\n      }\n    },\n  },\n}\n</script>\n"],"names":["canObserveIntersection","window","isIntersecting","entry","IntersectionObserverEntry","prototype","intersectionRatio","observeIntersection","element","callback","IntersectionObserver","entries","observer","forEach","target","unobserve","observe","observeElementIntersection","options","intersectionObserver","canNativelyLazyLoad","browserCan","_sfc_main","props","alt","type","String","default","dataTestid","src","BLANK_IMAGE","backgroundColor","width","Number","height","postWidth","postHeight","loading","validator","value","includes","fetchPriority","data","success","failed","isVisible","computed","computedSrc","computedWidth","computedHeight","style","device","safari","mounted","$el","methods","triggerCustomEvent","event","CustomEvent","bubbles","cancelable","dispatchEvent","onLoad","$emit","beethovenLoadEvent","Event","onError","e","error","Error","beethovenErrorEvent"],"mappings":"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"}