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.
5 // This file contains the navigation controls that are visible on the left side
6 // of the uber page. It exists separately from uber.js so that it may be loaded
7 // in an iframe. Iframes can be layered on top of each other, but not mixed in
8 // with page content, so all overlapping content on uber must be framed.
10 <include src="../../../../ui/webui/resources/js/util.js">
11 <include src="uber_utils.js">
13 cr.define('uber_frame', function() {
16 * Handles page initialization.
19 var navigationItems = document.querySelectorAll('li');
21 for (var i = 0; i < navigationItems.length; ++i) {
22 navigationItems[i].addEventListener('click', onNavItemClicked);
25 cr.ui.FocusOutlineManager.forDocument(this);
27 window.addEventListener('message', handleWindowMessage);
28 uber.invokeMethodOnParent('navigationControlsLoaded');
30 document.documentElement.addEventListener('mousewheel', onMouseWheel);
31 document.documentElement.addEventListener('mousedown', onMouseDown);
35 * Handles clicks on the navigation controls (switches the page and updates
37 * @param {Event} e The click event.
39 function onNavItemClicked(e) {
40 // Though pointer-event: none; is applied to the .selected nav item, users
41 // can still tab to them and press enter/space which simulates a click.
42 if (e.target.classList.contains('selected'))
45 // Extensions can override Uber content (e.g., if the user has a history
46 // extension, it should display when the 'History' navigation is clicked).
47 if (e.currentTarget.getAttribute('override') == 'yes') {
48 window.open('chrome://' + e.currentTarget.getAttribute('controls'),
53 uber.invokeMethodOnParent('showPage',
54 {pageId: e.currentTarget.getAttribute('controls')});
56 setSelection(e.currentTarget);
60 * Handles postMessage from chrome://chrome.
61 * @param {Event} e The post data.
63 function handleWindowMessage(e) {
64 if (e.data.method === 'changeSelection')
65 changeSelection(e.data.params);
66 else if (e.data.method === 'adjustToScroll')
67 adjustToScroll(e.data.params);
68 else if (e.data.method === 'setContentChanging')
69 setContentChanging(e.data.params);
71 console.error('Received unexpected message', e.data);
75 * Changes the selected nav control.
76 * @param {Object} params Must contain pageId.
78 function changeSelection(params) {
80 document.querySelector('li[controls="' + params.pageId + '"]');
81 setSelection(navItem);
86 * @return {Element} The currently selected nav item, if any.
88 function getSelectedNavItem() {
89 return document.querySelector('li.selected');
93 * Sets selection on the given nav item.
94 * @param {Element} newSelection The item to be selected.
96 function setSelection(newSelection) {
97 var items = document.querySelectorAll('li');
98 for (var i = 0; i < items.length; ++i) {
99 items[i].classList.toggle('selected', items[i] == newSelection);
100 items[i].setAttribute('aria-selected', items[i] == newSelection);
105 * Shows nav items belonging to the same group as the selected item.
107 function showNavItems() {
108 var navItems = document.querySelectorAll('li');
109 var selectedNavItem = getSelectedNavItem();
110 assert(selectedNavItem);
112 var selectedGroup = selectedNavItem.getAttribute('group');
113 for (var i = 0; i < navItems.length; ++i) {
114 navItems[i].hidden = navItems[i].getAttribute('group') != selectedGroup;
119 * Adjusts this frame's content to scrolls from the outer frame. This is done
120 * to obscure text in RTL as a user scrolls over the content of this frame (as
121 * currently RTL scrollbars still draw on the right).
122 * @param {number} scroll document.body.scrollLeft of the content frame.
124 function adjustToScroll(scrollLeft) {
126 document.body.style.webkitTransform = 'translateX(' + -scrollLeft + 'px)';
130 * Enable/disable an animation to ease the nav bar back into view when
131 * changing content while horizontally scrolled.
132 * @param {boolean} enabled Whether easing should be enabled.
134 function setContentChanging(enabled) {
136 document.documentElement.classList.toggle('changing-content', enabled);
140 * Handles mouse wheels on the top level element. Forwards them to uber.js.
141 * @param {Event} e The mouse wheel event.
143 function onMouseWheel(e) {
144 uber.invokeMethodOnParent('mouseWheel',
145 {deltaX: e.wheelDeltaX, deltaY: e.wheelDeltaY});
149 * Handles mouse presses on the top level element. Forwards them to uber.js.
150 * @param {Event} e The mouse down event.
152 function onMouseDown(e) {
153 uber.invokeMethodOnParent('mouseDown');
157 * @return {Element} The currently selected iframe container.
160 function getSelectedIframe() {
161 return document.querySelector('.iframe-container.selected');
165 * Finds the <li> element whose 'controls' attribute is |controls| and sets
166 * its 'override' attribute to |override|.
167 * @param {string} controls The value of the 'controls' attribute of the
169 * @param {string} override The value to set for the 'override' attribute of
170 * that element (either 'yes' or 'no').
172 function setNavigationOverride(controls, override) {
174 document.querySelector('li[controls="' + controls + '"]');
175 navItem.setAttribute('override', override);
180 setNavigationOverride: setNavigationOverride,
185 document.addEventListener('DOMContentLoaded', uber_frame.onLoad);