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