|
|
/**
|
|
|
* fa图标选择器 根据开源项目https://gitee.com/wujiawei0926/iconpicker修改而来
|
|
|
* @author wujiawei0926@yeah.net chung@99php.cn
|
|
|
* @version 1.1
|
|
|
*/
|
|
|
|
|
|
layui.define(['laypage', 'form'], function (exports) {
|
|
|
"use strict";
|
|
|
|
|
|
var IconPicker = function () {
|
|
|
this.v = '1.1';
|
|
|
}, _MOD = 'iconPickerFa',
|
|
|
_this = this,
|
|
|
$ = layui.jquery,
|
|
|
laypage = layui.laypage,
|
|
|
form = layui.form,
|
|
|
BODY = 'body',
|
|
|
TIPS = '请选择图标';
|
|
|
|
|
|
/**
|
|
|
* 渲染组件
|
|
|
*/
|
|
|
IconPicker.prototype.render = function (options) {
|
|
|
var opts = options,
|
|
|
// DOM选择器
|
|
|
elem = opts.elem,
|
|
|
// 数据类型：fontClass/unicode
|
|
|
url = opts.url,
|
|
|
// 是否分页：true/false
|
|
|
page = opts.page == null ? true : opts.page,
|
|
|
// 每页显示数量
|
|
|
limit = opts.limit == null ? 12 : opts.limit,
|
|
|
// 是否开启搜索：true/false
|
|
|
search = opts.search == null ? true : opts.search,
|
|
|
// 每个图标格子的宽度：'43px'或'20%'
|
|
|
cellWidth = opts.cellWidth,
|
|
|
// 点击回调
|
|
|
click = opts.click,
|
|
|
// 渲染成功后的回调
|
|
|
success = opts.success,
|
|
|
// json数据
|
|
|
data = {},
|
|
|
// 唯一标识
|
|
|
tmp = new Date().getTime(),
|
|
|
// 初始化时input的值
|
|
|
ORIGINAL_ELEM_VALUE = $(elem).val(),
|
|
|
TITLE = 'layui-select-title',
|
|
|
TITLE_ID = 'layui-select-title-' + tmp,
|
|
|
ICON_BODY = 'layui-iconpicker-' + tmp,
|
|
|
PICKER_BODY = 'layui-iconpicker-body-' + tmp,
|
|
|
PAGE_ID = 'layui-iconpicker-page-' + tmp,
|
|
|
LIST_BOX = 'layui-iconpicker-list-box',
|
|
|
selected = 'layui-form-selected',
|
|
|
unselect = 'layui-unselect';
|
|
|
|
|
|
var a = {
|
|
|
init: function () {
|
|
|
data = common.getData(url);
|
|
|
|
|
|
a.hideElem().createSelect().createBody().toggleSelect();
|
|
|
a.preventEvent().inputListen();
|
|
|
common.loadCss();
|
|
|
|
|
|
if (success) {
|
|
|
success(this.successHandle());
|
|
|
}
|
|
|
|
|
|
return a;
|
|
|
},
|
|
|
successHandle: function () {
|
|
|
var d = {
|
|
|
options: opts,
|
|
|
data: data,
|
|
|
id: tmp,
|
|
|
elem: $('#' + ICON_BODY)
|
|
|
};
|
|
|
return d;
|
|
|
},
|
|
|
/**
|
|
|
* 隐藏elem
|
|
|
*/
|
|
|
hideElem: function () {
|
|
|
$(elem).hide();
|
|
|
return a;
|
|
|
},
|
|
|
/**
|
|
|
* 绘制select下拉选择框
|
|
|
*/
|
|
|
createSelect: function () {
|
|
|
var oriIcon = '<i class="fa">';
|
|
|
|
|
|
// 默认图标
|
|
|
if (ORIGINAL_ELEM_VALUE === '') {
|
|
|
ORIGINAL_ELEM_VALUE = 'fa-adjust';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
oriIcon = '<i class="fa ' + ORIGINAL_ELEM_VALUE + '">';
|
|
|
|
|
|
oriIcon += '</i>';
|
|
|
|
|
|
var selectHtml = '<div class="layui-iconpicker layui-unselect layui-form-select" id="' + ICON_BODY + '">' +
|
|
|
'<div class="' + TITLE + '" id="' + TITLE_ID + '">' +
|
|
|
'<div class="layui-iconpicker-item">' +
|
|
|
'<span class="layui-iconpicker-icon layui-unselect">' +
|
|
|
oriIcon +
|
|
|
'</span>' +
|
|
|
'<i class="layui-edge"></i>' +
|
|
|
'</div>' +
|
|
|
'</div>' +
|
|
|
'<div class="layui-anim layui-anim-upbit" style="">' +
|
|
|
'123' +
|
|
|
'</div>';
|
|
|
$(elem).after(selectHtml);
|
|
|
return a;
|
|
|
},
|
|
|
/**
|
|
|
* 展开/折叠下拉框
|
|
|
*/
|
|
|
toggleSelect: function () {
|
|
|
var item = '#' + TITLE_ID + ' .layui-iconpicker-item,#' + TITLE_ID + ' .layui-iconpicker-item .layui-edge';
|
|
|
a.event('click', item, function (e) {
|
|
|
var $icon = $('#' + ICON_BODY);
|
|
|
if ($icon.hasClass(selected)) {
|
|
|
$icon.removeClass(selected).addClass(unselect);
|
|
|
} else {
|
|
|
// 隐藏其他picker
|
|
|
$('.layui-form-select').removeClass(selected);
|
|
|
// 显示当前picker
|
|
|
$icon.addClass(selected).removeClass(unselect);
|
|
|
}
|
|
|
e.stopPropagation();
|
|
|
});
|
|
|
return a;
|
|
|
},
|
|
|
/**
|
|
|
* 绘制主体部分
|
|
|
*/
|
|
|
createBody: function () {
|
|
|
// 获取数据
|
|
|
var searchHtml = '';
|
|
|
|
|
|
if (search) {
|
|
|
searchHtml = '<div class="layui-iconpicker-search">' +
|
|
|
'<input class="layui-input">' +
|
|
|
'<i class="layui-icon"></i>' +
|
|
|
'</div>';
|
|
|
}
|
|
|
|
|
|
// 组合dom
|
|
|
var bodyHtml = '<div class="layui-iconpicker-body" id="' + PICKER_BODY + '">' +
|
|
|
searchHtml +
|
|
|
'<div class="' + LIST_BOX + '"></div> ' +
|
|
|
'</div>';
|
|
|
$('#' + ICON_BODY).find('.layui-anim').eq(0).html(bodyHtml);
|
|
|
a.search().createList().check().page();
|
|
|
|
|
|
return a;
|
|
|
},
|
|
|
/**
|
|
|
* 绘制图标列表
|
|
|
* @param text 模糊查询关键字
|
|
|
* @returns {string}
|
|
|
*/
|
|
|
createList: function (text) {
|
|
|
var d = data,
|
|
|
l = d.length,
|
|
|
pageHtml = '',
|
|
|
listHtml = $('<div class="layui-iconpicker-list">')//'<div class="layui-iconpicker-list">';
|
|
|
|
|
|
// 计算分页数据
|
|
|
var _limit = limit, // 每页显示数量
|
|
|
_pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1), // 总计多少页
|
|
|
_id = PAGE_ID;
|
|
|
|
|
|
// 图标列表
|
|
|
var icons = [];
|
|
|
|
|
|
for (var i = 0; i < l; i++) {
|
|
|
var obj = d[i];
|
|
|
|
|
|
// 判断是否模糊查询
|
|
|
if (text && obj.indexOf(text) === -1) {
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
// 是否自定义格子宽度
|
|
|
var style = '';
|
|
|
if (cellWidth !== null) {
|
|
|
style += ' style="width:' + cellWidth + '"';
|
|
|
}
|
|
|
|
|
|
// 每个图标dom
|
|
|
var icon = '<div class="layui-iconpicker-icon-item" title="' + obj + '" ' + style + '>';
|
|
|
|
|
|
icon += '<i class="fa ' + obj + '"></i>';
|
|
|
|
|
|
icon += '</div>';
|
|
|
|
|
|
icons.push(icon);
|
|
|
}
|
|
|
|
|
|
// 查询出图标后再分页
|
|
|
l = icons.length;
|
|
|
_pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1);
|
|
|
for (var i = 0; i < _pages; i++) {
|
|
|
// 按limit分块
|
|
|
var lm = $('<div class="layui-iconpicker-icon-limit" id="layui-iconpicker-icon-limit-' + tmp + (i + 1) + '">');
|
|
|
|
|
|
for (var j = i * _limit; j < (i + 1) * _limit && j < l; j++) {
|
|
|
lm.append(icons[j]);
|
|
|
}
|
|
|
|
|
|
listHtml.append(lm);
|
|
|
}
|
|
|
|
|
|
// 无数据
|
|
|
if (l === 0) {
|
|
|
listHtml.append('<p class="layui-iconpicker-tips">无数据</p>');
|
|
|
}
|
|
|
|
|
|
// 判断是否分页
|
|
|
if (page) {
|
|
|
$('#' + PICKER_BODY).addClass('layui-iconpicker-body-page');
|
|
|
pageHtml = '<div class="layui-iconpicker-page" id="' + PAGE_ID + '">' +
|
|
|
'<div class="layui-iconpicker-page-count">' +
|
|
|
'<span id="' + PAGE_ID + '-current">1</span>/' +
|
|
|
'<span id="' + PAGE_ID + '-pages">' + _pages + '</span>' +
|
|
|
' (<span id="' + PAGE_ID + '-length">' + l + '</span>)' +
|
|
|
'</div>' +
|
|
|
'<div class="layui-iconpicker-page-operate">' +
|
|
|
'<i class="layui-icon" id="' + PAGE_ID + '-prev" data-index="0" prev></i> ' +
|
|
|
'<i class="layui-icon" id="' + PAGE_ID + '-next" data-index="2" next></i> ' +
|
|
|
'</div>' +
|
|
|
'</div>';
|
|
|
}
|
|
|
|
|
|
|
|
|
$('#' + ICON_BODY).find('.layui-anim').find('.' + LIST_BOX).html('').append(listHtml).append(pageHtml);
|
|
|
return a;
|
|
|
},
|
|
|
// 阻止Layui的一些默认事件
|
|
|
preventEvent: function () {
|
|
|
var item = '#' + ICON_BODY + ' .layui-anim';
|
|
|
a.event('click', item, function (e) {
|
|
|
e.stopPropagation();
|
|
|
});
|
|
|
return a;
|
|
|
},
|
|
|
// 分页
|
|
|
page: function () {
|
|
|
var icon = '#' + PAGE_ID + ' .layui-iconpicker-page-operate .layui-icon';
|
|
|
|
|
|
$(icon).unbind('click');
|
|
|
a.event('click', icon, function (e) {
|
|
|
var elem = e.currentTarget,
|
|
|
total = parseInt($('#' + PAGE_ID + '-pages').html()),
|
|
|
isPrev = $(elem).attr('prev') !== undefined,
|
|
|
// 按钮上标的页码
|
|
|
index = parseInt($(elem).attr('data-index')),
|
|
|
$cur = $('#' + PAGE_ID + '-current'),
|
|
|
// 点击时正在显示的页码
|
|
|
current = parseInt($cur.html());
|
|
|
|
|
|
// 分页数据
|
|
|
if (isPrev && current > 1) {
|
|
|
current = current - 1;
|
|
|
$(icon + '[prev]').attr('data-index', current);
|
|
|
} else if (!isPrev && current < total) {
|
|
|
current = current + 1;
|
|
|
$(icon + '[next]').attr('data-index', current);
|
|
|
}
|
|
|
$cur.html(current);
|
|
|
|
|
|
// 图标数据
|
|
|
$('#' + ICON_BODY + ' .layui-iconpicker-icon-limit').hide();
|
|
|
$('#layui-iconpicker-icon-limit-' + tmp + current).show();
|
|
|
e.stopPropagation();
|
|
|
});
|
|
|
return a;
|
|
|
},
|
|
|
/**
|
|
|
* 搜索
|
|
|
*/
|
|
|
search: function () {
|
|
|
var item = '#' + PICKER_BODY + ' .layui-iconpicker-search .layui-input';
|
|
|
a.event('input propertychange', item, function (e) {
|
|
|
var elem = e.target,
|
|
|
t = $(elem).val();
|
|
|
a.createList(t);
|
|
|
});
|
|
|
return a;
|
|
|
},
|
|
|
/**
|
|
|
* 点击选中图标
|
|
|
*/
|
|
|
check: function () {
|
|
|
var item = '#' + PICKER_BODY + ' .layui-iconpicker-icon-item';
|
|
|
a.event('click', item, function (e) {
|
|
|
var el = $(e.currentTarget).find('.fa'),
|
|
|
icon = '';
|
|
|
|
|
|
var clsArr = el.attr('class').split(/[\s\n]/),
|
|
|
cls = clsArr[1],
|
|
|
icon = cls;
|
|
|
$('#' + TITLE_ID).find('.layui-iconpicker-item .fa').html('').attr('class', clsArr.join(' '));
|
|
|
|
|
|
|
|
|
$('#' + ICON_BODY).removeClass(selected).addClass(unselect);
|
|
|
$(elem).val(icon).attr('value', icon);
|
|
|
// 回调
|
|
|
if (click) {
|
|
|
click({
|
|
|
icon: icon
|
|
|
});
|
|
|
}
|
|
|
|
|
|
});
|
|
|
return a;
|
|
|
},
|
|
|
// 监听原始input数值改变
|
|
|
inputListen: function () {
|
|
|
var el = $(elem);
|
|
|
a.event('change', elem, function () {
|
|
|
var value = el.val();
|
|
|
})
|
|
|
// el.change(function(){
|
|
|
|
|
|
// });
|
|
|
return a;
|
|
|
},
|
|
|
event: function (evt, el, fn) {
|
|
|
$(BODY).on(evt, el, fn);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
var common = {
|
|
|
/**
|
|
|
* 加载样式表
|
|
|
*/
|
|
|
loadCss: function () {
|
|
|
var css = '.layui-iconpicker {max-width: 280px;}.layui-iconpicker .layui-anim{display:none;position:absolute;left:0;top:42px;padding:5px 0;z-index:899;min-width:100%;border:1px solid #d2d2d2;max-height:300px;overflow-y:auto;background-color:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box;}.layui-iconpicker-item{border:1px solid #e6e6e6;width:90px;height:38px;border-radius:4px;cursor:pointer;position:relative;}.layui-iconpicker-icon{border-right:1px solid #e6e6e6;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;width:60px;height:100%;float:left;text-align:center;background:#fff;transition:all .3s;}.layui-iconpicker-icon i{line-height:38px;font-size:18px;}.layui-iconpicker-item > .layui-edge{left:70px;}.layui-iconpicker-item:hover{border-color:#D2D2D2!important;}.layui-iconpicker-item:hover .layui-iconpicker-icon{border-color:#D2D2D2!important;}.layui-iconpicker.layui-form-selected .layui-anim{display:block;}.layui-iconpicker-body{padding:6px;}.layui-iconpicker .layui-iconpicker-list{background-color:#fff;border:1px solid #ccc;border-radius:4px;}.layui-iconpicker .layui-iconpicker-icon-item{display:inline-block;width:21.1%;line-height:36px;text-align:center;cursor:pointer;vertical-align:top;height:36px;margin:4px;border:1px solid #ddd;border-radius:2px;transition:300ms;}.layui-iconpicker .layui-iconpicker-icon-item i.layui-icon{font-size:17px;}.layui-iconpicker .layui-iconpicker-icon-item:hover{background-color:#eee;border-color:#ccc;-webkit-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;-moz-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;box-shadow:0 0 2px #aaa,0 0 2px #fff inset;text-shadow:0 0 1px #fff;}.layui-iconpicker-search{position:relative;margin:0 0 6px 0;border:1px solid #e6e6e6;border-radius:2px;transition:300ms;}.layui-iconpicker-search:hover{border-color:#D2D2D2!important;}.layui-iconpicker-search .layui-input{cursor:text;display:inline-block;width:86%;border:none;padding-right:0;margin-top:1px;}.layui-iconpicker-search .layui-icon{position:absolute;top:11px;right:4%;}.layui-iconpicker-tips{text-align:center;padding:8px 0;cursor:not-allowed;}.layui-iconpicker-page{margin-top:6px;margin-bottom:-6px;font-size:12px;padding:0 2px;}.layui-iconpicker-page-count{display:inline-block;}.layui-iconpicker-page-operate{display:inline-block;float:right;cursor:default;}.layui-iconpicker-page-operate .layui-icon{font-size:12px;cursor:pointer;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit{display:none;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit:first-child{display:block;}';
|
|
|
var $style = $('head').find('style[iconpicker]');
|
|
|
if ($style.length === 0) {
|
|
|
$('head').append('<style rel="stylesheet" iconpicker>' + css + '</style>');
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 获取数据
|
|
|
*/
|
|
|
getData: function (url) {
|
|
|
var iconlist = [];
|
|
|
$.ajax({
|
|
|
url: url,
|
|
|
type: 'get',
|
|
|
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
|
|
|
async: false,
|
|
|
success: function (ret) {
|
|
|
var exp = /fa-var-(.*):/ig;
|
|
|
var result;
|
|
|
while ((result = exp.exec(ret)) != null) {
|
|
|
iconlist.push('fa-' + result[1]);
|
|
|
}
|
|
|
},
|
|
|
error: function (xhr, textstatus, thrown) {
|
|
|
layer.msg('fa图标接口有误');
|
|
|
}
|
|
|
});
|
|
|
return iconlist;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
a.init();
|
|
|
return new IconPicker();
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 选中图标
|
|
|
* @param filter lay-filter
|
|
|
* @param iconName 图标名称，自动识别fontClass/unicode
|
|
|
*/
|
|
|
IconPicker.prototype.checkIcon = function (filter, iconName) {
|
|
|
var el = $('*[lay-filter=' + filter + ']'),
|
|
|
p = el.next().find('.layui-iconpicker-item .fa'),
|
|
|
c = iconName;
|
|
|
|
|
|
if (c.indexOf('#xe') > 0) {
|
|
|
p.html(c);
|
|
|
} else {
|
|
|
p.html('').attr('class', 'fa ' + c);
|
|
|
}
|
|
|
el.attr('value', c).val(c);
|
|
|
};
|
|
|
|
|
|
var iconPicker = new IconPicker();
|
|
|
exports(_MOD, iconPicker);
|
|
|
}); |