src/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     /** @override */
  29     decorate: function() {
  30       this.addEventListener('keydown', this.onKeyDown_.bind(this));
  31       navDots = this.getElementsByClassName('dot');
  32     },
  33
  34     /**
  35      * Live list of the navigation dots.
  36      * @type {!NodeList|undefined}
  37      */
  38     get dots() {
  39       return navDots;
  40     },
  41
  42     /**
  43      * Handler for key events on the dot list. These keys will change the focus
  44      * element.
  45      * @param {Event} e The KeyboardEvent.
  46      */
  47     onKeyDown_: function(e) {
  48       if (e.metaKey || e.shiftKey || e.altKey || e.ctrlKey)
  49         return;
  50
  51       var direction = 0;
  52       if (e.keyIdentifier == 'Left')
  53         direction = -1;
  54       else if (e.keyIdentifier == 'Right')
  55         direction = 1;
  56       else
  57         return;
  58
  59       var focusDot = this.querySelector('.dot:focus');
  60       if (!focusDot)
  61         return;
  62       var focusIndex = Array.prototype.indexOf.call(navDots, focusDot);
  63       var newFocusIndex = focusIndex + direction;
  64       if (focusIndex == newFocusIndex)
  65         return;
  66
  67       newFocusIndex = (newFocusIndex + navDots.length) % navDots.length;
  68       navDots[newFocusIndex].tabIndex = 3;
  69       navDots[newFocusIndex].focus();
  70       focusDot.tabIndex = -1;
  71
  72       e.stopPropagation();
  73       e.preventDefault();
  74     }
  75   };
  76
  77   return {
  78     DotList: DotList
  79   };
  80 });