/** * The main colorful square for selecting color shades by dragging around the * little circle. * @private */Ext.define('Ext.ux.colorpick.ColorMap', { extend: 'Ext.container.Container', alias: 'widget.colorpickercolormap', controller: 'colorpickercolormapcontroller', requires: [ 'Ext.ux.colorpick.ColorMapController' ], cls: Ext.baseCSSPrefix + 'colorpicker-colormap', // This is the drag "circle"; note it's 1x1 in size to allow full // travel around the color map; the inner div has the bigger image items: [{ xtype: 'component', cls: Ext.baseCSSPrefix + 'colorpicker-colormap-draghandle-container', itemId: 'dragHandle', width: 1, height: 1, style: { position: 'relative' }, html: '<div class="' + Ext.baseCSSPrefix + 'colorpicker-colormap-draghandle"></div>' }], listeners: { colorbindingchanged: { fn: 'onColorBindingChanged', scope: 'controller' }, huebindingchanged: { fn: 'onHueBindingChanged', scope: 'controller' } }, afterRender: function() { var me = this, src = me.mapGradientUrl, 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.ColorMap.prototype.mapGradientUrl = src; } // Now clear that style because it will conflict with the background-color el.setStyle('background-image', 'none'); // Create the image with transparent PNG with black and white gradient shades; // it blends with the background color (which changes with hue selection). This // must be an IMG in order to properly stretch to fit. el = me.bodyElement; el.createChild({ tag: 'img', cls: Ext.baseCSSPrefix + 'colorpicker-colormap-blender', src: src }); }, // Called via data binding whenever selectedColor changes; fires "colorbindingchanged" setPosition: function(data) { var me = this, dragHandle = me.down('#dragHandle'); // User actively dragging? Skip event if (dragHandle.isDragging) { return; } this.fireEvent('colorbindingchanged', data); }, // Called via data binding whenever selectedColor.h changes; fires "huebindingchanged" event setHue: function(hue) { var me = this; me.fireEvent('huebindingchanged', hue); }});