OpenSource
/
dc-sdk
镜像来自 https://github.com/dvt3d/dc-sdk

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DC SDK examples</title>
    <script src="./jquery.min.js"></script>
    <script src="./jquery.accordion.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .container {
        display: flex;
        height: 100%;
      }

      .example-list::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        /**/
      }
      .example-list::-webkit-scrollbar-track {
        background: #424242;
      }
      .example-list::-webkit-scrollbar-thumb {
        background: #686868;
        max-height: 20px;
      }

      .nav {
        width: 250px;
        height: 100%;
        overflow: hidden;
        background: #222;
        color: #fff;
        display: flex;
        flex-direction: column;
      }
      .example {
        flex: 1;
        height: 100%;
        overflow: hidden;
      }

      iframe {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .nav .banner {
        padding: 20px 20px 0 20px;
        color: #1e80ff;
        font-weight: bold;
        font-style: italic;
      }
      .example-list-wrapper {
        flex: 1;
        overflow: hidden;
        user-select: none;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
      }

      .example-list {
        flex: 1;
        overflow: hidden;
        overflow-y: auto;
      }

      .example-list-wrapper .desc {
        height: 150px;
      }

      .example-list .example-item {
        border-top: 1px solid #444;
      }

      .example-list h4 {
        padding-left: 20px;
        font-size: 14px;
        margin: 7px 0;
        color: #bcbcbc;
      }

      .example-list h4:hover,
      .example-list ul li:hover {
        cursor: pointer;
      }

      .example-list ul {
        padding-left: 35px;
        list-style: none;
        margin-top: 5px;
        background: #181717;
      }

      .example-list ul li {
        margin: 5px 0;
        font-size: 13px;
      }

      .example-list ul li:hover a,
      .example-list ul li.active a {
        color: #1e80ff;
      }

      .example-list ul li:hover,
      .example-list ul li a {
        color: #fff;
        text-decoration: none;
      }

      #code-link {
        position: fixed;
        bottom: 16px;
        left: 270px;
        padding: 8px;
        border-radius: 50%;
        margin-bottom: 0;
        background-color: #fff;
        opacity: 0.9;
        z-index: 999;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
        display: flex;
      }

      #code-link img {
        width: 30px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="nav">
        <div class="banner">DC-SDK v4.3.0</div>
        <div class="example-list-wrapper">
          <div
            id="example-list"
            class="example-list"
            data-accordion-group
          ></div>
          <div class="desc"></div>
        </div>
      </div>
      <div class="example">
        <iframe
          sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
          id="inner-page"
          name="inner-page"
          style="border: 0"
          allow="fullscreen; xr-spatial-tracking;"
        >
        </iframe>
        <a id="code-link" href="" target="_blank"
          ><img src="./assets/icon/code.svg" title="源码" alt="“”"
        /></a>
      </div>

      <script src="./list.js"></script>
      <script type="text/javascript">
        $(document).ready(function () {
          let href = undefined
          let $currentPage = undefined
          if (window.location.href.indexOf('#') > -1) {
            let hrefArr = window.location.href.split('#')
            if (hrefArr[1]) {
              href = hrefArr[1].replace('_', '/')
            }
            $('#code-link').attr(
              'href',
              'https://github.com/dvgis/dc-sdk/blob/master/examples/' + href
            )
          }
          $('#inner-page').attr('src', href || 'info/start.html')

          EXAMPLE_LIST.forEach((item) => {
            let $section = $('<div data-accordion ></div>')
            $section.addClass('example-item')
            let $title = $('<h4 data-control ></h4>').text(item.name)
            $title.appendTo($section)
            let $pageWrapper = $('<ul data-content></ul>')
            $pageWrapper.appendTo($section)
            if (item.children) {
              item.children.forEach((child) => {
                let $page = $('<li></li>')
                let $link = $('<a></a>').text(child.name)
                $link
                  .attr('href', item.folder + '/' + child.page)
                  .attr('target', 'inner-page')
                $link.bind('click', (e) => {
                  if ($currentPage) {
                    $currentPage.removeClass('active')
                  }
                  window.location.href =
                    window.location.href.replace(/#\w*\.?\w*/g, '') +
                    '#' +
                    item.folder +
                    '_' +
                    child.page
                  $page.addClass('active')
                  $('#code-link').attr(
                    'href',
                    'https://github.com/dvgis/dc-sdk/blob/master/examples/' +
                      item.folder +
                      '/' +
                      child.page
                  )
                  $currentPage = $page
                })
                $page.append($link)
                $pageWrapper.append($page)
              })
            }
            $section.appendTo($('#example-list'))
          })
          $('#example-list [data-accordion]').accordion()
        })
      </script>
    </div>
  </body>
</html>