mirror of https://github.com/layui/layui
优化 code 若干小问题
贤心
parent
2cf39284a1
commit
1dc48629d6
|
|
@ -665,7 +665,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
.layui-text a:not(.layui-btn){color: #01AAED;}
|
||||
.layui-text a:not(.layui-btn):hover{text-decoration: underline;}
|
||||
.layui-text blockquote:not(.layui-elem-quote){padding: 5px 15px; border-left: 5px solid #eee;}
|
||||
.layui-text pre > code:not(.layui-code){padding: 15px; font-family: Courier New,Lucida Console,Consolas; background-color: #fafafa;}
|
||||
.layui-text pre > code:not(.layui-code){padding: 15px; font-family: "Courier New",Consolas,monospace;}
|
||||
|
||||
/* 字体大小 */
|
||||
.layui-font-12{font-size: 12px !important;}
|
||||
|
|
@ -1470,7 +1470,7 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
|
|||
.layui-util-face ul li:hover{position: relative; z-index: 2; border: 1px solid #eb7350; background: #fff9ec;}
|
||||
|
||||
/** 代码文本修饰 **/
|
||||
.layui-code{position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #eee; border-left-width: 6px; background-color: #fafafa; color: #333; font-family: Courier New,Lucida Console,Consolas; font-size: 12px;}
|
||||
.layui-code{display: block; position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #eee; border-left-width: 6px; background-color: #fff; color: #333; font-family: "Courier New",Consolas,monospace; font-size: 12px;}
|
||||
|
||||
/** 穿梭框 **/
|
||||
.layui-transfer-box,
|
||||
|
|
|
|||
|
|
@ -5,28 +5,32 @@
|
|||
/* 加载就绪标志 */
|
||||
html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
|
||||
|
||||
/* 默认风格 */
|
||||
.layui-code-view{display: block; position: relative; margin: 11px 0; padding: 0 !important; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: 'Courier New'; font-size: 13px; white-space: pre; overflow: auto;}
|
||||
.layui-code-view.layui-code-line-numbers-mode{padding-left: 45px !important;}
|
||||
/* 字体 */
|
||||
.layui-code-view,
|
||||
.layui-code-view > .layui-code-lines{font-size: 13px; font-family: "Courier New",Consolas,monospace;}
|
||||
|
||||
/* 基础结构 */
|
||||
.layui-code-view{display: block; position: relative; margin: 11px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #fff; color: #333; white-space: pre; overflow: auto;}
|
||||
.layui-code-view.layui-code-line-numbers-mode{padding-left: 45px;}
|
||||
.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: #B7B7B7;}
|
||||
.layui-code-line-numbers-mode .layui-code-title{margin-left: -45px;}
|
||||
.layui-code-title ~ .layui-code-line-numbers{margin-top: 40px;}
|
||||
.layui-code-about > a{padding-left: 10px;}
|
||||
.layui-code-view > .layui-code-lines{display:block; max-height: 100%; padding: 15px 10px !important; position: relative;background-color: #fff;font-family: 'Courier New'}
|
||||
.layui-code-view > .layui-code-lines{display: block; position: relative; max-height: 100%; padding: 15px 10px !important;}
|
||||
.layui-code-view > .layui-code-lines > .layui-code-line{position: relative; display: block; line-height: 20px;}
|
||||
.layui-code-view pre{margin: 0;}
|
||||
.layui-code-line-numbers{position: absolute;top: 0;bottom: 0;left: 0;width: 45px; border-right: 1px solid #e2e2e2; text-align: center; padding: 15px 0; line-height: 20px; user-select: none;}
|
||||
.layui-code-line-numbers{position: absolute; top: 0; bottom: 0; left: 0; min-width: 45px; border-right: 1px solid #eee; border-color: rgb(126 122 122 / 15%); text-align: center; padding: 15px 8px; line-height: 20px; background-color: #fafafa; user-select: none;}
|
||||
.layui-code-line-number{display: block;}
|
||||
.layui-code-lang-marker{position: absolute; top: 2px; right: 11px; color: currentColor;}
|
||||
.layui-code-view:hover > .layui-code-lang-marker{display: none;}
|
||||
|
||||
/* 深色风格 */
|
||||
.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-lines{background-color: #3F3F3F !important; border-left: none !important;}
|
||||
.layui-code-dark > .layui-code-lines{margin-left: 6px;}
|
||||
.layui-code-dark.layui-code-line-numbers-mode > .layui-code-lines{margin-left: 0;}
|
||||
/* 深色主题 */
|
||||
.layui-code-theme-dark{border: 1px solid #2a2a2a; border-left-color: #2a2a2a; background-color: #1f1f1f; color: #ccc;}
|
||||
.layui-code-theme-dark > .layui-code-title{border-bottom: none;}
|
||||
.layui-code-theme-dark > .layui-code-line-numbers{border-right-color: #2a2a2a; background: none; color: #6e7681;}
|
||||
.layui-code-theme-dark > .layui-code-lines{margin-left: 0; background: none;}
|
||||
|
||||
|
||||
/* 代码预览 */
|
||||
.layui-code textarea{display: none;}
|
||||
|
|
@ -51,21 +55,19 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
|
|||
.layui-code-copy .layui-icon{color: #777; transition: all .3s;}
|
||||
.layui-code-copy:hover .layui-icon{color: #16b777;}
|
||||
.layui-code-view:hover > .layui-code-copy{display: block;}
|
||||
.layui-code-copy-offset{margin-right: 17px;}
|
||||
.layui-code-preview > .layui-code-view > .layui-code-copy{display: none !important;}
|
||||
|
||||
/* 全屏风格 */
|
||||
.layui-code-full{position: fixed; left: 0; top: 0; z-index: 1111111; width: 100%; height: 100%; background-color: #fff;}
|
||||
.layui-code-full .layui-code-item{width: 100% !important; border-width: 0 !important; border-top-width: 1px !important;}
|
||||
.layui-code-full .layui-code-item,
|
||||
.layui-code-full .layui-code-view{max-height: calc(100vh - 51px) !important; box-sizing: border-box;}
|
||||
.layui-code-full .layui-code-view{height: calc(100vh - 51px) !important; box-sizing: border-box;}
|
||||
|
||||
/* 代码高亮重置 */
|
||||
.layui-code-view[class*=language-]{
|
||||
font-size: 13px !important;
|
||||
.layui-code-view.layui-code-hl{
|
||||
line-height: 20px !important;
|
||||
}
|
||||
.layui-code-view[class*=language-] > .layui-code-lines,
|
||||
.layui-code-view[class*=language-] > .layui-code-line-numbers{
|
||||
.layui-code-view.layui-code-hl > .layui-code-lines,
|
||||
.layui-code-view.layui-code-hl > .layui-code-line-numbers{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
|||
ELEM_SHOW: 'layui-show',
|
||||
ELEM_LINE: 'layui-code-line',
|
||||
ELEM_LINES: 'layui-code-lines',
|
||||
ELEM_LINE_NUMS: 'layui-code-line-numbers',
|
||||
ELEM_LINE_NUMBERS_MODE: 'layui-code-line-numbers-mode',
|
||||
};
|
||||
|
||||
|
|
@ -45,6 +46,10 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
|||
langMarker: false, // 代码区域是否显示语言类型标记
|
||||
};
|
||||
|
||||
// 初始索引
|
||||
var codeIndex = layui.code ? (layui.code.index + 10000) : 0;
|
||||
|
||||
// 去除尾部空格
|
||||
var trimEnd = function(str){
|
||||
return String(str).replace(/\s+$/, '');
|
||||
}
|
||||
|
|
@ -57,13 +62,32 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
|||
exports('code', function(options){
|
||||
var opts = options = $.extend(true, {}, config, options);
|
||||
|
||||
// 目标元素是否存在
|
||||
options.elem = $(options.elem);
|
||||
if(!options.elem[0]) return;
|
||||
// 实例对象
|
||||
var inst = {
|
||||
reload: function(sets) { // 重载
|
||||
sets = sets || {};
|
||||
delete sets.elem;
|
||||
sets = $.extend(true, options, sets);
|
||||
layui.code(sets);
|
||||
}
|
||||
};
|
||||
|
||||
// 从内至外渲染
|
||||
layui.each(options.elem.get().reverse(), function(index, item){
|
||||
var othis = $(item);
|
||||
// 若 elem 非唯一
|
||||
var elem = $(options.elem);
|
||||
if(elem.length > 1){
|
||||
// 是否正向渲染
|
||||
layui.each(options.obverse ? elem : elem.get().reverse(), function(){
|
||||
layui.code($.extend({}, options, {
|
||||
elem: this
|
||||
}));
|
||||
});
|
||||
return inst;
|
||||
}
|
||||
|
||||
// 目标元素是否存在
|
||||
var othis = options.elem = $(options.elem);
|
||||
var item = othis[0];
|
||||
if(!othis[0]) return inst;
|
||||
|
||||
// 合并属性上的参数，并兼容旧版本属性写法 lay-*
|
||||
var options = $.extend(true, {}, opts, lay.options(item), function(obj){
|
||||
|
|
@ -77,6 +101,8 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
|||
return obj;
|
||||
}({}));
|
||||
|
||||
var index = layui.code.index = ++codeIndex;
|
||||
|
||||
// codeRender 需要关闭编码
|
||||
// 未使用 codeRender 时若开启了预览，则强制开启编码
|
||||
options.encode = (options.encode || options.preview) && !options.codeRender;
|
||||
|
|
@ -286,6 +312,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
|||
element.render();
|
||||
}
|
||||
};
|
||||
|
||||
// 当前实例预览完毕后的回调
|
||||
setTimeout(function(){
|
||||
typeof options.done === 'function' && options.done(params);
|
||||
|
|
@ -319,58 +346,94 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
|||
if($this.attr('lay-id') === 'preview'){
|
||||
run(thisItemBody);
|
||||
}
|
||||
|
||||
setCodeLayout();
|
||||
});
|
||||
}
|
||||
|
||||
var listElem = $('<code class="'+ CONST.ELEM_LINES +'"></code>'); // 此处的闭合标签是为了兼容 IE8
|
||||
// 创建 code 容器
|
||||
var codeElem = $('<code class="'+ CONST.ELEM_LINES +'"></code>'); // 此处的闭合标签是为了兼容 IE8
|
||||
|
||||
// header
|
||||
var headerElem = $('<div class="'+ CONST.ELEM_TITLE +'">');
|
||||
// 添加主容器 className
|
||||
othis.addClass('layui-code-view layui-border-box');
|
||||
|
||||
// 添加组件 className
|
||||
othis.addClass('layui-code-view layui-box');
|
||||
|
||||
// 自定义风格
|
||||
if(options.skin){
|
||||
if(options.skin === 'notepad') options.skin = 'dark';
|
||||
othis.removeClass('layui-code-dark layui-code-light');
|
||||
othis.addClass('layui-code-'+ options.skin);
|
||||
// code 主题风格
|
||||
var theme = options.theme || options.skin;
|
||||
if (theme) {
|
||||
othis.removeClass('layui-code-theme-dark layui-code-theme-light');
|
||||
othis.addClass('layui-code-theme-'+ theme);
|
||||
}
|
||||
|
||||
// 高亮
|
||||
if(options.highlighter) othis.addClass(options.highlighter + ' language-' + options.lang);
|
||||
// 添加高亮必要的 className
|
||||
if (options.highlighter) {
|
||||
othis.addClass([
|
||||
options.highlighter,
|
||||
'language-' + options.lang,
|
||||
'layui-code-hl'
|
||||
].join(' '));
|
||||
}
|
||||
|
||||
// 转义 HTML 标签
|
||||
if(options.encode) html = util.escape(html); // 编码
|
||||
|
||||
// code 转 html
|
||||
// codeRender
|
||||
if(typeof options.codeRender === 'function') html = options.codeRender(html, options);
|
||||
var lines = html.split(/\r?\n/g);
|
||||
|
||||
// code 行
|
||||
var lines = String(html).split(/\r?\n/g);
|
||||
|
||||
// 包裹 code 行元素
|
||||
html = (options.codeRender && !options.highlighter)
|
||||
? html
|
||||
: $.map(lines, function(line){
|
||||
return ['<div class="', CONST.ELEM_LINE, '">', (line || ' '), '</div>'].join(''); // 空行填充空格，以保证换行效果
|
||||
}).join('')
|
||||
|
||||
// 生成列表
|
||||
othis.html(listElem.html(html));
|
||||
// 插入 code
|
||||
othis.html(codeElem.html(html));
|
||||
|
||||
// code 区域样式
|
||||
if (options.codeStyle) {
|
||||
othis.attr('style', function(i, val) {
|
||||
return (val || '') + options.codeStyle;
|
||||
});
|
||||
}
|
||||
|
||||
// 兼容旧版本 height 属性
|
||||
if (options.height) othis.css('max-height', options.height);
|
||||
|
||||
// 创建行号
|
||||
var lineNumsElem = function() {
|
||||
if (options.ln) {
|
||||
var lineNumbersCode = ['<div class="layui-code-line-numbers">']
|
||||
var lineNumbersCode = ['<div class="'+ CONST.ELEM_LINE_NUMS +'">']
|
||||
layui.each(lines, function(index){
|
||||
lineNumbersCode.push('<span class="layui-code-line-number">' + util.digit(index + 1) +'.</span>')
|
||||
});
|
||||
lineNumbersCode.push('</div>');
|
||||
othis.addClass(CONST.ELEM_LINE_NUMBERS_MODE);
|
||||
othis.append(lineNumbersCode.join(''));
|
||||
othis.children('.layui-code-line-numbers').css({
|
||||
height: listElem.height(),
|
||||
})
|
||||
othis.prepend(lineNumbersCode.join(''));
|
||||
}
|
||||
return othis.children('.'+ CONST.ELEM_LINE_NUMS);
|
||||
}()
|
||||
|
||||
// 创建 header
|
||||
// 设置 code 布局
|
||||
var setCodeLayout = (function fn() {
|
||||
lineNumsElem.css({
|
||||
height: othis.prop('scrollHeight') // 与外容器高度保持一致
|
||||
});
|
||||
|
||||
// 根据行号容器宽度，适配 code 容器左内边距
|
||||
othis.css('padding-left', function(multiLine) {
|
||||
var width = lineNumsElem.outerWidth();
|
||||
return multiLine && width > 45 ? width : null;
|
||||
}(Math.floor(lines.length / 100) && options.ln));
|
||||
|
||||
return fn;
|
||||
})();
|
||||
|
||||
// 创建 header --- 后续版本将废弃该属性
|
||||
if(options.header && !othis.children('.'+ CONST.ELEM_TITLE)[0]){
|
||||
var headerElem = $('<div class="'+ CONST.ELEM_TITLE +'">');
|
||||
headerElem.html((options.title || options.text.code) + (
|
||||
options.about
|
||||
? '<div class="layui-code-about">' + options.about + '</div>'
|
||||
|
|
@ -384,33 +447,13 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
|||
typeof options.allDone === 'function' && options.allDone();
|
||||
}
|
||||
|
||||
// 按行数适配左边距
|
||||
(function(autoIncNums){
|
||||
if(autoIncNums > 0){
|
||||
othis.css('margin-left', autoIncNums + 'px');
|
||||
}
|
||||
})(Math.floor(listElem.find('.' + CONST.ELEM_LINE).length/100));
|
||||
|
||||
// 限制 Code 最大高度
|
||||
if(options.height){ // 兼容旧版本
|
||||
othis.css('max-height', options.height);
|
||||
}
|
||||
// Code 内容区域样式
|
||||
if(options.codeStyle){
|
||||
othis.attr('style', function(_, origVal){
|
||||
return (origVal || '') + options.codeStyle;
|
||||
});
|
||||
}
|
||||
|
||||
// 是否开启代码复制
|
||||
// 若开启复制，且未开启预览时，单独生成复制图标
|
||||
if(options.copy && !options.preview){
|
||||
var elemCopy = $(['<span class="'+ CONST.ELEM_COPY +'">',
|
||||
'<i class="layui-icon layui-icon-file-b" title="复制"></i>',
|
||||
'</span>'].join(''));
|
||||
var elemCopyHas = othis.children('.'+ CONST.ELEM_COPY);
|
||||
var isHeight = othis[0].style.height || othis[0].style.maxHeight;
|
||||
|
||||
if(isHeight) elemCopy.addClass(CONST.ELEM_COPY + '-offset'); // 偏移
|
||||
if(elemCopyHas[0]) elemCopyHas.remove(); // 移除旧的复制元素
|
||||
othis.append(elemCopy);
|
||||
|
||||
|
|
@ -423,15 +466,19 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
|||
// language marker
|
||||
if(options.langMarker){
|
||||
var elemMarker = $('<span class="layui-code-lang-marker">' + options.lang + '</span>')
|
||||
var isHeight = othis[0].style.height || othis[0].style.maxHeight;
|
||||
var elemMarkerHas = othis.children("." + CONST.ELEM_MARKER);
|
||||
if(isHeight) elemMarker.css('margin-right', '17px')
|
||||
if(elemMarkerHas) elemMarkerHas.remove();
|
||||
if(elemMarkerHas[0]) elemMarkerHas.remove();
|
||||
othis.append(elemMarker);
|
||||
}
|
||||
|
||||
});
|
||||
// code 渲染完毕后的回调
|
||||
if (!options.preview) {
|
||||
setTimeout(function(){
|
||||
typeof options.done === 'function' && options.done({});
|
||||
},3);
|
||||
}
|
||||
|
||||
return inst;
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue