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