add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / view / NavigationModel.js

/**\r
 * @class Ext.view.NavigationModel\r
 * @private\r
 * This class listens for key events fired from a {@link Ext.view.View DataView}, and moves the currently focused item\r
 * by adding the class {@link #focusCls}.\r
 */\r
Ext.define('Ext.view.NavigationModel', {\r
    mixins: [\r
        'Ext.util.Observable',\r
        'Ext.mixin.Factoryable',\r
        'Ext.util.StoreHolder'\r
    ],\r
\r
    alias: 'view.navigation.default',\r
\r
    config: {\r
        store: null\r
    },\r
\r
    /**\r
     * @event navigate Fired when a key has been used to navigate around the view.\r
     * @param {Object} event\r
     * @param {Ext.event.Event} keyEvent The key event which caused the navigation.\r
     * @param {Number} event.previousRecordIndex The previously focused record index.\r
     * @param {Ext.data.Model} event.previousRecord The previously focused record.\r
     * @param {HTMLElement} event.previousItem The previously focused view item.\r
     * @param {Number} event.recordIndex The newly focused record index.\r
     * @param {Ext.data.Model} event.record the newly focused record.\r
     * @param {HTMLElement} event.item the newly focused view item.\r
     */\r
\r
    /**\r
     * @private\r
     */\r
    focusCls: Ext.baseCSSPrefix + 'view-item-focused',\r
\r
    constructor: function() {\r
        this.mixins.observable.constructor.call(this);\r
    },\r
\r
    bindComponent: function(view) {\r
        if (this.view !== view) {\r
            this.view = view;\r
            this.bindView(view);\r
        }\r
    },\r
\r
    bindView: function(view) {\r
        var me = this,\r
            dataSource = view.dataSource,\r
            listeners;\r
\r
\r
        me.initKeyNav(view);\r
        if (!dataSource.isEmptyStore) {\r
            me.setStore(dataSource);\r
        }\r
        listeners = me.getViewListeners();\r
        listeners.destroyable = true;\r
        me.viewListeners = me.viewListeners || [];\r
        me.viewListeners.push(view.on(listeners));\r
    },\r
\r
    updateStore: function(store) {\r
        this.mixins.storeholder.bindStore.apply(this, [store]);\r
    },\r
\r
    getViewListeners: function() {\r
        var me = this;\r
\r
        return {\r
            containermousedown: me.onContainerMouseDown,\r
            itemmousedown: me.onItemMouseDown,\r
\r
            // We focus on click if the mousedown handler did not focus because it was a translated "touchstart" event.\r
            itemclick: me.onItemClick,\r
            itemcontextmenu: me.onItemMouseDown,\r
            scope: me\r
        };\r
    },\r
\r
    initKeyNav: function(view) {\r
        var me = this;\r
\r
        // Drive the KeyNav off the View's itemkeydown event so that beforeitemkeydown listeners may veto.\r
        // By default KeyNav uses defaultEventAction: 'stopEvent', and this is required for movement keys\r
        // which by default affect scrolling.\r
        me.keyNav = new Ext.util.KeyNav({\r
            target: view,\r
            ignoreInputFields: true,\r
            eventName: 'itemkeydown',\r
            defaultEventAction: 'stopEvent',\r
            processEvent: me.processViewEvent,\r
            up: me.onKeyUp,\r
            down: me.onKeyDown,\r
            right: me.onKeyRight,\r
            left: me.onKeyLeft,\r
            pageDown: me.onKeyPageDown,\r
            pageUp: me.onKeyPageUp,\r
            home: me.onKeyHome,\r
            end: me.onKeyEnd,\r
            space: me.onKeySpace,\r
            enter: me.onKeyEnter,\r
            A: {\r
                ctrl: true,\r
                // Need a separate function because we don't want the key\r
                // events passed on to selectAll (causes event suppression).\r
                handler: me.onSelectAllKeyPress\r
            },\r
            scope: me\r
        });\r
    },\r
\r
    processViewEvent: function(view, record, node, index, event) {\r
        return event;\r
    },\r
\r
    addKeyBindings: function(binding) {\r
        this.keyNav.addBindings(binding);\r
    },\r
\r
    enable: function() {\r
        this.keyNav.enable();\r
        this.disabled = false;\r
    },\r
\r
    disable: function() {\r
        this.keyNav.disable();\r
        this.disabled = true;\r
    },\r
\r
    onContainerMouseDown: function(view, mousedownEvent) {\r
        // If the mousedown in the view element is NOT inside the client region,\r
        // that is, it was on a scrollbar, then prevent default.\r
        //\r
        // Mousedowning on a scrollbar will focus the View.\r
        // If they have scrolled to the bottom, then onFocusEnter will\r
        // try to focus the lastFocused or first item. This is undesirable.\r
        // So on mousedown outside of view client area, prevent the default focus behaviour.\r
        if (mousedownEvent.pointerType === 'mouse' && Ext.getScrollbarSize().width) {\r
            if (!view.el.getClientRegion().contains(mousedownEvent.getPoint())) {\r
                mousedownEvent.preventDefault();\r
            }\r
        }\r
    },\r
\r
    onItemMouseDown: function(view, record, item, index, mousedownEvent) {\r
        // If the event is a touchstart, leave it until the click to focus.\r
        if (mousedownEvent.pointerType !== 'touch') {\r
            this.setPosition(index);\r
        }\r
    },\r
\r
    onItemClick: function(view, record, item, index, clickEvent) {\r
        // If the mousedown that initiated the click has navigated us to the correct spot, just fire the event\r
        if (this.record === record) {\r
            this.fireNavigateEvent(clickEvent);\r
        } else {\r
            this.setPosition(index, clickEvent);\r
        }\r
    },\r
\r
    setPosition: function(recordIndex, keyEvent, suppressEvent, preventNavigation) {\r
        var me = this,\r
            view = me.view,\r
            selModel = view.getSelectionModel(),\r
            dataSource = view.dataSource,\r
            newRecord,\r
            newRecordIndex;\r
\r
        if (recordIndex == null || !view.all.getCount()) {\r
            me.record = me.recordIndex = null;\r
        } else {\r
            if (typeof recordIndex === 'number') {\r
                newRecordIndex = Math.max(Math.min(recordIndex, dataSource.getCount() - 1), 0);\r
                newRecord = dataSource.getAt(recordIndex);\r
            }\r
            // row is a Record\r
            else if (recordIndex.isEntity) {\r
                newRecord = dataSource.getById(recordIndex.id);\r
                newRecordIndex = dataSource.indexOf(newRecord);\r
\r
                // Previous record is no longer present; revert to first.\r
                if (newRecordIndex === -1) {\r
                    newRecord = dataSource.getAt(0);\r
                    newRecordIndex = 0;\r
                }\r
            }\r
            // row is a view item\r
            else if (recordIndex.tagName) {\r
                newRecord = view.getRecord(recordIndex);\r
                newRecordIndex = dataSource.indexOf(newRecord);\r
            }\r
            else {\r
                newRecord = newRecordIndex = null;\r
            }\r
        }\r
\r
        // No change; just ensure the correct item is focused and return early.\r
        // Do not push current position into previous position, do not fire events.\r
        // We must check record instances, not indices because of store reloads (combobox remote filtering).\r
        // If there's a new record, focus it. Note that the index may be different even though\r
        // the record is the same (filtering, sorting)\r
        if (newRecord === me.record) {\r
            me.recordIndex = newRecordIndex;\r
            return me.focusPosition(newRecordIndex);\r
        }\r
\r
        if (me.item) {\r
            me.item.removeCls(me.focusCls);\r
        }\r
\r
        // Track the last position.\r
        // Used by SelectionModels as the navigation "from" position.\r
        me.previousRecordIndex = me.recordIndex;\r
        me.previousRecord = me.record;\r
        me.previousItem = me.item;\r
\r
        // Update our position\r
        me.recordIndex = newRecordIndex;\r
        me.record      = newRecord;\r
\r
        // Prevent navigation if focus has not moved\r
        preventNavigation = preventNavigation || me.record === me.lastFocused;\r
\r
        // Maintain lastFocused, so that on non-specific focus of the View, we can focus the correct descendant.\r
        if (newRecord) {\r
            me.focusPosition(me.recordIndex);\r
        } else {\r
            me.item = null;\r
        }\r
\r
        if (!suppressEvent) {\r
            selModel.fireEvent('focuschange', selModel, me.previousRecord, me.record);\r
        }\r
\r
        // If we have moved, fire an event\r
        if (!preventNavigation && keyEvent) {\r
            me.fireNavigateEvent(keyEvent);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Focuses the currently active position.\r
     * This is used on view refresh and on replace.\r
     */\r
    focusPosition: function(recordIndex) {\r
        var me = this;\r
\r
        if (recordIndex != null && recordIndex !== -1) {\r
            if (recordIndex.isEntity) {\r
                recordIndex = me.view.dataSource.indexOf(recordIndex);\r
            }\r
            me.item = me.view.all.item(recordIndex);\r
            if (me.item) {\r
                me.lastFocused = me.record;\r
                me.lastFocusedIndex = me.recordIndex;\r
                me.focusItem(me.item);\r
            } else {\r
                me.record = null;\r
            }\r
        } else {\r
            me.item = null;\r
        }\r
    },\r
\r
    /**\r
     * @template\r
     * @protected\r
     * Called to focus an item in the client {@link Ext.view.View DataView}.\r
     * The default implementation adds the {@link #focusCls} to the passed item focuses it.\r
     * Subclasses may choose to keep focus in another target.\r
     *\r
     * For example {@link Ext.view.BoundListKeyNav} maintains focus in the input field.\r
     * @param {Ext.dom.Element} item\r
     * @return {undefined}\r
     */\r
    focusItem: function(item) {\r
        item.addCls(this.focusCls);\r
        item.focus();\r
    },\r
\r
    getPosition: function() {\r
        return this.record ? this.recordIndex : null;\r
    },\r
\r
    getRecordIndex: function() {\r
        return this.recordIndex;\r
    },\r
\r
    getItem: function() {\r
        return this.item;\r
    },\r
\r
    getRecord: function() {\r
        return this.record;\r
    },\r
\r
    getLastFocused: function() {\r
        // No longer there. The caller must fall back to a default.\r
        if (this.view.dataSource.indexOf(this.lastFocused) === -1) {\r
            return null;\r
        }\r
        return this.lastFocused;\r
    },\r
\r
    onKeyUp: function(keyEvent) {\r
        var newPosition = this.recordIndex - 1;\r
        if (newPosition < 0) {\r
            newPosition = this.view.all.getCount() - 1;\r
        }\r
        this.setPosition(newPosition, keyEvent);\r
    },\r
\r
    onKeyDown: function(keyEvent) {\r
        var newPosition = this.recordIndex + 1;\r
        if (newPosition > this.view.all.getCount() - 1) {\r
            newPosition = 0;\r
        }\r
        this.setPosition(newPosition, keyEvent);\r
    },\r
    \r
    onKeyRight: function(keyEvent) {\r
        var newPosition = this.recordIndex + 1;\r
        if (newPosition > this.view.all.getCount() - 1) {\r
            newPosition = 0;\r
        }\r
        this.setPosition(newPosition, keyEvent);\r
    },\r
    \r
    onKeyLeft: function(keyEvent) {\r
        var newPosition = this.recordIndex - 1;\r
        if (newPosition < 0) {\r
            newPosition = this.view.all.getCount() - 1;\r
        }\r
        this.setPosition(newPosition, keyEvent);\r
    },\r
    \r
    onKeyPageDown: Ext.emptyFn,\r
    \r
    onKeyPageUp: Ext.emptyFn,\r
    \r
    onKeyHome: function(keyEvent) {\r
        this.setPosition(0, keyEvent);\r
    },\r
    \r
    onKeyEnd: function(keyEvent) {\r
        this.setPosition(this.view.all.getCount() - 1, keyEvent);\r
    },\r
   \r
    onKeySpace: function(keyEvent) {\r
        this.fireNavigateEvent(keyEvent);\r
    },\r
\r
    // ENTER emulates an itemclick event at the View level\r
    onKeyEnter: function(keyEvent) {\r
        // Stop the keydown event so that an ENTER keyup does not get delivered to\r
        // any element which focus is transferred to in a click handler.\r
        keyEvent.stopEvent();\r
        keyEvent.view.fireEvent('itemclick', keyEvent.view, keyEvent.record, keyEvent.item, keyEvent.recordIndex, keyEvent);\r
    },\r
\r
    onSelectAllKeyPress: function(keyEvent) {\r
        this.fireNavigateEvent(keyEvent);\r
    },\r
\r
    fireNavigateEvent: function(keyEvent) {\r
        var me = this;\r
\r
        me.fireEvent('navigate', {\r
            navigationModel: me,\r
            keyEvent: keyEvent,\r
            previousRecordIndex: me.previousRecordIndex,\r
            previousRecord: me.previousRecord,\r
            previousItem: me.previousItem, \r
            recordIndex: me.recordIndex,\r
            record: me.record,\r
            item: me.item\r
        });\r
    },\r
\r
    destroy: function() {\r
        var me = this;\r
        \r
        me.setStore(null);\r
        Ext.destroy(me.viewListeners, me.keyNav);\r
        me.keyNav = me.viewListeners = me.dataSource = me.lastFocused = null;\r
        \r
        me.callParent();\r
    }\r
});\r