src/chrome/browser/resources/uber/uber_frame.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 // 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.
   9
  10 <include src="../../../../ui/webui/resources/js/util.js">
  11 <include src="uber_utils.js">
  12
  13 cr.define('uber_frame', function() {
  14
  15   /**
  16    * Handles page initialization.
  17    */
  18   function onLoad() {
  19     var navigationItems = document.querySelectorAll('li');
  20
  21     for (var i = 0; i < navigationItems.length; ++i) {
  22       navigationItems[i].addEventListener('click', onNavItemClicked);
  23     }
  24
  25     window.addEventListener('message', handleWindowMessage);
  26     uber.invokeMethodOnParent('navigationControlsLoaded');
  27
  28     document.documentElement.addEventListener('mousewheel', onMouseWheel);
  29     document.documentElement.addEventListener('mousedown', onMouseDown);
  30     cr.ui.FocusManager.disableMouseFocusOnButtons();
  31   }
  32
  33   /**
  34    * Handles clicks on the navigation controls (switches the page and updates
  35    * the URL).
  36    * @param {Event} e The click event.
  37    */
  38   function onNavItemClicked(e) {
  39     // Though pointer-event: none; is applied to the .selected nav item, users
  40     // can still tab to them and press enter/space which simulates a click.
  41     if (e.target.classList.contains('selected'))
  42       return;
  43
  44     // Extensions can override Uber content (e.g., if the user has a history
  45     // extension, it should display when the 'History' navigation is clicked).
  46     if (e.currentTarget.getAttribute('override') == 'yes') {
  47       window.open('chrome://' + e.currentTarget.getAttribute('controls'),
  48           '_blank');
  49       return;
  50     }
  51
  52     uber.invokeMethodOnParent('showPage',
  53        {pageId: e.currentTarget.getAttribute('controls')});
  54
  55     setSelection(e.currentTarget);
  56   }
  57
  58   /**
  59    * Handles postMessage from chrome://chrome.
  60    * @param {Event} e The post data.
  61    */
  62   function handleWindowMessage(e) {
  63     if (e.data.method === 'changeSelection')
  64       changeSelection(e.data.params);
  65     else if (e.data.method === 'adjustToScroll')
  66       adjustToScroll(e.data.params);
  67     else if (e.data.method === 'setContentChanging')
  68       setContentChanging(e.data.params);
  69     else
  70       console.error('Received unexpected message', e.data);
  71   }
  72
  73   /**
  74    * Changes the selected nav control.
  75    * @param {Object} params Must contain pageId.
  76    */
  77   function changeSelection(params) {
  78     var navItem =
  79         document.querySelector('li[controls="' + params.pageId + '"]');
  80     setSelection(navItem);
  81     showNavItems();
  82   }
  83
  84   /**
  85    * @return {Element} The currently selected nav item, if any.
  86    */
  87   function getSelectedNavItem() {
  88     return document.querySelector('li.selected');
  89   }
  90
  91   /**
  92    * Sets selection on the given nav item.
  93    * @param {Element} newSelection The item to be selected.
  94    */
  95   function setSelection(newSelection) {
  96     var lastSelectedNavItem = getSelectedNavItem();
  97     if (lastSelectedNavItem !== newSelection) {
  98       newSelection.classList.add('selected');
  99       if (lastSelectedNavItem)
 100         lastSelectedNavItem.classList.remove('selected');
 101     }
 102   }
 103
 104   /**
 105    * Shows nav items belonging to the same group as the selected item.
 106    */
 107   function showNavItems() {
 108     var navItems = document.querySelectorAll('li');
 109     var selectedNavItem = getSelectedNavItem();
 110     assert(selectedNavItem);
 111
 112     var selectedGroup = selectedNavItem.getAttribute('group');
 113     for (var i = 0; i < navItems.length; ++i) {
 114       navItems[i].hidden = navItems[i].getAttribute('group') != selectedGroup;
 115     }
 116   }
 117
 118   /**
 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.
 123    */
 124   function adjustToScroll(scrollLeft) {
 125     assert(isRTL());
 126     document.body.style.webkitTransform = 'translateX(' + -scrollLeft + 'px)';
 127   }
 128
 129   /**
 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.
 133    */
 134   function setContentChanging(enabled) {
 135     assert(isRTL());
 136     document.documentElement.classList[enabled ? 'add' : 'remove'](
 137         'changing-content');
 138   }
 139
 140   /**
 141    * Handles mouse wheels on the top level element. Forwards them to uber.js.
 142    * @param {Event} e The mouse wheel event.
 143    */
 144   function onMouseWheel(e) {
 145     uber.invokeMethodOnParent('mouseWheel',
 146         {deltaX: e.wheelDeltaX, deltaY: e.wheelDeltaY});
 147   }
 148
 149   /**
 150    * Handles mouse presses on the top level element. Forwards them to uber.js.
 151    * @param {Event} e The mouse down event.
 152    */
 153   function onMouseDown(e) {
 154     uber.invokeMethodOnParent('mouseDown');
 155   }
 156
 157   /**
 158    * @return {Element} The currently selected iframe container.
 159    * @private
 160    */
 161   function getSelectedIframe() {
 162     return document.querySelector('.iframe-container.selected');
 163   }
 164
 165   /**
 166    * Finds the <li> element whose 'controls' attribute is |controls| and sets
 167    * its 'override' attribute to |override|.
 168    * @param {string} controls The value of the 'controls' attribute of the
 169    *     element to change.
 170    * @param {string} override The value to set for the 'override' attribute of
 171    *     that element (either 'yes' or 'no').
 172    */
 173   function setNavigationOverride(controls, override) {
 174     var navItem =
 175         document.querySelector('li[controls="' + controls + '"]');
 176     navItem.setAttribute('override', override);
 177   }
 178
 179   return {
 180     onLoad: onLoad,
 181     setNavigationOverride: setNavigationOverride,
 182   };
 183
 184 });
 185
 186 document.addEventListener('DOMContentLoaded', uber_frame.onLoad);