Index: chrome/browser/resources/slider.js |
diff --git a/chrome/browser/resources/slider.js b/chrome/browser/resources/slider.js |
deleted file mode 100644 |
index 9432e35f89ab75576310b6f678ad5868dad2ef68..0000000000000000000000000000000000000000 |
--- a/chrome/browser/resources/slider.js |
+++ /dev/null |
@@ -1,247 +0,0 @@ |
-// 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; |
-})(); |