https://www.barnman.cc/js/cusdis.es.js

1/* eslint-disable no-useless-escape */
2window.CUSDIS = {}
3let cusdisIframe
4
5function createIframe(targetElement) {
6  if (!cusdisIframe) {
7    cusdisIframe = document.createElement('iframe')
8    setupIframe(cusdisIframe, targetElement)
9  }
10  cusdisIframe.srcdoc = generateIframeContent(targetElement)
11  cusdisIframe.style.width = '100%'
12  cusdisIframe.style.border = '0'
13}
14
15function setupIframe(iframe, targetElement) {
16  const colorSchemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
17  const messageHandler = event => {
18    try {
19      const message = JSON.parse(event.data)
20      if (message.from === 'cusdis') {
21        switch (message.event) {
22          case 'onload':
23            if (targetElement.dataset.theme === 'auto') {
24              setTheme(colorSchemeMediaQuery.matches ? 'dark' : 'light')
25            }
26            break
27          case 'resize':
28            iframe.style.height = message.data + 'px'
29            break
30        }
31      }
32    } catch (error) {}
33  }
34
35  const colorSchemeChangeHandler = e => {
36    const isDarkMode = e.matches
37    if (targetElement.dataset.theme === 'auto') {
38      setTheme(isDarkMode ? 'dark' : 'light')
39    }
40  }
41  window.addEventListener('message', messageHandler)
42  colorSchemeMediaQuery.addEventListener('change', colorSchemeChangeHandler)
43}
44
45function generateIframeContent(element) {
46  const cusdisHost = element.dataset.host || 'https://cusdis.com'
47  const iframeSrc = element.dataset.iframe || `${cusdisHost}/js/iframe.umd.js`
48  return `<!DOCTYPE html>
49<html>
50  <head>
51    <link rel="stylesheet" href="${cusdisHost}/js/style.css">
52    <base target="_parent" />
53    <link>
54    <script>
55      window.CUSDIS_LOCALE = ${JSON.stringify(window.CUSDIS_LOCALE)}
56      window.__DATA__ = ${JSON.stringify(element.dataset)}
57    <\/script>
58    <style>
59      :root {
60        color-scheme: light;
61      }
62    </style>
63  </head>
64  <body>
65    <div id="root"></div>
66    <script src="${iframeSrc}" type="module">
67      
68    <\/script>
69  </body>
70</html>`
71}
72
73function setTheme(theme, data) {
74  if (cusdisIframe) {
75    cusdisIframe.contentWindow.postMessage(JSON.stringify({ from: 'cusdis', event: theme, data: data }))
76  }
77}
78
79function renderTo(element) {
80  if (element) {
81    element.innerHTML = ''
82    createIframe(element)
83    element.appendChild(cusdisIframe)
84  }
85}
86
87function initialRender() {
88  let element
89  if (window.cusdisElementId) {
90    element = document.querySelector(`#${window.cusdisElementId}`)
91  } else if (document.querySelector('#cusdis_thread')) {
92    element = document.querySelector('#cusdis_thread')
93  } else if (document.querySelector('#cusdis')) {
94    console.warn('id `cusdis` is deprecated. Please use `cusdis_thread` instead')
95    element = document.querySelector('#cusdis')
96  }
97
98  if (!window.CUSDIS_PREVENT_INITIAL_RENDER && element) {
99    renderTo(element)
100  }
101}
102
103window.renderCusdis = renderTo
104window.CUSDIS.renderTo = renderTo
105window.CUSDIS.setTheme = setTheme
106window.CUSDIS.initial = initialRender
107initialRender()