| Index: chrome/browser/resources/touch_ntp/slider.js
|
| diff --git a/chrome/browser/resources/touch_ntp/slider.js b/chrome/browser/resources/touch_ntp/slider.js
|
| deleted file mode 100644
|
| index 3f7c7f3e7ed34e5934d44045d3bc9787c8f73854..0000000000000000000000000000000000000000
|
| --- a/chrome/browser/resources/touch_ntp/slider.js
|
| +++ /dev/null
|
| @@ -1,336 +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';
|
| -
|
| - /**
|
| - * @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.
|
| - * @param {number} currentCard The index of the card that is currently
|
| - * visible.
|
| - * @param {number} cardWidth The width of each card should have.
|
| - */
|
| - function Slider(frame, container, cards, currentCard, cardWidth) {
|
| - /**
|
| - * @type {!Element}
|
| - * @private
|
| - */
|
| - this.frame_ = frame;
|
| -
|
| - /**
|
| - * @type {!Element}
|
| - * @private
|
| - */
|
| - this.container_ = container;
|
| -
|
| - /**
|
| - * @type {!Array.<!Element>}
|
| - * @private
|
| - */
|
| - this.cards_ = cards;
|
| -
|
| - /**
|
| - * @type {number}
|
| - * @private
|
| - */
|
| - this.currentCard_ = currentCard;
|
| -
|
| - /**
|
| - * @type {number}
|
| - * @private
|
| - */
|
| - this.cardWidth_ = cardWidth;
|
| -
|
| - /**
|
| - * @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.
|
| - CARD_CHANGED: 'slider:card_changed'
|
| - };
|
| -
|
| -
|
| - /**
|
| - * 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 = {
|
| - /**
|
| - * The current left offset of the container relative to the frame.
|
| - * @type {number}
|
| - * @private
|
| - */
|
| - currentLeft_: 0,
|
| -
|
| - /**
|
| - * 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.container_).display == '-webkit-box',
|
| - 'Container should be display -webkit-box.');
|
| - 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.');
|
| - }
|
| -
|
| - this.updateCardWidths_();
|
| - this.transformToCurrentCard_();
|
| -
|
| - 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,
|
| - 'Invalid index in Slider#setCards');
|
| - this.cards_ = cards;
|
| -
|
| - this.updateCardWidths_();
|
| -
|
| - // Jump to the given card index.
|
| - this.selectCard(index);
|
| - },
|
| -
|
| - /**
|
| - * Updates the width of each card.
|
| - * @private
|
| - */
|
| - 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_;
|
| - },
|
| -
|
| - /**
|
| - * Clear any transition that is in progress and enable dragging for the
|
| - * touch.
|
| - * @param {!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.
|
| - * @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.
|
| - * @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);
|
| - },
|
| -
|
| - /**
|
| - * Moves the view to the specified position.
|
| - * @param {number} x Horizontal position to move to.
|
| - * @private
|
| - */
|
| - translateTo_: function(x) {
|
| - // We use a webkitTransform to slide because this is GPU accelerated on
|
| - // Chrome and iOS. Once Chrome does GPU acceleration on the position
|
| - // 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)';
|
| - },
|
| -
|
| - /**
|
| - * 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.
|
| - * @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) >
|
| - Slider.TRANSITION_VELOCITY_THRESHOLD_) {
|
| - // If 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;
|
| - }
|
| -
|
| - 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);
|
| - },
|
| -
|
| - /**
|
| - * 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.
|
| - */
|
| - selectCard: function(newCardIndex, opt_animate) {
|
| - var isChangingCard = newCardIndex >= 0 &&
|
| - newCardIndex < this.cards_.length &&
|
| - newCardIndex != this.currentCard;
|
| - if (isChangingCard) {
|
| - // If we have a new card index and it is valid then update the left
|
| - // position and current card index.
|
| - this.currentCard_ = newCardIndex;
|
| - }
|
| -
|
| - this.transformToCurrentCard_(opt_animate);
|
| -
|
| - if (isChangingCard) {
|
| - var event = document.createEvent('Event');
|
| - event.initEvent(Slider.EventType.CARD_CHANGED, true, true);
|
| - event.slider = this;
|
| - this.container_.dispatchEvent(event);
|
| - }
|
| - },
|
| -
|
| - /**
|
| - * 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.currentCard * this.cardWidth_;
|
| -
|
| - // 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 ' + Slider.TRANSITION_TIME_ +
|
| - 'ms ease-in-out';
|
| - }
|
| - this.container_.style.WebkitTransition = transition;
|
| - this.translateTo_(this.currentLeft_);
|
| - }
|
| - };
|
| -
|
| - return Slider;
|
| -})();
|
|
|