bm-core-ui 2.7.0 → 2.8.3

package/build/BMView/BMMenu.js

@@ -1,10 +1,12 @@
 // @ts-check
 
-import {YES, NO, BMCopyProperties} from '../Core/BMCoreUI'
+import {YES, NO, BMCopyProperties, BMNumberByConstrainingNumberToBounds} from '../Core/BMCoreUI'
 import {BMPoint, BMPointMake} from '../Core/BMPoint'
 import {BMHook, __BMVelocityAnimate} from '../Core/BMAnimationContext'
 import 'velocity-animate'
 import { BMRectMakeWithNodeFrame } from '../Core/BMRect';
+import { BMView } from './BMView_v2.5';
+import { BMKeyboardShortcut } from '../BMWindow/BMKeyboardShortcut';
 
 /**
  * The standard spacing between the menu and the node it is created from.
@@ -218,6 +220,40 @@ BMMenu.prototype = {
      */
     _sourceNodeDisplacement: undefined, // <Number, nullable>
 
+    /**
+     * The index of the currently highlighted menu item.
+     */
+    _highlightedIndex: -1, // <Number>
+
+    /**
+     * The DOM node that was focused when this alert was opened.
+     */
+    _previouslyActiveNode: undefined, // DOMNode
+
+    get highlightedIndex() {
+        return this._highlightedIndex;
+    },
+
+    set highlightedIndex(index) {
+        if (index != this._highlightedIndex) {
+            this._highlightedIndex = index;
+
+            if (this._node) {
+                // Remove the currently highlighted item's style
+                const highlightedItem = this._node.querySelector('.BMMenuItemHighlighted');
+                if (highlightedItem) {
+                    highlightedItem.classList.remove('BMMenuItemHighlighted');
+                }
+
+                // And add it to the newly highlighted item
+                const nextHighlightedItem = this._node.children[index];
+                if (nextHighlightedItem) {
+                    nextHighlightedItem.classList.add('BMMenuItemHighlighted');
+                }
+            }
+        }
+    },
+
     /**
      * Initializes this menu with the specified items.
      * The menu will be hidden by default; the method showAtPoint(_) should be used to make the menu visible.
@@ -241,6 +277,35 @@ BMMenu.prototype = {
         menuNode.className = this._CSSClass ? `BMMenu ${this._CSSClass}` : 'BMMenu';
         this._node = menuNode;
 
+        this._highlightedIndex = -1;
+
+        menuNode.tabIndex = -1;
+
+        // Register the keyboard shortcuts to be used while the menu is visible
+        const upArrow = BMKeyboardShortcut.keyboardShortcutWithKeyCode('ArrowUp', {modifiers: [], target: this, action: 'arrowUpPressedWithEvent'});
+        upArrow.preventsDefault = YES;
+        BMView.registerKeyboardShortcut(upArrow, {forNode: menuNode});
+
+        const downArrow = BMKeyboardShortcut.keyboardShortcutWithKeyCode('ArrowDown', {modifiers: [], target: this, action: 'arrowDownPressedWithEvent'});
+        downArrow.preventsDefault = YES;
+        BMView.registerKeyboardShortcut(downArrow, {forNode: menuNode});
+
+        const returnShortcut = BMKeyboardShortcut.keyboardShortcutWithKeyCode('Enter', {modifiers: [], target: this, action: 'returnPressedWithEvent'});
+        returnShortcut.preventsDefault = YES;
+        BMView.registerKeyboardShortcut(returnShortcut, {forNode: menuNode});
+
+        const spacebar = BMKeyboardShortcut.keyboardShortcutWithKeyCode('Space', {modifiers: [], target: this, action: 'returnPressedWithEvent'});
+        spacebar.preventsDefault = YES;
+        BMView.registerKeyboardShortcut(spacebar, {forNode: menuNode});
+
+        const tab = BMKeyboardShortcut.keyboardShortcutWithKeyCode('Tab', {modifiers: [], target: this, action: 'tabPressedWithEvent'});
+        tab.preventsDefault = YES;
+        BMView.registerKeyboardShortcut(tab, {forNode: menuNode});
+
+        const escape = BMKeyboardShortcut.keyboardShortcutWithKeyCode('Escape', {modifiers: [], target: this, action: 'escapePressedWithEvent'});
+        escape.preventsDefault = YES;
+        BMView.registerKeyboardShortcut(escape, {forNode: menuNode});
+
         // The overlay which intercepts clicks outside of the menu
         const menuContainer = document.createElement('div');
         menuContainer.className = 'BMMenuContainer';
@@ -254,6 +319,10 @@ BMMenu.prototype = {
 
         menuNode.addEventListener('click', event => event.preventDefault());
 
+        menuNode.addEventListener('mouseleave', event => {
+            this.highlightedIndex = -1;
+        });
+
         menuContainer.addEventListener('click', event => {
             this.closeAnimated(YES);
             event.preventDefault();
@@ -271,12 +340,13 @@ BMMenu.prototype = {
     _renderMenuItems() {
         // Create and append the items for this menu
         const iconSize = this._iconSize;
-        for (const item of this._items) {
+
+        this._items.forEach((item, index) => {
             if (item.name.startsWith('---')) {
                 const itemNode = document.createElement('div');
                 itemNode.className = 'BMMenuDivider';
                 this._node.appendChild(itemNode);
-                continue;
+                return;
             }
 
             let itemNode = document.createElement('div');
@@ -298,6 +368,8 @@ BMMenu.prototype = {
             itemNode.appendChild(itemText);
     
             itemNode.addEventListener('click', event => {
+                itemNode.classList.add('BMMenuItemActive');
+
                 if (item.action) item.action(item);
 
                 if (this.delegate && this.delegate.menuDidSelectItem) {
@@ -305,8 +377,14 @@ BMMenu.prototype = {
                 }
             });
 
+            itemNode.addEventListener('mouseenter', event => {
+                this.highlightedIndex = index;
+            })
+
+            itemNode.addEventListener
+
             this._node.appendChild(itemNode);
-        }
+        });
     },
 
     /**
@@ -408,6 +486,9 @@ BMMenu.prototype = {
             delay += 16;
         }
 
+        this._previouslyActiveNode = document.activeElement;
+        menuNode.focus();
+
         // Animate the source node shadow
         await __BMVelocityAnimate(this._sourceNodeShadow, {translateY: displacement + 'px'}, {duration: duration, easing: easing});
 
@@ -484,6 +565,9 @@ BMMenu.prototype = {
             delay += 16;
         }
 
+        this._previouslyActiveNode = document.activeElement;
+        menuNode.focus();
+
         return menuNode;
     },
 
@@ -500,10 +584,14 @@ BMMenu.prototype = {
             this.delegate.menuWillClose(this);
         }
 
+        if (this._previouslyActiveNode) {
+            this._previouslyActiveNode.focus();
+        }
+
         this._node.style.pointerEvents = 'none'; 
         this._containerNode.style.pointerEvents = 'none';
         let delay = this._node.childNodes.length * 16 + 100 - 200;
-        delay = (delay < 0 ? 0 : delay);
+        delay = (delay < 0 ? 0 : delay) + 200;
 
         const sourceNodeShadow = this._sourceNodeShadow;
         const containerNode = this._containerNode;
@@ -517,8 +605,8 @@ BMMenu.prototype = {
         const easing = sourceNodeShadow ? 'easeInOutQuad' : 'easeInQuad';
 
         if (sourceNodeShadow) {
-            __BMVelocityAnimate(sourceNodeShadow, {translateY: '0px'}, {duration: duration, easing: easing});
-            __BMVelocityAnimate(containerNode, {opacity: 0}, {duration: duration, easing: easing});
+            __BMVelocityAnimate(sourceNodeShadow, {translateY: '0px'}, {duration: duration, easing: easing, delay});
+            __BMVelocityAnimate(containerNode, {opacity: 0}, {duration: duration, easing: easing, delay});
         }
 
         __BMVelocityAnimate(this._node, {
@@ -543,7 +631,7 @@ BMMenu.prototype = {
             }
         });
 
-        delay = 0;
+        delay = 200;
         for (let i = this._node.childNodes.length - 1; i >= 0; i--) {
             let child = this._node.childNodes[i];
             __BMVelocityAnimate(child, {translateY: '16px', translateZ: 0, opacity: 0}, {
@@ -556,7 +644,66 @@ BMMenu.prototype = {
 
         this._node = undefined;
         this._containerNode = undefined;
+    },
+
+    /**
+     * Invoked when the up arrow is pressed.
+     * @param event <KeyboardEvent>     The event that triggered this action.
+     */
+    arrowUpPressedWithEvent(event) {
+        if (this._highlightedIndex != 0) {
+            this.highlightedIndex = BMNumberByConstrainingNumberToBounds(this._highlightedIndex - 1, 0, this._items.length - 1);
+        }
+    },
+
+    /**
+     * Invoked when the down arrow is pressed.
+     * @param event <KeyboardEvent>     The event that triggered this action.
+     */
+    arrowDownPressedWithEvent(event) {
+        if (this._highlightedIndex != this._items.length - 1) {
+            this.highlightedIndex = BMNumberByConstrainingNumberToBounds(this._highlightedIndex + 1, 0, this._items.length - 1);
+        }
+    },
+
+    returnPressedWithEvent(event) {
+        if (this._highlightedIndex >= 0 && this._highlightedIndex < this._items.length) {
+            const item = this._items[this._highlightedIndex];
+
+            if (item.action) item.action(item);
+
+            if (this.delegate && this.delegate.menuDidSelectItem) {
+                this.delegate.menuDidSelectItem(this, item);
+            }
+
+            const highlightedNode = this._node.querySelector('.BMMenuItemHighlighted');
+            if (highlightedNode) {
+                highlightedNode.classList.add('BMMenuItemActive');
+            }
+
+            this.closeAnimated(YES);
+        }
+    },
+
+    /**
+     * Invoked when the tab key is pressed.
+     * @param event <KeyboardEvent>     The event that triggered this action.
+     */
+    tabPressedWithEvent(event) {
+        // No action, this just prevents the keyboard focus from moving to another element
+    },
+
+    /**
+     * Invoked when the escape key is pressed.
+     * @param event <KeyboardEvent>     The event that triggered this action.
+     */
+    escapePressedWithEvent(event) {
+        if (this._node) {
+            this.closeAnimated(YES);
+        }
     }
+
+
 };
 
 /**

package/build/BMView/BMTextField.js

@@ -1,9 +1,15 @@
-import { BMExtend, NO } from "../Core/BMCoreUI";
+// @ts-check
+
+import { BMExtend, NO, YES } from "../Core/BMCoreUI";
 import { BMView } from "./BMView_v2.5";
 import { BMMenuKind } from "./BMMenu";
+import { BMRectMakeWithNodeFrame } from "../Core/BMRect";
+import { BMPointMake } from "../Core/BMPoint";
+import { BMHook } from "../Core/BMAnimationContext";
 
-// @ts-check
-
+/**
+ * The default limit of visible suggestions.
+ */
 const BM_TEXT_FIELD_MAX_SUGGESTIONS = 10;
 
 // @type BMTextField extends BMView
@@ -63,6 +69,11 @@ BMTextField.prototype = BMExtend(Object.create(BMView.prototype), {
         }
     },
 
+    /**
+     * The maximum number of suggestions that will be visible when the autocomplete menu is open.
+     */
+    maxSuggestions: BM_TEXT_FIELD_MAX_SUGGESTIONS, // <Number>
+
     /**
      * An optional delegate that can be used to respond to various callbacks from the text field.
      */
@@ -138,7 +149,7 @@ BMTextField.prototype = BMExtend(Object.create(BMView.prototype), {
 
             highlightedItemIndex = -1;
 
-            let limit = BM_TEXT_FIELD_MAX_SUGGESTIONS;
+            let limit = this.maxSuggestions;
             for (const option of suggestions) {
                 options.push(this._menuItemWithLabel(option, {action: () => {
                     menu = undefined;
@@ -201,7 +212,7 @@ BMTextField.prototype = BMExtend(Object.create(BMView.prototype), {
                     highlightedItemIndex = Math.max((highlightedItemIndex || 0) - 1, 0);
                 }
                 else {
-                    highlightedItemIndex = Math.min((isNaN(highlightedItemIndex) ? -1 : highlightedItemIndex) + 1, filteredSuggestions.length - 1);
+                    highlightedItemIndex = Math.min((isNaN(highlightedItemIndex) ? -1 : highlightedItemIndex) + 1, filteredSuggestions.length - 1, this.maxSuggestions - 1);
                 }
 
                 // Move the menu highlight
@@ -255,6 +266,9 @@ BMTextField.prototype = BMExtend(Object.create(BMView.prototype), {
         });
 
         inputNode.addEventListener('input', this._inputHandler = event => {
+            // Set to YES if the change event is fired due to autocompleting the text in the text field
+            let textFieldDidHighlightSuggestion = NO;
+
             // If suggestions are not enabled, no additional action is required
             if (!this._usesSuggestions) {
                 if (!textFieldDidHighlightSuggestion) {
@@ -273,7 +287,7 @@ BMTextField.prototype = BMExtend(Object.create(BMView.prototype), {
             filteredSuggestions = suggestions.filter(e => e.toLowerCase().startsWith(inputNode.value.toLowerCase()));
 
             // Limit to the topmost 10 items
-            filteredSuggestions.length = Math.min(filteredSuggestions.length, 10);
+            filteredSuggestions.length = Math.min(filteredSuggestions.length, this.maxSuggestions);
             
             // Empty the menu
             if (menu) menu.innerHTML = '';
@@ -282,7 +296,7 @@ BMTextField.prototype = BMExtend(Object.create(BMView.prototype), {
             highlightedItemIndex = 0;
 
             // Then add the filtered options
-            let limit = BM_TEXT_FIELD_MAX_SUGGESTIONS;
+            let limit = this.maxSuggestions;
             if (menu) for (const option of filteredSuggestions) {
                 menu.appendChild(this._menuItemWithLabel(option, {action: () => {
                     menu = undefined;
@@ -298,9 +312,6 @@ BMTextField.prototype = BMExtend(Object.create(BMView.prototype), {
                 if (!limit) break;
             }
 
-            // Set to YES if the change event is fired due to autocompleting the text in the text field
-            let textFieldDidHighlightSuggestion = NO;
-
             // Highlight the first item
             if (filteredSuggestions.length) {
                 if (menu) {
@@ -311,7 +322,7 @@ BMTextField.prototype = BMExtend(Object.create(BMView.prototype), {
                     // due to items being removed
                     let frame = BMRectMakeWithNodeFrame(inputNode);
                     let point = BMPointMake(frame.origin.x, frame.bottom);
-                    this._repositionMenuAtPoint(point);
+                    this._repositionMenu(menu, {atPoint: point});
                 }
 
                 // Autocomplete the suggestion, if the caret is at the end of the text field
@@ -408,7 +419,7 @@ BMTextField.prototype = BMExtend(Object.create(BMView.prototype), {
         let constraintPopup = document.createElement('div');
         constraintPopup.className = 'BMLayoutEditorConstraintPopup BMTextFieldSuggestions';
 
-        menu = constraintPopup;
+        let menu = constraintPopup;
 
         let constraintPopupContainer = document.createElement('div');
         constraintPopupContainer.className = 'BMLayoutEditorConstraintPopupContainer';
@@ -423,7 +434,7 @@ BMTextField.prototype = BMExtend(Object.create(BMView.prototype), {
 
         document.body.appendChild(constraintPopupContainer);
 
-        this._repositionMenuAtPoint(point);
+        this._repositionMenu(menu, {atPoint: point});
 
         constraintPopup.addEventListener('click', event => event.preventDefault());
 
@@ -472,7 +483,7 @@ BMTextField.prototype = BMExtend(Object.create(BMView.prototype), {
         return constraintPopup;
     },
 
-    _repositionMenuAtPoint(point) {
+    _repositionMenu(menu, {atPoint: point}) {
         let height = menu.offsetHeight;
 
         menu.style.transformOrigin = '50% 0%';

package/build/BMView/BMView_v2.5.js

@@ -10,6 +10,7 @@ import {BMLayoutSizeClass, BMLayoutOrientation} from './BMLayoutSizeClass'
 import {BMViewport} from './BMViewport'
 import {BMLayoutAttribute, BMLayoutConstraintRelation, BMLayoutConstraint, BMLayoutConstraintPriorityRequired, BMLayoutConstraintKind} from './BMLayoutConstraint_v2.5'
 import * as kiwi from 'kiwi.js'
+import { BMKeyboardShortcutModifier } from '../BMWindow/BMKeyboardShortcut'
 
 
 // When set to YES, this will cause view to use transforms instead of left/right for positioning
@@ -302,7 +303,6 @@ const _BMViewDequeueLayoutQueue = function (layoutQueue) {
  * 
  * Views are usually not constructed using any constructor function. Instead, their lifecycle is managed by CoreUI.
  * You obtain views by invoking the static <code>viewForNode(_)</code> method on the <code>BMView</code> type.
- * It is also not necessary to invoke any destruction method when the DOM nodes managed by views are removed.
  * 
  * To extend from BMView and create a view subtype, extend from the BMView prototype, then, when requesting views use
  * <code>BMView.viewForNode.call(MyCustomViewType, node)</code>. Note that if the node already had
@@ -317,6 +317,8 @@ export function BMView() {} // <constructor>
     // A private map maintaining the link between DOM nodes and their associated view objects.
     var _BMViewMap = new WeakMap; // <WeakMap<DOMNode, BMView>>
 
+    // #region Factory methods
+
     /**
      * Returns the view object associated with the given DOM node.
      * @param node <DOMNode>            The DOM node for which to retrieve the view.
@@ -347,6 +349,10 @@ export function BMView() {} // <constructor>
         return view;
     }
 
+    // #endregion
+
+    // #region Layout variables
+
     // A set that contains the views that are root views.
     // These are the view that will handle updates to layout variables.
     const rootViews = new Set;
@@ -605,6 +611,86 @@ export function BMView() {} // <constructor>
         return values;
     }
 
+    // #endregion
+
+    // #region Keyboard shortcuts
+
+    // A private map containing a mapping between DOM nodes and view stubs that are used for implementing
+    // keyboard shortcuts
+    const _NodeKeyboardShortcutsMap = new WeakMap; // <WeakMap<DOMNode, Object>
+
+    // A class that is a subset of `BMView` and contains only the keyboard shortcuts related functionality.
+    const _BMViewKeyboardShortcutsStub = function (node) {
+        this.node = node;
+        this._keyboardShortcuts = {};
+    };
+
+    _BMViewKeyboardShortcutsStub.prototype = {
+
+        node: undefined, // <DOMNode>
+
+        _keyboardShortcuts: undefined, // <Dictionary<string, [BMKeyboardShortcut]>>
+
+        registerKeyboardShortcut(shortcut) {
+            return BMView.prototype.registerKeyboardShortcut.apply(this, arguments);
+        },
+        
+        unregisterKeyboardShortcut(shortcut) {
+            return BMView.prototype.unregisterKeyboardShortcut.apply(this, arguments);
+        },
+        
+        keyPressedWithEvent(event) {
+            return BMView.prototype.keyPressedWithEvent.apply(this, arguments);
+        },
+        
+        _keyboardShortcutsEnabled: NO,
+        
+        _enableKeyboardShortcuts() {
+            return BMView.prototype._enableKeyboardShortcuts.apply(this, arguments);
+        },
+        
+        _disableKeyboardShortcuts() {
+            return BMView.prototype._disableKeyboardShortcuts.apply(this, arguments);
+        },
+    }
+
+    /**
+     * Registers a keyboard shortcut that can be activated when the given node has keyboard focus.
+     * @param shortcut <BMKeyboardShortcut>     The shortcut to register.
+     * {
+     *  @param forNode <DOMNode>                The DOM node for which the shortcut should be registered.
+     * }
+     */
+    BMView.registerKeyboardShortcut = function (shortcut, {forNode: node}) {
+        let viewStub = _NodeKeyboardShortcutsMap.get(node);
+        if (!viewStub) {
+            viewStub = new _BMViewKeyboardShortcutsStub(node);
+            _NodeKeyboardShortcutsMap.set(node, viewStub);
+        }
+
+        viewStub.registerKeyboardShortcut(shortcut);
+    },
+
+	/**
+	 * Unregisters a keyboard shortcut. If this keyboard shortcut had not been previously registered, this method does nothing.
+	 * @param shortcut <BMKeyboardShortcut>			The keyboard shortcut to unregister.
+     * {
+     *  @param forNode <DOMNode>                    The DOM node for which the shortcut should be unregistered.
+     * }
+	 */
+    BMView.unregisterKeyboardShortcut = function (shortcut, {forNode: node}) {
+        const viewStub = _NodeKeyboardShortcutsMap.get(node);
+
+        if (viewStub) {
+            viewStub.unregisterKeyboardShortcut(shortcut);
+        }
+    },
+
+
+    // #endregion
+
+    // #region Destructors
+
     /**
      * Used when releasing an entire view hierarchy.
      * Releases this view without affecting constraints or the DOM.
@@ -654,6 +740,10 @@ export function BMView() {} // <constructor>
         rootViews.delete(this);
     }
 
+    // #endregion
+
+    // #region Initializer
+
     /**
      * Designated initializer, invoked immediately after any view is created.
      * Subclasses must invoke this base initializer at some point during their initialization.
@@ -705,9 +795,13 @@ export function BMView() {} // <constructor>
         this._configuration = {opacity: this._opacity, isVisible: this._isVisible, contentInsets: this.__activeInsets};
         this._variableProperties = {};
 
+		this._keyboardShortcuts = {};
+
         return this;
     }
 
+    // #endregion
+
 })();
 
 BMView.prototype = BMExtend(BMView.prototype, {
@@ -819,16 +913,19 @@ BMView.prototype = BMExtend(BMView.prototype, {
 
     /**
      * The layout queue on which this view processes its layout passes.
-     * If this property is modified while this view had already registered a layout pass with a different queue,
-     * that layout pass will still run on that queue the next time it is drained.
      */
     _layoutQueue: _BMViewLayoutQueue, // <BMViewLayoutQueue, nullResettable>
     get layoutQueue() {
         return this._layoutQueue;
     },
     set layoutQueue(queue) {
+        const hasView = this._layoutQueue._views.has(this);
         this._layoutQueue._removeView(this);
         this._layoutQueue = queue || _BMViewLayoutQueue;
+
+        if (hasView) {
+            this._layoutQueue._enqueueView(this);
+        }
     },
 
     // #endregion
@@ -2108,6 +2205,111 @@ BMView.prototype = BMExtend(BMView.prototype, {
 
     // #endregion
 
+    // #region Keyboard shortcuts
+
+	/**
+	 * The keyboard shortcuts that have been registered to this view.
+	 */
+	_keyboardShortcuts: undefined, // <Dictionary<string, [BMKeyboardShortcut]>>
+
+	/**
+	 * Registers a keyboard shortcut that can be activated when this view has keyboard focus.
+	 * @param shortcut <BMKeyboardShortcut>			The keyboard shortcut to register.
+	 */
+	registerKeyboardShortcut(shortcut) {
+		if (!Object.keys(this._keyboardShortcuts).length) this._enableKeyboardShortcuts();
+
+        if (!this._keyboardShortcuts[shortcut.keyCode]) {
+            this._keyboardShortcuts[shortcut.keyCode] = [];
+        }
+
+		this._keyboardShortcuts[shortcut.keyCode].push(shortcut);
+	},
+
+	/**
+	 * Unregisters a keyboard shortcut. If this keyboard shortcut had not been previously registered, this method does nothing.
+	 * @param shortcut <BMKeyboardShortcut>			The keyboard shortcut to unregister.
+	 */
+	unregisterKeyboardShortcut(shortcut) {
+        const shortcuts = this._keyboardShortcuts[shortcut.keyCode];
+
+        if (shortcuts) {
+            for (let i = 0; i < shortcuts.length; i++) {
+                if (shortcuts[i] == shortcut) {
+                    shortcuts.splice(i, 1);
+                    break;
+                }
+            }
+
+            // If this removes the last shortcut for this key code, remove the entry
+            if (!shortcuts.length) {
+                delete this._keyboardShortcuts[shortcut.keyCode];
+            }
+        }
+
+		if (!Object.keys(this._keyboardShortcuts).length) this._disableKeyboardShortcuts();
+	},
+
+	/**
+	 * If keyboard shortcuts have been registered on this view, this method will be invoked to identify
+	 * and handle key presses. Subclasses that override this method should invoke the base implementation to allow
+	 * keyboard shortcuts to be handled correctly.
+	 * @param event <KeyboardEvent>			The event that triggered this action.
+	 */
+	keyPressedWithEvent(event) {
+        if (!this._keyboardShortcuts[event.code]) return;
+
+		// Check if a shortcut key has been pressed.
+		for (const shortcut of this._keyboardShortcuts[event.code]) {
+			// Build the modifier bitmap for this event
+			let bitmap = 0;
+			for (const modifier in BMKeyboardShortcutModifier) {
+				if (event[BMKeyboardShortcutModifier[modifier].key]) {
+					bitmap = bitmap | BMKeyboardShortcutModifier[modifier].value;
+				}
+			}
+
+			if (bitmap == shortcut._modifierBitmap) {
+				if (shortcut.preventsDefault) event.preventDefault();
+				shortcut.target[shortcut.action](event, {forKeyboardShortcut: shortcut});
+			}
+		}
+	},
+
+	/**
+	 * Set to `YES` if keyboard shortcuts are enabled.
+	 */
+	_keyboardShortcutsEnabled: NO, // <Boolean>
+
+	/**
+	 * Enables keyboard shortcut handling. This makes the view's `node` focusable and attaches
+	 * the relevant event handlers to it.
+	 */
+	_enableKeyboardShortcuts() {
+        // Make this view focusable if it is not already
+        if (!this.node.hasAttribute('tabIndex')) {
+            this.node.tabIndex = -1;
+        }
+
+		this._keypressHandler = (event) => {
+			this.keyPressedWithEvent(event);
+		};
+
+		this.node.addEventListener('keydown', this._keypressHandler);
+		this._keyboardShortcutsEnabled = YES;
+	},
+
+	/**
+	 * Disables keyboard shortcut handling. This detaches the relevant event handlers from this view's `node`.
+     * The node's `tabIndex` property will not be cleared by this method.
+	 */
+	_disableKeyboardShortcuts() {
+		this.node.removeEventListener('keydown', this._keypressHandler);
+		this._keyboardShortcutsEnabled = NO;
+	},
+
+    // #endregion
+
     // #region Constraints and Cassowary Variables