优化 code 若干小问题

pull/1365/head
贤心 2023-09-05 16:30:07 +08:00
parent 2cf39284a1
commit 1dc48629d6
3 changed files with 395 additions and 346 deletions

View File

@ -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){color: #01AAED;}
.layui-text a:not(.layui-btn):hover{text-decoration: underline;} .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 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;} .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-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, .layui-transfer-box,

View File

@ -5,28 +5,32 @@
/* 加载就绪标志 */ /* 加载就绪标志 */
html #layuicss-skincodecss{display:none; position: absolute; width:1989px;} 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-view.layui-code-line-numbers-mode{padding-left: 45px !important;} .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{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-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-line-numbers-mode .layui-code-title{margin-left: -45px;}
.layui-code-title ~ .layui-code-line-numbers{margin-top: 40px;} .layui-code-title ~ .layui-code-line-numbers{margin-top: 40px;}
.layui-code-about > a{padding-left: 10px;} .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 > .layui-code-lines > .layui-code-line{position: relative; display: block; line-height: 20px;}
.layui-code-view pre{margin: 0;} .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-line-number{display: block;}
.layui-code-lang-marker{position: absolute; top: 2px; right: 11px; color: currentColor;} .layui-code-lang-marker{position: absolute; top: 2px; right: 11px; color: currentColor;}
.layui-code-view:hover > .layui-code-lang-marker{display: none;} .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-theme-dark{border: 1px solid #2a2a2a; border-left-color: #2a2a2a; background-color: #1f1f1f; color: #ccc;}
.layui-code-dark > .layui-code-title{border-bottom: none;} .layui-code-theme-dark > .layui-code-title{border-bottom: none;}
.layui-code-dark > .layui-code-lines{background-color: #3F3F3F !important; border-left: none !important;} .layui-code-theme-dark > .layui-code-line-numbers{border-right-color: #2a2a2a; background: none; color: #6e7681;}
.layui-code-dark > .layui-code-lines{margin-left: 6px;} .layui-code-theme-dark > .layui-code-lines{margin-left: 0; background: none;}
.layui-code-dark.layui-code-line-numbers-mode > .layui-code-lines{margin-left: 0;}
/* 代码预览 */ /* 代码预览 */
.layui-code textarea{display: 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 .layui-icon{color: #777; transition: all .3s;}
.layui-code-copy:hover .layui-icon{color: #16b777;} .layui-code-copy:hover .layui-icon{color: #16b777;}
.layui-code-view:hover > .layui-code-copy{display: block;} .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-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{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{width: 100% !important; border-width: 0 !important; border-top-width: 1px !important;}
.layui-code-full .layui-code-item, .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-]{ .layui-code-view.layui-code-hl{
font-size: 13px !important;
line-height: 20px !important; line-height: 20px !important;
} }
.layui-code-view[class*=language-] > .layui-code-lines, .layui-code-view.layui-code-hl > .layui-code-lines,
.layui-code-view[class*=language-] > .layui-code-line-numbers{ .layui-code-view.layui-code-hl > .layui-code-line-numbers{
background-color: transparent; background-color: transparent;
} }

View File

@ -24,6 +24,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
ELEM_SHOW: 'layui-show', ELEM_SHOW: 'layui-show',
ELEM_LINE: 'layui-code-line', ELEM_LINE: 'layui-code-line',
ELEM_LINES: 'layui-code-lines', ELEM_LINES: 'layui-code-lines',
ELEM_LINE_NUMS: 'layui-code-line-numbers',
ELEM_LINE_NUMBERS_MODE: 'layui-code-line-numbers-mode', ELEM_LINE_NUMBERS_MODE: 'layui-code-line-numbers-mode',
}; };
@ -45,8 +46,12 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
langMarker: false, // 代码区域是否显示语言类型标记 langMarker: false, // 代码区域是否显示语言类型标记
}; };
// 初始索引
var codeIndex = layui.code ? (layui.code.index + 10000) : 0;
// 去除尾部空格
var trimEnd = function(str){ var trimEnd = function(str){
return String(str).replace(/\s+$/, ''); return String(str).replace(/\s+$/, '');
} }
// 保留首行缩进 // 保留首行缩进
var trim = function(str){ var trim = function(str){
@ -57,381 +62,423 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
exports('code', function(options){ exports('code', function(options){
var opts = options = $.extend(true, {}, config, options); var opts = options = $.extend(true, {}, config, options);
// 目标元素是否存在 // 实例对象
options.elem = $(options.elem); var inst = {
if(!options.elem[0]) return; reload: function(sets) { // 重载
sets = sets || {};
// 从内至外渲染 delete sets.elem;
layui.each(options.elem.get().reverse(), function(index, item){ sets = $.extend(true, options, sets);
var othis = $(item); layui.code(sets);
// 合并属性上的参数,并兼容旧版本属性写法 lay-*
var options = $.extend(true, {}, 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;
}({}));
// codeRender 需要关闭编码
// 未使用 codeRender 时若开启了预览,则强制开启编码
options.encode = (options.encode || options.preview) && !options.codeRender;
// 最终显示的代码
var finalCode;
// 获得初始代码
var rawCode = othis.data('code') || function(){
var arr = [];
var textarea = othis.children('textarea');
// 若内容放置在 textarea 中
textarea.each(function(){
arr.push(trim(this.value));
});
// 内容直接放置在元素外层
if(arr.length === 0){
arr.push(trim(othis.html()));
}
return arr;
}();
othis.data('code', rawCode);
// code
var html = finalCode = rawCode.join('');
// 外部重新解析 code
if(typeof options.codeParse === 'function'){
html = finalCode = options.codeParse(html);
} }
};
// 若 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){
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 index = layui.code.index = ++codeIndex;
// codeRender 需要关闭编码
// 未使用 codeRender 时若开启了预览,则强制开启编码
options.encode = (options.encode || options.preview) && !options.codeRender;
// 最终显示的代码
var finalCode;
// 获得初始代码
var rawCode = othis.data('code') || function(){
var arr = [];
var textarea = othis.children('textarea');
// 若内容放置在 textarea 中
textarea.each(function(){
arr.push(trim(this.value));
});
// 内容直接放置在元素外层
if(arr.length === 0){
arr.push(trim(othis.html()));
}
return arr;
}();
othis.data('code', rawCode);
// code
var html = finalCode = rawCode.join('');
// 外部重新解析 code
if(typeof options.codeParse === 'function'){
html = finalCode = options.codeParse(html);
}
// 工具栏
var tools = {
copy: {
className: 'file-b',
title: ['复制代码'],
event: function(el, type){
var code = util.unescape(finalCode);
// 写入剪切板
lay.clipboard.writeText({
text: code,
done: function() {
layer.msg('已复制', {icon: 1});
},
error: function() {
layer.msg('复制失败', {icon: 2});
}
});
typeof options.onCopy === 'function' && options.onCopy(code);
}
}
};
// 是否开启预览
if(options.preview){
var FILTER_VALUE = 'LAY-CODE-DF-'+ index;
var layout = options.layout || ['code', 'preview'];
var isIframePreview = options.preview === 'iframe';
// 追加 Tab 组件
var elemView = $('<div class="'+ CONST.ELEM_PREVIEW +'">');
var elemTabView = $('<div class="layui-tab layui-tab-brief">');
var elemHeaderView = $('<div class="layui-tab-title">');
var elemPreviewView = $('<div class="'+ [
CONST.ELEM_ITEM,
CONST.ELEM_ITEM +'-preview',
'layui-border'
].join(' ') +'">');
var elemToolbar = $('<div class="layui-code-tools"></div>');
var elemViewHas = othis.parent('.' + CONST.ELEM_PREVIEW);
var elemTabHas = othis.prev('.'+ CONST.ELEM_TAB);
var elemPreviewViewHas = othis.next('.' + CONST.ELEM_ITEM +'-preview');
if(options.id) elemView.attr('id', options.id);
elemView.addClass(options.className);
elemTabView.attr('lay-filter', FILTER_VALUE);
// 标签头
layui.each(layout, function(i, v){
var li = $('<li lay-id="'+ v +'">');
if(i === 0) li.addClass('layui-this');
li.html(options.text[v]);
elemHeaderView.append(li);
});
// 工具栏 // 工具栏
var tools = { $.extend(tools, {
copy: { 'full': {
className: 'file-b', className: 'screen-full',
title: ['复制代码'], title: ['最大化显示', '还原显示'],
event: function(el, type){ event: function(el, type){
var code = util.unescape(finalCode); var elemView = el.closest('.'+ CONST.ELEM_PREVIEW);
var classNameFull = 'layui-icon-'+ this.className;
var classNameRestore = 'layui-icon-screen-restore';
var title = this.title;
var html = $('html,body');
var ELEM_SCROLLBAR_HIDE = 'layui-scrollbar-hide';
// 写入剪切板 if(el.hasClass(classNameFull)){
lay.clipboard.writeText({ elemView.addClass(CONST.ELEM_FULL);
text: code, el.removeClass(classNameFull).addClass(classNameRestore);
done: function() { el.attr('title', title[1]);
layer.msg('已复制', {icon: 1}); html.addClass(ELEM_SCROLLBAR_HIDE);
}, } else {
error: function() { elemView.removeClass(CONST.ELEM_FULL);
layer.msg('复制失败', {icon: 2}); el.removeClass(classNameRestore).addClass(classNameFull);
} el.attr('title', title[0]);
html.removeClass(ELEM_SCROLLBAR_HIDE);
}
}
},
'window': {
className: 'release',
title: ['在新窗口预览'],
event: function(el, type){
util.openWin({
content: finalCode
}); });
typeof options.onCopy === 'function' && options.onCopy(code);
} }
} }
}; });
// 是否开启预览 // copy
if(options.preview){ if(options.copy){
var FILTER_VALUE = 'LAY-CODE-DF-'+ index; if(layui.type(options.tools) === 'array'){
var layout = options.layout || ['code', 'preview']; // 若 copy 未存在于 tools 中,则追加到最前
var isIframePreview = options.preview === 'iframe'; if(options.tools.indexOf('copy') === -1){
options.tools.unshift('copy');
// 追加 Tab 组件
var elemView = $('<div class="'+ CONST.ELEM_PREVIEW +'">');
var elemTabView = $('<div class="layui-tab layui-tab-brief">');
var elemHeaderView = $('<div class="layui-tab-title">');
var elemPreviewView = $('<div class="'+ [
CONST.ELEM_ITEM,
CONST.ELEM_ITEM +'-preview',
'layui-border'
].join(' ') +'">');
var elemToolbar = $('<div class="layui-code-tools"></div>');
var elemViewHas = othis.parent('.' + CONST.ELEM_PREVIEW);
var elemTabHas = othis.prev('.'+ CONST.ELEM_TAB);
var elemPreviewViewHas = othis.next('.' + CONST.ELEM_ITEM +'-preview');
if(options.id) elemView.attr('id', options.id);
elemView.addClass(options.className);
elemTabView.attr('lay-filter', FILTER_VALUE);
// 标签头
layui.each(layout, function(i, v){
var li = $('<li lay-id="'+ v +'">');
if(i === 0) li.addClass('layui-this');
li.html(options.text[v]);
elemHeaderView.append(li);
});
// 工具栏
$.extend(tools, {
'full': {
className: 'screen-full',
title: ['最大化显示', '还原显示'],
event: function(el, type){
var elemView = el.closest('.'+ CONST.ELEM_PREVIEW);
var classNameFull = 'layui-icon-'+ this.className;
var classNameRestore = 'layui-icon-screen-restore';
var title = this.title;
var html = $('html,body');
var ELEM_SCROLLBAR_HIDE = 'layui-scrollbar-hide';
if(el.hasClass(classNameFull)){
elemView.addClass(CONST.ELEM_FULL);
el.removeClass(classNameFull).addClass(classNameRestore);
el.attr('title', title[1]);
html.addClass(ELEM_SCROLLBAR_HIDE);
} else {
elemView.removeClass(CONST.ELEM_FULL);
el.removeClass(classNameRestore).addClass(classNameFull);
el.attr('title', title[0]);
html.removeClass(ELEM_SCROLLBAR_HIDE);
}
}
},
'window': {
className: 'release',
title: ['在新窗口预览'],
event: function(el, type){
util.openWin({
content: finalCode
});
}
}
});
// copy
if(options.copy){
if(layui.type(options.tools) === 'array'){
// 若 copy 未存在于 tools 中,则追加到最前
if(options.tools.indexOf('copy') === -1){
options.tools.unshift('copy');
}
} else {
options.tools = ['copy'];
} }
} else {
options.tools = ['copy'];
} }
}
// 工具栏事件 // 工具栏事件
elemToolbar.on('click', '>i', function(){ elemToolbar.on('click', '>i', function(){
var oi = $(this); var oi = $(this);
var type = oi.data('type'); var type = oi.data('type');
// 内部 tools event // 内部 tools event
tools[type] && typeof tools[type].event === 'function' && tools[type].event(oi, type); tools[type] && typeof tools[type].event === 'function' && tools[type].event(oi, type);
// 外部 tools event // 外部 tools event
typeof options.toolsEvent === 'function' && options.toolsEvent({ typeof options.toolsEvent === 'function' && options.toolsEvent({
elem: oi, elem: oi,
type: type, type: type,
rawCode: rawCode.join(''), // 原始 code rawCode: rawCode.join(''), // 原始 code
finalCode: util.unescape(finalCode) // 最终 code finalCode: util.unescape(finalCode) // 最终 code
});
}); });
});
// 渲染工具栏 // 渲染工具栏
layui.each(options.tools, function(i, v){ layui.each(options.tools, function(i, v){
var viso = typeof v === 'object'; // 若为 object 值,则可自定义更多属性 var viso = typeof v === 'object'; // 若为 object 值,则可自定义更多属性
var tool = viso ? v : ( var tool = viso ? v : (
tools[v] || { tools[v] || {
className: v, className: v,
title: [v] title: [v]
} }
); );
var className = tool.className || tool.type; var className = tool.className || tool.type;
var title = tool.title || ['']; var title = tool.title || [''];
var type = viso ? ( tool.type || className ) : v; var type = viso ? ( tool.type || className ) : v;
if (!type) return; if (!type) return;
elemToolbar.append( elemToolbar.append(
'<i class="layui-icon layui-icon-'+ className +'" data-type="'+ type +'" title="'+ title[0] +'"></i>' '<i class="layui-icon layui-icon-'+ className +'" data-type="'+ type +'" title="'+ title[0] +'"></i>'
); );
}); });
// 移除旧结构 // 移除旧结构
if(elemTabHas[0]) elemTabHas.remove(); // 移除 tab if(elemTabHas[0]) elemTabHas.remove(); // 移除 tab
if(elemPreviewViewHas[0]) elemPreviewViewHas.remove(); // 移除预览区域 if(elemPreviewViewHas[0]) elemPreviewViewHas.remove(); // 移除预览区域
if(elemViewHas[0]) othis.unwrap(); // 移除外层容器 if(elemViewHas[0]) othis.unwrap(); // 移除外层容器
elemTabView.append(elemHeaderView); // 追加标签头 elemTabView.append(elemHeaderView); // 追加标签头
options.tools && elemTabView.append(elemToolbar); // 追加工具栏 options.tools && elemTabView.append(elemToolbar); // 追加工具栏
othis.wrap(elemView).addClass(CONST.ELEM_ITEM).before(elemTabView); // 追加标签结构 othis.wrap(elemView).addClass(CONST.ELEM_ITEM).before(elemTabView); // 追加标签结构
// 追加预览 // 追加预览
if(isIframePreview){ if(isIframePreview){
elemPreviewView.html('<iframe allowtransparency="true" frameborder="0"></iframe>'); elemPreviewView.html('<iframe allowtransparency="true" frameborder="0"></iframe>');
} }
// 执行预览 // 执行预览
var run = function(thisItemBody){ var run = function(thisItemBody){
var iframe = thisItemBody.children('iframe')[0]; var iframe = thisItemBody.children('iframe')[0];
if(isIframePreview && iframe){ if(isIframePreview && iframe){
iframe.srcdoc = finalCode; iframe.srcdoc = finalCode;
} else { } else {
thisItemBody.html(rawCode.join('')); thisItemBody.html(rawCode.join(''));
}
// 回调的返回参数
var params = {
container: thisItemBody,
render: function(){
form.render(thisItemBody.find('.layui-form'));
element.render();
} }
// 回调的返回参数
var params = {
container: thisItemBody,
render: function(){
form.render(thisItemBody.find('.layui-form'));
element.render();
}
};
// 当前实例预览完毕后的回调
setTimeout(function(){
typeof options.done === 'function' && options.done(params);
},3);
}; };
if(layout[0] === 'preview'){ // 当前实例预览完毕后的回调
elemPreviewView.addClass(CONST.ELEM_SHOW); setTimeout(function(){
othis.before(elemPreviewView); typeof options.done === 'function' && options.done(params);
run(elemPreviewView); },3);
} else { };
othis.addClass(CONST.ELEM_SHOW).after(elemPreviewView);
if(layout[0] === 'preview'){
elemPreviewView.addClass(CONST.ELEM_SHOW);
othis.before(elemPreviewView);
run(elemPreviewView);
} else {
othis.addClass(CONST.ELEM_SHOW).after(elemPreviewView);
}
// 内容项初始化样式
options.codeStyle = [options.style, options.codeStyle].join('');
options.previewStyle = [options.style, options.previewStyle].join('');
// othis.attr('style', options.codeStyle);
elemPreviewView.attr('style', options.previewStyle);
// tab change
element.on('tab('+ FILTER_VALUE +')', function(data){
var $this = $(this);
var thisElem = $(data.elem).closest('.'+ CONST.ELEM_PREVIEW);
var elemItemBody = thisElem.find('.'+ CONST.ELEM_ITEM);
var thisItemBody = elemItemBody.eq(data.index);
elemItemBody.removeClass(CONST.ELEM_SHOW);
thisItemBody.addClass(CONST.ELEM_SHOW);
if($this.attr('lay-id') === 'preview'){
run(thisItemBody);
} }
// 内容项初始化样式 setCodeLayout();
options.codeStyle = [options.style, options.codeStyle].join(''); });
options.previewStyle = [options.style, options.previewStyle].join(''); }
// othis.attr('style', options.codeStyle);
elemPreviewView.attr('style', options.previewStyle);
// tab change // 创建 code 容器
element.on('tab('+ FILTER_VALUE +')', function(data){ var codeElem = $('<code class="'+ CONST.ELEM_LINES +'"></code>'); // 此处的闭合标签是为了兼容 IE8
var $this = $(this);
var thisElem = $(data.elem).closest('.'+ CONST.ELEM_PREVIEW);
var elemItemBody = thisElem.find('.'+ CONST.ELEM_ITEM);
var thisItemBody = elemItemBody.eq(data.index);
elemItemBody.removeClass(CONST.ELEM_SHOW); // 添加主容器 className
thisItemBody.addClass(CONST.ELEM_SHOW); othis.addClass('layui-code-view layui-border-box');
if($this.attr('lay-id') === 'preview'){ // code 主题风格
run(thisItemBody); var theme = options.theme || options.skin;
} if (theme) {
}); othis.removeClass('layui-code-theme-dark layui-code-theme-light');
} othis.addClass('layui-code-theme-'+ theme);
}
var listElem = $('<code class="'+ CONST.ELEM_LINES +'"></code>'); // 此处的闭合标签是为了兼容 IE8 // 添加高亮必要的 className
if (options.highlighter) {
othis.addClass([
options.highlighter,
'language-' + options.lang,
'layui-code-hl'
].join(' '));
}
// header // 转义 HTML 标签
var headerElem = $('<div class="'+ CONST.ELEM_TITLE +'">'); if(options.encode) html = util.escape(html); // 编码
// 添加组件 className // codeRender
othis.addClass('layui-code-view layui-box'); if(typeof options.codeRender === 'function') html = options.codeRender(html, options);
// 自定义风格 // code 行
if(options.skin){ var lines = String(html).split(/\r?\n/g);
if(options.skin === 'notepad') options.skin = 'dark';
othis.removeClass('layui-code-dark layui-code-light');
othis.addClass('layui-code-'+ options.skin);
}
// 高亮 // 包裹 code 行元素
if(options.highlighter) othis.addClass(options.highlighter + ' language-' + options.lang); html = (options.codeRender && !options.highlighter)
? html
: $.map(lines, function(line){
return ['<div class="', CONST.ELEM_LINE, '">', (line || ' '), '</div>'].join(''); // 空行填充空格,以保证换行效果
}).join('')
// 转义 HTML 标签 // 插入 code
if(options.encode) html = util.escape(html); // 编码 othis.html(codeElem.html(html));
// code 转 html // code 区域样式
if(typeof options.codeRender === 'function') html = options.codeRender(html, options); if (options.codeStyle) {
var lines = html.split(/\r?\n/g); othis.attr('style', function(i, val) {
html = (options.codeRender && !options.highlighter) return (val || '') + options.codeStyle;
? html });
: $.map(lines, function(line){ }
return ['<div class="', CONST.ELEM_LINE, '">', (line || ' '), '</div>'].join(''); // 空行填充空格,以保证换行效果
}).join('')
// 生成列表 // 兼容旧版本 height 属性
othis.html(listElem.html(html)); if (options.height) othis.css('max-height', options.height);
// 创建行号 // 创建行号
if(options.ln) { var lineNumsElem = function() {
var lineNumbersCode = ['<div class="layui-code-line-numbers">'] if (options.ln) {
var lineNumbersCode = ['<div class="'+ CONST.ELEM_LINE_NUMS +'">']
layui.each(lines, function(index){ layui.each(lines, function(index){
lineNumbersCode.push('<span class="layui-code-line-number">' + util.digit(index + 1) +'.</span>') lineNumbersCode.push('<span class="layui-code-line-number">' + util.digit(index + 1) +'.</span>')
}); });
lineNumbersCode.push('</div>'); lineNumbersCode.push('</div>');
othis.addClass(CONST.ELEM_LINE_NUMBERS_MODE); othis.addClass(CONST.ELEM_LINE_NUMBERS_MODE);
othis.append(lineNumbersCode.join('')); othis.prepend(lineNumbersCode.join(''));
othis.children('.layui-code-line-numbers').css({
height: listElem.height(),
})
} }
return othis.children('.'+ CONST.ELEM_LINE_NUMS);
}()
// 创建 header // 设置 code 布局
if(options.header && !othis.children('.'+ CONST.ELEM_TITLE)[0]){ var setCodeLayout = (function fn() {
headerElem.html((options.title || options.text.code) + ( lineNumsElem.css({
options.about height: othis.prop('scrollHeight') // 与外容器高度保持一致
? '<div class="layui-code-about">' + options.about + '</div>' });
: ''
));
othis.prepend(headerElem);
}
// 所有实例渲染完毕后的回调 // 根据行号容器宽度,适配 code 容器左内边距
if(options.elem.length === index + 1){ othis.css('padding-left', function(multiLine) {
typeof options.allDone === 'function' && options.allDone(); var width = lineNumsElem.outerWidth();
} return multiLine && width > 45 ? width : null;
}(Math.floor(lines.length / 100) && options.ln));
// 按行数适配左边距 return fn;
(function(autoIncNums){ })();
if(autoIncNums > 0){
othis.css('margin-left', autoIncNums + 'px');
}
})(Math.floor(listElem.find('.' + CONST.ELEM_LINE).length/100));
// 限制 Code 最大高度 // 创建 header --- 后续版本将废弃该属性
if(options.height){ // 兼容旧版本 if(options.header && !othis.children('.'+ CONST.ELEM_TITLE)[0]){
othis.css('max-height', options.height); var headerElem = $('<div class="'+ CONST.ELEM_TITLE +'">');
} headerElem.html((options.title || options.text.code) + (
// Code 内容区域样式 options.about
if(options.codeStyle){ ? '<div class="layui-code-about">' + options.about + '</div>'
othis.attr('style', function(_, origVal){ : ''
return (origVal || '') + options.codeStyle; ));
}); othis.prepend(headerElem);
} }
// 是否开启代码复制 // 所有实例渲染完毕后的回调
if(options.copy && !options.preview){ if(options.elem.length === index + 1){
var elemCopy = $(['<span class="'+ CONST.ELEM_COPY +'">', typeof options.allDone === 'function' && options.allDone();
'<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(); // 移除旧的复制元素 if(options.copy && !options.preview){
othis.append(elemCopy); 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);
// 点击复制 if(elemCopyHas[0]) elemCopyHas.remove(); // 移除旧的复制元素
elemCopy.on('click', function(){ othis.append(elemCopy);
tools.copy.event();
});
}
// language marker // 点击复制
if(options.langMarker){ elemCopy.on('click', function(){
var elemMarker = $('<span class="layui-code-lang-marker">' + options.lang + '</span>') tools.copy.event();
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();
othis.append(elemMarker);
}
}); // language marker
if(options.langMarker){
var elemMarker = $('<span class="layui-code-lang-marker">' + options.lang + '</span>')
var elemMarkerHas = othis.children("." + CONST.ELEM_MARKER);
if(elemMarkerHas[0]) elemMarkerHas.remove();
othis.append(elemMarker);
}
// code 渲染完毕后的回调
if (!options.preview) {
setTimeout(function(){
typeof options.done === 'function' && options.done({});
},3);
}
return inst;
}); });
}); });