add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / dataview / IndexBar.js

/**\r
 * IndexBar is a component used to display a list of data (primarily an alphabet) which can then be used to quickly\r
 * navigate through a list (see {@link Ext.List}) of data. When a user taps on an item in the {@link Ext.IndexBar},\r
 * it will fire the {@link #index} event.\r
 *\r
 * Here is an example of the usage in a {@link Ext.List}:\r
 *\r
 *     @example phone portrait preview\r
 *     Ext.define('Contact', {\r
 *         extend: 'Ext.data.Model',\r
 *         config: {\r
 *             fields: ['firstName', 'lastName']\r
 *         }\r
 *     });\r
 *\r
 *     var store = new Ext.data.JsonStore({\r
 *        model: 'Contact',\r
 *        sorters: 'lastName',\r
 *\r
 *        grouper: {\r
 *            groupFn: function(record) {\r
 *                return record.get('lastName')[0];\r
 *            }\r
 *        },\r
 *\r
 *        data: [\r
 *            {firstName: 'Screech', lastName: 'Powers'},\r
 *            {firstName: 'Kelly',   lastName: 'Kapowski'},\r
 *            {firstName: 'Zach',    lastName: 'Morris'},\r
 *            {firstName: 'Jessie',  lastName: 'Spano'},\r
 *            {firstName: 'Lisa',    lastName: 'Turtle'},\r
 *            {firstName: 'A.C.',    lastName: 'Slater'},\r
 *            {firstName: 'Richard', lastName: 'Belding'}\r
 *        ]\r
 *     });\r
 *\r
 *     var list = new Ext.List({\r
 *        fullscreen: true,\r
 *        itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',\r
 *\r
 *        grouped     : true,\r
 *        indexBar    : true,\r
 *        store: store,\r
 *        hideOnMaskTap: false\r
 *     });\r
 *\r
*/\r
Ext.define('Ext.dataview.IndexBar', {\r
    extend: 'Ext.Component',\r
    alternateClassName: 'Ext.IndexBar',\r
\r
    /**\r
     * @event index\r
     * Fires when an item in the index bar display has been tapped.\r
     * @param {Ext.dataview.IndexBar} this The IndexBar instance\r
     * @param {String} html The HTML inside the tapped node.\r
     * @param {Ext.dom.Element} target The node on the indexbar that has been tapped.\r
     */\r
\r
    config: {\r
        baseCls: Ext.baseCSSPrefix + 'indexbar',\r
\r
        /**\r
         * @cfg {String} direction\r
         * Layout direction, can be either 'vertical' or 'horizontal'\r
         * @accessor\r
         */\r
        direction: 'vertical',\r
\r
        /**\r
         * @cfg {Array} letters\r
         * The letters to show on the index bar.\r
         * @accessor\r
         */\r
        letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],\r
\r
        ui: 'alphabet',\r
\r
        /**\r
         * @cfg {String} listPrefix\r
         * The prefix string to be used at the beginning of the list.\r
         * E.g: useful to add a "#" prefix before numbers.\r
         * @accessor\r
         */\r
        listPrefix: null\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    itemCls: Ext.baseCSSPrefix + '',\r
\r
    updateDirection: function(newDirection, oldDirection) {\r
        var baseCls = this.getBaseCls();\r
\r
        this.element.replaceCls(baseCls + '-' + oldDirection, baseCls + '-' + newDirection);\r
    },\r
\r
    getElementConfig: function() {\r
        // Blackberry Specific code for Index Bar Indicator\r
        if(Ext.theme.is.Blackberry) {\r
            return {\r
                reference: 'wrapper',\r
                classList: ['x-centered', 'x-indexbar-wrapper'],\r
                children: [\r
                    {\r
                        reference: 'indicator',\r
                        classList: ['x-indexbar-indicator'],\r
                        hidden: true,\r
                        children: [{\r
                            reference: 'indicatorInner',\r
                            classList: ['x-indexbar-indicator-inner']\r
                        }]\r
                    },\r
                    this.callParent()\r
                ]\r
            };\r
        } else {\r
            return {\r
                reference: 'wrapper',\r
                classList: ['x-centered', 'x-indexbar-wrapper'],\r
                children: [this.callParent()]\r
            };\r
        }\r
    },\r
\r
    updateLetters: function(letters) {\r
        this.innerElement.setHtml('');\r
\r
        if (letters) {\r
            var ln = letters.length,\r
                i;\r
\r
            for (i = 0; i < ln; i++) {\r
                this.innerElement.createChild({\r
                    html: letters[i]\r
                });\r
            }\r
        }\r
    },\r
\r
    updateListPrefix: function(listPrefix) {\r
        if (listPrefix && listPrefix.length) {\r
            this.innerElement.createChild({\r
                html: listPrefix\r
            }, 0);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    initialize: function() {\r
        this.callParent();\r
\r
        this.innerElement.on({\r
            touchstart: this.onTouchStart,\r
            touchend: this.onTouchEnd,\r
            dragend: this.onDragEnd,\r
            drag: this.onDrag,\r
            scope: this\r
        });\r
    },\r
\r
    onTouchStart: function(e) {\r
        e.stopPropagation();\r
        this.innerElement.addCls(this.getBaseCls() + '-pressed');\r
        this.pageBox = this.innerElement.getBox();\r
        this.onDrag(e);\r
    },\r
\r
    onTouchEnd: function(e) {\r
        this.onDragEnd();\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onDragEnd: function() {\r
        this.innerElement.removeCls(this.getBaseCls() + '-pressed');\r
\r
        // Blackberry Specific code for Index Bar Indicator\r
        if(this.indicator) {\r
            this.indicator.hide();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onDrag: function(e) {\r
        var point = Ext.util.Point.fromEvent(e),\r
            target, isValidTarget,\r
            pageBox = this.pageBox;\r
\r
        if (!pageBox) {\r
            pageBox = this.pageBox = this.el.getBox();\r
        }\r
\r
\r
        if (this.getDirection() === 'vertical') {\r
            if (point.y > pageBox.bottom || point.y < pageBox.top) {\r
                return;\r
            }\r
            target = Ext.Element.fromPoint(pageBox.left + (pageBox.width / 2), point.y);\r
            isValidTarget = target.getParent() == this.element;\r
\r
            // Blackberry Specific code for Index Bar Indicator\r
            if(this.indicator) {\r
                this.indicator.show();\r
\r
                var halfIndicatorHeight = this.indicator.getHeight() / 2,\r
                    y = point.y - this.element.getY();\r
\r
                y = Math.min(Math.max(y, halfIndicatorHeight), this.element.getHeight() - halfIndicatorHeight);\r
\r
                if (this.indicatorInner && isValidTarget) {\r
                    this.indicatorInner.setHtml(target.getHtml().toUpperCase());\r
                }\r
                this.indicator.setTop(y - (halfIndicatorHeight));\r
            }\r
        }\r
        else {\r
            if (point.x > pageBox.right || point.x < pageBox.left) {\r
                return;\r
            }\r
            target = Ext.Element.fromPoint(point.x, pageBox.top + (pageBox.height / 2));\r
            isValidTarget = target.getParent() == this.element;\r
        }\r
\r
        if (target && isValidTarget) {\r
            this.fireEvent('index', this, target.dom.innerHTML, target);\r
        }\r
    },\r
\r
    destroy: function() {\r
        var me = this,\r
            elements = Array.prototype.slice.call(me.innerElement.dom.childNodes),\r
            ln = elements.length,\r
            i = 0;\r
\r
        for (; i < ln; i++) {\r
            Ext.removeNode(elements[i]);\r
        }\r
        this.callParent();\r
    }\r
});\r