chrome/browser/resources/ntp4/page_switcher.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 Page switcher
   7  * This is the class for the left and right navigation arrows that switch
   8  * between pages.
   9  */
  10 cr.define('ntp', function() {
  11
  12   /**
  13    * @constructor
  14    * @extends {HTMLButtonElement}
  15    */
  16   function PageSwitcher() {
  17   }
  18
  19   PageSwitcher.prototype = {
  20     __proto__: HTMLButtonElement.prototype,
  21
  22     decorate: function(el) {
  23       el.__proto__ = PageSwitcher.prototype;
  24
  25       el.addEventListener('click', el.activate_);
  26
  27       el.direction_ = el.id == 'page-switcher-start' ? -1 : 1;
  28
  29       el.dragWrapper_ = new cr.ui.DragWrapper(el, el);
  30     },
  31
  32     /**
  33      * Activate the switcher (go to the next card).
  34      * @private
  35      */
  36     activate_: function() {
  37       ntp.getCardSlider().selectCard(this.nextCardIndex_(), true);
  38     },
  39
  40     /**
  41      * Calculate the index of the card that this button will switch to.
  42      * @private
  43      */
  44     nextCardIndex_: function() {
  45       var cardSlider = ntp.getCardSlider();
  46       var index = cardSlider.currentCard + this.direction_;
  47       var numCards = cardSlider.cardCount - 1;
  48       return Math.max(0, Math.min(index, numCards));
  49     },
  50
  51     /**
  52      * Update the accessible label attribute of this button, based on the
  53      * current position in the card slider and the names of the cards.
  54      * @param {NodeList} dots The dot elements which display the names of the
  55      *     cards.
  56      */
  57     updateButtonAccessibleLabel: function(dots) {
  58       var currentIndex = ntp.getCardSlider().currentCard;
  59       var nextCardIndex = this.nextCardIndex_();
  60       if (nextCardIndex == currentIndex) {
  61         this.setAttribute('aria-label', '');  // No next card.
  62         return;
  63       }
  64
  65       var currentDot = dots[currentIndex];
  66       var nextDot = dots[nextCardIndex];
  67       if (!currentDot || !nextDot) {
  68         this.setAttribute('aria-label', '');  // Dots not initialised yet.
  69         return;
  70       }
  71
  72       var currentPageTitle = currentDot.displayTitle;
  73       var nextPageTitle = nextDot.displayTitle;
  74       var msgName = (currentPageTitle == nextPageTitle) ?
  75           'page_switcher_same_title' : 'page_switcher_change_title';
  76       var ariaLabel = loadTimeData.getStringF(msgName, nextPageTitle);
  77       this.setAttribute('aria-label', ariaLabel);
  78     },
  79
  80     shouldAcceptDrag: function(e) {
  81       // Only allow page switching when a drop could happen on the page being
  82       // switched to.
  83       var nextPage = ntp.getCardSlider().getCardAtIndex(this.nextCardIndex_());
  84       return nextPage.shouldAcceptDrag(e);
  85     },
  86
  87     doDragEnter: function(e) {
  88       this.scheduleDelayedSwitch_(e);
  89       this.doDragOver(e);
  90     },
  91
  92     doDragLeave: function(e) {
  93       this.cancelDelayedSwitch_();
  94     },
  95
  96     doDragOver: function(e) {
  97       e.preventDefault();
  98       var targetPage = ntp.getCardSlider().currentCardValue;
  99       if (targetPage.shouldAcceptDrag(e))
 100         targetPage.setDropEffect(e.dataTransfer);
 101     },
 102
 103     doDrop: function(e) {
 104       e.stopPropagation();
 105       this.cancelDelayedSwitch_();
 106
 107       var tile = ntp.getCurrentlyDraggingTile();
 108       if (!tile)
 109         return;
 110
 111       var sourcePage = tile.tilePage;
 112       var targetPage = ntp.getCardSlider().currentCardValue;
 113       if (targetPage == sourcePage || !targetPage.shouldAcceptDrag(e))
 114         return;
 115
 116       targetPage.appendDraggingTile();
 117     },
 118
 119     /**
 120      * Starts a timer to activate the switcher. The timer repeats until
 121      * cancelled by cancelDelayedSwitch_.
 122      * @private
 123      */
 124     scheduleDelayedSwitch_: function(e) {
 125       // Stop switching when the next page can't be dropped onto.
 126       var nextPage = ntp.getCardSlider().getCardAtIndex(this.nextCardIndex_());
 127       if (!nextPage.shouldAcceptDrag(e))
 128         return;
 129
 130       var self = this;
 131       function navPageClearTimeout() {
 132         self.activate_();
 133         self.dragNavTimeout_ = null;
 134         self.scheduleDelayedSwitch_(e);
 135       }
 136       this.dragNavTimeout_ = window.setTimeout(navPageClearTimeout, 500);
 137     },
 138
 139     /**
 140      * Cancels the timer that activates the switcher while dragging.
 141      * @private
 142      */
 143     cancelDelayedSwitch_: function() {
 144       if (this.dragNavTimeout_) {
 145         window.clearTimeout(this.dragNavTimeout_);
 146         this.dragNavTimeout_ = null;
 147       }
 148     },
 149
 150   };
 151
 152   /** @const */
 153   var initializePageSwitcher = PageSwitcher.prototype.decorate;
 154
 155   return {
 156     initializePageSwitcher: initializePageSwitcher,
 157     PageSwitcher: PageSwitcher
 158   };
 159 });