• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
9cr.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});
81