更新 code 测试用例

1 year ago · b809eee28e
1 changed files with 117 additions and 15 deletions
--- a/examples/code.html
+++ b/examples/code.html
@ -8,17 +8,21 @@
  <link href="../src/css/layui.css" rel="stylesheet">
  <style>
    body{padding: 32px;}
-    pre{margin-bottom: 20px;}
+    pre{margin: 16px 0;}
  </style>
 </head>
 <body>

-<pre id="test">
+<pre id="test" class="layui-test">
  <textarea class="layui-hide">
 <div class="layui-btn-container">
  <button type="button" class="layui-btn">默认按钮</button>
 </div>

+<p class="layui-padding-3">
+AaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA
+</p>
+
 <div class="layui-btn-container">
  <button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
 </div>
@ -50,13 +54,13 @@
  </textarea>
 </pre>

-<pre><code class="layui-code">
+<pre><code class="layui-code" lay-options="{header: true}">
 code line
 code line
 code line
 </code></pre>

-<pre class="layui-code" lay-options="{height: 300}" id="ID-multi-line"></pre>
+<pre class="layui-code" lay-options="{style: 'height: 300px'}" id="ID-multi-line"></pre>
 <script type="module">
  // 生成批量行，测试行结构
  const elem = document.getElementById('ID-multi-line');
@ -132,39 +136,137 @@ code line
 </div>
 </pre>

-<pre class="layui-code" lay-about="code">
+<pre class="layui-code" lay-options="{about: 'About info'}">
  About
 </pre>

 <script src="../src/layui.js"></script>
 <script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
+<script src="https://cdn.staticfile.org/prism/1.29.0/prism.min.js"></script>
 <script>
-layui.use('code', function(){
+layui.use(['code', 'dropdown'], function(){
+  var dropdown = layui.dropdown;
+  var $ = layui.$;
+
  // return;
-  layui.link('https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs.min.css');
+
+  // 高亮主题 css 库
+  var themeData = $.map([
+    // hljs 主题库
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs2015.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/github-dark.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/github.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/base16/google-dark.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/base16/google-light.min.css',
+    'https://cdn.staticfile.org/highlight.js/11.8.0/styles/monokai-sublime.min.css',
+    '-',
+    // prism 主题库
+    'https://cdn.staticfile.org/prism/1.29.0/themes/prism-dark.min.css',
+    'https://cdn.staticfile.org/prism/1.29.0/themes/prism.min.css'
+  ], function(v, index) {
+    return {
+      title: v,
+      link: v,
+      highlighter: v.indexOf('prism') === -1 ? 'hljs' : 'prism',
+      type: v === '-' ? '-' : 'normal'
+    };
+  });
+
  var codeInst = layui.code({
    elem: '#test',
    preview: true,
-    codeStyle: 'height: 700px;',
+    codeStyle: 'height: 510px;',
+    previewStyle: 'word-wrap: break-word;',
    // theme: 'dark',
    // header: true,
+    // wordWrap: false, // 是否自动换行
    lang: 'html',
    highlighter: "hljs",
-    codeRender: function (code, opts) {
+    /*codeRender: function (code, opts) {
+      layui.link(themeData[1].link, 'layui-code-theme');
      return hljs.highlight(code, {language: opts.lang}).value;
+    },*/
+    tools: [
+      'full',
+      {
+        title: ['文字换行'],
+        type: 'form'
+      },
+      {
+        title: ['切换高亮主题'],
+        type: 'theme'
+      }
+    ],
+    toolsEvent: function(obj) {
+      if (obj.type === 'form') {
+        dropdown.render({
+          elem: obj.elem,
+          data: [{title: '自动换行', wordWrap: true}, {title: '不自动换行', wordWrap: false}],
+          show: true,
+          click: function(data, othis) {
+            codeInst.reload({
+              wordWrap: data.wordWrap,
+              content: [+new Date()]
+            });
+          }
+        });
+      } else if (obj.type === 'theme') {
+        dropdown.render({
+          elem: obj.elem,
+          data: themeData,
+          show: true,
+          click: function(data, othis) {
+            $('#layuicss-layui-code-theme').remove();
+            layui.link(data.link, 'layui-code-theme');
+
+            // 若高亮器有变化，则重载
+            if (data.highlighter !== codeInst.config.highlighter) {
+              var highlighter = {
+                hljs: function(code, opts) {
+                  return hljs.highlight(code, {
+                    language: opts.lang
+                  }).value;
+                },
+                prism: function(code, opts) {
+                  return Prism.highlight(
+                    code,
+                    Prism.languages[opts.lang],
+                    opts.lang
+                  );
+                }
+              };
+              // 重载
+              codeInst.reload({
+                highlighter: data.highlighter,
+                codeRender: function (code, opts) {
+                  return highlighter[data.highlighter](code, opts);
+                }
+              });
+            }
+          }
+        });
+      }
    }
  });
-  // 重载
-  /*codeInst.reload({
-    codeRender: function () {
-      return hljs.highlight(code, {language: opts.lang}).value;
-    }
-  });*/
+
+  // 仅重载 code
+  layui.debounce(function() {
+    codeInst.reloadCode({
+      codeRender: function(code, opts) {
+        layui.link(themeData[1].link, 'layui-code-theme');
+        return hljs.highlight(code, {language: opts.lang}).value;
+      }
+    });
+  }, 300)();
+

  // 通用实例，根据元素属性定制化参数
  layui.code({
+    elem: '.layui-code',
    tools: ['tips'],
    langMarker: true,
+    lang: 'html',
    // preview: true
  });
 });