Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2428)

Unified Diff: chrome/browser/resources/slider.js

Issue 7980012: [ChromeOS] Reland - Make WebUI login use only needed resources. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 9 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome/browser/resources/login_ui.css ('k') | chrome/browser/ui/webui/chrome_web_ui_factory.cc » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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;
-})();
« no previous file with comments | « chrome/browser/resources/login_ui.css ('k') | chrome/browser/ui/webui/chrome_web_ui_factory.cc » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698