| 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;
|
| -})();
|
|
|