/**
* Scroller lays out a collection of renderables, and will browse through them based on
* accessed position. Scroller also broadcasts an 'edgeHit' event, with a position property of the location of the edge,
* when you've hit the 'edges' of it's renderable collection.
* @class Scroller
* @constructor
* @event error
* @param {Options} [options] An object of configurable options.
* @param {Number} [options.direction=Utility.Direction.Y] Using the direction helper found in the famous Utility
* module, this option will lay out the Scroller instance's renderables either horizontally
* (x) or vertically (y). Utility's direction is essentially either zero (X) or one (Y), so feel free
* to just use integers as well.
* @param {Number} [clipSize=undefined] The size of the area (in pixels) that Scroller will display content in.
* @param {Number} [margin=undefined] The size of the area (in pixels) that Scroller will process renderables' associated calculations in.
*/
function Scroller(options) {
this.options = Object.create(this.constructor.DEFAULT_OPTIONS);
this._optionsManager = new OptionsManager(this.options);
if (options) this._optionsManager.setOptions(options);
this._node = null;
this._position = 0;
// used for shifting nodes
this._positionOffset = 0;
this._positionGetter = null;
this._outputFunction = null;
this._masterOutputFunction = null;
this.outputFrom();
this._onEdge = 0; // -1 for top, 1 for bottom
this.group = new Group();
this.group.add({render: _innerRender.bind(this)});
this._entityId = Entity.register(this);
this._size = [undefined, undefined];
this._contextSize = [undefined, undefined];
this._eventInput = new EventHandler();
this._eventOutput = new EventHandler();
EventHandler.setInputHandler(this, this._eventInput);
EventHandler.setOutputHandler(this, this._eventOutput);
}
/**
* Makes added render nodes responsive to drag beahvior.
* Emits events 'start', 'update', 'end'.
* @class Draggable
* @constructor
* @param {Object} [options] options configuration object.
* @param {Number} [options.snapX] grid width for snapping during drag
* @param {Number} [options.snapY] grid height for snapping during drag
* @param {Array.Number} [options.xRange] maxmimum [negative, positive] x displacement from start of drag
* @param {Array.Number} [options.yRange] maxmimum [negative, positive] y displacement from start of drag
* @param {Number} [options.scale] one pixel of input motion translates to this many pixels of output drag motion
* @param {Number} [options.projection] User should set to Draggable._direction.x or
* Draggable._direction.y to constrain to one axis.
*
*/
function Draggable(options) {
this.options = Object.create(Draggable.DEFAULT_OPTIONS);
if (options) this.setOptions(options);
this._positionState = new Transitionable([0,0]);
this._differential = [0,0];
this._active = true;
this.sync = new GenericSync(['mouse', 'touch'], {scale : this.options.scale});
this.eventOutput = new EventHandler();
EventHandler.setInputHandler(this, this.sync);
EventHandler.setOutputHandler(this, this.eventOutput);
_bindEvents.call(this);
}
/** @constructor */
function Slider(options) {
this.options = Object.create(Slider.DEFAULT_OPTIONS);
this.optionsManager = new OptionsManager(this.options);
if (options) this.setOptions(options);
this.indicator = new CanvasSurface({
size: this.options.indicatorSize,
classes : ['slider-back']
});
this.label = new Surface({
size: this.options.labelSize,
content: this.options.label,
properties : {pointerEvents : 'none'},
classes: ['slider-label']
});
this.eventOutput = new EventHandler();
this.eventInput = new EventHandler();
EventHandler.setInputHandler(this, this.eventInput);
EventHandler.setOutputHandler(this, this.eventOutput);
var scale = (this.options.range[1] - this.options.range[0]) / this.options.indicatorSize[0];
this.sync = new GenericSync(
['mouse', 'touch'],
{
scale : scale,
direction : GenericSync.DIRECTION_X
}
);
this.indicator.pipe(this.sync);
this.sync.pipe(this);
this.eventInput.on('update', function(data) {
this.set(data.position);
}.bind(this));
this._drawPos = 0;
_updateLabel.call(this);
}