zui
Version:
一个基于 Bootstrap 深度定制开源前端实践方案,帮助你快速构建现代跨屏应用。
7 lines • 4.59 kB
JavaScript
/*!
* ZUI: 颜色选择器 - v1.9.0 - 2019-03-04
* http://zui.sexy
* GitHub: https://github.com/easysoft/zui.git
* Copyright (c) 2019 cnezsoft.com; Licensed MIT
*/
!function(t){"use strict";var o="zui.colorPicker",i='<div class="colorpicker"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><span class="cp-title"></span><i class="ic"></i></button><ul class="dropdown-menu clearfix"></ul></div>',e={zh_cn:{errorTip:"不是有效的颜色值"},zh_tw:{errorTip:"不是有效的顏色值"},en:{errorTip:"Not a valid color value"}},r=function(i,e){this.name=o,this.$=t(i),this.getOptions(e),this.init()};r.DEFAULTS={colors:["#00BCD4","#388E3C","#3280fc","#3F51B5","#9C27B0","#795548","#F57C00","#F44336","#E91E63"],pullMenuRight:!0,wrapper:"btn-wrapper",tileSize:30,lineCount:5,optional:!0,tooltip:"top",icon:"caret-down",updateBtn:"auto"},r.prototype.init=function(){var o=this,e=o.options,r=o.$,n=r.parent(),a=!1;n.hasClass("colorpicker")?o.$picker=n:(o.$picker=t(e.template||i),a=!0),o.$picker.addClass(e.wrapper).find(".cp-title").toggle(void 0!==e.title).text(e.title),o.$menu=o.$picker.find(".dropdown-menu").toggleClass("pull-right",e.pullMenuRight),o.$btn=o.$picker.find(".btn.dropdown-toggle"),o.$btn.find(".ic").addClass("icon-"+e.icon),e.btnTip&&o.$picker.attr("data-toggle","tooltip").tooltip({title:e.btnTip,placement:e.tooltip,container:"body"}),r.attr("data-provide",null),a&&r.after(o.$picker),o.colors={},t.each(e.colors,function(i,e){if(t.zui.Color.isColor(e)){var r=new t.zui.Color(e);o.colors[r.toCssStr()]=r}}),o.updateColors(),o.$picker.on("click",".cp-tile",function(){o.setValue(t(this).data("color"))});var l=function(){var i=r.val(),n=t.zui.Color.isColor(i);r.parent().toggleClass("has-error",!(n||e.optional&&""===i)),n?o.setValue(i,!0):e.optional&&""===i?r.tooltip("hide"):r.is(":focus")||r.tooltip("show",e.errorTip)};r.is("input:not([type=hidden])")?(e.tooltip&&r.attr("data-toggle","tooltip").tooltip({trigger:"manual",placement:e.tooltip,tipClass:"tooltip-danger",container:"body"}),r.on("keyup paste input change",l)):r.appendTo(o.$picker),l()},r.prototype.addColor=function(o){o instanceof t.zui.Color||(o=new t.zui.Color(o));var i=o.toCssStr(),e=this.options;this.colors[i]||(this.colors[i]=o);var r=t('<a href="###" class="cp-tile"></a>',{titile:o}).data("color",o).css({color:o.contrast().toCssStr(),background:i,"border-color":o.luma()>.43?"#ccc":"transparent"}).attr("data-color",i);this.$menu.append(t("<li/>").css({width:e.tileSize,height:e.tileSize}).append(r)),e.optional&&this.$menu.find(".cp-tile.empty").parent().detach().appendTo(this.$menu)},r.prototype.updateColors=function(o){var i=(this.$picker,this.$menu.children("li:not(.heading)").remove()),e=this.options,o=o||this.colors,r=this,n=0;if(t.each(o,function(t,o){r.addColor(o),n++}),e.optional){var a=t('<li><a class="cp-tile empty" href="###"></a></li>').css({width:e.tileSize,height:e.tileSize});this.$menu.append(a),n++}i.css("width",Math.min(n,e.lineCount)*e.tileSize+6)},r.prototype.setValue=function(o,i){var e=this,r=e.options,n=e.$btn;e.$menu.find(".cp-tile.active").removeClass("active");var a="",l=r.updateBtn;if("auto"===l){var c=n.find(".color-bar");l=!c.length||function(t){c.css("background",t||"")}}if(o){var s=new t.zui.Color(o);a=s.toCssStr().toLowerCase(),l&&(t.isFunction(l)?l(a,n,e):n.css({background:a,color:s.contrast().toCssStr(),borderColor:s.luma()>.43?"#ccc":a})),e.colors[a]||e.addColor(s),i||e.$.val().toLowerCase()===a||e.$.val(a).trigger("change"),e.$menu.find('.cp-tile[data-color="'+a+'"]').addClass("active"),e.$.tooltip("hide"),e.$.trigger("colorchange",s)}else l&&(t.isFunction(l)?l(null,n,e):n.attr("style",null)),i||""===e.$.val()||e.$.val(a).trigger("change"),r.optional&&e.$.tooltip("hide"),e.$menu.find(".cp-tile.empty").addClass("active"),e.$.trigger("colorchange",null);r.updateBorder&&t(r.updateBorder).css("border-color",a),r.updateBackground&&t(r.updateBackground).css("background-color",a),r.updateColor&&t(r.updateColor).css("color",a),r.updateText&&t(r.updateText).text(a)},r.prototype.getOptions=function(o){var i=t.extend({},r.DEFAULTS,this.$.data(),o);"string"==typeof i.colors&&(i.colors=i.colors.split(","));var n=(i.lang||t.zui.clientLang()).toLowerCase();i.errorTip||(i.errorTip=e[n].errorTip),t.fn.tooltip||(i.btnTip=!1),this.options=i},t.fn.colorPicker=function(i){return this.each(function(){var e=t(this),n=e.data(o),a="object"==typeof i&&i;n||e.data(o,n=new r(this,a)),"string"==typeof i&&n[i]()})},t.fn.colorPicker.Constructor=r,t(function(){t('[data-provide="colorpicker"]').colorPicker()})}(jQuery);