/** * IndexBar is a component used to display a list of data (primarily an alphabet) which * can then be used to quickly navigate through a list (see {@link Ext.List}) of data. * * When a user taps on an item in the {@link Ext.IndexBar}, it will fire the {@link #index} * event. * * Here is an example of the usage in a {@link Ext.dataview.List List}: * * ```javascript * @example({ framework: 'extjs' }) * Ext.define('Contact', { * extend: 'Ext.data.Model', * config: { * fields: ['firstName', 'lastName'] * } * }); * * var store = new Ext.data.JsonStore({ * model: 'Contact', * sorters: 'lastName', * * grouper: { * groupFn: function(record) { * return record.get('lastName')[0]; * } * }, * * data: [ * {firstName: 'Screech', lastName: 'Powers'}, * {firstName: 'Kelly', lastName: 'Kapowski'}, * {firstName: 'Zach', lastName: 'Morris'}, * {firstName: 'Jessie', lastName: 'Spano'}, * {firstName: 'Lisa', lastName: 'Turtle'}, * {firstName: 'A.C.', lastName: 'Slater'}, * {firstName: 'Richard', lastName: 'Belding'} * ] * }); * * var list = new Ext.List({ * fullscreen: true, * itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>', * * grouped: true, * indexBar: true, * store: store, * hideOnMaskTap: false * }); * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-list * onready="indexbar.readyIndexBarView" * indexBar="true" * > * </ext-list> * ``` * ```javascript * @example({framework: 'ext-web-components', tab: 2, packages: ['ext-web-components']}) * import '@sencha/ext-web-components/dist/ext-container.component'; * import '@sencha/ext-web-components/dist/ext-formpanel.component'; * import '@sencha/ext-web-components/dist/ext-spinnerfield.component'; * * export default class IndexBarComponent { * constructor() { * this.store = new Ext.data.Store({ * data: [{ * firstName: 'Screech', * lastName: 'Powers' * }, * { * firstName: 'Kelly', * lastName: 'Kapowski' * }, * { * firstName: 'Zach', * lastName: 'Morris' * }, * { * firstName: 'Jessie', * lastName: 'Spano' * }, * { * firstName: 'Lisa', * lastName: 'Turtle' * }, * { * firstName: 'A.C.', * lastName: 'Slater' * }, * { * firstName: 'Richard', * lastName: 'Belding' * }] * }) * } * * readyIndexBarView(event) { * this.indexBarView = event.detail.cmp; * this.indexBarView.setStore(this.store); * this.indexBarView.setItemTpl(`<divclass='contact'>{firstName} <strong>{lastName}</strong> * </div>`); * } * } * * window.indexbar = new IndexBarComponent(); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react' * import { ExtList } from '@sencha/ext-react'; * * export default class MyExample extends Component { * * store = new Ext.data.Store({ * data: [{ * firstName: 'Screech', * lastName: 'Powers' * }, * { * firstName: 'Kelly', * lastName: 'Kapowski' * }, * { * firstName: 'Zach', * lastName: 'Morris' * }, * { * firstName: 'Jessie', * lastName: 'Spano' * }, * { * firstName: 'Lisa', * lastName: 'Turtle' * }, * { * firstName: 'A.C.', * lastName: 'Slater' * }, * { * firstName: 'Richard', * lastName: 'Belding' * }] * }); * * render() { * return ( * <ExtList * itemTpl="<div class='contact'>{firstName} <strong>{lastName}</strong></div>" * store={this.store} * indexBar * /> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root-1', * styles: [` * `], * template: ` * <ExtList * [itemTpl]="this.itemTpl" * [store]="this.store" * [indexBar]="true" * ></ExtList> * ` * }) * export class AppComponent { * store = new Ext.data.Store({ * data: [{ * firstName: 'Screech', * lastName: 'Powers' * }, * { * firstName: 'Kelly', * lastName: 'Kapowski' * }, * { * firstName: 'Zach', * lastName: 'Morris' * }, * { * firstName: 'Jessie', * lastName: 'Spano' * }, * { * firstName: 'Lisa', * lastName: 'Turtle' * }, * { * firstName: 'A.C.', * lastName: 'Slater' * }, * { * firstName: 'Richard', * lastName: 'Belding' * }] * }); * * itemTpl = "<div class='contact'>{firstName} <strong>{lastName}</strong></div>" * } * ``` * */Ext.define('Ext.dataview.IndexBar', { extend: 'Ext.Component', alternateClassName: 'Ext.IndexBar', xtype: 'indexbar', /** * @event index * Fires when an item in the index bar display has been tapped. * @param {Ext.dataview.IndexBar} this The IndexBar instance * @param {String} html The HTML inside the tapped node. * @param {Ext.dom.Element} target The node on the indexbar that has been tapped. */ cachedConfig: { /** * @cfg {String/String[]} letters * The letters to show on the index bar. */ letters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' }, config: { /** * @cfg {Boolean/Object} animation * Set to `false` to disable animation when scrolling the list to the selected * position. This can also be an animation config object. */ animation: true, /** * @cfg {Boolean/String} autoHide * Determines if the indexbar is hidden when not actively in use. * Value of 'true' will show/hide the indexbar on Over/Out events. * Value of 'press' will show/hide the indexbar on Press/Release events. */ autoHide: false, /** * @cfg {Boolean} dynamic * Set to `true` to scroll the list as the index bar is manipulated, or `false` * to position the list when the index drag is complete. */ dynamic: false, /** * @cfg {String} listPrefix * The prefix string to be used at the beginning of the list. * E.g: useful to add a "#" prefix before numbers. */ listPrefix: null, /** * @cfg {Boolean} indicator * Determines if a indicator is used to show the current selected index */ indicator: true }, eventedConfig: { /** * @cfg {'vertical'/'horizontal'} direction * The layout direction. */ direction: 'vertical' }, top: 0, bottom: 0, left: 0, right: 0, inheritUi: true, autoHideCls: Ext.baseCSSPrefix + 'autohide', classCls: Ext.baseCSSPrefix + 'indexbar', horizontalCls: Ext.baseCSSPrefix + 'horizontal', indexedCls: Ext.baseCSSPrefix + 'indexed', indexedHorizontalCls: Ext.baseCSSPrefix + 'indexed-horizontal', indexedVerticalCls: Ext.baseCSSPrefix + 'indexed-vertical', indexedNoAutoHideCls: Ext.baseCSSPrefix + 'indexed-no-autohide', indicatorCls: Ext.baseCSSPrefix + 'indexbar-indicator', pressedCls: Ext.baseCSSPrefix + 'pressed', verticalCls: Ext.baseCSSPrefix + 'vertical', element: { reference: 'element', cls: Ext.baseCSSPrefix + 'unselectable', children: [{ reference: 'bodyElement', cls: Ext.baseCSSPrefix + 'body-el' }] }, initialize: function() { var me = this, bodyElement = me.bodyElement; me.callParent(); bodyElement.addClsOnClick(me.pressedCls); bodyElement.on({ tap: 'onTap', touchstart: 'onTouchStart', touchend: 'onTouchEnd', mouseover: 'onMouseOver', mouseout: 'onMouseOut', drag: 'onDrag', dragEnd: 'onDragEnd', scope: me }); }, getVertical: function() { return this.getDirection() === 'vertical'; }, setVertical: function(vertical) { return this.setDirection(vertical ? 'vertical' : 'horizontal'); }, //----------------------- // Protected onAdded: function(parent, instanced) { var me = this; parent.el.addCls(me.indexedCls); me.parentListeners = parent.on({ pinnedfooterheightchange: 'onPinnedFooterHeightChange', pinnedheaderheightchange: 'onPinnedHeaderHeightChange', verticaloverflowchange: 'onVerticalOverflowChange', destroyable: true, scope: me }); me.callParent([parent, instanced]); }, onRemoved: function(destroying) { var me = this, parent = me.parent; Ext.destroy(me.parentListeners); if (parent && !parent.destroying && !parent.destroyed) { parent.el.removeCls(me.indexedCls); } me.callParent([destroying]); }, //----------------------- privates: { parentListeners: null, onDrag: function(e) { this.trackMove(e, false); }, onDragEnd: function(e) { var me = this, indicator = me.getIndicator(); me.trackMove(e, true); if (indicator && me.indicator) { me.indicator.hide(); } }, onMouseOver: function() { var me = this; me.$isMouseOver = true; if (me.shouldAutoHide('over')) { me.bodyElement.show(); } }, onMouseOut: function() { var me = this; me.$isMouseOver = false; if (me.shouldAutoHide('out')) { me.bodyElement.hide(); } }, onPinnedFooterHeightChange: function(list, height) { this.setBottom(height); }, onPinnedHeaderHeightChange: function(list, height) { this.setTop(height); }, onTap: function(e) { // prevent tap on the index bar from being handled by the list as an itemtap e.stopPropagation(); }, onTouchStart: function(e) { var me = this; me.$isPressing = true; me.pageBox = me.bodyElement.getBox(); me.onDrag(e); if (me.shouldAutoHide('press')) { me.bodyElement.show(); } }, onTouchEnd: function(e) { var me = this; me.$isPressing = false; if (me.shouldAutoHide('release')) { me.bodyElement.hide(); } me.onDragEnd(e); }, onVerticalOverflowChange: function(list) { this.setRight(list.getScrollable().getScrollbarSize().width); }, scrollToClosestByIndex: function(index) { var me = this, list = me.parent, key = index.toLowerCase(), store = list.getStore(), groups = store.getGroups(), ln = groups.length, group, groupKey, i, closest, item, record; for (i = 0; i < ln; i++) { group = groups.getAt(i); groupKey = group.getGroupKey().toLowerCase(); if (groupKey >= key) { closest = group; break; } closest = group; } if (closest) { record = closest.first(); // Scrolling when infinite will already take the // header into account so we only want to get the // header when the list is not infinite. Also note, // header pinning is only applicable to infinite // lists so we don't have to worry about adjusting // for pinned headers. if (!list.getInfinite()) { item = list.itemFromRecord(record).$header; } list.ensureVisible(record, { animation: me.getAnimation(), item: item, align: { y: 'start' } }); } }, /** * * @param {'over'/'out'/'press'/'release'} trigger * @private */ shouldAutoHide: function(trigger) { var me = this, autoHide = me.getAutoHide(), ret = false; // Automatic autohide detection // Desktop (hover events) will use over/out to show/hide // Mobile (touch based) will use press/release to show/hide if (autoHide) { // Press mode only by config or automatic autohide for mobile if (autoHide === 'pressed' || !Ext.os.is.Desktop) { ret = trigger === 'press' || trigger === 'release'; // Automatic autohide for desktop } else { // Over the index bar // out of the index bar but not currently pressing down on the bar // released the mouse and not hovered over the bar ret = trigger === 'over' || (trigger === 'release' && !me.$isMouseOver) || (trigger === 'out' && !me.$isPressing); } } return ret; }, syncIndicatorPosition: function(point, target, isValidTarget) { var me = this, isUsingIndicator = me.getIndicator(), direction = me.getDirection(), renderElement = me.renderElement, bodyElement = me.bodyElement, indicator = me.indicator, indicatorInner = me.indicatorInner, first = bodyElement.getFirstChild(), last = bodyElement.getLastChild(), indexbarWidth, indexbarHeight, indicatorSpacing, firstPosition, lastPosition, indicatorSize; if (isUsingIndicator && indicator) { indicator.show(); if (direction === 'vertical') { indicatorSize = indicator.getHeight(); indexbarWidth = bodyElement.getWidth(); indicatorSpacing = bodyElement.getMargin('lr'); firstPosition = first.getY(); lastPosition = last.getY(); if (point.y < firstPosition) { target = first; } else if (point.y > lastPosition) { target = last; } if (isValidTarget) { indicatorInner.setHtml(target.getHtml().toUpperCase()); } indicator.setTop( target.getY() - renderElement.getY() - (indicatorSize / 2) + (target.getHeight() / 2) ); indicator.setRight(indicatorSpacing + indexbarWidth); } else { indicatorSize = indicator.getWidth(); indicatorSpacing = bodyElement.getMargin('tb'); indexbarHeight = bodyElement.getHeight(); firstPosition = first.getX(); lastPosition = last.getX(); if (point.x < firstPosition) { target = first; } else if (point.x > lastPosition) { target = last; } indicator.setLeft( target.getX() - renderElement.getX() - (indicatorSize / 2) + (target.getWidth() / 2) ); indicator.setBottom(indicatorSpacing + indexbarHeight); } indicatorInner.setHtml(target.getHtml().toUpperCase()); } }, trackMove: function(event, drop) { var me = this, el = me.bodyElement, pageBox = me.pageBox || (me.pageBox = me.el.getBox()), point = Ext.util.Point.fromEvent(event), target, isValidTarget; if (me.getDirection() === 'vertical') { if (point.y > pageBox.bottom || point.y < pageBox.top) { return; } target = Ext.Element.fromPoint( pageBox.left + (pageBox.width / 2), point.y); isValidTarget = target && target.getParent() === el; } else { if (point.x > pageBox.right || point.x < pageBox.left) { return; } target = Ext.Element.fromPoint( point.x, pageBox.top + (pageBox.height / 2)); isValidTarget = target && target.getParent() === el; } if (target && isValidTarget) { if (me.getIndicator()) { me.syncIndicatorPosition(point, target, isValidTarget); } if (drop || me.getDynamic()) { me.scrollToClosestByIndex(target.dom.innerHTML); } } }, //-------------------------------------------------------- // Config properties // autoHide updateAutoHide: function(autoHide) { var me = this, parentEl = me.parent.el, autoHideCls = me.autoHideCls, indexedNoAutoHideCls = me.indexedNoAutoHideCls; // get this down to our element me.bodyElement.setVisibilityMode(Ext.Element.OPACITY); if (autoHide) { // Autohide requires opacity based visibility for event detection me.addCls(autoHideCls); me.bodyElement.hide(); parentEl.removeCls(indexedNoAutoHideCls); } else { me.removeCls(autoHideCls); me.bodyElement.show(); parentEl.addCls(indexedNoAutoHideCls); } }, // direction updateDirection: function(direction) { var me = this, verticalCls = me.verticalCls, horizontalCls = me.horizontalCls, indexedVerticalCls = me.indexedVerticalCls, indexedHorizontalCls = me.indexedHorizontalCls, oldCls, newCls, oldIndexedCls, newIndexedCls; if (direction === 'vertical') { oldCls = horizontalCls; newCls = verticalCls; oldIndexedCls = indexedHorizontalCls; newIndexedCls = indexedVerticalCls; } else { oldCls = verticalCls; newCls = horizontalCls; oldIndexedCls = indexedVerticalCls; newIndexedCls = indexedHorizontalCls; } me.element.replaceCls(oldCls, newCls); me.bodyElement.replaceCls(oldCls, newCls); me.parent.element.replaceCls(oldIndexedCls, newIndexedCls); }, // indicator updateIndicator: function(indicator) { var me = this, config = { cls: me.indicatorCls }; if (indicator && indicator !== true) { config = Ext.apply(config, indicator); } if (indicator) { me.indicator = me.el.appendChild(config); me.indicatorInner = me.indicator.appendChild({ cls: me.indicatorCls + '-inner' }); me.indicator.hide(false); } else if (me.indicator) { me.indicator.destroy(); me.indicatorInner.destroy(); me.indicator = me.indicatorInner = null; } }, // letters updateLetters: function(letters) { var bodyElement = this.bodyElement, len = letters.length, i; bodyElement.setHtml(''); if (letters) { // This loop needs to work for String or String[] for (i = 0; i < len; i++) { bodyElement.createChild({ cls: Ext.baseCSSPrefix + 'indexbar-item', html: letters[i] }); } } }, // listPrefix updateListPrefix: function(listPrefix) { if (listPrefix && listPrefix.length) { this.bodyElement.createChild({ html: listPrefix }, 0); } }, // ui updateUi: function(ui, oldUi) { var me = this, list = me.parent, listElement = list.element, indexedCls = me.indexedCls; // list element needs the x-indexed-[indexBarUi] class added so that it can pad // its items to account for the presence of the index bar if (oldUi) { listElement.removeCls(oldUi, indexedCls); } if (ui) { listElement.addCls(ui, indexedCls); } me.callParent([ui, oldUi]); } } // privates});