OLD | NEW |
| (Empty) |
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 }); | |
OLD | NEW |