diff --git a/src/Aardvark.UI.Primitives/Aardvark.UI.Primitives.fsproj b/src/Aardvark.UI.Primitives/Aardvark.UI.Primitives.fsproj
index 62a7b6d6..778e3e02 100644
--- a/src/Aardvark.UI.Primitives/Aardvark.UI.Primitives.fsproj
+++ b/src/Aardvark.UI.Primitives/Aardvark.UI.Primitives.fsproj
@@ -78,8 +78,10 @@
-
-
+
+
+
+
diff --git a/src/Aardvark.UI.Primitives/Color/ColorPicker.fs b/src/Aardvark.UI.Primitives/Color/ColorPicker.fs
index 57984988..2ac77b24 100644
--- a/src/Aardvark.UI.Primitives/Color/ColorPicker.fs
+++ b/src/Aardvark.UI.Primitives/Color/ColorPicker.fs
@@ -4,6 +4,8 @@ open Aardvark.UI
open Aardvark.Base
open FSharp.Data.Adaptive
+// https://github.com/aardvark-community/spectrum
+
// TODO: Move to Aardvark.UI.Primitives namespace and delete old color picker
module ColorPicker =
@@ -349,12 +351,9 @@ module ColorPicker =
"const $self = $('#__ID__');"
"$self.spectrum({"
- $" appendTo: 'replacer',"
-
- // A bit weird with buttons, without buttons this is the default behavior anyway.
- // Setting this to false will make clicking outside reset the displayed color even if
- // a color was selected from the palette (which fires a change immediately).
- $" clickoutFiresChange: true,"
+ $" appendTo: 'replacer',"
+ $" clickoutFiresChange: false,"
+ $" fireChangeImmediately: true,"
if config.darkTheme then
" replacerClassName: 'dark',"
@@ -378,12 +377,6 @@ module ColorPicker =
match config.pickerStyle with
| Some p ->
- // Make sure value is saved when clicking on the replacer itself
- if not p.showButtons then
- "$self.on('hide.spectrum', function (e, tinycolor) {"
- " aardvark.processEvent('__ID__', 'data-event', tinycolor.toHex8());"
- "});"
-
// Disable text input if requested
if p.textInput = TextInput.Disabled then
"$self.spectrum('container').find('.sp-input').attr('disabled', true);"
diff --git a/src/Aardvark.UI.Primitives/resources/spectrum-min.css b/src/Aardvark.UI.Primitives/resources/spectrum-min.css
new file mode 100644
index 00000000..d1b21684
--- /dev/null
+++ b/src/Aardvark.UI.Primitives/resources/spectrum-min.css
@@ -0,0 +1 @@
+.sp-container{position:absolute;top:0;left:0;display:inline-block;z-index:9999994;overflow:hidden}.sp-container.sp-flat{position:relative}.sp-container,.sp-container *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.sp-top{position:relative;width:100%;display:inline-block}.sp-top-inner{position:absolute;top:0;left:0;bottom:0;right:0}.sp-color{position:absolute;top:0;left:0;bottom:0;right:20%}.sp-hue{position:absolute;top:0;right:0;bottom:0;left:84%;height:100%}.sp-clear-enabled .sp-hue{top:33px;height:77.5%}.sp-fill{padding-top:80%}.sp-sat,.sp-val{position:absolute;top:0;left:0;right:0;bottom:0}.sp-alpha-enabled .sp-top{margin-bottom:18px}.sp-alpha-enabled .sp-alpha{display:block}.sp-alpha-handle{position:absolute;top:-4px;bottom:-4px;width:6px;left:50%;cursor:pointer;border:1px solid #000;background:#fff;opacity:.8}.sp-alpha{display:none;position:absolute;bottom:-14px;right:0;left:0;height:8px}.sp-alpha-inner{border:solid 1px #333}.sp-clear{display:none}.sp-clear.sp-clear-display{background-position:center}.sp-clear-enabled .sp-clear{display:block;position:absolute;top:0;right:0;bottom:0;left:84%;height:28px}.sp-alpha,.sp-alpha-handle,.sp-clear,.sp-container,.sp-container button,.sp-container.sp-dragging .sp-input,.sp-dragger,.sp-preview,.sp-replacer,.sp-slider{-webkit-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none}.sp-container.sp-input-disabled .sp-input-container{display:none}.sp-container.sp-buttons-disabled .sp-button-container{display:none}.sp-container.sp-palette-buttons-disabled .sp-palette-button-container{display:none}.sp-palette-only .sp-picker-container{display:none}.sp-palette-disabled .sp-palette-container{display:none}.sp-initial-disabled .sp-initial{display:none}.sp-sat{background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-moz-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-o-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-ms-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:linear-gradient(to right,#fff,rgba(204,154,129,0))}.sp-val{background-image:-webkit-gradient(linear,0 100%,0 0,from(#000),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-moz-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-o-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-ms-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:linear-gradient(to top,#000,rgba(204,154,129,0))}.sp-hue{background:-moz-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-ms-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-o-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-webkit-gradient(linear,left top,left bottom,from(red),color-stop(.17,#ff0),color-stop(.33,#0f0),color-stop(.5,#0ff),color-stop(.67,#00f),color-stop(.83,#f0f),to(red));background:-webkit-linear-gradient(top,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:linear-gradient(to bottom,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.sp-1{height:17%}.sp-2{height:16%}.sp-3{height:17%}.sp-4{height:17%}.sp-5{height:16%}.sp-6{height:17%}.sp-hidden{display:none!important}.sp-cf:after,.sp-cf:before{content:"";display:table}.sp-cf:after{clear:both}@media (max-device-width:480px){.sp-color{right:40%}.sp-hue{left:63%}.sp-fill{padding-top:60%}}.sp-dragger{border-radius:5px;height:5px;width:5px;border:1px solid #fff;background:#000;cursor:pointer;position:absolute;top:0;left:0}.sp-slider{position:absolute;top:0;cursor:pointer;height:3px;left:-1px;right:-1px;border:1px solid #000;background:#fff;opacity:.8}.sp-container{border-radius:0;background-color:#ececec;border:solid 1px #f0c49b;padding:0}.sp-clear,.sp-color,.sp-container,.sp-container button,.sp-container input,.sp-hue{font:normal 12px "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.sp-top{margin-bottom:3px}.sp-clear,.sp-color,.sp-hue{border:solid 1px #666}.sp-input-container{float:right;width:100px;margin-bottom:4px}.sp-initial-disabled .sp-input-container{width:100%}.sp-input{font-size:12px!important;border:1px inset;padding:4px 5px;margin:0;width:100%;background:0 0;border-radius:3px;color:#222}.sp-input:focus{border:1px solid orange}.sp-input.sp-validation-error{border:1px solid red;background:#fdd}.sp-palette-container,.sp-picker-container{float:left;position:relative;padding:10px;padding-bottom:300px;margin-bottom:-290px}.sp-picker-container{width:172px;border-left:solid 1px #fff}.sp-palette-container{border-right:solid 1px #ccc}.sp-palette-only .sp-palette-container{border:0}.sp-palette .sp-thumb-el{display:block;position:relative;float:left;width:24px;height:15px;margin:3px;cursor:pointer;border:solid 2px transparent}.sp-palette .sp-thumb-el.sp-thumb-active,.sp-palette .sp-thumb-el:hover{border-color:orange}.sp-thumb-el{position:relative}.sp-initial{float:left;border:solid 1px #333}.sp-initial span{width:30px;height:25px;border:none;display:block;float:left;margin:0}.sp-initial .sp-clear-display{background-position:center}.sp-button-container,.sp-palette-button-container{float:right}.sp-replacer{margin:0;overflow:hidden;cursor:pointer;padding:4px;display:inline-block;border:solid 1px #91765d;background:#eee;color:#333;vertical-align:middle}.sp-replacer.sp-active,.sp-replacer:hover{border-color:#f0c49b;color:#111}.sp-replacer.sp-disabled{cursor:default;border-color:silver;color:silver}.sp-dd{padding:2px 0;height:16px;line-height:16px;float:left;font-size:10px}.sp-preview{position:relative;width:25px;height:20px;border:solid 1px #222;margin-right:5px;float:left;z-index:0}.sp-palette{max-width:220px}.sp-palette .sp-thumb-el{width:16px;height:16px;margin:2px 1px;border:solid 1px #d0d0d0}.sp-container{padding-bottom:0}.sp-container button{background-color:#eee;background-image:-webkit-linear-gradient(top,#eee,#ccc);background-image:-moz-linear-gradient(top,#eee,#ccc);background-image:-ms-linear-gradient(top,#eee,#ccc);background-image:-o-linear-gradient(top,#eee,#ccc);background-image:linear-gradient(to bottom,#eee,#ccc);border:1px solid #ccc;border-bottom:1px solid #bbb;border-radius:3px;color:#333;font-size:14px;line-height:1;padding:5px 4px;text-align:center;text-shadow:0 1px 0 #eee;vertical-align:middle}.sp-container button:hover{background-color:#ddd;background-image:-webkit-linear-gradient(top,#ddd,#bbb);background-image:-moz-linear-gradient(top,#ddd,#bbb);background-image:-ms-linear-gradient(top,#ddd,#bbb);background-image:-o-linear-gradient(top,#ddd,#bbb);background-image:linear-gradient(to bottom,#ddd,#bbb);border:1px solid #bbb;border-bottom:1px solid #999;cursor:pointer;text-shadow:0 1px 0 #ddd}.sp-container button:active{border:1px solid #aaa;border-bottom:1px solid #888;-webkit-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;-moz-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;-ms-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;-o-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee}.sp-cancel{font-size:11px;color:#d93f3f!important;margin:0;padding:2px;margin-right:5px;vertical-align:middle;text-decoration:none}.sp-cancel:hover{color:#d93f3f!important;text-decoration:underline}.sp-palette span.sp-thumb-active,.sp-palette span:hover{border-color:#000}.sp-alpha,.sp-preview,.sp-thumb-el{position:relative;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.sp-alpha-inner,.sp-preview-inner,.sp-thumb-inner{display:block;position:absolute;top:0;left:0;bottom:0;right:0}.sp-palette .sp-thumb-inner{background-position:50% 50%;background-repeat:no-repeat}.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=)}.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=)}.sp-clear-display{background-repeat:no-repeat;background-position:center;background-image:url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==)}
\ No newline at end of file
diff --git a/src/Aardvark.UI.Primitives/resources/spectrum-min.js b/src/Aardvark.UI.Primitives/resources/spectrum-min.js
new file mode 100644
index 00000000..9d89d0d7
--- /dev/null
+++ b/src/Aardvark.UI.Primitives/resources/spectrum-min.js
@@ -0,0 +1 @@
+!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports&&"object"==typeof module?module.exports=t(require("jquery")):t(jQuery)}(function(Tt,Ot){"use strict";var It={beforeShow:e,move:e,change:e,show:e,hide:e,color:!1,flat:!1,showInput:!1,allowEmpty:!1,showButtons:!0,clickoutFiresChange:!0,fireChangeImmediately:!1,showInitial:!1,showPalette:!1,showPaletteOnly:!1,hideAfterPaletteSelect:!1,togglePaletteOnly:!1,showSelectionPalette:!0,localStorageKey:!1,appendTo:"body",maxSelectionSize:7,cancelText:"cancel",chooseText:"choose",togglePaletteMoreText:"more",togglePaletteLessText:"less",clearText:"Clear Color Selection",noColorSelectedText:"No Color Selected",preferredFormat:!1,className:"",containerClassName:"",replacerClassName:"",showAlpha:!1,theme:"sp-light",palette:[["#ffffff","#000000","#ff0000","#ff8000","#ffff00","#008000","#0000ff","#4b0082","#9400d3"]],selectionPalette:[],disabled:!1,offset:null},qt=[],Nt=!!/msie/i.exec(window.navigator.userAgent),jt=((u=document.createElement("div").style).cssText="background-color:rgba(0,0,0,.5)",t(u.backgroundColor,"rgba")||t(u.backgroundColor,"hsla")),Lt=[""].join(""),Kt=function(){var t="";if(Nt)for(var e=1;e<=6;e++)t+="";return[""].join("")}();function t(t,e){return!!~(""+t).indexOf(e)}function Et(t,e,r,n){for(var a=[],o=0;o')):a.push(Tt("").append(Tt('').attr("title",n.noColorSelectedText)).html())}return""+a.join("")+"
"}function P(t,e){e=e,a=t,(e=Tt.extend({},It,e)).callbacks={move:Dt(e.move,a),change:Dt(e.change,a),show:Dt(e.show,a),hide:Dt(e.hide,a),beforeShow:Dt(e.beforeShow,a)};var N,j,E,D,r,l=e,c=l.flat,B=l.showSelectionPalette,n=l.localStorageKey,a=l.theme,o=l.callbacks,z=(N=q,function(){var t=this,e=arguments;E&&clearTimeout(D),!E&&D||(D=setTimeout(function(){D=null,N.apply(t,e)},j))}),f=!(j=10),L=!1,h=0,u=0,d=0,K=0,V=0,$=0,W=0,i=0,s=0,p=0,g=1,X=[],b=[],Y={},m=l.selectionPalette.slice(0),G=l.maxSelectionSize,Q="sp-dragging",v=null,y=t.ownerDocument,w=(y.body,Tt(t)),J=!1,_=Tt(Kt,y).addClass(a),U=_.find(".sp-picker-container"),Z=_.find(".sp-color"),tt=_.find(".sp-dragger"),et=_.find(".sp-hue"),rt=_.find(".sp-slider"),nt=_.find(".sp-alpha-inner"),at=_.find(".sp-alpha"),ot=_.find(".sp-alpha-handle"),x=_.find(".sp-input"),it=_.find(".sp-palette"),st=_.find(".sp-initial"),e=_.find(".sp-cancel"),t=_.find(".sp-clear"),lt=_.find(".sp-choose"),ct=_.find(".sp-palette-toggle"),ft=w.is("input"),ht=ft&&"color"===w.attr("type")&&zt(),ut=ft&&!c,k=ut?Tt(Lt).addClass(a).addClass(l.className).addClass(l.replacerClassName):Tt([]),dt=ut?k:w,S=k.find(".sp-preview-inner"),a=l.color||ft&&w.val(),C=!1,P=l.preferredFormat,pt=!l.showButtons||l.clickoutFiresChange,A=!a,M=l.allowEmpty&&!ht;function gt(){if(l.showPaletteOnly&&(l.showPalette=!0),ct.text(l.showPaletteOnly?l.togglePaletteMoreText:l.togglePaletteLessText),l.palette){X=l.palette.slice(0),b=Array.isArray(X[0])?X:[X],Y={};for(var t=0;tG;)m.shift();if(n&&window.localStorage)try{window.localStorage[n]=m.join(";")}catch(t){}}}function vt(){var r=F(),t=Tt.map(b,function(t,e){return Et(t,r,"sp-palette-row sp-palette-row-"+e,l)});bt(),m&&t.push(Et(function(){var t=[];if(l.showPalette)for(var e=0;eMath.abs(e-n),v=r?"x":"y"):v=null;var n=!v||"x"===v,r=!v||"y"===v;n&&(s=parseFloat(t/h)),r&&(p=parseFloat((u-e)/u)),A=!1,l.showAlpha||(g=1),T()},wt,_t),a?(H(a),O(),P=l.preferredFormat||tinycolor(a).format,mt(a)):O(),c&&St(),r=Nt?"mousedown.spectrum":"click.spectrum touchstart.spectrum",it.on(r,".sp-thumb-el",Ht),st.on(r,".sp-thumb-el:nth-child(1)",{ignore:!0},Ht);var Ft={show:St,hide:R,toggle:kt,reflow:q,option:function(t,e){return t===Ot?Tt.extend({},l):e===Ot?l[t]:(l[t]=e,"preferredFormat"===t&&(P=l.preferredFormat),void gt())},enable:function(){J=!1,w.attr("disabled",!1),dt.removeClass("sp-disabled")},disable:Rt,offset:function(t){l.offset=t,q()},set:function(t){H(t),I()},get:F,destroy:function(){w.show(),dt.off("click.spectrum touchstart.spectrum"),_.remove(),k.remove(),qt[Ft.id]=null},container:_};return Ft.id=qt.push(Ft)-1,Ft}function e(){}function Vt(t){t.stopPropagation()}function Dt(t,e){var r=Array.prototype.slice,n=r.call(arguments,2);return function(){return t.apply(e,n.concat(r.call(arguments)))}}function Bt(n,a,e,t){a=a||function(){},e=e||function(){},t=t||function(){};var o=document,i=!1,s={},l=0,c=0,f="ontouchstart"in window,r={};function h(t){t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),t.returnValue=!1}function u(t){if(i){if(Nt&&o.documentMode<9&&!t.button)return d();var e=t.originalEvent&&t.originalEvent.touches&&t.originalEvent.touches[0],r=e&&e.pageX||t.pageX,e=e&&e.pageY||t.pageY,r=Math.max(0,Math.min(r-s.left,c)),e=Math.max(0,Math.min(e-s.top,l));f&&h(t),a.apply(n,[r,e,t])}}function d(){i&&(Tt(o).off(r),Tt(o.body).removeClass("sp-dragging"),setTimeout(function(){t.apply(n,arguments)},0)),i=!1}r.selectstart=h,r.dragstart=h,r["touchmove mousemove"]=u,r["touchend mouseup"]=d,Tt(n).on("touchstart mousedown",function(t){(t.which?3==t.which:2==t.button)||i||!1!==e.apply(n,arguments)&&(i=!0,l=Tt(n).height(),c=Tt(n).width(),s=Tt(n).offset(),Tt(o).on(r),Tt(o.body).addClass("sp-dragging"),u(t),h(t))})}function zt(){return Tt.fn.spectrum.inputTypeColorSupport()}var o,i,n,s,a,c,f,r,l,h,u,d,p,g="spectrum.id";function b(t,e){var r;return e=e||{},(t=t||"")instanceof b?t:this instanceof b?(r=function(t){var e={r:0,g:0,b:0},r=1,n=!1,a=!1;"string"==typeof t&&(t=function(t){t=t.replace(o,"").replace(i,"").toLowerCase();var e,r=!1;if(l[t])t=l[t],r=!0;else if("transparent"==t)return{r:0,g:0,b:0,a:0,format:"name"};if(e=p.rgb.exec(t))return{r:e[1],g:e[2],b:e[3]};if(e=p.rgba.exec(t))return{r:e[1],g:e[2],b:e[3],a:e[4]};if(e=p.hsl.exec(t))return{h:e[1],s:e[2],l:e[3]};if(e=p.hsla.exec(t))return{h:e[1],s:e[2],l:e[3],a:e[4]};if(e=p.hsv.exec(t))return{h:e[1],s:e[2],v:e[3]};if(e=p.hsva.exec(t))return{h:e[1],s:e[2],v:e[3],a:e[4]};if(e=p.hex8.exec(t))return{a:function(t){return k(t)/255}(e[1]),r:k(e[2]),g:k(e[3]),b:k(e[4]),format:r?"name":"hex8"};if(e=p.hex6.exec(t))return{r:k(e[1]),g:k(e[2]),b:k(e[3]),format:r?"name":"hex"};if(e=p.hex3.exec(t))return{r:k(e[1]+""+e[1]),g:k(e[2]+""+e[2]),b:k(e[3]+""+e[3]),format:r?"name":"hex"};return!1}(t));"object"==typeof t&&(t.hasOwnProperty("r")&&t.hasOwnProperty("g")&&t.hasOwnProperty("b")?(e=function(t,e,r){return{r:255*_(t,255),g:255*_(e,255),b:255*_(r,255)}}(t.r,t.g,t.b),n=!0,a="%"===String(t.r).substr(-1)?"prgb":"rgb"):t.hasOwnProperty("h")&&t.hasOwnProperty("s")&&t.hasOwnProperty("v")?(t.s=C(t.s),t.v=C(t.v),e=function(t,e,r){t=6*_(t,360),e=_(e,100),r=_(r,100);var n=s.floor(t),t=t-n,a=r*(1-e),o=r*(1-t*e),t=r*(1-(1-t)*e),e=n%6;return{r:255*[r,o,a,a,t,r][e],g:255*[t,r,r,o,a,a][e],b:255*[a,a,t,r,r,o][e]}}(t.h,t.s,t.v),n=!0,a="hsv"):t.hasOwnProperty("h")&&t.hasOwnProperty("s")&&t.hasOwnProperty("l")&&(t.s=C(t.s),t.l=C(t.l),e=function(t,e,r){var n,a,o;function i(t,e,r){return r<0&&(r+=1),1>1)+720)%360;--e;)n.h=(n.h+a)%360,o.push(b(n));return o}function D(t,e){e=e||6;for(var t=b(t).toHsv(),r=t.h,n=t.s,a=t.v,o=[],i=1/e;e--;)o.push(b({h:r,s:n,v:a})),a=(a+i)%1;return o}function B(t){return t=parseFloat(t),t=isNaN(t)||t<0||1")[0],t._cachedResult="color"===e.type&&""!==e.value),t._cachedResult},Tt.spectrum={},Tt.spectrum.localization={},Tt.spectrum.palettes={},Tt.fn.spectrum.processNativeColorInputs=function(){var t=Tt("input[type=color]");t.length&&!zt()&&t.spectrum({preferredFormat:"hex6"})},o=/^[\s,#]+/,i=/\s+$/,n=0,s=Math,a=s.round,c=s.min,f=s.max,r=s.random,b.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var t=this.toRgb();return(299*t.r+587*t.g+114*t.b)/1e3},setAlpha:function(t){return this._a=B(t),this._roundA=a(1e3*this._a)/1e3,this},toHsv:function(){var t=v(this._r,this._g,this._b);return{h:360*t.h,s:t.s,v:t.v,a:this._a}},toHsvString:function(){var t=v(this._r,this._g,this._b),e=a(360*t.h),r=a(100*t.s),t=a(100*t.v);return 1==this._a?"hsv("+e+", "+r+"%, "+t+"%)":"hsva("+e+", "+r+"%, "+t+"%, "+this._roundA+")"},toHsl:function(){var t=m(this._r,this._g,this._b);return{h:360*t.h,s:t.s,l:t.l,a:this._a}},toHslString:function(){var t=m(this._r,this._g,this._b),e=a(360*t.h),r=a(100*t.s),t=a(100*t.l);return 1==this._a?"hsl("+e+", "+r+"%, "+t+"%)":"hsla("+e+", "+r+"%, "+t+"%, "+this._roundA+")"},toHex:function(t){return y(this._r,this._g,this._b,t)},toHexString:function(t){return"#"+this.toHex(t)},toHex8:function(){return w(this._r,this._g,this._b,this._a)},toHex8String:function(){return"#"+this.toHex8()},toRgb:function(){return{r:a(this._r),g:a(this._g),b:a(this._b),a:this._a}},toRgbString:function(){return 1==this._a?"rgb("+a(this._r)+", "+a(this._g)+", "+a(this._b)+")":"rgba("+a(this._r)+", "+a(this._g)+", "+a(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:a(100*_(this._r,255))+"%",g:a(100*_(this._g,255))+"%",b:a(100*_(this._b,255))+"%",a:this._a}},toPercentageRgbString:function(){return 1==this._a?"rgb("+a(100*_(this._r,255))+"%, "+a(100*_(this._g,255))+"%, "+a(100*_(this._b,255))+"%)":"rgba("+a(100*_(this._r,255))+"%, "+a(100*_(this._g,255))+"%, "+a(100*_(this._b,255))+"%, "+this._roundA+")"},toName:function(){return 0===this._a?"transparent":!(this._a<1)&&h[y(this._r,this._g,this._b,!0)]||!1},toFilter:function(t){var e="#"+w(this._r,this._g,this._b,this._a),r=e;return"progid:DXImageTransform.Microsoft.gradient("+(this._gradientType?"GradientType = 1, ":"")+"startColorstr="+e+",endColorstr="+(r=t?b(t).toHex8String():r)+")"},toString:function(t){var e=!!t,r=(t=t||this._format,!1),n=this._a<1&&0<=this._a;return e||!n||"hex"!==t&&"hex6"!==t&&"hex3"!==t&&"name"!==t?("rgb"===t&&(r=this.toRgbString()),"prgb"===t&&(r=this.toPercentageRgbString()),"hex"!==t&&"hex6"!==t||(r=this.toHexString()),"hex3"===t&&(r=this.toHexString(!0)),"hex8"===t&&(r=this.toHex8String()),"name"===t&&(r=this.toName()),"hsl"===t&&(r=this.toHslString()),(r="hsv"===t?this.toHsvString():r)||this.toHexString()):"name"===t&&0===this._a?this.toName():this.toRgbString()},_applyModification:function(t,e){t=t.apply(null,[this].concat([].slice.call(e)));return this._r=t._r,this._g=t._g,this._b=t._b,this.setAlpha(t._a),this},lighten:function(){return this._applyModification(H,arguments)},brighten:function(){return this._applyModification(F,arguments)},darken:function(){return this._applyModification(T,arguments)},desaturate:function(){return this._applyModification(A,arguments)},saturate:function(){return this._applyModification(M,arguments)},greyscale:function(){return this._applyModification(R,arguments)},spin:function(){return this._applyModification(O,arguments)},_applyCombination:function(t,e){return t.apply(null,[this].concat([].slice.call(e)))},analogous:function(){return this._applyCombination(E,arguments)},complement:function(){return this._applyCombination(I,arguments)},monochromatic:function(){return this._applyCombination(D,arguments)},splitcomplement:function(){return this._applyCombination(j,arguments)},triad:function(){return this._applyCombination(q,arguments)},tetrad:function(){return this._applyCombination(N,arguments)}},b.fromRatio=function(t,e){if("object"==typeof t){var r,n={};for(r in t)t.hasOwnProperty(r)&&(n[r]="a"===r?t[r]:C(t[r]));t=n}return b(t,e)},b.equals=function(t,e){return!(!t||!e)&&b(t).toRgbString()==b(e).toRgbString()},b.random=function(){return b.fromRatio({r:r(),g:r(),b:r()})},b.mix=function(t,e,r){r=0===r?0:r||50;var t=b(t).toRgb(),e=b(e).toRgb(),r=r/100,n=2*r-1,a=e.a-t.a,n=n*a==-1?n:(n+a)/(1+n*a),a=1-(n=(n+1)/2),n={r:e.r*n+t.r*a,g:e.g*n+t.g*a,b:e.b*n+t.b*a,a:e.a*r+t.a*(1-r)};return b(n)},b.readability=function(t,e){var t=b(t),e=b(e),r=t.toRgb(),n=e.toRgb(),t=t.getBrightness(),e=e.getBrightness(),r=Math.max(r.r,n.r)-Math.min(r.r,n.r)+Math.max(r.g,n.g)-Math.min(r.g,n.g)+Math.max(r.b,n.b)-Math.min(r.b,n.b);return{brightness:Math.abs(t-e),color:r}},b.isReadable=function(t,e){t=b.readability(t,e);return 125');
+ html.push('');
} else {
var cls = 'sp-clear-display';
html.push($('')
@@ -249,7 +250,7 @@
if (opts.palette) {
palette = opts.palette.slice(0);
- paletteArray = $.isArray(palette[0]) ? palette : [palette];
+ paletteArray = Array.isArray(palette[0]) ? palette : [palette];
paletteLookup = {};
for (var i = 0; i < paletteArray.length; i++) {
for (var j = 0; j < paletteArray[i].length; j++) {
@@ -312,7 +313,7 @@
updateSelectionPaletteFromStorage();
- offsetElement.bind("click.spectrum touchstart.spectrum", function (e) {
+ offsetElement.on("click.spectrum touchstart.spectrum", function (e) {
if (!disabled) {
toggle();
}
@@ -329,17 +330,17 @@
}
// Prevent clicks from bubbling up to document. This would cause it to be hidden.
- container.click(stopPropagation);
+ container.on("click", stopPropagation);
// Handle user typed input
- textInput.change(setFromTextInput);
- textInput.bind("paste", function () {
+ textInput.on("change", setFromTextInput);
+ textInput.on("paste", function () {
setTimeout(setFromTextInput, 1);
});
- textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
+ textInput.on("keydown", function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
cancelButton.text(opts.cancelText);
- cancelButton.bind("click.spectrum", function (e) {
+ cancelButton.on("click.spectrum", function (e) {
e.stopPropagation();
e.preventDefault();
revert();
@@ -347,7 +348,7 @@
});
clearButton.attr("title", opts.clearText);
- clearButton.bind("click.spectrum", function (e) {
+ clearButton.on("click.spectrum", function (e) {
e.stopPropagation();
e.preventDefault();
isEmpty = true;
@@ -360,7 +361,7 @@
});
chooseButton.text(opts.chooseText);
- chooseButton.bind("click.spectrum", function (e) {
+ chooseButton.on("click.spectrum", function (e) {
e.stopPropagation();
e.preventDefault();
@@ -375,7 +376,7 @@
});
toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
- toggleButton.bind("click.spectrum", function (e) {
+ toggleButton.on("click.spectrum", function (e) {
e.stopPropagation();
e.preventDefault();
@@ -470,9 +471,11 @@
else {
set($(e.target).closest(".sp-thumb-el").data("color"));
move();
- updateOriginalInput(true);
+
+ updateOriginalInput(opts.hideAfterPaletteSelect || opts.fireChangeImmediately);
+
if (opts.hideAfterPaletteSelect) {
- hide();
+ hide();
}
}
@@ -480,8 +483,8 @@
}
var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
- paletteContainer.delegate(".sp-thumb-el", paletteEvent, paletteElementClick);
- initialColorContainer.delegate(".sp-thumb-el:nth-child(1)", paletteEvent, { ignore: true }, paletteElementClick);
+ paletteContainer.on(paletteEvent, ".sp-thumb-el", paletteElementClick);
+ initialColorContainer.on(paletteEvent, ".sp-thumb-el:nth-child(1)", { ignore: true }, paletteElementClick);
}
function updateSelectionPaletteFromStorage() {
@@ -580,6 +583,10 @@
isDragging = false;
container.removeClass(draggingClass);
boundElement.trigger('dragstop.spectrum', [ get() ]);
+
+ if (opts.fireChangeImmediately && !opts.showButtons) {
+ updateOriginalInput(true);
+ }
}
function setFromTextInput() {
@@ -588,13 +595,15 @@
if ((value === null || value === "") && allowEmpty) {
set(null);
- updateOriginalInput(true);
+ move();
+ updateOriginalInput();
}
else {
var tiny = tinycolor(value);
if (tiny.isValid()) {
set(tiny);
- updateOriginalInput(true);
+ move();
+ updateOriginalInput();
}
else {
textInput.addClass("sp-validation-error");
@@ -604,6 +613,7 @@
function toggle() {
if (visible) {
+ revert();
hide();
}
else {
@@ -628,9 +638,9 @@
hideAll();
visible = true;
- $(doc).bind("keydown.spectrum", onkeydown);
- $(doc).bind("click.spectrum", clickout);
- $(window).bind("resize.spectrum", resize);
+ $(doc).on("keydown.spectrum", onkeydown);
+ $(doc).on("click.spectrum", clickout);
+ $(window).on("resize.spectrum", resize);
replacer.addClass("sp-active");
container.removeClass("sp-hidden");
@@ -659,12 +669,19 @@
// on click.
if (isDragging) { return; }
- if (clickoutFiresChange) {
- updateOriginalInput(true);
- }
- else {
- revert();
+ if (!visible) { return; }
+
+ if (flat) { return; }
+
+ if (!opts.fireChangeImmediately || opts.showButtons) {
+ if (clickoutFiresChange) {
+ updateOriginalInput(true);
+ }
+ else {
+ revert();
+ }
}
+
hide();
}
@@ -673,9 +690,9 @@
if (!visible || flat) { return; }
visible = false;
- $(doc).unbind("keydown.spectrum", onkeydown);
- $(doc).unbind("click.spectrum", clickout);
- $(window).unbind("resize.spectrum", resize);
+ $(doc).off("keydown.spectrum", onkeydown);
+ $(doc).off("click.spectrum", clickout);
+ $(window).off("resize.spectrum", resize);
replacer.removeClass("sp-active");
container.addClass("sp-hidden");
@@ -686,6 +703,7 @@
function revert() {
set(colorOnShow, true);
+ updateOriginalInput(true);
}
function set(color, ignoreFormatChange) {
@@ -727,7 +745,7 @@
h: currentHue,
s: currentSaturation,
v: currentValue,
- a: Math.round(currentAlpha * 100) / 100
+ a: Math.round(currentAlpha * 1000) / 1000
}, { format: opts.format || currentPreferredFormat });
}
@@ -865,19 +883,27 @@
function updateOriginalInput(fireCallback) {
var color = get(),
- displayColor = '';
+ displayColor = '',
+ hasChanged = !tinycolor.equals(color, colorOnShow);
if (color) {
+ if (opts.fireChangeImmediately) {
+ colorOnShow = color;
+ }
displayColor = color.toString(currentPreferredFormat);
// Update the selection palette with the current color
addColorToSelectionPalette(color);
+
+ if (opts.showPalette) {
+ drawPalette();
+ }
}
if (isInput) {
boundElement.val(displayColor);
}
- if (fireCallback) {
+ if (fireCallback && hasChanged) {
callbacks.change(color);
boundElement.trigger('change', [ color ]);
}
@@ -916,7 +942,7 @@
function destroy() {
boundElement.show();
- offsetElement.unbind("click.spectrum touchstart.spectrum");
+ offsetElement.off("click.spectrum touchstart.spectrum");
container.remove();
replacer.remove();
spectrums[spect.id] = null;
@@ -995,17 +1021,27 @@
var viewWidth = docElem.clientWidth + $(doc).scrollLeft();
var viewHeight = docElem.clientHeight + $(doc).scrollTop();
var offset = input.offset();
- offset.top += inputHeight;
+ var offsetLeft = offset.left;
+ var offsetTop = offset.top;
- offset.left -=
- Math.min(offset.left, (offset.left + dpWidth > viewWidth) ?
- Math.abs(offset.left + dpWidth - viewWidth) : 0);
+ offsetTop += inputHeight;
- offset.top -=
- Math.min(offset.top, ((offset.top + dpHeight > viewHeight) ?
+ offsetLeft -=
+ Math.min(offsetLeft, (offsetLeft + dpWidth > viewWidth) ?
+ Math.abs(offsetLeft + dpWidth - viewWidth) : 0);
+
+ offsetTop -=
+ Math.min(offsetTop, ((offsetTop + dpHeight > viewHeight) ?
Math.abs(dpHeight + inputHeight - extraY) : extraY));
- return offset;
+ return {
+ top: offsetTop,
+ bottom: offset.bottom,
+ left: offsetLeft,
+ right: offset.right,
+ width: offset.width,
+ height: offset.height
+ };
}
/**
@@ -1098,7 +1134,7 @@
maxWidth = $(element).width();
offset = $(element).offset();
- $(doc).bind(duringDragEvents);
+ $(doc).on(duringDragEvents);
$(doc.body).addClass("sp-dragging");
move(e);
@@ -1110,7 +1146,7 @@
function stop() {
if (dragging) {
- $(doc).unbind(duringDragEvents);
+ $(doc).off(duringDragEvents);
$(doc.body).removeClass("sp-dragging");
// Wait a tick before notifying observers to allow the click event
@@ -1122,7 +1158,7 @@
dragging = false;
}
- $(element).bind("touchstart mousedown", start);
+ $(element).on("touchstart mousedown", start);
}
function throttle(func, wait, debounce) {
@@ -1185,7 +1221,7 @@
// Initializing a new instance of spectrum
return this.spectrum("destroy").each(function () {
- var options = $.extend({}, opts, $(this).data());
+ var options = $.extend({}, $(this).data(), opts);
var spect = spectrum(this, options);
$(this).data(dataID, spect.id);
});
@@ -1246,12 +1282,12 @@
}
var rgb = inputToRGB(color);
- this._originalInput = color,
- this._r = rgb.r,
- this._g = rgb.g,
- this._b = rgb.b,
- this._a = rgb.a,
- this._roundA = mathRound(100*this._a) / 100,
+ this._originalInput = color;
+ this._r = rgb.r;
+ this._g = rgb.g;
+ this._b = rgb.b;
+ this._a = rgb.a;
+ this._roundA = mathRound(1000 * this._a) / 1000;
this._format = opts.format || rgb.format;
this._gradientType = opts.gradientType;
@@ -1292,7 +1328,7 @@
},
setAlpha: function(value) {
this._a = boundAlpha(value);
- this._roundA = mathRound(100*this._a) / 100;
+ this._roundA = mathRound(1000 * this._a) / 1000;
return this;
},
toHsv: function() {