/** * Used for "Hue" slider. * @private */Ext.define('Ext.ux.colorpick.SliderHue', { extend : 'Ext.ux.colorpick.Slider', alias : 'widget.colorpickersliderhue', cls : Ext.baseCSSPrefix + 'colorpicker-hue', afterRender: function () { var me = this, src = me.gradientUrl, el = me.el; me.callParent(); if (!src) { // We do this trick to allow the Sass to calculate resource image path for // our package and pick up the proper image URL here. src = el.getStyle('background-image'); src = src.substring(4, src.length - 1); // strip off outer "url(...)" // In IE8 this path will have quotes around it if (src.indexOf('"') === 0) { src = src.substring(1, src.length-1); } // Then remember it on our prototype for any subsequent instances. Ext.ux.colorpick.SliderHue.prototype.gradientUrl = src; } // Now clear that style because it will conflict with the background-color el.setStyle('background-image', 'none'); // Create the image with the background PNG el = me.getDragContainer().layout.getElementTarget(); // the el for items and html el.createChild({ tag: 'img', cls: Ext.baseCSSPrefix + 'colorpicker-hue-gradient', src: src }); }, // Called via data binding whenever selectedColor.h changes; hue param is 0-1 setHue: function(hue) { var me = this, container = me.getDragContainer(), dragHandle = me.getDragHandle(), containerEl = container.getEl(), containerHeight = containerEl.getHeight(), el, top; // Too early in the render cycle? Skip event if (!dragHandle.dd || !dragHandle.dd.constrain) { return; } // User actively dragging? Skip event if (typeof dragHandle.dd.dragEnded !== 'undefined' && !dragHandle.dd.dragEnded) { return; } // y-axis of slider with value 0-1 translates to reverse of "hue" top = containerHeight * (1-hue); // Position dragger el = dragHandle.getEl(); el.setStyle({ top : top + 'px' }); }});