dongzili
/
file-viewer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
							<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flyfish Viewer Script Tag Demo</title>
    <style>
      :root {
        color: #172033;
        background: #f4f7f8;
        font-family: Inter, "Segoe UI", "PingFang SC", sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
      }

      main {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 100vh;
      }

      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 18px;
        border-bottom: 1px solid #d8e1e8;
        background: #ffffff;
      }

      h1,
      p {
        margin: 0;
      }

      h1 {
        font-size: 18px;
        line-height: 1.3;
      }

      p {
        margin-top: 4px;
        color: #64748b;
        font-size: 13px;
      }

      code {
        padding: 2px 6px;
        border-radius: 5px;
        background: #edf2f7;
        color: #334155;
      }

      flyfish-file-viewer {
        display: block;
      }

      #viewer {
        min-height: 0;
        height: 100%;
        background: #ffffff;
      }

    </style>
  </head>
  <body>
    <main>
      <header>
        <div>
          <h1>Script Tag / IIFE</h1>
          <p>普通 <code>&lt;script&gt;</code> 页面引入 IIFE 后可直接使用 <code>&lt;flyfish-file-viewer&gt;</code>。</p>
        </div>
        <p id="status">loading</p>
      </header>
      <flyfish-file-viewer
        id="viewer"
        src="/example/preview.md"
        filename="preview.md"
        theme="light"
        toolbar-position="bottom-right"
        data-testid="iife-viewer-host"
      ></flyfish-file-viewer>
    </main>

    <script src="/vendor/file-viewer-web/flyfish-file-viewer-web.iife.js"></script>
    <script>
      (function () {
        var statusNode = document.getElementById('status')
        var host = document.getElementById('viewer')
        var api = window.FlyfishFileViewerWeb

        function setStatus(value) {
          document.body.setAttribute('data-viewer-status', value)
          statusNode.textContent = value
        }

        if (!api || typeof api.mountViewer !== 'function' || typeof api.defineFileViewerElement !== 'function') {
          setStatus('missing-global')
          throw new Error('window.FlyfishFileViewerWeb is unavailable')
        }

        host.options = {
          theme: 'light',
          toolbar: {
            position: 'bottom-right'
          }
        }
        host.addEventListener('viewer-event', function (event) {
          var detail = event.detail
          if (detail && (detail.type === 'load-start' || detail.type === 'load-complete')) {
            setStatus(detail.type)
          }
        })
        setStatus('mounted')
      })()
    </script>
  </body>
</html>