/** * Used for "Saturation" slider * @private */Ext.define('Ext.ux.colorpick.SliderSaturation', { extend: 'Ext.ux.colorpick.Slider', alias: 'widget.colorpickerslidersaturation', cls: Ext.baseCSSPrefix + 'colorpicker-saturation', gradientStyleTpl: Ext.create('Ext.XTemplate', /* FF3.6+ */ 'background: -mox-linear-gradient(top,#{hex} 0%, #ffffff 100%);' + /* Chrome10+,Safari5.1+ */ 'background: -webkit-linear-gradient(top, #{hex} 0%,#ffffff 100%);' + /* Opera 11.10+ */ 'background: -o-linear-gradient(top, #{hex} 0%,#ffffff 100%);' + /* IE10+ */ 'background: -ms-linear-gradient(top, #{hex} 0%,#ffffff 100%);' + /* W3C */ 'background: linear-gradient(to bottom, #{hex} 0%,#ffffff 100%);' ), // Called via data binding whenever selectedColor.s changes; saturation param is 0-100 setSaturation: function(saturation) { var me = this, container = me.getDragContainer(), dragHandle = me.getDragHandle(), containerEl = container.bodyElement, containerHeight = containerEl.getHeight(), yRatio, top; saturation = Math.max(saturation, 0); saturation = Math.min(saturation, 100); // User actively dragging? Skip event if (dragHandle.isDragging) { return; } // y-axis of slider with value 0-1 translates to reverse of "saturation" yRatio = 1 - (saturation / 100); top = containerHeight * yRatio; // Position dragger dragHandle.element.setStyle({ top: top + 'px' }); }, // Called via data binding whenever selectedColor.h changes; hue param is 0-1 setHue: function(hue) { var me = this, container = me.getDragContainer(), rgb, hex; // Determine HEX for new hue and set as background based on template rgb = Ext.ux.colorpick.ColorUtils.hsv2rgb(hue, 1, 1); hex = Ext.ux.colorpick.ColorUtils.rgb2hex(rgb.r, rgb.g, rgb.b); container.element.applyStyles(me.gradientStyleTpl.apply({ hex: hex })); }});