Merge branch 'layui:main' into main
This commit is contained in:
jacksonwj
GitHub
commit
ff4f95cd92
@ -60,12 +60,19 @@ body{padding:20px;}
|
||||
//,predefine: true //开启预定义颜色
|
||||
//,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
|
||||
,change: function(color){
|
||||
document.body.style.backgroundColor = color;
|
||||
this.done(color);
|
||||
}
|
||||
,done: function(color){
|
||||
layui.$('#LAY-test1').val(color);
|
||||
document.body.style.backgroundColor = color;
|
||||
}
|
||||
,cancel: function(color){
|
||||
this.done(color);
|
||||
console.log('cancel', color);
|
||||
}
|
||||
,close: function(color){
|
||||
console.log('close', color);
|
||||
}
|
||||
});
|
||||
|
||||
colorpicker.render({
|
||||
|
||||
@ -113,6 +113,10 @@ layui.use(['element', 'form'], function(){
|
||||
element.on('tab(test)', function(data){
|
||||
console.log(this, data);
|
||||
});
|
||||
|
||||
element.on('tabDelete(tabDemo)', function(data){
|
||||
console.log(this, data);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -900,7 +900,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
/* 小表格 */
|
||||
.layui-table[lay-size="sm"] th,
|
||||
.layui-table[lay-size="sm"] td{padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; font-size: 12px;}
|
||||
.layui-table-view .layui-table[lay-size="sm"] .layui-table-cell{height: 30px; line-height: 20px; padding-top: 5px; padding-right: 5px;}
|
||||
.layui-table-view .layui-table[lay-size="sm"] .layui-table-cell{height: 30px; line-height: 20px; padding-top: 5px; padding-left: 5px; padding-right: 5px;}
|
||||
|
||||
/* 数据表格 */
|
||||
.layui-table[lay-data]{display: none;}
|
||||
|
||||
@ -6,13 +6,14 @@
|
||||
layui.define(['jquery', 'lay'], function(exports){
|
||||
"use strict";
|
||||
|
||||
var $ = layui.jquery
|
||||
,lay = layui.lay
|
||||
,device = layui.device()
|
||||
,clickOrMousedown = (device.mobile ? 'click' : 'mousedown')
|
||||
var $ = layui.$;
|
||||
var lay = layui.lay;
|
||||
var hint = layui.hint();
|
||||
var device = layui.device();
|
||||
var clickOrMousedown = (device.mobile ? 'click' : 'mousedown');
|
||||
|
||||
//外部接口
|
||||
,colorpicker = {
|
||||
var colorpicker = {
|
||||
config: {}
|
||||
,index: layui.colorpicker ? (layui.colorpicker.index + 10000) : 0
|
||||
|
||||
@ -27,16 +28,19 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
,on: function(events, callback){
|
||||
return layui.onevent.call(this, 'colorpicker', events, callback);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//操作当前实例
|
||||
,thisColorPicker = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
// 操作当前实例
|
||||
var thisModule = function(){
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var id = options.id;
|
||||
|
||||
thisModule.that[id] = that; // 记录当前实例对象
|
||||
|
||||
return {
|
||||
config: options
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//字符常量
|
||||
@ -213,15 +217,18 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
var othis = options.elem = $(options.elem);
|
||||
options.size && elemColorBox.addClass('layui-colorpicker-'+ options.size); //初始化颜色选择框尺寸
|
||||
|
||||
//插入颜色选择框
|
||||
// 插入颜色选择框
|
||||
othis.addClass('layui-inline').html(
|
||||
that.elemColorBox = elemColorBox
|
||||
);
|
||||
|
||||
//初始化 id 参数
|
||||
options.id = ('id' in options) ? options.id : that.index;
|
||||
|
||||
//获取背景色值
|
||||
// 获取背景色值
|
||||
that.color = that.elemColorBox.find('.'+ PICKER_TRIG_SPAN)[0].style.background;
|
||||
|
||||
//相关事件
|
||||
// 相关事件
|
||||
that.events();
|
||||
};
|
||||
|
||||
@ -291,6 +298,9 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
that.removePicker(Class.thisElemInd);
|
||||
$('body').append(elemPicker);
|
||||
}
|
||||
|
||||
// 记录当前执行的实例索引
|
||||
colorpicker.thisId = options.id;
|
||||
|
||||
Class.thisElemInd = that.index; //记录最新打开的选择器索引
|
||||
Class.thisColor = elemColorBox.style.background //记录最新打开的选择器颜色选中值
|
||||
@ -301,9 +311,18 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
|
||||
//颜色选择器移除
|
||||
Class.prototype.removePicker = function(index){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
$('#layui-colorpicker'+ (index || that.index)).remove();
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var elem = $('#layui-colorpicker'+ (index || that.index));
|
||||
|
||||
if(elem[0]){
|
||||
elem.remove();
|
||||
delete colorpicker.thisId;
|
||||
|
||||
// 面板关闭后的回调
|
||||
typeof options.close === 'function' && options.close(that.color);
|
||||
}
|
||||
|
||||
return that;
|
||||
};
|
||||
|
||||
@ -640,14 +659,12 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
});
|
||||
}
|
||||
|
||||
//颜色选择器输入
|
||||
// 颜色选择器输入
|
||||
Class.prototype.events = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
|
||||
,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
|
||||
|
||||
//弹出颜色选择器
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
|
||||
// 弹出颜色选择器
|
||||
that.elemColorBox.on('click' , function(){
|
||||
that.renderPicker();
|
||||
if($(ELEM_MAIN)[0]){
|
||||
@ -655,11 +672,19 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
that.side();
|
||||
};
|
||||
});
|
||||
|
||||
if(!options.elem[0] || that.elemColorBox[0].eventHandler) return;
|
||||
|
||||
};
|
||||
|
||||
//全局事件
|
||||
(function(){
|
||||
//绑定关闭控件事件
|
||||
$doc.on(clickOrMousedown, function(e){
|
||||
if(!colorpicker.thisId) return;
|
||||
var that = thisModule.getThis(colorpicker.thisId);
|
||||
if(!that) return;
|
||||
|
||||
var options = that.config;
|
||||
var elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN);
|
||||
|
||||
//如果点击的元素是颜色框
|
||||
if($(e.target).hasClass(ELEM)
|
||||
|| $(e.target).parents('.'+ELEM)[0]
|
||||
@ -680,24 +705,40 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||
}
|
||||
elemColorBoxSpan[0].style.background = that.color || '';
|
||||
|
||||
// 取消选择的回调
|
||||
typeof options.cancel === 'function' && options.cancel(that.color);
|
||||
|
||||
// 移除面板
|
||||
that.removePicker();
|
||||
});
|
||||
|
||||
//自适应定位
|
||||
$win.on('resize', function(){
|
||||
if(!colorpicker.thisId) return;
|
||||
var that = thisModule.getThis(colorpicker.thisId);
|
||||
if(!that) return;
|
||||
|
||||
if(!that.elemPicker || !$(ELEM_MAIN)[0]){
|
||||
return false;
|
||||
}
|
||||
that.position();
|
||||
});
|
||||
|
||||
that.elemColorBox[0].eventHandler = true;
|
||||
})();
|
||||
|
||||
// 记录所有实例
|
||||
thisModule.that = {}; // 记录所有实例对象
|
||||
|
||||
// 获取当前实例对象
|
||||
thisModule.getThis = function(id){
|
||||
var that = thisModule.that[id];
|
||||
if(!that) hint.error(id ? (MOD_NAME +' instance with ID \''+ id +'\' not found') : 'ID argument required');
|
||||
return that;
|
||||
};
|
||||
|
||||
//核心入口
|
||||
colorpicker.render = function(options){
|
||||
var inst = new Class(options);
|
||||
return thisColorPicker.call(inst);
|
||||
return thisModule.call(inst);
|
||||
};
|
||||
|
||||
exports(MOD_NAME, colorpicker);
|
||||
|
||||
@ -36,9 +36,9 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
|
||||
|
||||
//操作当前实例
|
||||
,thisModule = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,id = options.id;
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var id = options.id;
|
||||
|
||||
thisModule.that[id] = that; //记录当前实例对象
|
||||
|
||||
|
||||
@ -1,570 +0,0 @@
|
||||
/**
|
||||
* layedit 富文本编辑器（该组件已被弃用，为了向下兼容而保留）
|
||||
*/
|
||||
|
||||
layui.define(['layer', 'form'], function(exports){
|
||||
"use strict";
|
||||
|
||||
var $ = layui.$
|
||||
,layer = layui.layer
|
||||
,form = layui.form
|
||||
,hint = layui.hint()
|
||||
,device = layui.device()
|
||||
|
||||
,MOD_NAME = 'layedit', THIS = 'layui-this', SHOW = 'layui-show', ABLED = 'layui-disabled'
|
||||
|
||||
,Edit = function(){
|
||||
var that = this;
|
||||
that.index = 0;
|
||||
|
||||
//全局配置
|
||||
that.config = {
|
||||
//默认工具bar
|
||||
tool: [
|
||||
'strong', 'italic', 'underline', 'del'
|
||||
,'|'
|
||||
,'left', 'center', 'right'
|
||||
,'|'
|
||||
,'link', 'unlink'
|
||||
]
|
||||
,hideTool: []
|
||||
,height: 280 //默认高
|
||||
};
|
||||
};
|
||||
|
||||
//全局设置
|
||||
Edit.prototype.set = function(options){
|
||||
var that = this;
|
||||
$.extend(true, that.config, options);
|
||||
return that;
|
||||
};
|
||||
|
||||
//事件
|
||||
Edit.prototype.on = function(events, callback){
|
||||
return layui.onevent(MOD_NAME, events, callback);
|
||||
};
|
||||
|
||||
//建立编辑器
|
||||
Edit.prototype.build = function(id, settings){
|
||||
settings = settings || {};
|
||||
|
||||
var that = this
|
||||
,config = that.config
|
||||
,ELEM = 'layui-layedit', textArea = $(typeof(id)=='string'?'#'+id:id)
|
||||
,name = 'LAY_layedit_'+ (++that.index)
|
||||
,haveBuild = textArea.next('.'+ELEM)
|
||||
|
||||
,set = $.extend({}, config, settings)
|
||||
|
||||
,tool = function(){
|
||||
var node = [], hideTools = {};
|
||||
layui.each(set.hideTool, function(_, item){
|
||||
hideTools[item] = true;
|
||||
});
|
||||
layui.each(set.tool, function(_, item){
|
||||
if(tools[item] && !hideTools[item]){
|
||||
node.push(tools[item]);
|
||||
}
|
||||
});
|
||||
return node.join('');
|
||||
}()
|
||||
|
||||
|
||||
,editor = $(['<div class="'+ ELEM +'">'
|
||||
,'<div class="layui-unselect layui-layedit-tool">'+ tool +'</div>'
|
||||
,'<div class="layui-layedit-iframe">'
|
||||
,'<iframe id="'+ name +'" name="'+ name +'" textarea="'+ id +'" frameborder="0"></iframe>'
|
||||
,'</div>'
|
||||
,'</div>'].join(''))
|
||||
|
||||
//编辑器不兼容ie8以下
|
||||
if(device.ie && device.ie < 8){
|
||||
return textArea.removeClass('layui-hide').addClass(SHOW);
|
||||
}
|
||||
|
||||
haveBuild[0] && (haveBuild.remove());
|
||||
|
||||
setIframe.call(that, editor, textArea[0], set)
|
||||
textArea.addClass('layui-hide').after(editor);
|
||||
|
||||
return that.index;
|
||||
};
|
||||
|
||||
//获得编辑器中内容
|
||||
Edit.prototype.getContent = function(index){
|
||||
var iframeWin = getWin(index);
|
||||
if(!iframeWin[0]) return;
|
||||
return toLower(iframeWin[0].document.body.innerHTML);
|
||||
};
|
||||
|
||||
//获得编辑器中纯文本内容
|
||||
Edit.prototype.getText = function(index){
|
||||
var iframeWin = getWin(index);
|
||||
if(!iframeWin[0]) return;
|
||||
return $(iframeWin[0].document.body).text();
|
||||
};
|
||||
/**
|
||||
* 设置编辑器内容
|
||||
* @param {[type]} index 编辑器索引
|
||||
* @param {[type]} content 要设置的内容
|
||||
* @param {[type]} flag 是否追加模式
|
||||
*/
|
||||
Edit.prototype.setContent = function(index, content, flag){
|
||||
var iframeWin = getWin(index);
|
||||
if(!iframeWin[0]) return;
|
||||
if(flag){
|
||||
$(iframeWin[0].document.body).append(content)
|
||||
}else{
|
||||
$(iframeWin[0].document.body).html(content)
|
||||
};
|
||||
layedit.sync(index)
|
||||
};
|
||||
//将编辑器内容同步到textarea（一般用于异步提交时）
|
||||
Edit.prototype.sync = function(index){
|
||||
var iframeWin = getWin(index);
|
||||
if(!iframeWin[0]) return;
|
||||
var textarea = $('#'+iframeWin[1].attr('textarea'));
|
||||
textarea.val(toLower(iframeWin[0].document.body.innerHTML));
|
||||
};
|
||||
|
||||
//获取编辑器选中内容
|
||||
Edit.prototype.getSelection = function(index){
|
||||
var iframeWin = getWin(index);
|
||||
if(!iframeWin[0]) return;
|
||||
var range = Range(iframeWin[0].document);
|
||||
return document.selection ? range.text : range.toString();
|
||||
};
|
||||
|
||||
//iframe初始化
|
||||
var setIframe = function(editor, textArea, set){
|
||||
var that = this, iframe = editor.find('iframe');
|
||||
|
||||
iframe.css({
|
||||
height: set.height
|
||||
}).on('load', function(){
|
||||
var conts = iframe.contents()
|
||||
,iframeWin = iframe.prop('contentWindow')
|
||||
,head = conts.find('head')
|
||||
,style = $(['<style>'
|
||||
,'*{margin: 0; padding: 0;}'
|
||||
,'body{padding: 10px; line-height: 20px; overflow-x: hidden; word-wrap: break-word; font: 14px Helvetica Neue,Helvetica,PingFang SC,Microsoft YaHei,Tahoma,Arial,sans-serif; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}'
|
||||
,'a{color:#01AAED; text-decoration:none;}a:hover{color:#c00}'
|
||||
,'p{margin-bottom: 10px;}'
|
||||
,'img{display: inline-block; border: none; vertical-align: middle;}'
|
||||
,'pre{margin: 10px 0; padding: 10px; line-height: 20px; border: 1px solid #ddd; border-left-width: 6px; background-color: #F2F2F2; color: #333; font-family: Courier New; font-size: 12px;}'
|
||||
,'</style>'].join(''))
|
||||
,body = conts.find('body');
|
||||
|
||||
head.append(style);
|
||||
body.attr('contenteditable', 'true').css({
|
||||
'min-height': set.height
|
||||
}).html(textArea.value||'');
|
||||
|
||||
hotkey.apply(that, [iframeWin, iframe, textArea, set]); //快捷键处理
|
||||
toolActive.call(that, iframeWin, editor, set); //触发工具
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
//获得iframe窗口对象
|
||||
,getWin = function(index){
|
||||
var iframe = $('#LAY_layedit_'+ index)
|
||||
,iframeWin = iframe.prop('contentWindow');
|
||||
return [iframeWin, iframe];
|
||||
}
|
||||
|
||||
//IE8下将标签处理成小写
|
||||
,toLower = function(html){
|
||||
if(device.ie == 8){
|
||||
html = html.replace(/<.+>/g, function(str){
|
||||
return str.toLowerCase();
|
||||
});
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
//快捷键处理
|
||||
,hotkey = function(iframeWin, iframe, textArea, set){
|
||||
var iframeDOM = iframeWin.document, body = $(iframeDOM.body);
|
||||
body.on('keydown', function(e){
|
||||
var keycode = e.keyCode;
|
||||
//处理回车
|
||||
if(keycode === 13){
|
||||
var range = Range(iframeDOM);
|
||||
var container = getContainer(range)
|
||||
,parentNode = container.parentNode;
|
||||
|
||||
if(parentNode.tagName.toLowerCase() === 'pre'){
|
||||
if(e.shiftKey) return
|
||||
layer.msg('请暂时用shift+enter');
|
||||
return false;
|
||||
}
|
||||
iframeDOM.execCommand('formatBlock', false, '<p>');
|
||||
}
|
||||
});
|
||||
|
||||
//给textarea同步内容
|
||||
$(textArea).parents('form').on('submit', function(){
|
||||
var html = body.html();
|
||||
//IE8下将标签处理成小写
|
||||
if(device.ie == 8){
|
||||
html = html.replace(/<.+>/g, function(str){
|
||||
return str.toLowerCase();
|
||||
});
|
||||
}
|
||||
textArea.value = html;
|
||||
});
|
||||
|
||||
//处理粘贴
|
||||
body.on('paste', function(e){
|
||||
iframeDOM.execCommand('formatBlock', false, '<p>');
|
||||
setTimeout(function(){
|
||||
filter.call(iframeWin, body);
|
||||
textArea.value = body.html();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
//标签过滤
|
||||
,filter = function(body){
|
||||
var iframeWin = this
|
||||
,iframeDOM = iframeWin.document;
|
||||
|
||||
//清除影响版面的css属性
|
||||
body.find('*[style]').each(function(){
|
||||
var textAlign = this.style.textAlign;
|
||||
this.removeAttribute('style');
|
||||
$(this).css({
|
||||
'text-align': textAlign || ''
|
||||
})
|
||||
});
|
||||
|
||||
//修饰表格
|
||||
body.find('table').addClass('layui-table');
|
||||
|
||||
//移除不安全的标签
|
||||
body.find('script,link').remove();
|
||||
}
|
||||
|
||||
//Range对象兼容性处理
|
||||
,Range = function(iframeDOM){
|
||||
return iframeDOM.selection
|
||||
? iframeDOM.selection.createRange()
|
||||
: iframeDOM.getSelection().getRangeAt(0);
|
||||
}
|
||||
|
||||
//当前Range对象的endContainer兼容性处理
|
||||
,getContainer = function(range){
|
||||
return range.endContainer || range.parentElement().childNodes[0]
|
||||
}
|
||||
|
||||
//在选区插入内联元素
|
||||
,insertInline = function(tagName, attr, range){
|
||||
var iframeDOM = this.document
|
||||
,elem = document.createElement(tagName)
|
||||
for(var key in attr){
|
||||
elem.setAttribute(key, attr[key]);
|
||||
}
|
||||
elem.removeAttribute('text');
|
||||
|
||||
if(iframeDOM.selection){ //IE
|
||||
var text = range.text || attr.text;
|
||||
if(tagName === 'a' && !text) return;
|
||||
if(text){
|
||||
elem.innerHTML = text;
|
||||
}
|
||||
range.pasteHTML($(elem).prop('outerHTML'));
|
||||
range.select();
|
||||
} else { //非IE
|
||||
var text = range.toString() || attr.text;
|
||||
if(tagName === 'a' && !text) return;
|
||||
if(text){
|
||||
elem.innerHTML = text;
|
||||
}
|
||||
range.deleteContents();
|
||||
range.insertNode(elem);
|
||||
}
|
||||
}
|
||||
|
||||
//工具选中
|
||||
,toolCheck = function(tools, othis){
|
||||
var iframeDOM = this.document
|
||||
,CHECK = 'layedit-tool-active'
|
||||
,container = getContainer(Range(iframeDOM))
|
||||
,item = function(type){
|
||||
return tools.find('.layedit-tool-'+type)
|
||||
}
|
||||
|
||||
if(othis){
|
||||
othis[othis.hasClass(CHECK) ? 'removeClass' : 'addClass'](CHECK);
|
||||
}
|
||||
|
||||
tools.find('>i').removeClass(CHECK);
|
||||
item('unlink').addClass(ABLED);
|
||||
|
||||
$(container).parents().each(function(){
|
||||
var tagName = this.tagName.toLowerCase()
|
||||
,textAlign = this.style.textAlign;
|
||||
|
||||
//文字
|
||||
if(tagName === 'b' || tagName === 'strong'){
|
||||
item('b').addClass(CHECK)
|
||||
}
|
||||
if(tagName === 'i' || tagName === 'em'){
|
||||
item('i').addClass(CHECK)
|
||||
}
|
||||
if(tagName === 'u'){
|
||||
item('u').addClass(CHECK)
|
||||
}
|
||||
if(tagName === 'strike'){
|
||||
item('d').addClass(CHECK)
|
||||
}
|
||||
|
||||
//对齐
|
||||
if(tagName === 'p'){
|
||||
if(textAlign === 'center'){
|
||||
item('center').addClass(CHECK);
|
||||
} else if(textAlign === 'right'){
|
||||
item('right').addClass(CHECK);
|
||||
} else {
|
||||
item('left').addClass(CHECK);
|
||||
}
|
||||
}
|
||||
|
||||
//超链接
|
||||
if(tagName === 'a'){
|
||||
item('link').addClass(CHECK);
|
||||
item('unlink').removeClass(ABLED);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//触发工具
|
||||
,toolActive = function(iframeWin, editor, set){
|
||||
var iframeDOM = iframeWin.document
|
||||
,body = $(iframeDOM.body)
|
||||
,toolEvent = {
|
||||
//超链接
|
||||
link: function(range){
|
||||
var container = getContainer(range)
|
||||
,parentNode = $(container).parent();
|
||||
|
||||
link.call(body, {
|
||||
href: parentNode.attr('href')
|
||||
,target: parentNode.attr('target')
|
||||
}, function(field){
|
||||
var parent = parentNode[0];
|
||||
if(parent.tagName === 'A'){
|
||||
parent.href = field.url;
|
||||
} else {
|
||||
insertInline.call(iframeWin, 'a', {
|
||||
target: field.target
|
||||
,href: field.url
|
||||
,text: field.url
|
||||
}, range);
|
||||
}
|
||||
});
|
||||
}
|
||||
//清除超链接
|
||||
,unlink: function(range){
|
||||
iframeDOM.execCommand('unlink');
|
||||
}
|
||||
//插入代码
|
||||
,code: function(range){
|
||||
code.call(body, function(pre){
|
||||
insertInline.call(iframeWin, 'pre', {
|
||||
text: pre.code
|
||||
,'lay-lang': pre.lang
|
||||
}, range);
|
||||
});
|
||||
}
|
||||
//帮助
|
||||
,help: function(){
|
||||
layer.open({
|
||||
type: 2
|
||||
,title: '帮助'
|
||||
,area: ['600px', '380px']
|
||||
,shadeClose: true
|
||||
,shade: 0.1
|
||||
,skin: 'layui-layer-msg'
|
||||
,content: ['', 'no']
|
||||
});
|
||||
}
|
||||
}
|
||||
,tools = editor.find('.layui-layedit-tool')
|
||||
|
||||
,click = function(){
|
||||
var othis = $(this)
|
||||
,events = othis.attr('layedit-event')
|
||||
,command = othis.attr('lay-command');
|
||||
|
||||
if(othis.hasClass(ABLED)) return;
|
||||
|
||||
body.focus();
|
||||
|
||||
var range = Range(iframeDOM)
|
||||
,container = range.commonAncestorContainer
|
||||
|
||||
if(command){
|
||||
iframeDOM.execCommand(command);
|
||||
if(/justifyLeft|justifyCenter|justifyRight/.test(command)){
|
||||
iframeDOM.execCommand('formatBlock', false, '<p>');
|
||||
}
|
||||
setTimeout(function(){
|
||||
body.focus();
|
||||
}, 10);
|
||||
} else {
|
||||
toolEvent[events] && toolEvent[events].call(this, range);
|
||||
}
|
||||
toolCheck.call(iframeWin, tools, othis);
|
||||
}
|
||||
|
||||
,isClick = /image/
|
||||
|
||||
tools.find('>i').on('mousedown', function(){
|
||||
var othis = $(this)
|
||||
,events = othis.attr('layedit-event');
|
||||
if(isClick.test(events)) return;
|
||||
click.call(this)
|
||||
}).on('click', function(){
|
||||
var othis = $(this)
|
||||
,events = othis.attr('layedit-event');
|
||||
if(!isClick.test(events)) return;
|
||||
click.call(this)
|
||||
});
|
||||
|
||||
//触发内容区域
|
||||
body.on('click', function(){
|
||||
toolCheck.call(iframeWin, tools);
|
||||
});
|
||||
}
|
||||
|
||||
//超链接面板
|
||||
,link = function(options, callback){
|
||||
var body = this, index = layer.open({
|
||||
type: 1
|
||||
,id: 'LAY_layedit_link'
|
||||
,area: '350px'
|
||||
,shade: 0.05
|
||||
,shadeClose: true
|
||||
,moveType: 1
|
||||
,title: '超链接'
|
||||
,skin: 'layui-layer-msg'
|
||||
,content: ['<ul class="layui-form" style="margin: 15px;">'
|
||||
,'<li class="layui-form-item">'
|
||||
,'<label class="layui-form-label" style="width: 60px;">URL</label>'
|
||||
,'<div class="layui-input-block" style="margin-left: 90px">'
|
||||
,'<input name="url" lay-verify="url" value="'+ (options.href||'') +'" autofocus="true" autocomplete="off" class="layui-input">'
|
||||
,'</div>'
|
||||
,'</li>'
|
||||
,'<li class="layui-form-item">'
|
||||
,'<label class="layui-form-label" style="width: 60px;">打开方式</label>'
|
||||
,'<div class="layui-input-block" style="margin-left: 90px">'
|
||||
,'<input type="radio" name="target" value="_self" class="layui-input" title="当前窗口"'
|
||||
+ ((options.target==='_self' || !options.target) ? 'checked' : '') +'>'
|
||||
,'<input type="radio" name="target" value="_blank" class="layui-input" title="新窗口" '
|
||||
+ (options.target==='_blank' ? 'checked' : '') +'>'
|
||||
,'</div>'
|
||||
,'</li>'
|
||||
,'<li class="layui-form-item" style="text-align: center;">'
|
||||
,'<button type="button" lay-submit lay-filter="layedit-link-yes" class="layui-btn"> 确定 </button>'
|
||||
,'<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>'
|
||||
,'</li>'
|
||||
,'</ul>'].join('')
|
||||
,success: function(layero, index){
|
||||
var eventFilter = 'submit(layedit-link-yes)';
|
||||
form.render('radio');
|
||||
layero.find('.layui-btn-primary').on('click', function(){
|
||||
layer.close(index);
|
||||
body.focus();
|
||||
});
|
||||
form.on(eventFilter, function(data){
|
||||
layer.close(link.index);
|
||||
callback && callback(data.field);
|
||||
});
|
||||
}
|
||||
});
|
||||
link.index = index;
|
||||
}
|
||||
|
||||
//插入代码面板
|
||||
,code = function(callback){
|
||||
var body = this, index = layer.open({
|
||||
type: 1
|
||||
,id: 'LAY_layedit_code'
|
||||
,area: '550px'
|
||||
,shade: 0.05
|
||||
,shadeClose: true
|
||||
,moveType: 1
|
||||
,title: '插入代码'
|
||||
,skin: 'layui-layer-msg'
|
||||
,content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">'
|
||||
,'<li class="layui-form-item">'
|
||||
,'<label class="layui-form-label">请选择语言</label>'
|
||||
,'<div class="layui-input-block">'
|
||||
,'<select name="lang">'
|
||||
,'<option value="JavaScript">JavaScript</option>'
|
||||
,'<option value="HTML">HTML</option>'
|
||||
,'<option value="CSS">CSS</option>'
|
||||
,'<option value="Java">Java</option>'
|
||||
,'<option value="PHP">PHP</option>'
|
||||
,'<option value="C#">C#</option>'
|
||||
,'<option value="Python">Python</option>'
|
||||
,'<option value="Ruby">Ruby</option>'
|
||||
,'<option value="Go">Go</option>'
|
||||
,'</select>'
|
||||
,'</div>'
|
||||
,'</li>'
|
||||
,'<li class="layui-form-item layui-form-text">'
|
||||
,'<label class="layui-form-label">代码</label>'
|
||||
,'<div class="layui-input-block">'
|
||||
,'<textarea name="code" lay-verify="required" autofocus="true" class="layui-textarea" style="height: 200px;"></textarea>'
|
||||
,'</div>'
|
||||
,'</li>'
|
||||
,'<li class="layui-form-item" style="text-align: center;">'
|
||||
,'<button type="button" lay-submit lay-filter="layedit-code-yes" class="layui-btn"> 确定 </button>'
|
||||
,'<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>'
|
||||
,'</li>'
|
||||
,'</ul>'].join('')
|
||||
,success: function(layero, index){
|
||||
var eventFilter = 'submit(layedit-code-yes)';
|
||||
form.render('select');
|
||||
layero.find('.layui-btn-primary').on('click', function(){
|
||||
layer.close(index);
|
||||
body.focus();
|
||||
});
|
||||
form.on(eventFilter, function(data){
|
||||
layer.close(code.index);
|
||||
callback && callback(data.field);
|
||||
});
|
||||
}
|
||||
});
|
||||
code.index = index;
|
||||
}
|
||||
|
||||
//全部工具
|
||||
,tools = {
|
||||
html: '<i class="layui-icon layedit-tool-html" title="HTML源代码" lay-command="html" layedit-event="html""></i><span class="layedit-tool-mid"></span>'
|
||||
,strong: '<i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b""></i>'
|
||||
,italic: '<i class="layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i""></i>'
|
||||
,underline: '<i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u""></i>'
|
||||
,del: '<i class="layui-icon layedit-tool-d" title="删除线" lay-command="strikeThrough" layedit-event="d""></i>'
|
||||
|
||||
,'|': '<span class="layedit-tool-mid"></span>'
|
||||
|
||||
,left: '<i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left""></i>'
|
||||
,center: '<i class="layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center""></i>'
|
||||
,right: '<i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right""></i>'
|
||||
,link: '<i class="layui-icon layedit-tool-link" title="插入链接" layedit-event="link""></i>'
|
||||
,unlink: '<i class="layui-icon layedit-tool-unlink layui-disabled" title="清除链接" lay-command="unlink" layedit-event="unlink""></i>'
|
||||
,face: '<i class="layui-icon layedit-tool-face" title="表情" layedit-event="face""></i>'
|
||||
,image: '<i class="layui-icon layedit-tool-image" title="图片" layedit-event="image"><input type="file" name="file"></i>'
|
||||
,code: '<i class="layui-icon layedit-tool-code" title="插入代码" layedit-event="code"></i>'
|
||||
|
||||
,help: '<i class="layui-icon layedit-tool-help" title="帮助" layedit-event="help"></i>'
|
||||
}
|
||||
|
||||
,edit = new Edit();
|
||||
|
||||
exports(MOD_NAME, edit);
|
||||
});
|
||||
@ -154,7 +154,7 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
return '';
|
||||
}()
|
||||
,'{{# var isSort = !(item2.colGroup) && item2.sort; }}'
|
||||
,'<th data-field="{{= item2.field||i2 }}" data-key="{{=d.index}}-{{=i1}}-{{=i2}}" {{# if( item2.parentKey){ }}data-parentkey="{{= item2.parentKey }}"{{# } }} {{# if(item2.minWidth){ }}data-minwidth="{{=item2.minWidth}}"{{# } }} '+ rowCols +' {{# if(item2.unresize || item2.colGroup){ }}data-unresize="true"{{# } }} class="{{# if(item2.hide){ }}layui-hide{{# } }}{{# if(isSort){ }} layui-unselect{{# } }}{{# if(!item2.field){ }} layui-table-col-special{{# } }}">'
|
||||
,'<th data-field="{{= item2.field||i2 }}" data-key="{{=d.index}}-{{=i1}}-{{=i2}}" {{# if( item2.parentKey){ }}data-parentkey="{{= item2.parentKey }}"{{# } }} {{# if(item2.minWidth){ }}data-minwidth="{{=item2.minWidth}}"{{# } }} '+ rowCols +' {{# if(item2.unresize || item2.colGroup){ }}data-unresize="true"{{# } }} class="{{# if(item2.hide){ }}layui-hide{{# } }}{{# if(isSort){ }} layui-unselect{{# } }}{{# if(!item2.field){ }} layui-table-col-special{{# } }}"{{# if(item2.title){ }} title="{{ layui.$(\'<div>\' + item2.title + \'</div>\').text() }}"{{# } }}>'
|
||||
,'<div class="layui-table-cell laytable-cell-'
|
||||
,'{{# if(item2.colGroup){ }}'
|
||||
,'group'
|
||||
@ -491,8 +491,8 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
item2.key = i1 + '-' + i2;
|
||||
item2.hide = item2.hide || false;
|
||||
item2.colspan = item2.colspan || 1;
|
||||
item2.rowspan = item2.rowspan || 1;
|
||||
item2.colspan = item2.colspan || 0;
|
||||
item2.rowspan = item2.rowspan || 0;
|
||||
|
||||
//根据列类型，定制化参数
|
||||
that.initOpts(item2);
|
||||
@ -636,7 +636,35 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 设置合并表头的宽度
|
||||
Class.prototype.setGroupWidth = function (thElem) {
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var parentKey;
|
||||
if (options.cols.length > 1) {
|
||||
for (var i = thElem ? thElem.closest('tr').index() - 1 : options.cols.length - 1; i >= 0; i--) {
|
||||
// 自下向上处理合并表头的宽度
|
||||
parentKey = thElem ? thElem.attr('data-parentkey') : '';
|
||||
layui.each(that.layHeader.first().find('tr').eq(i).find('>th' + (parentKey && '[data-key="' + that.index + '-' + parentKey + '"]') + '>div.laytable-cell-group'), function (i1, item1) {
|
||||
item1 = $(item1);
|
||||
var width = 0;
|
||||
var key = item1.parent().attr('data-key');
|
||||
layui.each(that.layHeader.first().find('th[data-parentkey="' + key.substr(key.indexOf('-') + 1) + '"]'), function (i2, item2) {
|
||||
item2 = $(item2);
|
||||
if (item2.hasClass(HIDE)) {
|
||||
return;
|
||||
}
|
||||
width += item2.children('div.layui-table-cell').outerWidth();
|
||||
});
|
||||
that.layHeader.find('th[data-key="'+key+'"]').children('div.layui-table-cell').outerWidth(width);
|
||||
thElem && (thElem = item1.parent());
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//动态分配列宽
|
||||
Class.prototype.setColsWidth = function(){
|
||||
var that = this;
|
||||
@ -680,6 +708,9 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
} else if(!width){ // 列宽未填写
|
||||
item2.width = width = 0;
|
||||
autoColNums++;
|
||||
} else {
|
||||
// 设置了宽度校验是否小于最小宽度，这里是否要判断
|
||||
item2.type === 'normal' && width < minWidth && (item2.width = width = minWidth);
|
||||
}
|
||||
} else if(autoWidth && autoWidth < minWidth){
|
||||
autoColNums--;
|
||||
@ -721,6 +752,13 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
item.style.width = Math.floor((parseFloat(item3.width) / 100) * cntrWidth) + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
// 因为有可能设置的width小于minWidth被调整过，这里重新设置一遍确保最新
|
||||
else {
|
||||
that.getCssRule(options.index +'-'+ item3.key, function(item){
|
||||
item.style.width = item3.width + 'px';
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 填补 Math.floor 造成的数差
|
||||
@ -750,7 +788,9 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
that.setGroupWidth();
|
||||
|
||||
that.loading(!0);
|
||||
};
|
||||
|
||||
@ -1571,7 +1611,7 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
var lis = [];
|
||||
that.eachCols(function(i, item){
|
||||
if(item.field && item.type == 'normal'){
|
||||
lis.push('<li><input type="checkbox" name="'+ item.field +'" data-key="'+ item.key +'" data-parentkey="'+ (item.parentKey||'') +'" lay-skin="primary" '+ (item.hide ? '' : 'checked') +' title="'+ util.escape(item.title || item.field) +'" lay-filter="LAY_TABLE_TOOL_COLS"></li>');
|
||||
lis.push('<li><input type="checkbox" name="'+ item.field +'" data-key="'+ item.key +'" data-parentkey="'+ (item.parentKey||'') +'" lay-skin="primary" '+ (item.hide ? '' : 'checked') +' title="'+ util.escape($('<div>' + (item.title || item.field) + '</div>').text()) +'" lay-filter="LAY_TABLE_TOOL_COLS"></li>');
|
||||
}
|
||||
});
|
||||
return lis.join('');
|
||||
@ -1721,6 +1761,7 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
var setWidth = dict.ruleWidth + e.clientX - dict.offset[0];
|
||||
if(setWidth < dict.minWidth) setWidth = dict.minWidth;
|
||||
dict.rule.style.width = setWidth + 'px';
|
||||
thisTable.that[thisTable.eventMoveElem.closest('.' + ELEM_VIEW).attr('lay-id')].setGroupWidth(thisTable.eventMoveElem);
|
||||
layer.close(that.tipsIndex);
|
||||
}
|
||||
}
|
||||
@ -1728,7 +1769,7 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
if(thisTable.eventMoveElem){
|
||||
dict = {};
|
||||
_BODY.css('cursor', '');
|
||||
that.scrollPatch();
|
||||
thisTable.that[thisTable.eventMoveElem.closest('.' + ELEM_VIEW).attr('lay-id')].scrollPatch();
|
||||
|
||||
// 清除当前拖拽信息
|
||||
thisTable.eventMoveElem.removeData(DATA_MOVE_NAME);
|
||||
@ -1920,11 +1961,12 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
var field = othis.parent().data('field');
|
||||
var index = othis.parents('tr').eq(0).data('index');
|
||||
var data = table.cache[that.key][index];
|
||||
|
||||
var oldValue = data[field];
|
||||
data[field] = value; // 更新缓存中的值
|
||||
layui.event.call(this, MOD_NAME, 'edit('+ filter +')', commonMember.call(this, {
|
||||
value: value
|
||||
,field: field
|
||||
,oldValue: oldValue
|
||||
}));
|
||||
}).on('blur', '.'+ELEM_EDIT, function(){
|
||||
var othis = $(this);
|
||||
@ -2140,8 +2182,8 @@ layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||
|
||||
var row = $.extend({
|
||||
title: th.text()
|
||||
,colspan: th.attr('colspan') || 1 //列单元格
|
||||
,rowspan: th.attr('rowspan') || 1 //行单元格
|
||||
,colspan: th.attr('colspan') || 0 //列单元格
|
||||
,rowspan: th.attr('rowspan') || 0 //行单元格
|
||||
}, itemData);
|
||||
|
||||
if(row.colspan < 2) cols.push(row);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user