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="../shared/js/util.js"></include>
  11 <include src="uber_utils.js"></include>
  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   }
  30
  31   /**
  32    * Handles clicks on the navigation controls (switches the page and updates
  33    * the URL).
  34    * @param {Event} e The click event.
  35    */
  36   function onNavItemClicked(e) {
  37     // Though pointer-event: none; is applied to the .selected nav item, users
  38     // can still tab to them and press enter/space which simulates a click.
  39     if (e.target.classList.contains('selected'))
  40       return;
  41
  42     // Extensions can override Uber content (e.g., if the user has a history
  43     // extension, it should display when the 'History' navigation is clicked).
  44     if (e.currentTarget.getAttribute('override') == 'yes') {
  45       window.open('chrome://' + e.currentTarget.getAttribute('controls'),
  46           '_blank');
  47       return;
  48     }
  49
  50     uber.invokeMethodOnParent('showPage',
  51        {pageId: e.currentTarget.getAttribute('controls')});
  52
  53     setSelection(e.currentTarget);
  54   }
  55
  56   /**
  57    * Handles postMessage from chrome://chrome.
  58    * @param {Event} e The post data.
  59    */
  60   function handleWindowMessage(e) {
  61     if (e.data.method === 'changeSelection')
  62       changeSelection(e.data.params);
  63     else if (e.data.method === 'adjustToScroll')
  64       adjustToScroll(e.data.params);
  65     else if (e.data.method === 'setContentChanging')
  66       setContentChanging(e.data.params);
  67     else
  68       console.error('Received unexpected message', e.data);
  69   }
  70
  71   /**
  72    * Changes the selected nav control.
  73    * @param {Object} params Must contain pageId.
  74    */
  75   function changeSelection(params) {
  76     var navItem =
  77         document.querySelector('li[controls="' + params.pageId + '"]');
  78     setSelection(navItem);
  79   }
  80
  81   /**
  82    * Sets selection on the given nav item.
  83    * @param {boolean} newSelection The item to be selected.
  84    */
  85   function setSelection(newSelection) {
  86     var lastSelectedNavItem = document.querySelector('li.selected');
  87     if (lastSelectedNavItem !== newSelection) {
  88       newSelection.classList.add('selected');
  89       if (lastSelectedNavItem)
  90         lastSelectedNavItem.classList.remove('selected');
  91     }
  92   }
  93
  94   /**
  95    * Adjusts this frame's content to scrolls from the outer frame. This is done
  96    * to obscure text in RTL as a user scrolls over the content of this frame (as
  97    * currently RTL scrollbars still draw on the right).
  98    * @param {number} scroll document.body.scrollLeft of the content frame.
  99    */
 100   function adjustToScroll(scrollLeft) {
 101     assert(isRTL());
 102     document.body.style.webkitTransform = 'translateX(' + -scrollLeft + 'px)';
 103   }
 104
 105   /**
 106    * Enable/disable an animation to ease the nav bar back into view when
 107    * changing content while horizontally scrolled.
 108    * @param {boolean} enabled Whether easing should be enabled.
 109    */
 110   function setContentChanging(enabled) {
 111     assert(isRTL());
 112     document.documentElement.classList[enabled ? 'add' : 'remove'](
 113         'changing-content');
 114   }
 115
 116   /**
 117    * Handles mouse wheels on the top level element. Forwards them to uber.js.
 118    * @param {Event} e The mouse wheel event.
 119    */
 120   function onMouseWheel(e) {
 121     uber.invokeMethodOnParent('mouseWheel',
 122         {deltaX: e.wheelDeltaX, deltaY: e.wheelDeltaY});
 123   }
 124
 125   /**
 126    * @return {Object} The currently selected iframe container.
 127    * @private
 128    */
 129   function getSelectedIframe() {
 130     return document.querySelector('.iframe-container.selected');
 131   }
 132
 133   /**
 134    * Finds the <li> element whose 'controls' attribute is |controls| and sets
 135    * its 'override' attribute to |override|.
 136    * @param {string} controls The value of the 'controls' attribute of the
 137    *     element to change.
 138    * @param {string} override The value to set for the 'override' attribute of
 139    *     that element (either 'yes' or 'no').
 140    */
 141   function setNavigationOverride(controls, override) {
 142     var navItem =
 143         document.querySelector('li[controls="' + controls + '"]');
 144     navItem.setAttribute('override', override);
 145   }
 146
 147   return {
 148     onLoad: onLoad,
 149     setNavigationOverride: setNavigationOverride,
 150   };
 151
 152 });
 153
 154 document.addEventListener('DOMContentLoaded', uber_frame.onLoad);