add extjs 6.0.1 sources

[extjs.git] / extjs / packages / ux / classic / src / colorpick / ColorMap.js

/**\r
 * The main colorful square for selecting color shades by dragging around the\r
 * little circle.\r
 * @private\r
 */\r
Ext.define('Ext.ux.colorpick.ColorMap', {\r
    extend     : 'Ext.container.Container',\r
    alias      : 'widget.colorpickercolormap',\r
    controller : 'colorpickercolormapcontroller',\r
\r
    requires: [\r
        'Ext.ux.colorpick.ColorMapController'\r
    ],\r
\r
    cls  : Ext.baseCSSPrefix + 'colorpicker-colormap',\r
\r
    // This is the drag "circle"; note it's 1x1 in size to allow full\r
    // travel around the color map; the inner div has the bigger image\r
    items: [{\r
        xtype     : 'component',\r
        cls       : Ext.baseCSSPrefix + 'colorpicker-colormap-draghandle-container',\r
        itemId    : 'dragHandle',\r
        width     : 1,\r
        height    : 1,\r
        draggable : true,\r
        html      : '<div class="' + Ext.baseCSSPrefix + 'colorpicker-colormap-draghandle"></div>'\r
    }],\r
\r
    listeners : {\r
        boxready : {\r
            single  : true,\r
            fn      : 'onFirstBoxReady',\r
            scope   : 'controller'\r
        },\r
        colorbindingchanged: {\r
            fn    : 'onColorBindingChanged',\r
            scope : 'controller'\r
        },\r
        huebindingchanged: {\r
            fn    : 'onHueBindingChanged',\r
            scope : 'controller'\r
        }\r
    },\r
\r
    afterRender: function () {\r
        var me  = this,\r
            src = me.mapGradientUrl,\r
            el  = me.el;\r
\r
        me.callParent();\r
\r
        if (!src) {\r
            // We do this trick to allow the Sass to calculate resource image path for\r
            // our package and pick up the proper image URL here.\r
            src = el.getStyle('background-image');\r
            src = src.substring(4, src.length - 1);  // strip off outer "url(...)"\r
\r
            // In IE8 this path will have quotes around it\r
            if (src.indexOf('"') === 0) {\r
                src = src.substring(1, src.length-1);\r
            }\r
\r
            // Then remember it on our prototype for any subsequent instances.\r
            Ext.ux.colorpick.ColorMap.prototype.mapGradientUrl = src;\r
        }\r
\r
        // Now clear that style because it will conflict with the background-color\r
        el.setStyle('background-image', 'none');\r
\r
        // Create the image with transparent PNG with black and white gradient shades;\r
        // it blends with the background color (which changes with hue selection). This\r
        // must be an IMG in order to properly stretch to fit.\r
        el = me.layout.getElementTarget(); // the el for items and html\r
        el.createChild({\r
            tag: 'img',\r
            cls: Ext.baseCSSPrefix + 'colorpicker-colormap-blender',\r
            src: src\r
        });\r
    },\r
\r
    // Called via data binding whenever selectedColor changes; fires "colorbindingchanged"\r
    setPosition: function(data) {\r
        var me         = this,\r
            dragHandle = me.down('#dragHandle');\r
\r
        // Too early in the render cycle? Skip event\r
        if (!dragHandle.dd || !dragHandle.dd.constrain) {\r
            return;\r
        }\r
\r
        // User actively dragging? Skip event\r
        if (typeof dragHandle.dd.dragEnded !== 'undefined' && !dragHandle.dd.dragEnded) {\r
            return;\r
        }\r
\r
        me.fireEvent('colorbindingchanged', data);\r
    },\r
\r
    // Called via data binding whenever selectedColor.h changes; fires "huebindingchanged" event\r
    setHue: function(hue) {\r
        var me = this;\r
\r
        // Too early in the render cycle? Skip event\r
        if (!me.getEl()) {\r
            return;\r
        }\r
\r
        me.fireEvent('huebindingchanged', hue);\r
    }\r
});\r