[ChromeOS] Reland - Make WebUI login use only needed resources.

chrome/browser/resources/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 Slider = (function() {
-  'use strict';
-
-  /**
-   * The type of Event sent by Slider
-   * @constructor
-   * @param {string} type The type of event (one of Slider.EventType).
-   * @param {Element!} targetCard The element being dragged.
-   */
-  Slider.Event = function(type, activeCardIndex) {
-    var event = document.createEvent('Event');
-    event.initEvent(type, true, true);
-    event.__proto__ = Slider.Event.prototype;
-
-    event.activeCardIndex = activeCardIndex;
-
-    return event;
-  };
-
-  Slider.Event.prototype = {
-    __proto__: Event.prototype
-  };
-
-  /**
-   * @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 {!Array.<!Element>} cards The individual viewable cards.
-   */
-  function Slider(frame, container, cards) {
-    /**
-     * @type {!Element}
-     * @private
-     */
-    this.frame_ = frame;
-
-    /**
-     * @type {!Element}
-     * @private
-     */
-    this.container_ = container;
-
-    /**
-     * @type {!Array.<!Element>}
-     * @private
-     */
-    this.cards_ = cards;
-
-    this.lastLeft_ = 0;
-
-    this.ignoreClicks_ = false;
-
-    /**
-     * @type {!TouchHandler}
-     * @private
-     */
-    this.touchHandler_ = new TouchHandler(this.container_);
-  }
-
-  /**
-   * Events fired by the slider.
-   * Events are fired at the container.
-   */
-  Slider.EventType = {
-    // Fired when the user slides to another card.
-    SELECTION_CHANGED: 'slider:selection_changed',
-    // Fired at the card element when it is activated.
-    ACTIVATE: 'slider:activate',
-    // Fired at the card elment when it is deactivated.
-    DEACTIVATE: 'slider:deactivate',
-  };
-
-  /**
-   * The time to transition between cards when animating. Measured in ms.
-   * @type {number}
-   * @private
-   * @const
-   */
-  Slider.TRANSITION_TIME_ = 200;
-
-  /**
-   * The minimum velocity required to transition cards if they did not drag past
-   * the halfway point between cards. Measured in pixels / ms.
-   * @type {number}
-   * @private
-   * @const
-   */
-  Slider.TRANSITION_VELOCITY_THRESHOLD_ = 0.2;
-
-  Slider.prototype = {
-    currentCard_: null,
-
-    /**
-     * Initialize all elements and event handlers. Must call after construction
-     * and before usage.
-     */
-    initialize: function() {
-      var view = this.container_.ownerDocument.defaultView;
-      assert(view.getComputedStyle(this.frame_).overflow == 'hidden',
-          'Frame should be overflow hidden.');
-      assert(view.getComputedStyle(this.container_).position == 'static',
-          'Container should be position static.');
-      for (var i = 0, card; card = this.cards_[i]; i++) {
-        assert(view.getComputedStyle(card).position == 'static',
-            'Cards should be position static.');
-      }
-
-      var self = this;
-      var clickSelf = function(e) {
-        self.onClick_(self, e);
-      };
-      this.container_.addEventListener('click', clickSelf , true);
-      this.touchHandler_.enable(/* opt_capture */ false);
-    },
-
-    /**
-     * 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,
-          'Invalid index in Slider#setCards');
-      this.cards_ = cards;
-    },
-
-    cardWidth: function() {
-      return this.cards_.length == 0 ? 0 : this.cards_[0].offsetWidth;
-    },
-
-    cardCount: function() {
-      return this.cards_.length;
-    },
-
-    get currentCard() {
-      if (this.currentCardIndex == null) {
-        return null;
-      }
-      return this.cards_[this.currentCard_];
-    },
-
-    /**
-     * Returns the index of the current card.
-     * @return {number} index of the current card.
-     */
-    get currentCardIndex() {
-      return this.currentCard_;
-    },
-
-    set currentCardIndex(card) {
-      // There's nothing to do if nothing has changed.
-      if (card == this.currentCard_) {
-        return;
-      }
-      if (this.currentCard_ != null) {
-        this.sendEvent_(Slider.EventType.DEACTIVATE,
-                        this.cards_[this.currentCard_], null);
-      }
-      var oldCard = this.currentCard_;
-      this.currentCard_ = card;
-      // If no cards are selected, restored the last scroll position,
-      // and re-enable the cards.
-      if (this.currentCard_ == null) {
-        this.sendEvent_(Slider.EventType.SELECTION_CHANGED, this.frame_, null);
-      } else {
-        // Center the newly selected card.
-        var cardPosition = card * this.cardWidth();
-        var centerOfContainer =
-            (this.frame_.offsetWidth - this.cardWidth()) / 2;
-      }
-      if (this.currentCard_ != null) {
-        this.sendEvent_(Slider.EventType.SELECTION_CHANGED, this.frame_,
-                        this.currentCard_);
-        // TODO(fsamuel): I can't think of a better way to do this currently.
-        // We wait a little bit of time to finish the animation and then call
-        // onActivateCard to make sure the WebUI doesn't resize while we're
-        // animating.
-        var self = this;
-        setTimeout(function() {
-          self.sendEvent_(Slider.EventType.ACTIVATE,
-                          self.cards_[self.currentCard_],
-                          self.currentCard_);
-        }, 80);
-      } // if
-    },
-
-    get ignoreClicks() {
-      return this.ignoreClicks_;
-    },
-
-    onClick_: function(self, e) {
-      if (self.ignoreClicks) {
-        self.ignoreClicks_ = false;
-        e.stopPropagation();
-      }
-    },
-
-    /**
-     * Cancel any current touch/slide as if we saw a touch end
-     */
-    cancelTouch: function() {
-      // Stop listening to any current touch
-      this.touchHandler_.cancelTouch();
-      this.ignoreClicks_ = false;
-    },
-
-    /**
-     * Send a Slider event to a specific card element
-     * @param {string} eventType The type of event to send.
-     * @param {!Element} target The element to send the event to.
-     * @private
-     */
-    sendEvent_: function(eventType, target, activeCardIndex) {
-      var event = new Slider.Event(eventType, activeCardIndex);
-      target.dispatchEvent(event);
-    },
-  };
-
-  return Slider;
-})();