UNPKG

6.35 kBSource Map (JSON)View Raw
1{"version":3,"file":"previewImage.js","sources":["../../../../src/api/media/image/previewImage.ts"],"sourcesContent":["import Taro from '@tarojs/api'\nimport { SwiperProps } from '@tarojs/components'\nimport { defineCustomElement as defineCustomElementTaroSwiperCore } from '@tarojs/components/dist/components/taro-swiper-core'\nimport { defineCustomElement as defineCustomElementTaroSwiperItemCore } from '@tarojs/components/dist/components/taro-swiper-item-core'\nimport { isFunction } from '@tarojs/shared'\n\nimport { shouldBeObject } from '../../../utils'\nimport { MethodHandler } from '../../../utils/handler'\n\n/**\n * previewImage api基于开源的React组件[react-wx-images-viewer](https://github.com/react-ld/react-wx-images-viewer)开发,感谢!\n */\n\n/**\n * 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。\n */\nexport const previewImage: typeof Taro.previewImage = async (options) => {\n if (USE_HTML_COMPONENTS) {\n // TODO 改为通过 window.__taroAppConfig 获取配置的 Swiper 插件创建节点\n defineCustomElementTaroSwiperCore()\n defineCustomElementTaroSwiperItemCore()\n }\n function loadImage (url: string, loadFail: typeof fail): Promise<Node> {\n return new Promise((resolve) => {\n const item = document.createElement('taro-swiper-item-core')\n item.style.cssText = 'display:flex;align-items:start;justify-content:center;overflow-y:scroll;'\n const image = new Image()\n image.style.maxWidth = '100%'\n image.src = url\n const div = document.createElement('div')\n div.classList.add('swiper-zoom-container')\n div.style.cssText = 'display:flex;align-items:center;justify-content:center;max-width:100%;min-height:100%;'\n div.appendChild(image)\n item.appendChild(div)\n // Note: 等待图片加载完后返回,会导致轮播被卡住\n resolve(item)\n if (isFunction(loadFail)) {\n image.addEventListener('error', (err) => {\n loadFail({ errMsg: err.message })\n })\n }\n })\n }\n\n // options must be an Object\n const isObject = shouldBeObject(options)\n if (!isObject.flag) {\n const res = { errMsg: `previewImage:fail ${isObject.msg}` }\n console.error(res.errMsg)\n return Promise.reject(res)\n }\n\n const { urls = [], current = '', success, fail, complete } = options\n const handle = new MethodHandler({ name: 'previewImage', success, fail, complete })\n const container = document.createElement('div')\n container.classList.add('preview-image')\n container.style.cssText = 'position:fixed;top:0;left:0;z-index:1050;width:100%;height:100%;overflow:hidden;outline:0;background-color:#111;'\n container.addEventListener('click', () => {\n container.remove()\n })\n\n const swiper: HTMLElement & Omit<SwiperProps, 'style' | 'children'> = document.createElement('taro-swiper-core')\n // @ts-ignore\n swiper.full = true\n // @ts-ignore\n swiper.zoom = true\n\n let children: Node[] = []\n try {\n children = await Promise.all(\n urls.map(e => loadImage(e, fail))\n )\n } catch (error) {\n return handle.fail({\n errMsg: error\n })\n }\n\n for (let i = 0; i < children.length; i++) {\n const child = children[i]\n swiper.appendChild(child)\n }\n\n const currentIndex = urls.indexOf(current)\n // @ts-ignore\n swiper.current = currentIndex\n\n container.appendChild(swiper)\n document.body.appendChild(container)\n\n return handle.success()\n}\n"],"names":["defineCustomElementTaroSwiperCore","defineCustomElementTaroSwiperItemCore"],"mappings":"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"}
\No newline at end of file