@progress/kendo-ui/js/colorpicker/colorgradient.min.js

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

module.exports=function(a){var n={};function s(e){if(n[e])return n[e].exports;var t=n[e]={exports:{},id:e,loaded:!1};return a[e].call(t.exports,t,t.exports,s),t.loaded=!0,t.exports}return s.m=a,s.c=n,s.p="",s(0)}({0:function(e,t,a){e.exports=a(24)},3:function(e,t){e.exports=function(){throw Error("define cannot be used indirect")}},20:function(e,t){e.exports=require("../kendo.core")},24:function(e,t,a){var n;a(3),a=[a(20),a(25)],void 0===(t="function"==typeof(n=function(){var i=window.kendo.jQuery,t=void 0,l=window.kendo,e=l.ui,n=l.Observable,d=l.parseColor,h=i.extend,c=l.Color,o=l.keys,v="background-color",p="#ffffff",u="#000000",a,s="keydown"+".kendoColorTools",r=e.colorpicker.ColorSelector,f=e.colorpicker.contrastToolUtils;function g(e){e.preventDefault()}function _(e,t){return function(){return e.apply(t,arguments)}}var b=n.extend({init:function(e,t){var a=this;a.element=e;a.options=t;a._viewModel=l.observable({switchMode:a.switchMode.bind(a),keydown:a.keydown.bind(a),mode:function(e){return e===this.get("format")},format:t.format,formats:t.formats,rgb:null,hex:function(){return this.get("rgb")!==null&&this.get("rgb").toCss({alpha:t.opacity})}});a._changeHandler=a.change.bind(a);a._viewModel.bind("change",a._changeHandler);a._render();a.element.on(s,a.keydown.bind(a));n.fn.init.call(a)},_template:l.template("# if (options.formats && options.formats.length > 1) { #"+'<div class="k-vstack">'+'<button class="k-colorgradient-toggle-mode" data-#:ns#role="button" data-#:ns#icon="arrows-kpi" data data-#:ns#bind="click: switchMode" data-#:ns#fill-mode="flat" data-#:ns#size="#: options.size #" title="#: options.messages.toggleFormat #">'+"</button>"+"</div>"+"# } #"+'# if (options.formats && options.formats.indexOf("hex") >= 0) { #'+'<div class="k-vstack k-flex-1" data-#:ns#bind="visible: mode(\'hex\')">'+'<input type="text" data-#:ns#bind="value: hex" data-#:ns#role="textbox" data-#:ns#size="#: options.size #" tabindex="#:options.tabindex#"  aria-label="#: options.messages.hex #"/>'+'<label class="k-colorgradient-input-label">HEX</label>'+"</div>"+"# } #"+'# if (options.formats && options.formats.indexOf("rgb") >= 0) { #'+'<div  class="k-vstack" data-#:ns#bind="visible: mode(\'rgb\')">'+'<input tabindex="#:options.tabindex#" data-#:ns#bind="value: rgb.r" data-#:ns#role="numerictextbox" data-#:ns#size="#: options.size #" data-#:ns#max="255" data-#:ns#min="0" data-#:ns#decimals="0" data-#:ns#spinners="false" data-#:ns#format="n0"  aria-label="#: options.messages.red #" />'+'<label class="k-colorgradient-input-label">R</label>'+"</div>"+'<div  class="k-vstack" data-#:ns#bind="visible: mode(\'rgb\')">'+'<input tabindex="#:options.tabindex#" data-#:ns#bind="value: rgb.g" data-#:ns#role="numerictextbox" data-#:ns#size="#: options.size #" data-#:ns#max="255" data-#:ns#min="0" data-#:ns#decimals="0" data-#:ns#spinners="false" data-#:ns#format="n0"  aria-label="#: options.messages.green #" />'+'<label class="k-colorgradient-input-label">G</label>'+"</div>"+'<div  class="k-vstack" data-#:ns#bind="visible: mode(\'rgb\')">'+'<input tabindex="#:options.tabindex#" data-#:ns#bind="value: rgb.b" data-#:ns#role="numerictextbox" data-#:ns#size="#: options.size #" data-#:ns#max="255" data-#:ns#min="0" data-#:ns#decimals="0" data-#:ns#spinners="false" data-#:ns#format="n0"  aria-label="#: options.messages.blue #"/>'+'<label class="k-colorgradient-input-label">B</label>'+"</div>"+"#if(options.opacity){#"+'<div  class="k-vstack" data-#:ns#bind="visible: mode(\'rgb\')">'+'<input tabindex="#:options.tabindex#" data-#:ns#bind="value: rgb.a" data-#:ns#role="numerictextbox" data-#:ns#size="#: options.size #" data-#:ns#step="0.1" data-#:ns#max="1" data-#:ns#min="0" data-#:ns#decimals="1" data-#:ns#spinners="false" data-#:ns#format="n1"  aria-label="#: options.messages.alpha #" />'+'<label class="k-colorgradient-input-label">A</label>'+"</div>"+"# } #"+"# } #"),destroy:function(){var e=this;e._viewModel.unbind("change",e._changeHandler);l.unbind(e.element);l.destroy(e.element);e.element.off(s);delete e._viewModel;delete e._changeHandler},_render:function(){var e=this;e.element.append(e._template({ns:l.ns,guid:l.guid(),options:e.options})).parent();l.bind(e.element,e._viewModel);e.element.attr("data-"+l.ns+"stop","stop")},value:function(e){var t=this;t._color=e&&e.toBytes()||d(u);t._preventChangeEvent=true;t._viewModel.set("rgb",t._color);delete t._preventChangeEvent},reset:function(){var e=this;e._preventChangeEvent=true;e._viewModel.set("rgb",d(u));delete e._preventChangeEvent},switchMode:function(){var e=this,t=e._viewModel,a=t.format,n=t.formats.indexOf(a)+1;n=n>=t.formats.length?0:n;e._preventChangeEvent=true;e._viewModel.set("format",t.formats[n]);delete e._preventChangeEvent},change:function(e){var t=this;if(e.field.indexOf("rgb")>=0){t._color=t._tryParseColor(t._viewModel.rgb.toCssRgba());t._viewModel.set("hex",t._color.toCss({alpha:t.options.opacity}))}else if(e.field==="hex"){t._color=t._tryParseColor(e.sender[e.field]);t._viewModel.set("rgb",t._color)}if(!t._preventChangeEvent)t.trigger("change",{value:t._color})},_tryParseColor:function(t){var a=this;try{t=d(t)||a._color}catch(e){t=a._color}return t},keydown:function(e){var t=this,a=i(e.target).data("kendoTextBox");if(e.keyCode===o.ENTER&&i(e.target).is("input")){if(a&&a._change)a._change();t.trigger("change",{value:t._color});t.trigger("select",{value:t._color})}}}),m=r.extend({init:function(e,t){var a=this,n;r.fn.init.call(a,e,t);t=a.options=l.deepExtend({},a.options,t);if(t.messages.previewInput)t.messages.hex=t.messages.previewInput;t.messages=t.messages?i.extend(a.options.messages,t.messages):a.options.messages;e=a.element;a.wrapper=e.addClass("k-colorgradient").append(a._template(t));a._hueElements=i(".k-hsv-rectangle, .k-alpha-slider .k-slider-track",e);a._colorgradientInputs=i(".k-colorgradient-inputs",e);a._contrastTool=i(".k-colorgradient-color-contrast",e);a._sliders();a._hsvArea();n=a._value;if(a._colorgradientInputs.length){a._colorInput=new b(a._colorgradientInputs,h({},t,{tabindex:this._tabIndex}));a._colorInput.bind("change",function(e){a._updateUI(e.value,true)});a._colorInput.bind("select",function(e){var t=d(e.value);a._select(t);a.trigger("forceSelect",{value:a.value()})})}a._updateUI(n)},options:{name:"ColorGradient",opacity:false,input:true,format:"hex",formats:["rgb","hex"],contrastTool:false,size:"medium",messages:{contrastRatio:"Contrast ratio:",fail:"Fail",pass:"Pass",hex:"HEX",toggleFormat:"Toggle format",red:"Red",green:"Green",blue:"Blue",alpha:"Alpha"}},_template:l.template('<div class="k-colorgradient-canvas k-hstack">'+'<div class="k-hsv-rectangle"><div class="k-hsv-gradient"></div><div class="k-hsv-draghandle k-draghandle"></div></div>'+'<div class="k-hsv-controls k-hstack">'+'<input class="k-hue-slider k-colorgradient-slider" />'+"# if (opacity) { #"+'<input class="k-alpha-slider k-colorgradient-slider" />'+"# } #"+"</div>"+"</div>"+"# if (input) { #"+'<div class="k-colorgradient-inputs k-hstack">'+"</div>"+"# } #"+"# if (contrastTool) { #"+'<div class="k-colorgradient-color-contrast k-vbox">'+"</div>"+"# } #"),_onEnable:function(e){this._hueSlider.enable(e);if(this._opacitySlider)this._opacitySlider.enable(e);this.wrapper.find("input").attr("disabled",!e);var t=this._hsvRect.find(".k-draghandle");if(e)t.attr("tabIndex",this._tabIndex);else t.removeAttr("tabIndex")},_sliders:function(){var t=this,e=t.element,a=e.find(".k-hue-slider"),n=e.find(".k-alpha-slider");function s(e){t._updateUI(t._getHSV(e.value,null,null,null))}a.attr("aria-label","hue saturation");t._hueSlider=a.kendoSlider({min:0,max:360,tickPlacement:"none",showButtons:false,orientation:"vertical",slide:s,change:s}).data("kendoSlider");function o(e){t._updateUI(t._getHSV(null,null,null,e.value/100))}n.attr("aria-label","opacity");t._opacitySlider=n.kendoSlider({min:0,max:100,tickPlacement:"none",showButtons:false,orientation:"vertical",slide:o,change:o}).data("kendoSlider")},_hsvArea:function(){var r=this,e=r.element,t=e.find(".k-hsv-rectangle"),a=t.find(".k-draghandle").attr("tabIndex",0).on(s,_(r._keydown,r));function n(e,t){var a=this.offset,n=e-a.left,s=t-a.top,o=this.width,i=this.height;n=n<0?0:n>o?o:n;s=s<0?0:s>i?i:s;r._svChange(n/o,1-s/i)}r._hsvEvents=new l.UserEvents(t,{global:true,press:function(e){this.offset=l.getOffset(t);this.width=t.width();this.height=t.height();a.focus();n.call(this,e.x.location,e.y.location)},start:function(){t.addClass("k-dragging");a.focus()},move:function(e){e.preventDefault();n.call(this,e.x.location,e.y.location)},end:function(){t.removeClass("k-dragging")}});r._hsvRect=t;r._hsvHandle=a},setBackgroundColor:function(e){var t=this;if(t.options.contrastTool){t.options.contrastTool=i.isPlainObject(t.options.contrastTool)?h({},t.options.contrastTool,{backgroundColor:e}):{backgroundColor:e};t._updateColorContrast(t.color()||d(p))}},_updateUI:function(e,t){var a=this;if(!e){a._reset();return}if(!t&&a._colorInput)a._colorInput.value(e);a._triggerSelect(e);a._updateHsv(e);if(a._contrastTool.length)a._updateColorContrast(e)},_reset:function(){var e=this;if(e._colorInput)e._colorInput.reset();e._resetHsv();e._resetColorContrast()},_resetHsv:function(){var e=this,t=d(u);e._updateHsv(t)},_updateHsv:function(e){var t=this,a=t._hsvRect;e=e.toHSV();t._hsvHandle.css({left:e.s*a.width()+"px",top:(1-e.v)*a.height()+"px"});t._hueElements.css(v,c.fromHSV(e.h,1,1,1).toCss());t._hueSlider.value(e.h);if(t._opacitySlider){t._opacitySlider.wrapper.find(".k-slider-track").css("background","linear-gradient(to top, transparent, "+c.fromHSV(e.h,1,1,1).toCss());t._opacitySlider.value(100*e.a)}},_resetColorContrast:function(){var e=this,t=e.options.contrastTool;if(e._contrastTool.length)e._updateColorContrast(t.backgroundColor?d(t.backgroundColor):d(p))},_updateColorContrast:function(e){var t=this,a=t.options.contrastTool,n=a.backgroundColor?d(a.backgroundColor):d(p),s=f.getContrastFromTwoRGBAs(d(e.toCssRgba()),n),o=l.template('<div class="k-contrast-ratio">'+'<span class="k-contrast-ratio-text">#:messages.contrastRatio# #:kendo.toString(ratio, "n2")#</span>'+'<span class="k-contrast-validation k-text-success">'+"#if (ratio > 4.5) {#"+'<span class="k-icon k-i-check"></span>'+"#}#"+"#if (ratio > 7) {#"+'<span class="k-icon k-i-check"></span>'+"#}#"+"</span></div>"),i=l.template("<div>"+"<span>#:level#: #:limit# </span>"+"#if (ratio > limit) {#"+'<span class="k-contrast-validation k-text-success">#:messages.pass# <span class="k-icon k-i-check"></span></span>'+"#} else {#"+'<span class="k-contrast-validation k-text-error">#:messages.fail# <span class="k-icon k-i-close"></span></span>'+"#}#"+"</div>"),r="";r+=o({messages:t.options.messages,ratio:s});r+=i({messages:t.options.messages,ratio:s,limit:4.5,level:"AA"});r+=i({messages:t.options.messages,ratio:s,limit:7,level:"AAA"});t._contrastTool.find(".k-contrast-ratio, div").remove();t._contrastTool.append(r);t._updateContrastSvg(n)},_updateContrastSvg:function(e){var t=this,a=t._hsvRect,n="k-color-contrast-svg",s={width:a.width(),height:a.height()},o;if(!s.width||!s.height)return;o=i(f.renderSvgCurveLine(s,t._getHSV(),e)).addClass(n);a.find("."+n).remove();a.append(o)},_keydown:function(n){var s=this;function e(e,t){var a=s._getHSV();a[e]+=t*(n.shiftKey?.01:.05);if(a[e]<0)a[e]=0;if(a[e]>1)a[e]=1;s._updateUI(a);g(n)}function t(e){var t=s._getHSV();t.h+=e*(n.shiftKey?1:5);if(t.h<0)t.h=0;if(t.h>359)t.h=359;s._updateUI(t);g(n)}switch(n.keyCode){case o.LEFT:if(n.ctrlKey)t(-1);else e("s",-1);break;case o.RIGHT:if(n.ctrlKey)t(1);else e("s",1);break;case o.UP:e(n.ctrlKey&&s._opacitySlider?"a":"v",1);break;case o.DOWN:e(n.ctrlKey&&s._opacitySlider?"a":"v",-1);break;case o.ENTER:s._select(s._getHSV());break;case o.F2:s._colorInput.element.find("input").trigger("focus").select();break;case o.ESC:s._cancel();break}},focus:function(){this._hsvHandle.focus()},_getHSV:function(e,t,a,n){var s=this,o=s._hsvRect,i=o.width(),r=o.height(),l=this._hsvHandle.position();if(!i||!r)return s.color()?s.color().toHSV():d(u);if(e==null)e=s._hueSlider.value();if(t==null)t=l.left/i;if(a==null)a=1-l.top/r;if(n==null)n=s._opacitySlider?s._opacitySlider.value()/100:1;return c.fromHSV(e,t,a,n)},_svChange:function(e,t){var a=this._getHSV(null,e,t,null);this._updateUI(a)},destroy:function(){this._hsvEvents.destroy();this._hueSlider.destroy();if(this._opacitySlider)this._opacitySlider.destroy();if(this._colorInput)this._colorInput.destroy();this._hueSlider=this._opacitySlider=this._hsvRect=this._hsvHandle=this._hueElements=this._selectedColor=this._colorAsText=this._contrastTool=null;r.fn.destroy.call(this)}});return e.plugin(m),window.kendo})?n.apply(t,a):n)||(e.exports=t)},25:function(e,t){e.exports=require("./contrastToolUtils")}});