[Aura] Initial app list webui.

chrome/browser/resources/shared/js/cr/ui/card_slider.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Card slider implementation. Allows you to create interactions
  * that have items that can slide left to right to reveal additional items.
  * Works by adding the necessary event handlers to a specific DOM structure
  * including a frame, container and cards.
  * - The frame defines the boundary of one item. Each card will be expanded to
  *   fill the width of the frame. This element is also overflow hidden so that
  *   the additional items left / right do not trigger horizontal scrolling.
  * - The container is what all the touch events are attached to. This element
  *   will be expanded to be the width of all cards.
  * - The cards are the individual viewable items. There should be one card for
  *   each item in the list. Only one card will be visible at a time. Two cards
  *   will be visible while you are transitioning between cards.
  *
  * This class is designed to work well on any hardware-accelerated touch device.
  * It should still work on pre-hardware accelerated devices it just won't feel
  * very good. It should also work well with a mouse.
  */
 
-
 // Use an anonymous function to enable strict mode just for this file (which
 // will be concatenated with other files when embedded in Chrome
-var CardSlider = (function() {
+cr.define('cr.ui', function() {
   'use strict';
 
   /**
    * @constructor
    * @param {!Element} frame The bounding rectangle that cards are visible in.
    * @param {!Element} container The surrounding element that will have event
    *     listeners attached to it.
    * @param {number} cardWidth The width of each card should have.
    */
   function CardSlider(frame, container, cardWidth) {
@@ skipping 23 matching lines @@
      */
     this.currentCard_ = 0;
 
     /**
      * @type {number}
      * @private
      */
     this.cardWidth_ = cardWidth;
 
     /**
-     * @type {!TouchHandler}
+     * @type {!cr.ui.TouchHandler}
      * @private
      */
-    this.touchHandler_ = new TouchHandler(this.container_);
-
+    this.touchHandler_ = new cr.ui.TouchHandler(this.container_);
   }
 
   /**
    * Events fired by the slider.
    * Events are fired at the container.
    */
   CardSlider.EventType = {
     // Fired when the user slides to another card.
     CARD_CHANGED: 'cardSlider:card_changed'
   };
@@ skipping 42 matching lines @@
       this.updateCardWidths_();
 
       this.mouseWheelScrollAmount_ = 0;
       this.mouseWheelCardSelected_ = false;
       this.mouseWheelIsContinuous_ = false;
       this.scrollClearTimeout_ = null;
       this.frame_.addEventListener('mousewheel',
                                    this.onMouseWheel_.bind(this));
 
       if (document.documentElement.getAttribute('touchui')) {
+        var TouchHandler = cr.ui.TouchHandler;
         this.container_.addEventListener(TouchHandler.EventType.TOUCH_START,
                                          this.onTouchStart_.bind(this));
         this.container_.addEventListener(TouchHandler.EventType.DRAG_START,
                                          this.onDragStart_.bind(this));
         this.container_.addEventListener(TouchHandler.EventType.DRAG_MOVE,
                                          this.onDragMove_.bind(this));
         this.container_.addEventListener(TouchHandler.EventType.DRAG_END,
                                          this.onDragEnd_.bind(this));
 
         this.touchHandler_.enable(/* opt_capture */ false);
@@ skipping 98 matching lines @@
         this.mouseWheelIsContinuous_ = true;
 
       if (this.mouseWheelIsContinuous_) {
         // For continuous devices, detect a page swipe when the accumulated
         // delta matches a pre-defined threshhold.  After changing the page,
         // ignore wheel events for a short time before repeating this process.
         if (this.mouseWheelCardSelected_) return;
         this.mouseWheelScrollAmount_ += e.wheelDeltaX;
         if (Math.abs(this.mouseWheelScrollAmount_) >= 600) {
           var pagesToScroll = this.mouseWheelScrollAmount_ > 0 ? 1 : -1;
-          if (!ntp4.isRTL())
+          if (!isRTL())
             pagesToScroll *= -1;
           var newCardIndex = this.currentCard + pagesToScroll;
           newCardIndex = Math.min(this.cards_.length - 1,
                                   Math.max(0, newCardIndex));
           this.selectCard(newCardIndex, true);
           this.mouseWheelCardSelected_ = true;
         }
       } else {
         // For discrete devices, consider each wheel tick a page change.
         var pagesToScroll = e.wheelDeltaX / DISCRETE_DELTA;
-        if (!ntp4.isRTL())
+        if (!isRTL())
           pagesToScroll *= -1;
         var newCardIndex = this.currentCard + pagesToScroll;
         newCardIndex = Math.min(this.cards_.length - 1,
                                 Math.max(0, newCardIndex));
         this.selectCard(newCardIndex, true);
       }
 
       // We got a mouse wheel event, so cancel any pending scroll wheel timeout.
       if (this.scrollClearTimeout_ != null)
         clearTimeout(this.scrollClearTimeout_);
@@ skipping 67 matching lines @@
 
     /**
      * Centers the view on the card denoted by this.currentCard. Can either
      * animate to that card or snap to it.
      * @param {boolean=} opt_animate If true will animate transition from
      *     current position to new position.
      * @private
      */
     transformToCurrentCard_: function(opt_animate) {
       this.currentLeft_ = -this.cardWidth_ *
-          (ntp4.isRTL() ? this.cards_.length - this.currentCard - 1 :
-                          this.currentCard);
+          (isRTL() ? this.cards_.length - this.currentCard - 1 :
+                     this.currentCard);
 
       // Animate to the current card, which will either transition if the
       // current card is new, or reset the existing card if we didn't drag
       // enough to change cards.
       var transition = '';
       if (opt_animate) {
         transition = '-webkit-transform ' + CardSlider.TRANSITION_TIME_ +
                      'ms ease-in-out';
       }
       this.container_.style.WebkitTransition = transition;
@@ skipping 11 matching lines @@
       // fixed-layout elements we could simply set the element's position to
       // fixed and modify 'left' instead.
       this.container_.style.WebkitTransform = 'translate3d(' + x + 'px, 0, 0)';
     },
 
     /* Touch ******************************************************************/
 
     /**
      * Clear any transition that is in progress and enable dragging for the
      * touch.
-     * @param {!TouchHandler.Event} e The TouchHandler event.
+     * @param {!cr.ui.TouchHandler.Event} e The TouchHandler event.
      * @private
      */
     onTouchStart_: function(e) {
       this.container_.style.WebkitTransition = '';
       e.enableDrag = true;
     },
 
     /**
      * Tell the TouchHandler that dragging is acceptable when the user begins by
      * scrolling horizontally.
-     * @param {!TouchHandler.Event} e The TouchHandler event.
+     * @param {!cr.ui.TouchHandler.Event} e The TouchHandler event.
      * @private
      */
     onDragStart_: function(e) {
       e.enableDrag = Math.abs(e.dragDeltaX) > Math.abs(e.dragDeltaY);
     },
 
     /**
      * On each drag move event reposition the container appropriately so the
      * cards look like they are sliding.
-     * @param {!TouchHandler.Event} e The TouchHandler event.
+     * @param {!cr.ui.TouchHandler.Event} e The TouchHandler event.
      * @private
      */
     onDragMove_: function(e) {
       var deltaX = e.dragDeltaX;
       // If dragging beyond the first or last card then apply a backoff so the
       // dragging feels stickier than usual.
       if (!this.currentCard && deltaX > 0 ||
           this.currentCard == (this.cards_.length - 1) && deltaX < 0) {
         deltaX /= 2;
       }
       this.translateTo_(this.currentLeft_ + deltaX);
     },
 
     /**
      * On drag end events we may want to transition to another card, depending
      * on the ending position of the drag and the velocity of the drag.
-     * @param {!TouchHandler.Event} e The TouchHandler event.
+     * @param {!cr.ui.TouchHandler.Event} e The TouchHandler event.
      * @private
      */
     onDragEnd_: function(e) {
       var deltaX = e.dragDeltaX;
       var velocity = this.touchHandler_.getEndVelocity().x;
       var newX = this.currentLeft_ + deltaX;
       var newCardIndex = Math.round(-newX / this.cardWidth_);
 
       if (newCardIndex == this.currentCard && Math.abs(velocity) >
           CardSlider.TRANSITION_VELOCITY_THRESHOLD_) {
@@ skipping 11 matching lines @@
      */
     cancelTouch: function() {
       // Stop listening to any current touch
       this.touchHandler_.cancelTouch();
 
       // Ensure we're at a card bounary
       this.transformToCurrentCard_(true);
     },
   };
 
-  return CardSlider;
-})();
+  return {
+    CardSlider: CardSlider
+  };
+});