|
var layer = layui.layer;
|
var form = layui.form;
|
|
var Dom = {
|
openEditBtn: $('.open-edit-btn'), //打开编辑层按钮
|
confirmBtn: $('.confirm-btn'), //弹窗内确认按钮
|
textPreview: $('.text-edit-preview'), // 文字预览
|
cssResult: $('.css-result'), //样式结果
|
layer: $('.text-edit-container'), //弹窗
|
};
|
|
|
// 获取之前的css样式，用于初始化
|
function getCssResultInit() {
|
// 获取之前的css样式
|
var cssResult = Dom.cssResult.text();
|
Dom.textPreview.attr('style', cssResult);
|
Dom.cssResult.html('');
|
var cssObj = {};
|
|
// 把css样式格式化为json对象
|
cssResult = cssResult.split(';');
|
// console.log(cssResult);
|
cssResult.map(function (item) {
|
if (item){
|
if(item.trim()==""){
|
return;
|
}
|
var name = item.split(':')[0].trim();
|
var value = item.split(':')[1].trim();
|
// 重新生成带span标签的css样式,方便后面删除
|
Dom.cssResult.append('<span class="css-result-item">'+ name +': '+ value +';</span>');
|
name = getCamelCase(name);
|
// console.log(name,value);
|
cssObj[name] = value;
|
}
|
})
|
console.log("cssObj",cssObj);
|
// 为表单赋值
|
form.val('text-css-form', cssObj);
|
|
// 为之前css已有颜色的input添加背景色
|
$('.color-input dd').each(function () {
|
// var value = $(this).attr('lay-value');
|
if ($(this).hasClass('layui-this')){
|
$(this).closest('.color-input').find('.layui-input').css('background-color', $(this).attr('lay-value'));
|
}
|
})
|
}
|
|
|
// 监听select 颜色选项的选中事件
|
form.on('select(color-input)', function(data){
|
// console.log(data);
|
// 为选中的input添加背景色
|
data.othis.find('.layui-input').css('background-color', data.value)
|
});
|
|
// 监听select的选中事件
|
form.on('select', function(data){
|
// 根据select的选中状态生成css样式
|
var name = getKebabCase(data.othis.prev('select').attr('name'));
|
var value = data.value;
|
// console.log(name,value);
|
createCssResult({
|
name: name,
|
value: value,
|
isSelect: true,
|
});
|
});
|
|
// 监听checkbox的选中事件
|
form.on('checkbox', function(data){
|
// 根据checkbox的选中状态生成css样式
|
var checked = data.elem.checked;
|
var name = getKebabCase(data.elem.name);
|
var value = data.elem.value;
|
createCssResult({
|
name: name,
|
value: value,
|
checked: checked,
|
isCheckBox: true,
|
});
|
});
|
|
// 监听checkbox(text-decoration)的选中事件
|
form.on('checkbox(text-decoration)', function(data){
|
// 查找同级text-decoration的checkbox
|
var el = data.othis.closest('.font-style-checkbox').siblings('.text-decoration').find('input[type="checkbox"]');
|
// 取消选中
|
el.prop('checked', false);
|
|
form.render('checkbox');
|
});
|
|
|
// 创建控制css样式的表单元素
|
function createFormElement() {
|
// 根据select表单的配置文件生成option表单元素
|
for (const configKey in Config) {
|
if (Config.hasOwnProperty(configKey)) {
|
const config = Config[configKey];
|
var option = '';
|
for (const key in config) {
|
if (config.hasOwnProperty(key)) {
|
const item = config[key];
|
option += '<option value="'+item+'">'+key+'</option>';
|
}
|
}
|
// console.log(option);
|
$('select[name="'+ configKey +'"]').append(option);
|
}
|
}
|
form.render();
|
// 生成表单后初始化css样式
|
getCssResultInit();
|
|
// 生成表单后为选项添加颜色
|
$('.color-input dd').css('background-color', function () {
|
return $(this).attr('lay-value');
|
});
|
// 生成表单后为选项添加下拉箭头
|
$('.layui-form-select .layui-edge').addClass('layui-icon layui-icon-down');
|
$('.layui-form-select dl:last').addClass('last-select');
|
|
}
|
|
// 驼峰命名转换成短横线命名
|
function getKebabCase(str) {
|
return str.replace(/[A-Z]/g, (item) => '-' + item.toLowerCase())
|
}
|
|
// 短横线命名转换成驼峰命名
|
function getCamelCase(str) {
|
return str.replace(/-([a-z])/g, (i, item) => item.toUpperCase())
|
}
|
|
// 生成css样式
|
function createCssResult(obj) {
|
|
if (obj.isCheckBox){
|
|
if (obj.checked){
|
createCheckBoxCssResult()
|
} else {
|
removeCssResult()
|
}
|
|
// console.log(obj)
|
// if (obj.name==='text-decoration'){
|
// removeCssResult()
|
// }
|
}
|
|
if (obj.isSelect){
|
if (obj.value){
|
createSelectCssResult()
|
} else {
|
removeCssResult()
|
}
|
}
|
|
console.log(Dom.cssResult.text());
|
Dom.textPreview.attr('style', Dom.cssResult.text());
|
|
|
// 生成checkbox的css样式显示结果
|
function createCheckBoxCssResult() {
|
if (obj.name.indexOf('text-decoration') > -1){
|
removeCssResult();
|
}
|
Dom.cssResult.append('<span class="css-result-item">'+ obj.name +': '+ obj.value +';</span>');
|
}
|
|
// 生成select的css样式显示结果
|
function createSelectCssResult() {
|
removeCssResult();
|
Dom.cssResult.append('<span class="css-result-item">'+ obj.name +': '+ obj.value +';</span>');
|
}
|
|
// 删除css样式显示结果
|
function removeCssResult() {
|
var count = 0;
|
Dom.cssResult.find('.css-result-item').each(function () {
|
var text = $(this).text();
|
if (text.split(':')[0].trim() === obj.name){
|
count++;
|
$(this).remove();
|
}
|
})
|
return count;
|
}
|
|
|
}
|
