chrome/browser/resources/ntp4/dot_list.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview DotList implementation
   7  */
   8
   9 cr.define('ntp', function() {
  10   'use strict';
  11
  12   /**
  13    * Live list of the navigation dots.
  14    * @type {!NodeList|undefined}
  15    */
  16   var navDots;
  17
  18   /**
  19    * Creates a new DotList object.
  20    * @constructor
  21    * @extends {HTMLUListElement}
  22    */
  23   var DotList = cr.ui.define('ul');
  24
  25   DotList.prototype = {
  26     __proto__: HTMLUListElement.prototype,
  27
  28     decorate: function() {
  29       this.addEventListener('keydown', this.onKeyDown_.bind(this));
  30       navDots = this.getElementsByClassName('dot');
  31     },
  32
  33     /**
  34      * Live list of the navigation dots.
  35      * @type {!NodeList|undefined}
  36      */
  37     get dots() {
  38       return navDots;
  39     },
  40
  41     /**
  42      * Handler for key events on the dot list. These keys will change the focus
  43      * element.
  44      * @param {Event} e The KeyboardEvent.
  45      */
  46     onKeyDown_: function(e) {
  47       if (e.metaKey || e.shiftKey || e.altKey || e.ctrlKey)
  48         return;
  49
  50       var direction = 0;
  51       if (e.keyIdentifier == 'Left')
  52         direction = -1;
  53       else if (e.keyIdentifier == 'Right')
  54         direction = 1;
  55       else
  56         return;
  57
  58       var focusDot = this.querySelector('.dot:focus');
  59       if (!focusDot)
  60         return;
  61       var focusIndex = Array.prototype.indexOf.call(navDots, focusDot);
  62       var newFocusIndex = focusIndex + direction;
  63       if (focusIndex == newFocusIndex)
  64         return;
  65
  66       newFocusIndex = (newFocusIndex + navDots.length) % navDots.length;
  67       navDots[newFocusIndex].tabIndex = 3;
  68       navDots[newFocusIndex].focus();
  69       focusDot.tabIndex = -1;
  70
  71       e.stopPropagation();
  72       e.preventDefault();
  73     }
  74   };
  75
  76   return {
  77     DotList: DotList
  78   };
  79 });