@nextcloud/vue
Version:
Nextcloud vue components
100 lines (99 loc) • 3.31 kB
JavaScript
import '../assets/NcBlurHash-7aGtE-_T.css';
import { defineComponent, ref, watch, nextTick, createBlock, openBlock, Transition, withCtx, createElementBlock } from "vue";
import { decode } from "blurhash";
import { preloadImage } from "../functions/preloadImage/index.mjs";
import { l as logger } from "./logger-D3RVzcfQ.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _hoisted_1 = ["aria-hidden", "aria-label"];
const _hoisted_2 = ["alt", "src"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcBlurHash",
props: {
hash: {},
alt: {},
src: {}
},
emits: ["load"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const canvas = ref();
const imageLoaded = ref(false);
watch(() => props.hash, drawBlurHash);
watch(imageLoaded, () => {
if (imageLoaded.value === false) {
nextTick(() => drawBlurHash());
}
}, { immediate: true });
watch(() => props.src, () => {
imageLoaded.value = false;
if (props.src) {
preloadImage(props.src).then((success) => {
imageLoaded.value = success;
emit("load", success);
});
}
}, { immediate: true });
function drawBlurHash() {
if (imageLoaded.value) {
return;
}
if (!props.hash) {
logger.error("Invalid BlurHash value");
return;
}
if (canvas.value === void 0) {
logger.error("BlurHash canvas not available");
return;
}
const { height, width } = canvas.value;
const pixels = decode(props.hash, width, height);
const ctx = canvas.value.getContext("2d");
if (ctx === null) {
logger.error("Cannot create context for BlurHash canvas");
return;
}
const imageData = ctx.createImageData(width, height);
imageData.data.set(pixels);
ctx.putImageData(imageData, 0, 0);
}
return (_ctx, _cache) => {
return openBlock(), createBlock(Transition, {
css: _ctx.src ? void 0 : false,
"enter-active-class": _ctx.$style.fadeTransition,
"leave-active-class": _ctx.$style.fadeTransition,
"enter-class": _ctx.$style.fadeTransitionActive,
"leave-to-class": _ctx.$style.fadeTransitionActive
}, {
default: withCtx(() => [
!imageLoaded.value ? (openBlock(), createElementBlock("canvas", {
key: 0,
ref_key: "canvas",
ref: canvas,
"aria-hidden": _ctx.alt ? void 0 : "true",
"aria-label": _ctx.alt
}, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("img", {
key: 1,
alt: _ctx.alt,
src: _ctx.src
}, null, 8, _hoisted_2))
]),
_: 1
}, 8, ["css", "enter-active-class", "leave-active-class", "enter-class", "leave-to-class"]);
};
}
});
const fadeTransition = "_fadeTransition_13rtj_2";
const fadeTransitionActive = "_fadeTransitionActive_13rtj_6";
const style0 = {
fadeTransition,
fadeTransitionActive
};
const cssModules = {
"$style": style0
};
const NcBlurHash = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
export {
NcBlurHash as N
};
//# sourceMappingURL=NcBlurHash-BiFktE2N.mjs.map