https://www.edraw.ai/notify/test/notice.js

1const langList = [
2    // "CN",
3    "EN",
4    "DE",
5    "ES",
6    "FR",
7    "ID",
8    "IT",
9    "JP",
10    "KO",
11    "PT",
12    "CH", // 繁体，对应pc
13    "RU",
14];
15const NOTICE_URL_ONLINE = {
16    edraw_config: "https://www.edraw.ai/notify/config.json",
17    edraw_dialog: "https://www.edraw.ai/notify/dialog.html",
18    edraw_notice: "https://www.edraw.ai/notify/notice.html",
19    edraw_home: "https://www.edraw.ai/app/aipower",
20    mind_config: "https://www.edrawmind.com/notify/config.json",
21    mind_dialog: "https://www.edrawmind.com/notify/dialog.html",
22    mind_notice: "https://www.edrawmind.com/notify/notice.html",
23    mind_home: "https://www.edrawmind.com/app/create",
24};
25
26const NOTICE_URL_DEV = {
27    edraw_config: "https://dev-en.edraw.ai/app/js/config.json",
28    edraw_config_js: "https://www.edraw.ai/notify/test/config-test.js",
29    edraw_dialog: "https://www.edraw.ai/notify/test/dialog.html",
30    edraw_notice: "https://www.edraw.ai/notify/test/notice.html",
31    edraw_home: "http://dev-en.edraw.ai/app",
32    mind_config: "http://dev.master.com/app/assets/js/config.json",
33    mind_config_js: "https://www.edrawmind.com/notify/test/config-test.js",
34    mind_dialog: "https://www.edrawmind.com/notify/test/dialog.html",
35    mind_notice: "https://www.edrawmind.com/notify/test/notice.html",
36    mind_home: "http://dev.master.com/app/create/",
37};
38
39
40let _OPEN = true; // 线上环境 全局开关
41let _OPEN_DEV = true; // dev环境 全局开关
42let _IS_FIRST_SHOW = false; // 首次展示记录标识
43// DEV
44let DEV_LOCAL;
45let NOTICE_URL;
46let _TIMER = {
47    _NOTICE: null,
48    _GLOBALAPI: null,
49    _FORCEOFF: null,
50    _REDIRECT: null
51};
52let _CURRENT_DATA = null;
53let _KEY = "";
54let _NOTICE_CACHE = [];
55let _NOTICE_TOAST = null;
56let lang;
57// 确定引用环境
58let isEdrawAI;
59let isMind;
60// 确定是首页还是编辑页
61let isEdrawEditor;
62let isMindEditor;
63let isEditor;
64
65function useNotice() {
66    // 判断OPEN
67    setEnv()
68    const open = DEV_LOCAL ? _OPEN_DEV : _OPEN;
69
70    const nowEditor = isEdrawAI ? location.href.includes("/master/") || location.href.includes("/max/") : location.href.includes("/editor/")
71    // 从首页跳到编辑页
72    const homeToEditor = !isEditor && nowEditor
73    // 从编辑页跳到首页
74    const editorTohome = isEditor && !nowEditor
75    const canStart = _IS_FIRST_SHOW ? homeToEditor : true
76
77    if (open && (homeToEditor || editorTohome)) {
78        clearTimer();
79        setHomeEditor()
80    }
81    if (open && canStart) {
82        const iframeMask = document.getElementById("notice-iframe-mask");
83        if (iframeMask) {
84            iframeMask.parentNode.removeChild(iframeMask);
85        }
86
87        setData();
88        getJsonData();
89        window.addEventListener("message", receiveMessage, false);
90        window.addEventListener("beforeunload", beforeUnload);
91    } else {
92        window.removeEventListener("message", receiveMessage, false);
93        window.removeEventListener("beforeunload", beforeUnload);
94    }
95
96    function receiveMessage(event) {
97        const receiveData = event.data;
98        const type = receiveData.type;
99        if (type === "close") {
100            removeIframe(receiveData.data);
101            if (isEditor) {
102                location.href = isEdrawAI ?
103                    NOTICE_URL.edraw_home :
104                    NOTICE_URL.mind_home;
105            }
106        }
107    };
108
109    // 确定时间
110    function getJsonData() {
111        if (DEV_LOCAL) {
112            const script = document.createElement("script");
113            script.src = isEdrawAI ? NOTICE_URL.edraw_config_js : NOTICE_URL.mind_config_js
114            document.body.appendChild(script);
115            script.onload = () => {
116                success(window._NOTICE_CONFIG)
117            }
118            return
119        }
120
121        fetch(isEdrawAI ? NOTICE_URL.edraw_config : NOTICE_URL.mind_config)
122            .then((response) => response.json())
123            .then((data) => {
124                success(data)
125            })
126            .catch((err) => {
127                console.error(err);
128            })
129            .finally(() => {
130                // const interval = (150 + Math.floor(60 * Math.random())) * 1000;
131                // setTimeout(getJsonData, interval);
132            });
133
134
135        function success(data) {
136            let list = data || [];
137
138            if (isEdrawAI && isEdrawEditor) {
139                // EdrawAI编辑页
140                setCurrentData(list);
141            } else if (isEdrawAI && !isEdrawEditor) {
142                // EdrawAI首页 isEdrawAI && !isEdrawEditor
143                if (canShowAtHome(list)) insertIframe();
144            } else if (isMind && isMindEditor) {
145                // Mind编辑页
146                setCurrentData(list);
147            } else if (isMind && !isMindEditor) {
148                // Mind首页
149                if (canShowAtHome(list)) {
150                    insertIframe();
151                }
152            }
153        }
154    }
155
156    function setCurrentData(arr) {
157        // 依次从最高优先级开始判断
158        const isRedirectInTime = getDataByType(arr, "redirect")
159        if (isRedirectInTime) {
160            _CURRENT_DATA = isRedirectInTime
161            _NOTICE_CACHE.push(redirectPage);
162        } else if (!isEditor) {
163            _CURRENT_DATA = getDataByType(arr, "popover")
164            timeToRedirect()
165        } else {
166            const isOffInTime = getDataByType(arr, "forceOff")
167            const isToastInTime = getDataByType(arr, "notify")
168
169            if (isOffInTime) {
170                _CURRENT_DATA = isOffInTime;
171                _NOTICE_CACHE.push(forceOffPage);
172                timeToRedirect()
173            } else if (isToastInTime) {
174                _CURRENT_DATA = isToastInTime;
175                _NOTICE_CACHE.push(showToast);
176                // 强制下线开始时间 - 当前时间 = 弹出强制下线弹窗间隙
177                const OffData = arr.filter((item) => item.type === "forceOff");
178                const nowTime = new Date().getTime();
179                const timeToOff = OffData.length ?
180                    OffData[0].start_time * 1000 - nowTime :
181                    0;
182                if (timeToOff > 0) {
183                    _TIMER._FORCEOFF = setTimeout(() => {
184                        _CURRENT_DATA = OffData[0];
185                        forceOffPage()
186                    }, timeToOff);
187                }
188            }
189        }
190        watchGlobalApi();
191
192        function timeToRedirect() {
193            // 重定向开始时间 - 当前时间 = 重定向页面间隙
194            const RedirectData = arr.filter((item) => item.type === "redirect");
195            const nowTime = new Date().getTime();
196            const timeToOff = RedirectData.length ?
197                RedirectData[0].start_time * 1000 - nowTime :
198                0;
199            if (timeToOff > 0) {
200                _TIMER._REDIRECT = setTimeout(() => {
201                    _CURRENT_DATA = RedirectData[0];
202                    redirectPage()
203                }, timeToOff);
204            }
205        }
206    }
207
208    function canShowAtHome(arr) {
209        setCurrentData(arr);
210        if (!_CURRENT_DATA) return false;
211
212        _KEY = `notice-${_CURRENT_DATA.interval}-${_CURRENT_DATA.start_time}`;
213        const value = localStorage.getItem(_KEY);
214        // 仅展示一次
215        if (!_CURRENT_DATA.interval) {
216            return value ? false : true;
217        } else {
218            const nowTime = new Date().getTime();
219            // 有值 && 当前时间小于过期时间 = 不展示
220            if (value && nowTime < value) return false;
221        }
222
223        return true;
224    }
225
226    function getTodayEndTimes() {
227        // 获取今天的日期
228        const today = new Date();
229        // 设置时间为23:59:59
230        today.setHours(23, 59, 59, 999);
231        const timestamp = Math.floor(today.getTime());
232        return timestamp;
233    }
234
235    function insertIframe() {
236        const oldiframe = document.getElementById("notice-iframe");
237        if (oldiframe) return;
238
239        // 创建一个 iframe 元素
240        const iframe = document.createElement("iframe");
241
242        // 设置 iframe 的属性
243        iframe.src = isEdrawAI ?
244            NOTICE_URL.edraw_dialog :
245            NOTICE_URL.mind_dialog;
246        iframe.id = "notice-iframe"; // 动态设置 id 属性
247        iframe.style.position = "absolute";
248        iframe.style.top = "50%";
249        iframe.style.left = "50%";
250        iframe.style.transform = "translate(-50%, -50%)";
251        iframe.style.width = isEdrawAI ? "400px" : "432px";
252        iframe.style.height = isEdrawAI ? "364px" : "350px";
253        iframe.style.borderRadius = "8px";
254        iframe.style.border = "none";
255
256        const mask = document.createElement("div");
257        mask.id = "notice-iframe-mask";
258        mask.classList.add("ed-mask");
259        mask.style.zIndex = "9999";
260        mask.style.display = "none";
261        iframe.style.boxShadow = "0px 15px 30px 0px rgba(0, 0, 0, 0.15)";
262
263        // 将 iframe 插入到 body 中
264        mask.appendChild(iframe);
265        document.body.appendChild(mask);
266
267        iframe.addEventListener("load", function () {
268            mask.style.display = "block";
269            // update lang
270            if (isMind) {
271                let l = 'en'
272                if (window.store) l = window.store.getters.currentLang
273                if (langList.includes(l.toUpperCase())) {
274                    lang = l.toLowerCase()
275                }
276            }
277            iframe.contentWindow.postMessage({
278                    type: "content",
279                    data: {
280                        ..._CURRENT_DATA.message[lang],
281                        icon_url: _CURRENT_DATA.icon_url,
282                        editor: isEditor,
283                        from: isEdrawAI ? "edrawai" : "mind",
284                        showToday: !isEditor && _CURRENT_DATA.interval
285                    },
286                },
287                "*"
288            );
289            _TIMER._NOTICE && clearInterval(_TIMER._NOTICE);
290            if (!_IS_FIRST_SHOW && !isEditor) _IS_FIRST_SHOW = true
291        });
292    }
293
294    function removeIframe(data) {
295        const {
296            today
297        } = data;
298        if (!isEditor) {
299            _TIMER._NOTICE && clearInterval(_TIMER._NOTICE);
300            // 勾选今日不再提示
301            if (today) {
302                const todayEnd = getTodayEndTimes();
303                _KEY && localStorage.setItem(_KEY, todayEnd);
304            } else if (!_CURRENT_DATA.interval) {
305                // 只展示一次
306                _KEY && localStorage.setItem(_KEY, _CURRENT_DATA.end_time * 1000);
307            } else {
308                // 重置定时器
309                _TIMER._NOTICE = setInterval(() => {
310                    insertIframe();
311                }, _CURRENT_DATA.interval * 1000);
312            }
313        }
314
315        const iframeMask = document.getElementById("notice-iframe-mask");
316        if (iframeMask) {
317            iframeMask.parentNode.removeChild(iframeMask);
318        }
319    }
320
321    function redirectPage() {
322        const url = isEdrawAI ?
323            NOTICE_URL.edraw_notice :
324            NOTICE_URL.mind_notice;
325        location.href = `${url}?lang=${lang}`
326    }
327
328    function forceOffPage() {
329        // 弹出时保存文件(max)，点击确定时返回首页
330        const isMaxEditor = location.href.includes("/max/");
331        if (isMaxEditor) {
332            window.globalApi.$bus.emit("savefile");
333        }
334        insertIframe();
335    }
336
337    function showToast() {

338        if (_NOTICE_TOAST) return
339        _NOTICE_TOAST = window.globalApi.$message({
340            type: "warning",
341            showClose: true,
342            duration: 0,
343            message: _CURRENT_DATA.message[lang].body,
344            customClass: "ed_notice_toast"
345        });
346        const mesDom = document.querySelectorAll(".ed_notice_toast")
347        if (mesDom && mesDom[0].style.display === "none") {
348            mesDom[0].style.display = "flex"
349        }
350    }
351
352    function watchGlobalApi() {
353        _TIMER._GLOBALAPI = setInterval(() => {
354            if (window.globalApi) {
355                _NOTICE_CACHE.forEach((fun) => fun());
356                clearInterval(_TIMER._GLOBALAPI);
357                _TIMER._GLOBALAPI = null
358                _NOTICE_CACHE = [];
359            }
360        }, 1000);
361    }
362
363    function setData() {
364        setHomeEditor()
365        // DEV
366        NOTICE_URL = DEV_LOCAL ? NOTICE_URL_DEV : NOTICE_URL_ONLINE;
367
368        _TIMER = {
369            _NOTICE: null,
370            _GLOBALAPI: null,
371            _FORCEOFF: null,
372            _REDIRECT: null,
373        };
374        _CURRENT_DATA = null;
375        _KEY = "";
376        _NOTICE_CACHE = [];
377
378        // 确定语言环境
379        const params = new URL(document.location).searchParams;
380        const s_lang = params.get('lang')
381        lang = s_lang && langList.includes(s_lang.toUpperCase()) ? s_lang.toLowerCase() : 'en'
382
383        if (isMind) {
384            // mind获取多语言
385            _NOTICE_CACHE.push(setLangByStore)
386        }
387    }
388
389    function setLangByStore() {
390        // 需要调接口profile获取，等1s
391        setTimeout(() => {
392            let l = 'en'
393            if (window.store) l = window.store.getters.currentLang
394            if (langList.includes(l.toUpperCase())) {
395                lang = l.toLowerCase()
396            }
397        }, 1000)
398    }
399
400    function clearTimer() {
401        // 清除定时器
402        if (_TIMER._NOTICE) {
403            clearInterval(_TIMER._NOTICE);
404            _TIMER._NOTICE = null
405        }
406        if (_TIMER._GLOBALAPI) {
407            clearInterval(_TIMER._GLOBALAPI);
408            _TIMER._GLOBALAPI = null
409        }
410        if (_TIMER._FORCEOFF) {
411            clearInterval(_TIMER._FORCEOFF);
412            _TIMER._FORCEOFF = null
413        }
414        if (_TIMER._REDIRECT) {
415            clearInterval(_TIMER._REDIRECT);
416            _TIMER._REDIRECT = null
417        }
418        if (_NOTICE_TOAST) {
419            _NOTICE_TOAST.close()
420            _NOTICE_TOAST = null
421        }
422
423        // 如果没有close方法，找到dom元素移除
424        const mesDom = document.querySelectorAll(".ed_notice_toast")
425        if (mesDom && mesDom[0]) {
426            mesDom[0].style.display = "none"
427        }
428    }
429
430    // 页面销毁
431    function beforeUnload() {
432        clearTimer();
433    }
434
435    function getDataByType(arr, type) {
436        const nowTime = new Date().getTime();
437        const res = arr.filter((item) => {
438            return (
439                item.type === type &&
440                item.start_time * 1000 < nowTime &&
441                item.end_time * 1000 > nowTime
442            );
443        });
444        return res && res.length ? res[0] : null
445    }
446
447    function setEnv() {
448        DEV_LOCAL =
449            location.host.includes("127.0.0.1") ||
450            location.host.includes("10.90") ||
451            location.host.includes("dev-en") || location.host.includes("dev");
452
453        // 确定引用环境
454        isEdrawAI =
455            location.host.includes("edraw.ai") ||
456            location.host.includes(":5001");
457        isMind = location.host.includes("edrawmind.com") || location.host.includes("dev.master.com") || location.host.includes(":3000");
458    }
459
460    function setHomeEditor() {
461        // 确定是首页还是编辑页
462        isEdrawEditor = location.href.includes("/master/") || location.href.includes("/max/");
463        isMindEditor = location.href.includes("/editor/");
464        isEditor = isMind ? isMindEditor : isEdrawAI ? isEdrawEditor : false;
465    }
466}