☰

dingtalk文档图片预览

点击任意dingtalk文档内的图片,即可预览大图

// ==UserScript==
// @name         dingtalk文档图片预览
// @description  点击任意dingtalk文档内的图片,即可预览大图
// @namespace    img_viewer
// @license      MIT
// @version      1.2.0
// @author       Deyu
// @match        *://alidocs.dingtalk.com/iframe/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=dingtalk.com
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/viewer.min.js
// @resource     viewerCss https://cdn.jsdelivr.net/npm/[email protected]/dist/viewer.min.css
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @grant        unsafeWindow
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';
    const win = unsafeWindow
    // const NAME = "img_viewer_for_dingtalk"
    const css = GM_getResourceText("viewerCss")
    GM_addStyle(css)
    let isViewed = false
    win.document.body.addEventListener('click', function(event) {
        const target = event.target;
        // console.log(NAME, isViewed, target.tagName)
        if (!isViewed && target.tagName === 'IMG') {
            const viewer = new Viewer(target, {
                inline: false,
                viewed() {
                    isViewed = true
                    viewer.zoomTo(1);
                },
                hidden() {
                    isViewed = false
                    viewer.destroy()
                }
            });
            viewer.show();
        }
    });
})();