/** * A basic component that changes background color, with considerations for opacity * support (checkered background image and IE8 support). */Ext.define('Ext.ux.colorpick.ColorPreview', { extend: 'Ext.Component', alias: 'widget.colorpickercolorpreview', requires: [ 'Ext.util.Format', 'Ext.XTemplate' ], // hack to solve issue with IE, when applying a filter the click listener is not being fired. style: 'position: relative', /* eslint-disable max-len */ html: '<div class="' + Ext.baseCSSPrefix + 'colorpreview-filter" style="height:100%; width:100%; position: absolute;"></div>' + '<a class="btn" style="height:100%; width:100%; position: absolute;"></a>', /* eslint-enable max-len */ // eo hack cls: Ext.baseCSSPrefix + 'colorpreview', height: 256, onRender: function() { var me = this; me.callParent(arguments); me.mon(me.el.down('.btn'), 'click', me.onClick, me); }, onClick: function() { this.fireEvent('click', this, this.color); }, // Called via databinding - update background color whenever ViewModel changes setColor: function(color) { var me = this, el = me.getEl(); // Too early in rendering cycle; skip if (!el) { return; } me.color = color; me.applyBgStyle(color); }, bgStyleTpl: Ext.create( 'Ext.XTemplate', Ext.isIE && Ext.ieVersion < 10 // eslint-disable-next-line max-len ? 'filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=\'#{hexAlpha}{hex}\', endColorstr=\'#{hexAlpha}{hex}\');' /* IE6-9 */ : 'background: {rgba};' ), applyBgStyle: function(color) { var me = this, colorUtils = Ext.ux.colorpick.ColorUtils, filterSelector = '.' + Ext.baseCSSPrefix + 'colorpreview-filter', el = me.getEl().down(filterSelector), hex, alpha, rgba, bgStyle; hex = colorUtils.rgb2hex(color.r, color.g, color.b); alpha = Ext.util.Format.hex(Math.floor(color.a * 255), 2); rgba = colorUtils.getRGBAString(color); bgStyle = this.bgStyleTpl.apply({ hex: hex, hexAlpha: alpha, rgba: rgba }); el.applyStyles(bgStyle); }});