华星智控IOT管理平台
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
fei.wang
2024-05-09 871d4095b07cedacb7fbef4c38d64982f539c404 
 src/webapp/js/lay-module/iconPicker/iconPickerFa.js


¶Ô±ÈÐÂÎļþ


@@ -0,0 +1,399 @@


/**


 * 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">&#xe615;</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>&#xe603;</i> ' +


                        '<i class="layui-icon" id="' + PAGE_ID + '-next" data-index="2" next>&#xe602;</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);


});