Add keycodes utility

extensions/amp-image-lightbox/0.1/amp-image-lightbox.js

@@ -16,13 +16,14 @@
 
 import {Animation} from '../../../src/animation';
 import {CSS} from '../../../build/amp-image-lightbox-0.1.css';
-import {Gestures} from '../../../src/gesture';
 import {
   DoubletapRecognizer,
   SwipeXYRecognizer,
   TapRecognizer,
   TapzoomRecognizer,
 } from '../../../src/gesture-recognizers';
+import {Gestures} from '../../../src/gesture';
+import {Keycodes} from '../../../src/utils/keycodes';
 import {Layout} from '../../../src/layout';
 import {bezierCurve} from '../../../src/curve';
 import {continueMotion} from '../../../src/motion';
@@ -824,7 +825,7 @@ class AmpImageLightbox extends AMP.BaseElement {
    * @private
    */
   closeOnEscape_(event) {
-    if (event.keyCode == 27) {
+    if (event.keyCode == Keycodes.ESCAPE) {
       this.close();
     }
   }

extensions/amp-image-lightbox/0.1/test/test-amp-image-lightbox.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import {Keycodes} from '../../../../src/utils/keycodes';
 import {timerFor} from '../../../../src/services';
 import {createIframePromise} from '../../../../testing/iframe';
 import '../amp-image-lightbox';
@@ -199,7 +200,7 @@ describe('amp-image-lightbox component', () => {
       ampImage.setAttribute('width', '100');
       ampImage.setAttribute('height', '100');
       impl.activate({source: ampImage});
-      impl.closeOnEscape_({keyCode: 27});
+      impl.closeOnEscape_({keyCode: Keycodes.ESCAPE});
       expect(setupCloseSpy).to.be.calledOnce;
 
       // Regression test: ensure escape event listener is bound properly

extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js

@@ -16,6 +16,7 @@
 
 
 import {CSS} from '../../../build/amp-lightbox-viewer-0.1.css';
+import {Keycodes} from '../../../src/utils/keycodes';
 import {ampdocServiceFor} from '../../../src/ampdoc';
 import {ancestorElements} from '../../../src/dom';
 import {isExperimentOn} from '../../../src/experiments';
@@ -422,22 +423,13 @@ export class AmpLightboxViewer extends AMP.BaseElement {
    * @private
    */
   handleKeyboardEvents_(event) {
-    // TODO(aghassemi): Add helper utility for keyboard events or an enum.
+    // TODO(aghassemi): RTL support
     const code = event.keyCode;
-
-    // Escape
-    if (code == 27) {
+    if (code == Keycodes.ESCAPE) {
       this.close_();
-    }
-
-    // TODO(aghassemi): RTL support
-    // Right arrow
-    if (code == 39) {
+    } else if (code == Keycodes.RIGHT_ARROW) {
       this.next_();
-    }
-
-    // Left arrow
-    if (code == 37) {
+    } else if (code == Keycodes.LEFT_ARROW) {
       this.previous_();
     }
   }

extensions/amp-lightbox/0.1/amp-lightbox.js

@@ -16,6 +16,7 @@
 
 import {CSS} from '../../../build/amp-lightbox-0.1.css';
 import {Gestures} from '../../../src/gesture';
+import {Keycodes} from '../../../src/utils/keycodes';
 import {Layout} from '../../../src/layout';
 import {SwipeXYRecognizer} from '../../../src/gesture-recognizers';
 import {childElementByTag} from '../../../src/dom.js';
@@ -300,7 +301,7 @@ class AmpLightbox extends AMP.BaseElement {
    * @private
    */
   closeOnEscape_(event) {
-    if (event.keyCode == 27) {
+    if (event.keyCode == Keycodes.ESCAPE) {
       this.close();
     }
   }

extensions/amp-sidebar/0.1/amp-sidebar.js

@@ -15,6 +15,7 @@
  */
 
 import {CSS} from '../../../build/amp-sidebar-0.1.css';
+import {Keycodes} from '../../../src/utils/keycodes';
 import {closestByTag, tryFocus} from '../../../src/dom';
 import {Layout} from '../../../src/layout';
 import {dev} from '../../../src/log';
@@ -112,7 +113,7 @@ export class AmpSidebar extends AMP.BaseElement {
 
     this.documentElement_.addEventListener('keydown', event => {
       // Close sidebar on ESC.
-      if (event.keyCode == 27) {
+      if (event.keyCode == Keycodes.ESCAPE) {
         this.close_();
       }
     });

extensions/amp-sidebar/0.1/test/test-amp-sidebar.js

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import {Keycodes} from '../../../../src/utils/keycodes';
 import {adopt} from '../../../../src/runtime';
 import {createIframePromise} from '../../../../testing/iframe';
 import {platformFor} from '../../../../src/services';
@@ -270,8 +271,8 @@ describe('amp-sidebar', () => {
       if (eventObj.initEvent) {
         eventObj.initEvent('keydown', true, true);
       }
-      eventObj.keyCode = 27;
-      eventObj.which = 27;
+      eventObj.keyCode = Keycodes.ESCAPE;
+      eventObj.which = Keycodes.ESCAPE;
       const el = iframe.doc.documentElement;
       el.dispatchEvent ?
           el.dispatchEvent(eventObj) : el.fireEvent('onkeydown', eventObj);

src/utils/keycodes.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright 2017 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @enum {number}
+ */
+export const Keycodes = {
+  ESCAPE: 27,
+  SPACE: 32,
+  LEFT_ARROW: 37,
+  UP_ARROW: 38,
+  RIGHT_ARROW: 39,
+  DOWN_ARROW: 40,
+};