chrome/browser/resources/ntp4/nav_dot.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 /**
   6  * @fileoverview Nav dot
   7  * This is the class for the navigation controls that appear along the bottom
   8  * of the NTP.
   9  */
  10
  11 cr.define('ntp', function() {
  12   'use strict';
  13
  14   /**
  15    * Creates a new navigation dot.
  16    * @param {TilePage} page The associated TilePage.
  17    * @param {string} title The title of the navigation dot.
  18    * @param {bool} titleIsEditable If true, the title can be changed.
  19    * @param {bool} animate If true, animates into existence.
  20    * @constructor
  21    * @extends {HTMLLIElement}
  22    */
  23   function NavDot(page, title, titleIsEditable, animate) {
  24     var dot = cr.doc.createElement('li');
  25     dot.__proto__ = NavDot.prototype;
  26     dot.initialize(page, title, titleIsEditable, animate);
  27
  28     return dot;
  29   }
  30
  31   NavDot.prototype = {
  32     __proto__: HTMLLIElement.prototype,
  33
  34     initialize: function(page, title, titleIsEditable, animate) {
  35       this.className = 'dot';
  36       this.setAttribute('role', 'button');
  37
  38       this.page_ = page;
  39
  40       var selectionBar = this.ownerDocument.createElement('div');
  41       selectionBar.className = 'selection-bar';
  42       this.appendChild(selectionBar);
  43
  44       // TODO(estade): should there be some limit to the number of characters?
  45       this.input_ = this.ownerDocument.createElement('input');
  46       this.input_.setAttribute('spellcheck', false);
  47       this.input_.value = title;
  48       // Take the input out of the tab-traversal focus order.
  49       this.input_.disabled = true;
  50       this.appendChild(this.input_);
  51
  52       this.displayTitle = title;
  53       this.titleIsEditable_ = titleIsEditable;
  54
  55       this.addEventListener('keydown', this.onKeyDown_);
  56       this.addEventListener('click', this.onClick_);
  57       this.addEventListener('dblclick', this.onDoubleClick_);
  58       this.dragWrapper_ = new cr.ui.DragWrapper(this, this);
  59       this.addEventListener('webkitTransitionEnd', this.onTransitionEnd_);
  60
  61       this.input_.addEventListener('blur', this.onInputBlur_.bind(this));
  62       this.input_.addEventListener('mousedown',
  63                                    this.onInputMouseDown_.bind(this));
  64       this.input_.addEventListener('keydown', this.onInputKeyDown_.bind(this));
  65
  66       if (animate) {
  67         this.classList.add('small');
  68         var self = this;
  69         window.setTimeout(function() {
  70           self.classList.remove('small');
  71         }, 0);
  72       }
  73     },
  74
  75     /**
  76      * @return {TilePage} The associated TilePage.
  77      */
  78     get page() {
  79       return this.page_;
  80     },
  81
  82     /**
  83      * Sets/gets the display title.
  84      * @type {string} title The display name for this nav dot.
  85      */
  86     get displayTitle() {
  87       return this.title;
  88     },
  89     set displayTitle(title) {
  90       this.title = this.input_.value = title;
  91     },
  92
  93     /**
  94      * Removes the dot from the page. If |opt_animate| is truthy, we first
  95      * transition the element to 0 width.
  96      * @param {boolean=} opt_animate Whether to animate the removal or not.
  97      */
  98     remove: function(opt_animate) {
  99       if (opt_animate)
 100         this.classList.add('small');
 101       else
 102         this.parentNode.removeChild(this);
 103     },
 104
 105     /**
 106      * Navigates the card slider to the page for this dot.
 107      */
 108     switchToPage: function() {
 109       ntp.getCardSlider().selectCardByValue(this.page_, true);
 110     },
 111
 112     /**
 113      * Handler for keydown event on the dot.
 114      * @param {Event} e The KeyboardEvent.
 115      */
 116     onKeyDown_: function(e) {
 117       if (e.keyIdentifier == 'Enter') {
 118         this.onClick_(e);
 119         e.stopPropagation();
 120       }
 121     },
 122
 123     /**
 124      * Clicking causes the associated page to show.
 125      * @param {Event} e The click event.
 126      * @private
 127      */
 128     onClick_: function(e) {
 129       this.switchToPage();
 130       // The explicit focus call is necessary because of overriding the default
 131       // handling in onInputMouseDown_.
 132       if (this.ownerDocument.activeElement != this.input_)
 133         this.focus();
 134
 135       chrome.send('introMessageDismissed');
 136       e.stopPropagation();
 137     },
 138
 139     /**
 140      * Double clicks allow the user to edit the page title.
 141      * @param {Event} e The click event.
 142      * @private
 143      */
 144     onDoubleClick_: function(e) {
 145       if (this.titleIsEditable_) {
 146         this.input_.disabled = false;
 147         this.input_.focus();
 148         this.input_.select();
 149       }
 150     },
 151
 152     /**
 153      * Prevent mouse down on the input from selecting it.
 154      * @param {Event} e The click event.
 155      * @private
 156      */
 157     onInputMouseDown_: function(e) {
 158       if (this.ownerDocument.activeElement != this.input_)
 159         e.preventDefault();
 160     },
 161
 162     /**
 163      * Handle keypresses on the input.
 164      * @param {Event} e The click event.
 165      * @private
 166      */
 167     onInputKeyDown_: function(e) {
 168       switch (e.keyIdentifier) {
 169         case 'U+001B':  // Escape cancels edits.
 170           this.input_.value = this.displayTitle;
 171         case 'Enter':  // Fall through.
 172           this.input_.blur();
 173           break;
 174       }
 175     },
 176
 177     /**
 178      * When the input blurs, commit the edited changes.
 179      * @param {Event} e The blur event.
 180      * @private
 181      */
 182     onInputBlur_: function(e) {
 183       window.getSelection().removeAllRanges();
 184       this.displayTitle = this.input_.value;
 185       ntp.saveAppPageName(this.page_, this.displayTitle);
 186       this.input_.disabled = true;
 187     },
 188
 189     shouldAcceptDrag: function(e) {
 190       return this.page_.shouldAcceptDrag(e);
 191     },
 192
 193     /**
 194      * A drag has entered the navigation dot. If the user hovers long enough,
 195      * we will navigate to the relevant page.
 196      * @param {Event} e The MouseOver event for the drag.
 197      * @private
 198      */
 199     doDragEnter: function(e) {
 200       var self = this;
 201       function navPageClearTimeout() {
 202         self.switchToPage();
 203         self.dragNavTimeout = null;
 204       }
 205       this.dragNavTimeout = window.setTimeout(navPageClearTimeout, 500);
 206
 207       this.doDragOver(e);
 208     },
 209
 210     /**
 211      * A dragged element has moved over the navigation dot. Show the correct
 212      * indicator and prevent default handling so the <input> won't act as a drag
 213      * target.
 214      * @param {Event} e The MouseOver event for the drag.
 215      * @private
 216      */
 217     doDragOver: function(e) {
 218       e.preventDefault();
 219
 220       if (!this.dragWrapper_.isCurrentDragTarget)
 221         ntp.setCurrentDropEffect(e.dataTransfer, 'none');
 222       else
 223         this.page_.setDropEffect(e.dataTransfer);
 224     },
 225
 226     /**
 227      * A dragged element has been dropped on the navigation dot. Tell the page
 228      * to append it.
 229      * @param {Event} e The MouseOver event for the drag.
 230      * @private
 231      */
 232     doDrop: function(e) {
 233       e.stopPropagation();
 234       var tile = ntp.getCurrentlyDraggingTile();
 235       if (tile && tile.tilePage != this.page_)
 236         this.page_.appendDraggingTile();
 237       // TODO(estade): handle non-tile drags.
 238
 239       this.cancelDelayedSwitch_();
 240     },
 241
 242     /**
 243      * The drag has left the navigation dot.
 244      * @param {Event} e The MouseOver event for the drag.
 245      * @private
 246      */
 247     doDragLeave: function(e) {
 248       this.cancelDelayedSwitch_();
 249     },
 250
 251     /**
 252      * Cancels the timer for page switching.
 253      * @private
 254      */
 255     cancelDelayedSwitch_: function() {
 256       if (this.dragNavTimeout) {
 257         window.clearTimeout(this.dragNavTimeout);
 258         this.dragNavTimeout = null;
 259       }
 260     },
 261
 262     /**
 263      * A transition has ended.
 264      * @param {Event} e The transition end event.
 265      * @private
 266      */
 267     onTransitionEnd_: function(e) {
 268       if (e.propertyName === 'max-width' && this.classList.contains('small'))
 269         this.parentNode.removeChild(this);
 270     },
 271   };
 272
 273   return {
 274     NavDot: NavDot,
 275   };
 276 });