improve `code` component

2 years ago · 09c7dc8517
3 changed files with 182 additions and 197 deletions
--- a/examples/code.html
+++ b/examples/code.html
@ -1,174 +1,132 @@
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-<title>代码修饰器 - layui</title>
-
-<link rel="stylesheet" href="../src/css/layui.css">
-
-<style>
-body{padding: 50px 100px;}
-pre{margin-bottom: 20px;}
-</style>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <title>Code blocks adorn - Layui</title>
+
+  <link href="../src/css/layui.css" rel="stylesheet">
+  <style>
+    body{padding: 32px;}
+    pre{margin-bottom: 20px;}
+  </style>
 </head>
 <body>

-<pre class="layui-code" lay-title="JavaScript" lay-line-no="true" lay-height="300px">
-  //路由
-  LAY.fn.router = function(hash){
-    var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
-    var item, param = {
-      dir: []
-    };
-    for(var i = 0; i < hashs.length; i++){
-      item = hashs[i].split('=');
-      /^\w+=/.test(hashs[i]) ? function(){
-        if(item[0] !== 'dir'){
-          param[item[0]] = item[1];
-        }
-      }() : param.dir.push(hashs[i]);
-      item = null;
-    }
-    return param;
-  };
+<pre class="layui-code" lay-height="300px">
+// 在里面存放任意的文本内容
+code line
+code line
+code line
+code line
+code line
+code line
+code line
+code line
+code line
+code line
+code line
+code line
+code line
+code line
+code line
+code line
+code line
 </pre>

-<pre id="line-no">
-//路由
-LAY.fn.router = function(hash){
-  var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
-  var item, param = {
-    dir: []
-  };
-  for(var i = 0; i < hashs.length; i++){
-    item = hashs[i].split('=');
-    /^\w+=/.test(hashs[i]) ? function(){
-      if(item[0] !== 'dir'){
-        param[item[0]] = item[1];
-      }
-    }() : param.dir.push(hashs[i]);
-    item = null;
-  }
-  return param;
-};
+<pre class="layui-code" lay-options="{title: '不显示行号', ln: false}">
+code line
+code line
+code line
+code line
+code line
+code line
 </pre>

-<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
-//路由
-LAY.fn.router = function(hash){
-  var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
-  var item, param = {
-    dir: []
-  };
-  for(var i = 0; i < hashs.length; i++){
-    item = hashs[i].split('=');
-    /^\w+=/.test(hashs[i]) ? function(){
-      if(item[0] !== 'dir'){
-        param[item[0]] = item[1];
-      }
-    }() : param.dir.push(hashs[i]);
-    item = null;
-  }
-  return param;
-};
+<pre class="layui-code" lay-options="{title: '深色风格', skin: 'dark'}">
+code line
+code line
+code line
+code line
+code line
+code line
 </pre>

-<pre class="layui-code" lay-line-no="true">
-var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
-var item, param = {
-  dir: []
-};
-<pre class="layui-code" lay-title="不显示行号">
-//代码中的代码
-var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
-var item, param = {
-  dir: []
-};
-<pre class="layui-code" lay-line-no="true">
-  //代码中的代码
-  var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
-  var item, param = {
-    dir: []
-  };
+<pre class="layui-code" lay-title="嵌套">
+code line
+code line
+code line
+code line
+<pre class="layui-code" lay-options="{ln: false}">
+code line
+code line
+code line
+<pre class="layui-code">
+code line
+code line
+code line
  </pre>
 </pre>
 </pre>

-<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
-//路由
-LAY.fn.router = function(hash){
-  var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
-  var item, param = {
-    dir: []
-  };
-  for(var i = 0; i < hashs.length; i++){
-    item = hashs[i].split('=');
-    /^\w+=/.test(hashs[i]) ? function(){
-      if(item[0] !== 'dir'){
-        param[item[0]] = item[1];
-      }
-    }() : param.dir.push(hashs[i]);
-    item = null;
-  }
-  return param;
-};
-<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
-//代码中的代码
-var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
-var item, param = {
-  dir: []
-};
-<pre class="layui-code" lay-skin="notepad" lay-title="不显示行号">
-//代码中的代码
-var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
-var item, param = {
-  dir: []
-};
-<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
-//代码中的代码
-var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
-var item, param = {
-  dir: []
-};
+<pre class="layui-code" lay-options="{skin: 'dark'}">
+code line
+code line
+code line
+code line
+code line
+code line
+<pre class="layui-code" lay-options="{skin: 'dark'}">
+code line
+code line
+code line
+code line
+code line
+code line
+<pre class="layui-code" lay-options="{skin: 'dark', ln: false}">
+code line
+code line
+code line
+code line
+code line
+code line
 </pre>
 </pre>
 </pre>
 </pre>

-
-<pre class="layui-code" lay-encode="true" lay-line-no="true">
-  <div>
-    123
-  </div>
+<pre class="layui-code" lay-options="{encode: true}">
+<div>
+  123
+</div>
 </pre>

+<pre class="layui-code" lay-about="code">
+  About
+</pre>

-<pre id="about">
-    about
+<pre id="custom1">
+  custom more about
 </pre>


 <script src="../src/layui.js"></script>
 <script>
-
 layui.use('code', function(){
-  layui.code();
-
+  // 通用实例，根据元素属性定制化参数
  layui.code({
-    elem: '#line-no',
-    title: 'JavaScript（不显示行号）',
-    lineNo: false,
-    height: '300px'
+    //about: 'code' // 右上角默认显示 code
  });

+  // custom more about
  layui.code({
-    elem: '#about',
-    title: '右侧 About',
-    about: 'code'
+    elem: '#custom1',
+    about: [
+      '<a href="javascript:;">复制</a>',
+      '<a href="about:blank" target="_blank">跳转</a>'
+    ].join('')
  })
 });
-
 </script>
 </body>
 </html>
--- a/src/css/modules/code.css
+++ b/src/css/modules/code.css
@ -1,9 +1,5 @@
 /**
- 
- @Name: layui.code
- @Description：Classic modular front-end UI framework
- @License：MIT
- 
+ * code
 */

 /* 加载就绪标志 */
@ -12,19 +8,24 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
 /* 默认风格 */
 .layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;}
 .layui-code-title{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
-.layui-code-title > .layui-code-about{position: absolute; right: 10px; top: 0; color: #999;}
-.layui-code-view > .layui-code-ol, .layui-code-view > .layui-code-ul{position: relative; overflow: auto;}
+.layui-code-title > .layui-code-about{position: absolute; right: 10px; top: 0; color: #B7B7B7;}
+.layui-code-about > a{padding-left: 10px;}
+.layui-code-view > .layui-code-ol, 
+.layui-code-view > .layui-code-ul{position: relative; overflow: auto;}
 .layui-code-view > .layui-code-ol > li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 10px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;}
-.layui-code-view > .layui-code-ol > li:first-child, .layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px;}
-.layui-code-view > .layui-code-ol > li:last-child, .layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px;}
+.layui-code-view > .layui-code-ol > li:first-child, 
+.layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px;}
+.layui-code-view > .layui-code-ol > li:last-child, 
+.layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px;}
 .layui-code-view > .layui-code-ul > li{position: relative; line-height: 20px; padding: 0 10px; list-style-type: none; *list-style-type: none; background-color: #fff;}
 .layui-code-view pre{margin: 0;}

-/* notepadd++ 风格 */
-.layui-code-notepad{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
-.layui-code-notepad > .layui-code-title{border-bottom: none;}
-.layui-code-notepad > .layui-code-ol > li, .layui-code-notepad > .layui-code-ul > li{background-color: #3F3F3F; border-left: none;}
-.layui-code-notepad > .layui-code-ul > li{margin-left: 6px;}
+/* 深色风格 */
+.layui-code-dark{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
+.layui-code-dark > .layui-code-title{border-bottom: none;}
+.layui-code-dark > .layui-code-ol > li, 
+.layui-code-dark > .layui-code-ul > li{background-color: #3F3F3F; border-left: none;}
+.layui-code-dark > .layui-code-ul > li{margin-left: 6px;}

 /* 代码预览 */
 .layui-code-demo .layui-code{visibility: visible !important; margin: -15px; border-top: none; border-right: none; border-bottom: none;}
--- a/src/modules/code.js
+++ b/src/modules/code.js
@ -1,73 +1,99 @@
 /**
 * code 
- * 代码区简易修饰
+ * 代码块简易修饰
 */
 
-layui.define(['util'], function(exports){
+layui.define(['lay', 'util'], function(exports){
  "use strict";
  
  var $ = layui.$;
  var util = layui.util;
+
+  var ELEM_TITLE = 'layui-code-title';
+
+  // 默认参数项
+  var config = {
+    elem: '.layui-code', // 元素选择器
+    title: '&lt;/&gt;', // 标题
+    about: '', // 右上角信息
+    ln: true // 是否显示行号
+  };
+
+  var trim = function(str){
+    return $.trim(str).replace(/^\n|\n$/, '');
+  };
  
+  // export api
  exports('code', function(options){
-    var elems = [];
-    var trim = function(str){
-      return $.trim(str).replace(/^\n|\n$/, '');
-    }
+    var opts = options = $.extend({}, config, options);

-    options = options || {};
-    options.elem = $(options.elem||'.layui-code');
+    // 目标元素是否存在
+    options.elem = $(options.elem);
+    if(!options.elem[0]) return;

-    options.elem.each(function(){
-      elems.push(this);
-    });
-    
-    layui.each(elems.reverse(), function(index, item){
+    // 从内至外渲染
+    layui.each(options.elem.get().reverse(), function(index, item){
      var othis = $(item);
      var html = trim(othis.html());
-      var about = othis.attr('lay-about') || options.about || othis.attr('lay-lang') || options.lang || '';

-      //是否显示行号
-      var lineNo;
-      if(othis.attr('lay-line-no'))
-      {
-        lineNo = othis.attr('lay-line-no').toLowerCase() === 'true';
-      }
-      lineNo = options.lineNo === undefined ? lineNo === undefined ? false : lineNo : options.lineNo;
+      // 合并属性上的参数，并兼容旧版本属性写法 lay-*
+      var options = $.extend({}, opts, lay.options(item), function(obj){
+        var attrs = ['title', 'height', 'encode', 'skin', 'about'];
+        layui.each(attrs, function(i, attr){
+          var value = othis.attr('lay-'+ attr);
+          if(typeof value === 'string'){
+            obj[attr] = value;
+          }  
+        })
+        return obj;
+      }({}));
+
+      // 有序或无序列表
+      var listTag = options.ln ? 'ol' : 'ul';
+      var listElem = $('<'+ listTag +' class="layui-code-'+ listTag +'">');
+
+      // header
+      var headerElem = $('<div class="'+ ELEM_TITLE +'">');
+
+      // 添加组件 clasName
+      othis.addClass('layui-code-view layui-box');
+
+      // 自定义风格
+      if(options.skin){
+        if(options.skin === 'notepad') options.skin = 'dark';
+        othis.addClass('layui-code-'+ options.skin);
+      } 

      // 转义 HTML 标签
-      if(othis.attr('lay-encode') || options.encode){
-        html = util.escape(html);
-      }
-      
-      var list = lineNo ? 'ol' : 'ul';
-      othis.html('<' + list + ' class="layui-code-' + list + '"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></' + list + '>');
-      
-      if(!othis.find('>.layui-code-title')[0]){
-        var aboutWrapper = about === '' ? '' : '<div class="layui-code-about">' + about + '</div>';
-        othis.prepend('<div class="layui-code-title">' + (othis.attr('lay-title') || options.title || '&lt;/&gt;') + aboutWrapper + '</div>');
-      }
-      
-      var ol = othis.find('>.layui-code-' + list);
-      othis.addClass('layui-box layui-code-view');
+      if(options.encode) html = util.escape(html);
+      html = html.replace(/[\r\t\n]+/g, '</li><li>'); // 转义换行符
      
-      //识别皮肤
-      if(othis.attr('lay-skin') || options.skin){
-        othis.addClass('layui-code-' +(othis.attr('lay-skin') || options.skin));
-      }
+      // 生成列表
+      othis.html(listElem.html('<li>' + html + '</li>'));
      
-      //按行数适配左边距
-      if((ol.find('li').length/100|0) > 0){
-        ol.css('margin-left', (ol.find('li').length/100|0) + 'px');
+      // 创建 header
+      if(!othis.children('.'+ ELEM_TITLE)[0]){
+        headerElem.html(options.title + (
+          options.about 
+            ? '<div class="layui-code-about">' + options.about + '</div>'
+          : ''
+        ));
+        othis.prepend(headerElem);
      }
-      
-      //设置最大高度
-      if(othis.attr('lay-height') || options.height){
-        ol.css('max-height', othis.attr('lay-height') || options.height);
+
+      // 按行数适配左边距
+      (function(autoIncNums){
+        if(autoIncNums > 0){
+          listElem.css('margin-left', autoIncNums + 'px');
+        }
+      })(Math.floor(listElem.find('li').length/100));
+
+      // 限制最大高度
+      if(options.height){
+        listElem.css('max-height', options.height);
      }

    });
    
  });
-}).addcss('modules/code.css?v=2', 'skincodecss');
-
+}).addcss('modules/code.css?v=3', 'skincodecss');