gistfile1.js

/*! 
* @projectDescription 	Slider class for iPhone web applications
*
* @author	Rebecca Murphey rebecca@rebeccamurphey.com
* @license MIT http://www.opensource.org/licenses/mit-license.php
*/


var Slider = function(config) {
	this.sections = config.sections;
	this.slider = document.querySelectorAll(config.slider)[0];
	this.track = document.querySelectorAll(config.track)[0];
	this.callback = config.callback ? config.callback : function() { };
	this.feedback = config.feedback ? config.feedback : function() { };
	
	this.min = Math.round(this.slider.clientWidth / 2) * -1;
	this.max = this.track.clientWidth - Math.round(this.slider.clientWidth / 2);
	
	this.calculateValue = function() {
		var val = that.sections * (
			(that.slider.offsetLeft + (that.slider.clientWidth / 2)) / that.track.clientWidth
		);
		that.sliderValue = Math.round(val);
	};
	
	this.positionSlider = function() {
		that.slider.style.left = (((that.track.clientWidth / that.sections) * that.sliderValue) - (that.slider.clientWidth / 2)) + 'px';
	};
	
	this.initializePosition = function(touch) {
		that.sliderStart = that.slider.offsetLeft;
		that.touchStart = touch.pageX;
	};
	
	this.updatePosition = function(touch) {
		var change = touch.pageX - that.touchStart;
		var sliderEnd = that.sliderStart + change > that.max ? that.max : that.sliderStart + change;
		sliderEnd = sliderEnd < that.min ? that.min : sliderEnd;
		that.slider.style.left = sliderEnd + 'px';
	};

	this.getValue = function() {
		return this.sliderValue;
	};

	this.setValue = function(val) {
		this.sliderValue = val;
		this.positionSlider();
		this.callback();
	};

	var that = this;
	
	this.slider.ontouchstart = function(e) {
		e.preventDefault();
		if (e.touches.length == 1) {
			that.initializePosition(e.touches[0]);
		}
	};
	
	this.slider.ontouchmove = function(e) {
		e.preventDefault();
		if (e.touches.length == 1) {
			that.updatePosition(e.touches[0]);
			that.calculateValue();
			that.feedback();
		}
	};
	
	this.slider.ontouchend = function(e) {
		that.calculateValue();
		that.positionSlider();
		that.callback();
	};
	
	this.calculateValue();
	this.callback();
	
	return this;
};



/*!
* @projectDescription 	Scroller class for iPhone web applications
*
* @author	Rebecca Murphey rebecca@rebeccamurphey.com
*/

/**
* @classDescription	A scroller allows content inside a fixed-height element to be scrolled by touch, 
while other content on the page remains in place.
* @param {Object} config Configuration object
* @param {String} config.scroller CSS selector for Scroller container
* @return {Object}	Returns a new Scroller object
* @constructor	
*/
var Scroller = function(config) {
	var that = this;

	this.scroller = document.querySelectorAll(config.scroller)[0];
	
	this.list = this.scroller.children[0];
	this.list.style.position = 'absolute';
	this.list.style.top = '0px';
	
	this.scroller.ontouchstart = function(e) {
		if (e.touches.length == 1) {
			that.initializePosition(e.touches[0]);
		}
	};

	this.scroller.ontouchmove = function(e) {
		if (e.touches.length == 1) {
			e.preventDefault();
			that.updatePosition(e.touches[0]);
		}
	};
	
	return this;
};

Scroller.prototype = {
	/**
	* @method 
	* @memberOf Scroller
	* @param {Object} touch Contains information about touch event
	*/
	initializePosition : function(touch) {
		this.touchStart = touch.pageY;
		this.scrollerStart = parseFloat(this.list.style.top.replace('px', '')) || 0;
	},

	/**
	* @method 
	* @memberOf Scroller
	* @param {Object} touch Contains information about touch event
	*/
	updatePosition : function(touch) {
		var max = 0;
		var min = (this.list.clientHeight - this.scroller.clientHeight) * -1;

		var change = touch.pageY - this.touchStart;
		var newPosition = this.scrollerStart + change;

		this.list.style.top = newPosition > max ? max : (newPosition < min ? min : newPosition) + 'px';
	}
};