@zoom-image/core
Version:
A core implementation of zoom image
1 lines • 1.62 kB
Source Map (JSON)
{"version":3,"sources":["../src/imageLoader.ts"],"names":[],"mappings":";AAMA,IAAM,YAAY;AAEX,IAAM,kBAAkB,MAAM;AACnC,QAAM,kBAAkB,CACtB,KACA,KACA,UAKG;AACH,QAAI,IAAI,QAAQ;AAAK;AACrB,QAAI,MAAM;AACV,QAAI,WAAW;AAEf,QAAI,SAAS,MAAM;AACjB,iBAAW;AACX,YAAM,SAAS,EAAE,iBAAiB,SAAS,CAAC;AAAA,IAC9C;AAEA,QAAI,UAAU,MAAM;AAClB,iBAAW;AACX,YAAM,SAAS,EAAE,iBAAiB,QAAQ,CAAC;AAAA,IAC7C;AAEA,eAAW,MAAM;AACf,UAAI,CAAC;AAAU,cAAM,SAAS,EAAE,iBAAiB,UAAU,CAAC;AAAA,IAC9D,GAAG,SAAS;AAAA,EACd;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;AAEO,IAAM,cAAc,gBAAgB","sourcesContent":["import { createStore } from \"@namnode/store\"\nimport { ZoomedImgStatus } from \"./types\"\n\n// There is a scenario where the image is already in the cache,\n// we don't want to trigger the loading state too quickly in that case\n// 50ms should be enough to wait before triggering the loading state\nconst THRESHOLD = 50\n\nexport const makeImageLoader = () => {\n const createZoomImage = (\n img: HTMLImageElement,\n src: string,\n store: ReturnType<\n typeof createStore<{\n zoomedImgStatus: ZoomedImgStatus\n }>\n >,\n ) => {\n if (img.src === src) return\n img.src = src\n let complete = false\n\n img.onload = () => {\n complete = true\n store.setState({ zoomedImgStatus: \"loaded\" })\n }\n\n img.onerror = () => {\n complete = true\n store.setState({ zoomedImgStatus: \"error\" })\n }\n\n setTimeout(() => {\n if (!complete) store.setState({ zoomedImgStatus: \"loading\" })\n }, THRESHOLD)\n }\n\n return {\n createZoomImage,\n }\n}\n\nexport const imageLoader = makeImageLoader()\n"]}