Run clang-format on ui/webui/resources

ui/webui/resources/js/cr/ui/card_slider.js

 // Copyright (c) 2012 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
@@ skipping 101 matching lines @@
     deltaX_: 0,
 
     /**
      * Initialize all elements and event handlers. Must call after construction
      * and before usage.
      * @param {boolean} ignoreMouseWheelEvents If true, horizontal mouse wheel
      *     events will be ignored, rather than flipping between pages.
      */
     initialize: function(ignoreMouseWheelEvents) {
       var view = this.container_.ownerDocument.defaultView;
-      assert(view.getComputedStyle(this.container_).display == '-webkit-box',
+      assert(
+          view.getComputedStyle(this.container_).display == '-webkit-box',
           'Container should be display -webkit-box.');
-      assert(view.getComputedStyle(this.frame_).overflow == 'hidden',
+      assert(
+          view.getComputedStyle(this.frame_).overflow == 'hidden',
           'Frame should be overflow hidden.');
-      assert(view.getComputedStyle(this.container_).position == 'static',
+      assert(
+          view.getComputedStyle(this.container_).position == 'static',
           'Container should be position static.');
 
       this.updateCardWidths_();
 
       this.mouseWheelScrollAmount_ = 0;
       this.mouseWheelCardSelected_ = false;
       this.mouseWheelIsContinuous_ = false;
       this.scrollClearTimeout_ = null;
       if (!ignoreMouseWheelEvents) {
-        this.frame_.addEventListener('mousewheel',
-                                     this.onMouseWheel_.bind(this));
+        this.frame_.addEventListener(
+            'mousewheel', this.onMouseWheel_.bind(this));
       }
       this.container_.addEventListener(
           'webkitTransitionEnd', this.onWebkitTransitionEnd_.bind(this));
 
       // Also support touch events in case a touch screen happens to be
       // available.  Note that this has minimal impact in the common case of
       // no touch events (eg. we're mainly just adding listeners for events that
       // will never trigger).
       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.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);
     },
 
     /**
      * Use in cases where the width of the frame has changed in order to update
      * the width of cards. For example should be used when orientation changes
      * in full width sliders.
      * @param {number} newCardWidth Width all cards should have, in pixels.
      */
     resize: function(newCardWidth) {
       if (newCardWidth != this.cardWidth_) {
         this.cardWidth_ = newCardWidth;
 
         this.updateCardWidths_();
 
         // Must upate the transform on the container to show the correct card.
         this.transformToCurrentCard_();
       }
     },
 
     /**
      * Sets the cards used. Can be called more than once to switch card sets.
      * @param {!Array<!Element>} cards The individual viewable cards.
      * @param {number} index Index of the card to in the new set of cards to
      *     navigate to.
      */
     setCards: function(cards, index) {
-      assert(index >= 0 && index < cards.length,
+      assert(
+          index >= 0 && index < cards.length,
           'Invalid index in CardSlider#setCards');
       this.cards_ = cards;
 
       this.updateCardWidths_();
       this.updateSelectedCardAttributes_();
 
       // Jump to the given card index.
       this.selectCard(index, false, false, true);
     },
 
@@ skipping 23 matching lines @@
      */
     updateCardWidths_: function() {
       for (var i = 0, card; card = this.cards_[i]; i++)
         card.style.width = this.cardWidth_ + 'px';
     },
 
     /**
      * Returns the index of the current card.
      * @return {number} index of the current card.
      */
-    get currentCard() {
-      return this.currentCard_;
-    },
+    get currentCard() { return this.currentCard_; },
 
     /**
      * Allows setting the current card index.
      * @param {number} index A new index to set the current index to.
      * @return {number} The new index after having been set.
      */
-    set currentCard(index) {
-      return (this.currentCard_ = index);
-    },
+    set currentCard(index) { return (this.currentCard_ = index); },
 
     /**
      * Returns the number of cards.
      * @return {number} number of cards.
      */
-    get cardCount() {
-      return this.cards_.length;
-    },
+    get cardCount() { return this.cards_.length; },
 
     /**
      * Returns the current card itself.
      * @return {!Element} the currently shown card.
      */
-    get currentCardValue() {
-      return this.cards_[this.currentCard_];
-    },
+    get currentCardValue() { return this.cards_[this.currentCard_]; },
 
     /**
      * Returns the frame holding the cards.
      * @return {Element} The frame used to position the cards.
      */
-    get frame() {
-      return this.frame_;
-    },
+    get frame() { return this.frame_; },
 
     /**
      * Handle horizontal scrolls to flip between pages.
      * @private
      */
     onMouseWheel_: function(e) {
       if (e.wheelDeltaX == 0)
         return;
 
       // Continuous devices such as an Apple Touchpad or Apple MagicMouse will
       // send arbitrary delta values. Conversly, standard mousewheels will
       // send delta values in increments of 120.  (There is of course a small
       // chance we mistake a continuous device for a non-continuous device.
       // Unfortunately there isn't a better way to do this until real touch
       // events are available to desktop clients.)
       var DISCRETE_DELTA = 120;
       if (e.wheelDeltaX % DISCRETE_DELTA)
         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;
+        if (this.mouseWheelCardSelected_)
+          return;
         this.mouseWheelScrollAmount_ += e.wheelDeltaX;
         if (Math.abs(this.mouseWheelScrollAmount_) >= 600) {
           var pagesToScroll = this.mouseWheelScrollAmount_ > 0 ? 1 : -1;
           if (!isRTL())
             pagesToScroll *= -1;
           var newCardIndex = this.currentCard + pagesToScroll;
-          newCardIndex = Math.min(this.cards_.length - 1,
-                                  Math.max(0, newCardIndex));
+          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 (!isRTL())
           pagesToScroll *= -1;
         var newCardIndex = this.currentCard + pagesToScroll;
-        newCardIndex = Math.min(this.cards_.length - 1,
-                                Math.max(0, newCardIndex));
+        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_);
       // If we didn't use up all the scroll, hold onto it for a little bit, but
       // drop it after a delay.
       if (this.mouseWheelScrollAmount_ != 0) {
         this.scrollClearTimeout_ =
@@ skipping 140 matching lines @@
       e.removedCard = card;
       e.removedIndex = index;
       this.container_.dispatchEvent(e);
     },
 
     /**
      * This re-syncs the transform that's used to position the frame in
      * the likely event it needs to be updated by a card being inserted or
      * removed in the flow.
      */
-    repositionFrame: function() {
-      this.transformToCurrentCard_();
-    },
+    repositionFrame: function() { this.transformToCurrentCard_(); },
 
     /**
      * Checks the the given |index| exists in this.cards_.
      * @param {number} index An index to check.
      * @private
      */
     assertValidIndex_: function(index) {
       assert(index >= 0 && index < this.cards_.length);
     },
 
     /**
      * Selects a new card, ensuring that it is a valid index, transforming the
      * view and possibly calling the change card callback.
      * @param {number} newCardIndex Index of card to show.
      * @param {boolean=} opt_animate If true will animate transition from
      *     current position to new position.
      * @param {boolean=} opt_dontNotify If true, don't tell subscribers that
      *     we've changed cards.
      * @param {boolean=} opt_forceChange If true, ignore if the card already
      *     selected.
      */
-    selectCard: function(newCardIndex,
-                         opt_animate,
-                         opt_dontNotify,
-                         opt_forceChange) {
+    selectCard: function(
+        newCardIndex, opt_animate, opt_dontNotify, opt_forceChange) {
       this.assertValidIndex_(newCardIndex);
 
       var previousCard = this.currentCardValue;
       var isChangingCard =
           !this.cards_[newCardIndex].classList.contains('selected-card');
 
       if (typeof opt_forceChange != 'undefined' && opt_forceChange)
         isChangingCard = true;
 
       if (isChangingCard) {
         this.currentCard_ = newCardIndex;
         this.updateSelectedCardAttributes_();
       }
 
       var willTransitionHappen = this.transformToCurrentCard_(opt_animate);
 
       if (isChangingCard && !opt_dontNotify) {
         var event = document.createEvent('Event');
         event.initEvent('cardSlider:card_changed', true, true);
         event.cardSlider = this;
         event.wasAnimated = !!opt_animate;
         this.container_.dispatchEvent(event);
 
         // We also dispatch an event on the cards themselves.
         if (previousCard) {
-          cr.dispatchSimpleEvent(previousCard, 'carddeselected',
-                                 true, true);
+          cr.dispatchSimpleEvent(previousCard, 'carddeselected', true, true);
         }
-        cr.dispatchSimpleEvent(this.currentCardValue, 'cardselected',
-                               true, true);
+        cr.dispatchSimpleEvent(
+            this.currentCardValue, 'cardselected', true, true);
       }
 
       // If we're not changing, animated, or transitioning, fire a
       // cardSlider:card_change_ended event right away.
       if ((!isChangingCard || !opt_animate || !willTransitionHappen) &&
           !opt_dontNotify) {
         this.fireChangeEndedEvent_(false);
       }
     },
 
@@ skipping 25 matching lines @@
       // If there's no change, return something to let the caller know there
       // won't be a transition occuring.
       if (prevLeft == this.currentLeft_ && this.deltaX_ == 0)
         return false;
 
       // 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 = 'transform ' + CardSlider.TRANSITION_TIME_ +
-                     'ms ease-in-out';
+        transition =
+            'transform ' + CardSlider.TRANSITION_TIME_ + 'ms ease-in-out';
       }
       this.container_.style.WebkitTransition = transition;
       this.translateTo_(this.currentLeft_);
 
       return true;
     },
 
     /**
      * Moves the view to the specified position.
      * @param {number} x Horizontal position to move to.
@@ skipping 10 matching lines @@
 
     /* Touch ******************************************************************/
 
     /**
      * Clear any transition that is in progress and enable dragging for the
      * touch.
      * @param {!Event} e The TouchHandler event.
      * @private
      */
     onTouchStart_: function(e) {
-      e = /** @type {!cr.ui.TouchHandler.Event} */(e);
+      e = /** @type {!cr.ui.TouchHandler.Event} */ (e);
       this.container_.style.WebkitTransition = '';
       e.enableDrag = true;
     },
 
     /**
      * Tell the TouchHandler that dragging is acceptable when the user begins by
      * scrolling horizontally and there is more than one card to slide.
      * @param {!Event} e The TouchHandler event.
      * @private
      */
     onDragStart_: function(e) {
-      e = /** @type {!cr.ui.TouchHandler.Event} */(e);
-      e.enableDrag = this.cardCount > 1 && Math.abs(e.dragDeltaX) >
-          Math.abs(e.dragDeltaY);
+      e = /** @type {!cr.ui.TouchHandler.Event} */ (e);
+      e.enableDrag =
+          this.cardCount > 1 && 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 {!Event} e The TouchHandler event.
      * @private
      */
     onDragMove_: function(e) {
-      e = /** @type {!cr.ui.TouchHandler.Event} */(e);
+      e = /** @type {!cr.ui.TouchHandler.Event} */ (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 {!Event} e The TouchHandler event.
      * @private
      */
     onDragEnd_: function(e) {
-      e = /** @type {!cr.ui.TouchHandler.Event} */(e);
+      e = /** @type {!cr.ui.TouchHandler.Event} */ (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_) {
+      if (newCardIndex == this.currentCard &&
+          Math.abs(velocity) > CardSlider.TRANSITION_VELOCITY_THRESHOLD_) {
         // The drag wasn't far enough to change cards but the velocity was
         // high enough to transition anyways. If the velocity is to the left
         // (negative) then the user wishes to go right (card + 1).
         newCardIndex += velocity > 0 ? -1 : 1;
       }
       // Ensure that the new card index is valid.  The new card index could be
       // invalid if a swipe suggests scrolling off the end of the list of
       // cards.
       if (newCardIndex < 0)
         newCardIndex = 0;
       else if (newCardIndex >= this.cardCount)
         newCardIndex = this.cardCount - 1;
       this.selectCard(newCardIndex, /* animate */ true);
     },
 
     /**
      * Cancel any current touch/slide as if we saw a touch end
      */
     cancelTouch: function() {
       // Stop listening to any current touch
       this.touchHandler_.cancelTouch();
 
       // Ensure we're at a card bounary
       this.transformToCurrentCard_(true);
     },
   };
 
-  return {
-    CardSlider: CardSlider
-  };
+  return {CardSlider: CardSlider};
 });