| Index: experimental/flocking_geese/js/slider.js
|
| diff --git a/experimental/flocking_geese/js/slider.js b/experimental/flocking_geese/js/slider.js
|
| deleted file mode 100644
|
| index 791006b21d2ce976e1a9a29b08ed4165b517ba86..0000000000000000000000000000000000000000
|
| --- a/experimental/flocking_geese/js/slider.js
|
| +++ /dev/null
|
| @@ -1,348 +0,0 @@
|
| -// Copyright 2011 (c) The Native Client Authors. All rights reserved.
|
| -// Use of this source code is governed by a BSD-style license that can be
|
| -// found in the LICENSE file.
|
| -
|
| -/**
|
| - * @file
|
| - * A slider control.
|
| - */
|
| -
|
| -goog.provide('Slider');
|
| -goog.provide('Slider.Orientation');
|
| -goog.provide('Slider.SliderEvents');
|
| -
|
| -goog.require('goog.Disposable');
|
| -goog.require('goog.dom');
|
| -goog.require('goog.events');
|
| -goog.require('goog.events.EventTarget');
|
| -goog.require('goog.events.EventType');
|
| -goog.require('goog.style');
|
| -
|
| -/**
|
| - * The slider control.
|
| - * @param {!Array} stepObjects An array of objects, each object is associated
|
| - * with the step at the object's index in the array. The object is
|
| - * returned by objectAtStepValue().
|
| - * @param {?string} opt_orientation The orentation, default is HORIZONTAL.
|
| - * @constructor
|
| - * @extends {goog.EventTarget}
|
| - */
|
| -Slider = function(stepObjects, opt_orientation) {
|
| - goog.events.EventTarget.call(this);
|
| -
|
| - /**
|
| - * Cached DOM elements for the slider parts.
|
| - * @type {Element}
|
| - * @private
|
| - */
|
| - this.container_ = null; // The slider's outer container.
|
| - this.ruler_ = null; // The slider's ruler element.
|
| - this.thumb_ = null; // The slider's thumb.
|
| -
|
| - /**
|
| - * The current value. In a discreet slider, this has to be an even multiple
|
| - * of |this.stepSize_|.
|
| - */
|
| - this.currentValue_ = 0;
|
| -
|
| - /**
|
| - * The number of steps between the start and end point (not including the
|
| - * end points).
|
| - * @type {number}
|
| - * @private
|
| - */
|
| - this.stepCount_ = stepObjects.length;
|
| -
|
| - /**
|
| - * The step objects.
|
| - * @type {Array}
|
| - * @private
|
| - */
|
| - this.stepObjects_ = stepObjects;
|
| -
|
| - /**
|
| - * The orientation. 'h' means horizontal (the default); 'v' means vertical.
|
| - * @type {string}
|
| - * @private
|
| - */
|
| - this.orientation_ = opt_orientation || Slider.Orientation.HORIZONTAL;
|
| -
|
| - /**
|
| - * Indicates whether the thumb is being dragged.
|
| - * @type {boolean}
|
| - * @private
|
| - */
|
| - this.isDragging_ = false;
|
| -
|
| - /**
|
| - * Event handlers. These are the keys returned by goog.events.listen().
|
| - * @type {number}
|
| - * @private
|
| - */
|
| - this.rulerClickListener_ = null;
|
| - this.thumbMouseDownListener_ = null;
|
| - this.thumbClickListener_ = null;
|
| - this.thumbMouseMoveListener_ = null;
|
| - this.thumbMouseUpListener_ = null;
|
| -
|
| - /**
|
| - * The offset and length of the ruler. Measured in pixels.
|
| - * @type {number}
|
| - */
|
| - this.rulerLength = 0;
|
| - this.rulerOffset = 0;
|
| -}
|
| -goog.inherits(Slider, goog.events.EventTarget);
|
| -
|
| -/**
|
| - * The slider's orientation: vertical or hoirizontal.
|
| - * @enum {string}
|
| - */
|
| -Slider.Orientation = {
|
| - HORIZONTAL: 'h',
|
| - VERTICAL: 'v'
|
| -}
|
| -
|
| -/**
|
| - * Override of disposeInternal() to dispose of retained objects and unhook all
|
| - * events.
|
| - * @override
|
| - */
|
| -Slider.prototype.disposeInternal = function() {
|
| - this.unlisten_();
|
| - this.container_ = null;
|
| - this.ruler_ = null;
|
| - this.thumb_ = null;
|
| - Slider.superClass_.disposeInternal.call(this);
|
| -}
|
| -
|
| -/**
|
| - * Attach the DOM elements that make up the slider. Wires up all the event
|
| - * listeners.
|
| - * @param {!Element} container The DOM element containing the entire slider.
|
| - * @param {!Element} ruler The DOM element containing the slider's ruler.
|
| - * @param {!Element} thumb The DOM elelemnt representing the slider's thumb.
|
| - */
|
| -Slider.prototype.decorate = function(container, ruler, thumb) {
|
| - this.unlisten_();
|
| - this.container_ = container; // The slider's outer container.
|
| - this.ruler_ = ruler; // The slider's ruler element.
|
| - this.thumb_ = thumb; // The slider's thumb.
|
| -
|
| - // Establish a default ruler length from the |ruler| element.
|
| - var rulerSize = goog.style.getSize(this.ruler_)
|
| - if (this.isHorizontal()) {
|
| - this.rulerLength = rulerSize.width;
|
| - } else {
|
| - this.rulerLength = rulerSize.height;
|
| - }
|
| -
|
| - // Wire up the mouse event handlers.
|
| - this.rulerClickListener_ = goog.events.listen(
|
| - this.ruler_,
|
| - goog.events.EventType.CLICK,
|
| - this.rulerClick_, true, this);
|
| - this.thumbMouseDownListener_ = goog.events.listen(
|
| - this.thumb_,
|
| - goog.events.EventType.MOUSEDOWN,
|
| - this.thumbMouseDown_, true, this);
|
| - this.thumbClickListener_ = goog.events.listen(
|
| - this.thumb_,
|
| - goog.events.EventType.CLICK,
|
| - function(e) {
|
| - e.stopPropagation();
|
| - }, true, this);
|
| - this.thumbMouseMoveListener_ = null;
|
| - this.thumbMouseUpListener_ = null;
|
| -
|
| - // Complete initialization.
|
| - this.slideToValue(this.currentValue_);
|
| -}
|
| -
|
| -/**
|
| - * The slider's continuous value.
|
| - * @return {number} the value.
|
| - */
|
| -Slider.prototype.value = function() {
|
| - return this.currentValue_;
|
| -}
|
| -
|
| -/**
|
| - * The slider's discreet value as a step index.
|
| - * @return {number} the value.
|
| - */
|
| -Slider.prototype.stepValue = function() {
|
| - return Math.round(this.currentValue_ / this.stepSize_());
|
| -}
|
| -
|
| -/**
|
| - * The object at a step value.
|
| - * @param {number} opt_step The step index (0-based). Default is to use the
|
| - * current step value.
|
| - * @return {number} the value.
|
| - */
|
| -Slider.prototype.objectAtStepValue = function(opt_step) {
|
| - var stepValue = opt_step || this.stepValue();
|
| - return this.stepObjects_[stepValue];
|
| -}
|
| -
|
| -/**
|
| - * Is the slider horizontal?
|
| - * @return {boolean} |true| if the slider is horizontal.
|
| - */
|
| -Slider.prototype.isHorizontal = function() {
|
| - return this.orientation_ == Slider.Orientation.HORIZONTAL;
|
| -}
|
| -
|
| -/**
|
| - * Slide the thumb along the slider so that it represents |value|. If the
|
| - * slider has no length (its step count is 0), then do nothing.
|
| - * @param {number} value The new value of the thumb. Measured in pixels from
|
| - * the left edge of the slider's container.
|
| - */
|
| -Slider.prototype.slideToValue = function(value) {
|
| - if (this.stepCount_ == 0) {
|
| - return;
|
| - }
|
| -
|
| - // Validate and clip |value| to the range of the slider.
|
| - if (value < 0) {
|
| - value = 0;
|
| - }
|
| - if (value >= this.rulerLength) {
|
| - value = this.rulerLength;
|
| - }
|
| - var stepSize = this.stepSize_();
|
| - var stepValue = Math.round(value / stepSize);
|
| - value = stepValue * stepSize;
|
| - if (this.isHorizontal()) {
|
| - this.thumb_.style.left = value + this.rulerOffset + 'px';
|
| - } else {
|
| - this.thumb_.style.top = value + this.rulerOffset + 'px';
|
| - }
|
| - this.currentValue_ = value;
|
| -}
|
| -
|
| -/**
|
| - * Slide to a step value. The step value is a 0-based index into the discreet
|
| - * steps.
|
| - * @param {number} step The step value.
|
| - */
|
| -Slider.prototype.slideToStep = function(step) {
|
| - this.slideToValue(step * this.stepSize_());
|
| -}
|
| -
|
| -/**
|
| - * The step size. In a discreet slider, the thumb can only be an even
|
| - * multiple of this value. Measured in pixels. Never returns 0.
|
| - * @return {number}
|
| - * @private
|
| - */
|
| -Slider.prototype.stepSize_ = function() {
|
| - if (this.stepCount_ > 1) {
|
| - return this.rulerLength / (this.stepCount_ - 1);
|
| - }
|
| - return 1;
|
| -}
|
| -
|
| -/**
|
| - * Remove all event listenetrs from any cached DOM elements.
|
| - * @private
|
| - */
|
| -Slider.prototype.unlisten_ = function() {
|
| - function removeAllEvents(element) {
|
| - if (element) {
|
| - goog.events.removeAll(this.container_);
|
| - }
|
| - }
|
| - removeAllEvents(this.container_);
|
| - removeAllEvents(this.ruler_);
|
| - removeAllEvents(this.thumb_);
|
| - this.rulerClickListener_ = null;
|
| - this.thumbMouseDownListener_ = null;
|
| - this.thumbClickListener_ = null;
|
| - this.thumbMouseMoveListener_ = null;
|
| - this.thumbMouseUpListener_ = null;
|
| -}
|
| -
|
| -/**
|
| - * Handle a 'click' event on the ruler itself. This slides the thumb to the
|
| - * closets tick to where the mouse click happened.
|
| - * @param {Event} clickEvent The event that triggered this handler.
|
| - */
|
| -Slider.prototype.rulerClick_ = function(clickEvent) {
|
| - if (!this.isDragging_) {
|
| - this.slideToValue(this.rulerOffsetFromEvent_(clickEvent));
|
| - this.dispatchEvent(new SliderEvent(this.value(), this.stepValue()));
|
| - }
|
| -}
|
| -
|
| -/**
|
| - * Handle a mousedown on the thumb. This starts the thumb-drag state.
|
| - * @param {Event} mouseEvent The event that triggered this handler.
|
| - */
|
| -Slider.prototype.thumbMouseDown_ = function(mouseEvent) {
|
| - if (this.isDragging_) {
|
| - return;
|
| - }
|
| - mouseEvent.preventDefault();
|
| - mouseEvent.stopPropagation();
|
| - this.isDragging_ = true;
|
| - // Listen for mouse-move and mouse-up events. Dragging stops when the
|
| - // mouse-up event arrives.
|
| - if (this.thumbMouseMoveListener_ == null) {
|
| - this.thumbMouseMoveListener_ = goog.events.listen(
|
| - this.container_,
|
| - goog.events.EventType.MOUSEMOVE,
|
| - this.thumbMouseMove_, true, this);
|
| - }
|
| - if (this.thumbMouseUpListener_ == null) {
|
| - this.thumbMouseUpListener_ = goog.events.listen(
|
| - window,
|
| - goog.events.EventType.MOUSEUP,
|
| - this.thumbMouseUp_, true, this);
|
| - }
|
| -}
|
| -
|
| -/**
|
| - * Handle a mousemove on the thumb. Drag thte thumb to the new value.
|
| - * @param {Event} mouseEvent The event that triggered this handler.
|
| - */
|
| -Slider.prototype.thumbMouseMove_ = function(mouseEvent) {
|
| - this.slideToValue(this.rulerOffsetFromEvent_(mouseEvent));
|
| -}
|
| -
|
| -/**
|
| - * Handle a mouseup on the thumb. Leave the drag state, post a change event.
|
| - * @param {Event} mouseEvent The event that triggered this handler.
|
| - */
|
| -Slider.prototype.thumbMouseUp_ = function(mouseEvent) {
|
| - if (this.thumbMouseMoveListener_ != null) {
|
| - goog.events.unlistenByKey(this.thumbMouseMoveListener_);
|
| - this.thumbMouseMoveListener_ = null;
|
| - }
|
| - if (this.thumbMouseUpListener_ != null) {
|
| - goog.events.unlistenByKey(this.thumbMouseUpListener_);
|
| - this.thumbMouseUpListener_ = null;
|
| - }
|
| - this.dispatchEvent(new SliderEvent(this.value(), this.stepValue()));
|
| - this.isDragging_ = false;
|
| -}
|
| -
|
| -/**
|
| - * Compute the pixel offset of an event from the ruler's origin.
|
| - * @param {BrowserEvent} event A BrowserEvent that has clientX and clientY.
|
| - * @return {number} A one-dimensional pixel offset of the event.
|
| - */
|
| -Slider.prototype.rulerOffsetFromEvent_ = function(event) {
|
| - var rulerOffset = 0;
|
| - if (this.isHorizontal()) {
|
| - var rulerOrigin = goog.style.getPageOffsetLeft(this.ruler_);
|
| - rulerOffset = event.clientX - rulerOrigin;
|
| - } else {
|
| - var rulerOrigin = goog.style.getPageOffsetTop(this.ruler_);
|
| - rulerOffset = event.clientY - rulerOrigin;
|
| - }
|
| - return rulerOffset - this.rulerOffset;
|
| -}
|
| -
|
|
|