add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / picker / Slot.js

/**\r
 * @private\r
 *\r
 * A general {@link Ext.picker.Picker} slot class.  Slots are used to organize multiple scrollable slots into\r
 * a single {@link Ext.picker.Picker}.\r
 *\r
 *     {\r
 *         name : 'limit_speed',\r
 *         title: 'Speed Limit',\r
 *         data : [\r
 *             {text: '50 KB/s', value: 50},\r
 *             {text: '100 KB/s', value: 100},\r
 *             {text: '200 KB/s', value: 200},\r
 *             {text: '300 KB/s', value: 300}\r
 *         ]\r
 *     }\r
 *\r
 * See the {@link Ext.picker.Picker} documentation on how to use slots.\r
 */\r
Ext.define('Ext.picker.Slot', {\r
    extend: 'Ext.dataview.DataView',\r
    xtype: 'pickerslot',\r
    \r
    requires: [\r
        'Ext.XTemplate',\r
        'Ext.data.Store',\r
        'Ext.Component',\r
        'Ext.data.StoreManager'\r
    ],\r
\r
    /**\r
     * @event slotpick\r
     * Fires whenever an slot is picked\r
     * @param {Ext.picker.Slot} this\r
     * @param {Mixed} value The value of the pick\r
     * @param {HTMLElement} node The node element of the pick\r
     */\r
\r
    isSlot: true,\r
\r
    config: {\r
        /**\r
         * @cfg {String} title The title to use for this slot, or `null` for no title.\r
         * @accessor\r
         */\r
        title: null,\r
\r
        /**\r
         * @private\r
         * @cfg {Boolean} showTitle\r
         * @accessor\r
         */\r
        showTitle: true,\r
\r
        /**\r
         * @private\r
         * @cfg {String} cls The main component class\r
         * @accessor\r
         */\r
        cls: Ext.baseCSSPrefix + 'picker-slot',\r
\r
        /**\r
         * @cfg {String} name (required) The name of this slot.\r
         * @accessor\r
         */\r
        name: null,\r
\r
        /**\r
         * @cfg {Number} value The value of this slot\r
         * @accessor\r
         */\r
        value: null,\r
\r
        /**\r
         * @cfg {Number} flex\r
         * @accessor\r
         * @private\r
         */\r
        flex: 1,\r
\r
        /**\r
         * @cfg {String} align The horizontal alignment of the slot's contents.\r
         *\r
         * Valid values are: "left", "center", and "right".\r
         * @accessor\r
         */\r
        align: 'left',\r
\r
        /**\r
         * @cfg {String} displayField The display field in the store.\r
         * @accessor\r
         */\r
        displayField: 'text',\r
\r
        /**\r
         * @cfg {String} valueField The value field in the store.\r
         * @accessor\r
         */\r
        valueField: 'value',\r
\r
        /**\r
         * @cfg {String} itemTpl The template to be used in this slot.\r
         * If you set this, {@link #displayField} will be ignored.\r
         */\r
        itemTpl: null,\r
\r
        /**\r
         * @cfg {Object} scrollable\r
         * @accessor\r
         * @hide\r
         */\r
        scrollable: {\r
            x: false,\r
            indicators: false,\r
            momentumEasing: {\r
                minVelocity: 2\r
            },\r
            slotSnapEasing: {\r
                duration: 100\r
            }\r
        },\r
\r
        /**\r
         * @cfg {Boolean} verticallyCenterItems\r
         * @private\r
         */\r
        verticallyCenterItems: true\r
    },\r
\r
    constructor: function() {\r
        /**\r
         * @property selectedIndex\r
         * @type Number\r
         * The current `selectedIndex` of the picker slot.\r
         * @private\r
         */\r
        this.selectedIndex = 0;\r
\r
        /**\r
         * @property picker\r
         * @type Ext.picker.Picker\r
         * A reference to the owner Picker.\r
         * @private\r
         */\r
\r
        this.callParent(arguments);\r
    },\r
\r
    /**\r
     * Sets the title for this dataview by creating element.\r
     * @param {String} title\r
     * @return {String}\r
     */\r
    applyTitle: function(title) {\r
        //check if the title isnt defined\r
        if (title) {\r
            //create a new title element\r
            title = Ext.create('Ext.Component', {\r
                cls: Ext.baseCSSPrefix + 'picker-slot-title',\r
                docked: 'top',\r
                html: title\r
            });\r
        }\r
\r
        return title;\r
    },\r
\r
    updateTitle: function(newTitle, oldTitle) {\r
        if (newTitle) {\r
            this.add(newTitle);\r
            this.setupBar();\r
        }\r
\r
        if (oldTitle) {\r
            this.remove(oldTitle);\r
        }\r
    },\r
\r
    updateShowTitle: function(showTitle) {\r
        var title = this.getTitle(),\r
            mode = showTitle ? 'show' : 'hide';\r
        if (title) {\r
            title.on(mode, this.setupBar, this, { single: true, delay: 50 });\r
            title[showTitle ? 'show' : 'hide']();\r
        }\r
    },\r
\r
    updateDisplayField: function(newDisplayField) {\r
        if (!this.config.itemTpl) {\r
            this.setItemTpl('<div class="' + Ext.baseCSSPrefix + 'picker-item {cls} <tpl if="extra">' + Ext.baseCSSPrefix + 'picker-invalid</tpl>">{' + newDisplayField + '}</div>');\r
        }\r
    },\r
\r
    /**\r
     * Updates the {@link #align} configuration\r
     */\r
    updateAlign: function(newAlign, oldAlign) {\r
        var element = this.element;\r
        element.addCls(Ext.baseCSSPrefix + 'picker-' + newAlign);\r
        element.removeCls(Ext.baseCSSPrefix + 'picker-' + oldAlign);\r
    },\r
\r
    /**\r
     * Looks at the {@link #data} configuration and turns it into {@link #store}.\r
     * @param {Object} data\r
     * @return {Object}\r
     */\r
    applyData: function(data) {\r
        var parsedData = [],\r
            ln = data && data.length,\r
            i, item, obj;\r
\r
        if (data && Ext.isArray(data) && ln) {\r
            for (i = 0; i < ln; i++) {\r
                item = data[i];\r
                obj = {};\r
                if (Ext.isArray(item)) {\r
                    obj[this.valueField] = item[0];\r
                    obj[this.displayField] = item[1];\r
                }\r
                else if (Ext.isString(item)) {\r
                    obj[this.valueField] = item;\r
                    obj[this.displayField] = item;\r
                }\r
                else if (Ext.isObject(item)) {\r
                    obj = item;\r
                }\r
                parsedData.push(obj);\r
            }\r
        }\r
\r
        return data;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    initialize: function() {\r
        this.callParent();\r
\r
        var scroller = this.getScrollable();\r
\r
        this.on({\r
            scope: this,\r
            painted: 'onPainted',\r
            itemtap: 'doItemTap'\r
        });\r
\r
        this.element.on({\r
            scope: this,\r
            touchstart: 'onTouchStart',\r
            touchend: 'onTouchEnd'\r
        });\r
\r
        scroller.on({\r
            scope: this,\r
            scrollend: 'onScrollEnd'\r
        });\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onPainted: function() {\r
        this.setupBar();\r
    },\r
\r
    /**\r
     * Returns an instance of the owner picker.\r
     * @return {Object}\r
     * @private\r
     */\r
    getPicker: function() {\r
        if (!this.picker) {\r
            this.picker = this.getParent();\r
        }\r
\r
        return this.picker;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    setupBar: function() {\r
        if (!this.rendered) {\r
            //if the component isnt rendered yet, there is no point in calculating the padding just eyt\r
            return;\r
        }\r
\r
        var element = this.element,\r
            containerElement = this.container.element,\r
            picker = this.getPicker(),\r
            bar = picker.bar,\r
            value = this.getValue(),\r
            showTitle = this.getShowTitle(),\r
            title = this.getTitle(),\r
            scroller = this.getScrollable(),\r
            titleHeight = 0,\r
            barHeight, padding;\r
\r
        barHeight = bar.dom.getBoundingClientRect().height;\r
\r
        if (showTitle && title) {\r
            titleHeight = title.element.getHeight();\r
        }\r
\r
        padding = Math.ceil((element.getHeight() - titleHeight - barHeight) / 2);\r
\r
        if (this.getVerticallyCenterItems()) {\r
            containerElement.setStyle({\r
                padding: padding + 'px 0 ' + padding + 'px'\r
            });\r
        }\r
\r
        scroller.refresh();\r
        scroller.setSlotSnapSize(barHeight);\r
        this.setValue(value);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    doItemTap: function(list, index, item, e) {\r
        var me = this;\r
        me.selectedIndex = index;\r
        me.selectedNode = item;\r
        me.scrollToItem(item, true);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    scrollToItem: function(item, animated) {\r
        var y = item.getY(),\r
            parentEl = item.parent(),\r
            parentY = parentEl.getY(),\r
            scroller = this.getScrollable(),\r
            difference;\r
\r
        difference = y - parentY;\r
\r
        scroller.scrollTo(0, difference, animated);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onTouchStart: function() {\r
        this.element.addCls(Ext.baseCSSPrefix + 'scrolling');\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onTouchEnd: function() {\r
        this.element.removeCls(Ext.baseCSSPrefix + 'scrolling');\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onScrollEnd: function(scroller, x, y) {\r
        var me = this,\r
            index = Math.round(y / me.picker.bar.dom.getBoundingClientRect().height),\r
            viewItems = me.getViewItems(),\r
            item = viewItems[index];\r
\r
        if (item) {\r
            me.selectedIndex = index;\r
            me.selectedNode = item;\r
\r
            me.fireEvent('slotpick', me, me.getValue(), me.selectedNode);\r
        }\r
    },\r
\r
    /**\r
     * Returns the value of this slot\r
     * @private\r
     */\r
    getValue: function(useDom) {\r
        var store = this.getStore(),\r
            record, value;\r
\r
        if (!store) {\r
            return;\r
        }\r
\r
        if (!this.rendered || !useDom) {\r
            return this._value;\r
        }\r
\r
        //if the value is ever false, that means we do not want to return anything\r
        if (this._value === false) {\r
            return null;\r
        }\r
\r
        record = store.getAt(this.selectedIndex);\r
\r
        value = record ? record.get(this.getValueField()) : null;\r
\r
        return value;\r
    },\r
\r
    /**\r
     * Sets the value of this slot\r
     * @private\r
     */\r
    setValue: function(value) {\r
        return this.doSetValue(value);\r
    },\r
\r
    /**\r
     * Sets the value of this slot\r
     * @private\r
     */\r
    setValueAnimated: function(value) {\r
        return this.doSetValue(value, true);\r
    },\r
\r
    doSetValue: function(value, animated) {\r
        if (!this.rendered) {\r
            //we don't want to call this until the slot has been rendered\r
            this._value = value;\r
            return;\r
        }\r
\r
        var store = this.getStore(),\r
            viewItems = this.getViewItems(),\r
            valueField = this.getValueField(),\r
            index, item;\r
\r
        index = store.findExact(valueField, value);\r
\r
        if (index == -1) {\r
            index = 0;\r
        }\r
\r
        item = Ext.get(viewItems[index]);\r
\r
        this.selectedIndex = index;\r
        if (item) {\r
            this.scrollToItem(item, (animated) ? {\r
                duration: 100\r
            } : false);\r
            this.select(this.selectedIndex);\r
        }\r
\r
        this._value = value;\r
    }\r
});\r