1 /**

     2  * jquery.scrollable 1.0.2. Put your HTML scroll.

     3  * 

     4  * Copyright (c) 2009 Tero Piirainen

     5  * http://flowplayer.org/tools/scrollable.html

     6  *

     7  * Dual licensed under MIT and GPL 2+ licenses

     8  * http://www.opensource.org/licenses

     9  *

    10  * Launch  : March 2008

    11  * Version : 1.0.2 - Tue Feb 24 2009 10:52:08 GMT-0000 (GMT+00:00)

    12  */

    13 (function($) {

    14 		

    15 	function fireEvent(opts, name, self, arg) {

    16 		var fn = opts[name];

    17 		

    18 		if ($.isFunction(fn)) { 

    19 			try {  

    20 				return fn.call(self, arg);

    21 				

    22 			} catch (error) {

    23 				if (opts.alert) {

    24 					alert("Error calling scrollable." + name + ": " + error);

    25 				} else {

    26 					throw error;	

    27 				}

    28 				return false;

    29 			} 					

    30 		}

    31 		return true;			

    32 	}

    33 				

    34 	var current = null;	

    35 	

    36 	

    37 	// constructor

    38 	function Scrollable(root, conf) {   

    39 				

    40 		// current instance

    41 		var self = this;  

    42 		if (!current) { current = self; }		

    43 		

    44 		// horizontal flag

    45 		var horizontal = !conf.vertical;		

    46 		

    47 		

    48 		// wrap (root elements for items)

    49 		var wrap = $(conf.items, root);				

    50 		

    51 		// current index

    52 		var index = 0;

    53 		

    54 		

    55 		// get handle to navigational elements

    56 		var navi = root.siblings(conf.navi).eq(0);

    57 		var prev = root.siblings(conf.prev).eq(0);

    58 		var next = root.siblings(conf.next).eq(0);

    59 		var prevPage = root.siblings(conf.prevPage).eq(0);

    60 		var nextPage = root.siblings(conf.nextPage).eq(0);

    61 		

    62 		

    63 		// methods

    64 		$.extend(self, {

    65 				

    66 			getVersion: function() {

    67 				return [1, 0, 1];	

    68 			},

    69 			

    70 			getIndex: function() {

    71 				return index;	

    72 			},

    73 	

    74 			getConf: function() {

    75 				return conf;	

    76 			},

    77 			

    78 			getSize: function() {

    79 				return self.getItems().size();	

    80 			},

    81 	

    82 			getPageAmount: function() {

    83 				return Math.ceil(this.getSize() / conf.size); 	

    84 			},

    85 			

    86 			getPageIndex: function() {

    87 				return Math.ceil(index / conf.size);	

    88 			},

    89 

    90 			getRoot: function() {

    91 				return root;	

    92 			},

    93 			

    94 			getItemWrap: function() {

    95 				return wrap;	

    96 			},

    97 			

    98 			getItems: function() {

    99 				return wrap.children();	

   100 			},

   101 			

   102 			/* all seeking functions depend on this */		

   103 			seekTo: function(i, time, fn) {

   104 				

   105 				// default speed

   106 				time = time || conf.speed;

   107 				

   108 				// function given as second argument

   109 				if ($.isFunction(time)) {

   110 					fn = time;

   111 					time = conf.speed;

   112 				}

   113 								

   114 				if (i < 0) { i = 0; }				

   115 				if (i > self.getSize() - conf.size) { return self; } 				

   116 

   117 				var item = self.getItems().eq(i);					

   118 				if (!item.length) { return self; }				

   119 				

   120 				// onBeforeSeek

   121 				if (fireEvent(conf, "onBeforeSeek", self, i) === false) {

   122 					return self;	

   123 				}									

   124 				

   125 				if (horizontal) {					

   126 					var left = -(item.outerWidth(true) * i);					

   127 					wrap.animate({left: left}, time, conf.easing, fn ? function() { fn.call(self); } : null);

   128 					

   129 				} else {

   130 					var top = -(item.outerHeight(true) * i); // wrap.offset().top - item.offset().top;					

   131 					wrap.animate({top: top}, time, conf.easing, fn ? function() { fn.call(self); } : null);							

   132 				}	

   133 				

   134 				

   135 				// navi status update

   136 				if (navi.length) {

   137 					var klass = conf.activeClass;

   138 					var page = Math.ceil(i / conf.size);

   139 					page = Math.min(page, navi.children().length - 1);

   140 					navi.children().removeClass(klass).eq(page).addClass(klass);

   141 				} 

   142 				

   143 				// prev buttons disabled flag

   144 				if (i === 0) {

   145 					prev.add(prevPage).addClass(conf.disabledClass);					

   146 				} else {

   147 					prev.add(prevPage).removeClass(conf.disabledClass);

   148 				}

   149 								

   150 				// next buttons disabled flag

   151 				if (i >= self.getSize() - conf.size) {

   152 					next.add(nextPage).addClass(conf.disabledClass);

   153 				} else {

   154 					next.add(nextPage).removeClass(conf.disabledClass);

   155 				}				

   156 				

   157 				current = self;

   158 				index = i;				

   159 				

   160 				// onSeek after index being updated

   161 				fireEvent(conf, "onSeek", self, i);	

   162 				

   163 				return self;

   164 				

   165 			},			

   166 				

   167 			move: function(offset, time, fn) {

   168 				var to = index + offset;

   169 				if (conf.loop && to > (self.getSize() - conf.size)) {

   170 					to = 0;	

   171 				}

   172 				return this.seekTo(to, time, fn);

   173 			},

   174 			

   175 			next: function(time, fn) {

   176 				return this.move(1, time, fn);	

   177 			},

   178 			

   179 			prev: function(time, fn) {

   180 				return this.move(-1, time, fn);	

   181 			},

   182 			

   183 			movePage: function(offset, time, fn) {

   184 				return this.move(conf.size * offset, time, fn);		

   185 			},

   186 			

   187 			setPage: function(page, time, fn) {

   188 				var size = conf.size;

   189 				var index = size * page;

   190 				var lastPage = index + size >= this.getSize(); 

   191 				if (lastPage) {

   192 					index = this.getSize() - conf.size;

   193 				}

   194 				return this.seekTo(index, time, fn);

   195 			},

   196 			

   197 			prevPage: function(time, fn) {

   198 				return this.setPage(this.getPageIndex() - 1, time, fn);

   199 			},  

   200 	

   201 			nextPage: function(time, fn) {

   202 				return this.setPage(this.getPageIndex() + 1, time, fn);

   203 			}, 

   204 			

   205 			begin: function(time, fn) {

   206 				return this.seekTo(0, time, fn);	

   207 			},

   208 			

   209 			end: function(time, fn) {

   210 				return this.seekTo(this.getSize() - conf.size, time, fn);	

   211 			},

   212 			

   213 			reload: function() {

   214 				return load();	

   215 			},

   216 			

   217 			click: function(index, time, fn) {

   218 				

   219 				var item = self.getItems().eq(index);

   220 				var klass = conf.activeClass;			

   221 				

   222 				if (!item.hasClass(klass) && (index >= 0 || index < this.getSize())) {				

   223 					self.getItems().removeClass(klass);

   224 					item.addClass(klass);

   225 					var delta = Math.floor(conf.size / 2);

   226 					var to = index - delta;

   227 

   228 					// next to last item must work

   229 					if (to > self.getSize() - conf.size) { to--;	}

   230 					

   231 					if (to !== index) {

   232 						return this.seekTo(to, time, fn);		

   233 					}				 

   234 				}

   235 				

   236 				return self;

   237 			}			

   238 			

   239 		});

   240 	

   241 		

   242 		// mousewheel

   243 		if ($.isFunction($.fn.mousewheel)) { 

   244 			root.bind("mousewheel.scrollable", function(e, delta)  {

   245 				// opera goes to opposite direction

   246 				var step = $.browser.opera ? 1 : -1;

   247 				

   248 				self.move(delta > 0 ? step : -step, 50);

   249 				return false;

   250 			});

   251 		}  

   252 		

   253 		// prev button		

   254 		prev.addClass(conf.disabledClass).click(function() { 

   255 			self.prev(); 

   256 		});

   257 		

   258 

   259 		// next button

   260 		next.click(function() { 

   261 			self.next(); 

   262 		});

   263 		

   264 		// prev page button

   265 		nextPage.click(function() { 

   266 			self.nextPage(); 

   267 		});

   268 		

   269 

   270 		// next page button

   271 		prevPage.addClass(conf.disabledClass).click(function() { 

   272 			self.prevPage(); 

   273 		});		

   274 

   275 		

   276 		// keyboard

   277 		if (conf.keyboard) {

   278 			

   279 			// unfortunately window.keypress does not work on IE.

   280 			$(window).unbind("keypress.scrollable").bind("keypress.scrollable", function(evt) {

   281 				

   282 				var el = current;	

   283 				if (!el) { return; }

   284 					

   285 				if (horizontal && (evt.keyCode == 37 || evt.keyCode == 39)) {					

   286 					el.move(evt.keyCode == 37 ? -1 : 1);

   287 					return evt.preventDefault();

   288 				}	

   289 				

   290 				if (!horizontal && (evt.keyCode == 38 || evt.keyCode == 40)) {

   291 					el.move(evt.keyCode == 38 ? -1 : 1);

   292 					return evt.preventDefault();

   293 				}

   294 				

   295 				return true;

   296 				

   297 			});	 

   298 		}

   299 

   300 		// navi 			

   301 		function load() {			

   302 			

   303 			navi.each(function() {

   304 				

   305 				var nav = $(this);

   306 				

   307 				// generate new entries

   308 				if (nav.is(":empty") || nav.data("me") == self) {

   309 					

   310 					nav.empty();

   311 					nav.data("me", self);

   312 					

   313 					for (var i = 0; i < self.getPageAmount(); i++) {		

   314 						

   315 						var item = $("<" + conf.naviItem + "/>").attr("href", i).click(function(e) {							

   316 							var el = $(this);

   317 							el.parent().children().removeClass(conf.activeClass);

   318 							el.addClass(conf.activeClass);

   319 							self.setPage(el.attr("href"));

   320 							return e.preventDefault();

   321 						});

   322 						

   323 						if (i === 0) { item.addClass(conf.activeClass); }

   324 						nav.append(item);					

   325 					}

   326 					

   327 				// assign onClick events to existing entries

   328 				} else {

   329 					

   330 					// find a entries first -> syntaxically correct

   331 					var els = nav.children(); 

   332 					

   333 					els.each(function(i)  {

   334 						var item = $(this);

   335 						item.attr("href", i);

   336 						if (i === 0) { item.addClass(conf.activeClass); }

   337 						

   338 						item.click(function() {

   339 							nav.find("." + conf.activeClass).removeClass(conf.activeClass);

   340 							item.addClass(conf.activeClass);

   341 							self.setPage(item.attr("href"));

   342 						});

   343 						

   344 					});

   345 				}

   346 				

   347 			});

   348 			

   349 			

   350 			// item.click()

   351 			if (conf.clickable) {

   352 				self.getItems().each(function(index, arg) {

   353 					var el = $(this);

   354 					if (!el.data("set")) {

   355 						el.bind("click.scrollable", function() {

   356 							self.click(index);		

   357 						});

   358 						el.data("set", true);

   359 					}

   360 				});				

   361 			}

   362 			

   363 			

   364 			// hover

   365 			if (conf.hoverClass) {

   366 				self.getItems().hover(function()  {

   367 					$(this).addClass(conf.hoverClass);		

   368 				}, function() {

   369 					$(this).removeClass(conf.hoverClass);	

   370 				});

   371 			}			

   372 			

   373 			return self;

   374 		}

   375 		

   376 		load();

   377 		

   378 		

   379 		// interval stuff

   380 		var timer = null;

   381 

   382 		function setTimer() {

   383 			timer = setInterval(function()  {

   384 				self.next();

   385 				

   386 			}, conf.interval);	

   387 		}	

   388 		

   389 		if (conf.interval > 0) {			

   390 			

   391 			root.hover(function() {			

   392 				clearInterval(timer);		

   393 			}, function() {		

   394 				setTimer();	

   395 			});

   396 			

   397 			setTimer();	

   398 		}

   399 		

   400 	} 

   401 

   402 		

   403 	// jQuery plugin implementation

   404 	jQuery.prototype.scrollable = function(conf) { 

   405 			

   406 		// already constructed --> return API

   407 		var api = this.eq(typeof conf == 'number' ? conf : 0).data("scrollable");

   408 		if (api) { return api; }		

   409 		

   410  

   411 		var opts = {

   412 			

   413 			// basics

   414 			size: 5,

   415 			vertical:false,			

   416 			clickable: true,

   417 			loop: false,

   418 			interval: 0,			

   419 			speed: 400,

   420 			keyboard: true,			

   421 			

   422 			// other

   423 			activeClass:'active',

   424 			disabledClass: 'disabled',

   425 			hoverClass: null,			

   426 			easing: 'swing',

   427 			

   428 			// navigational elements

   429 			items: '.items',

   430 			prev: '.prev',

   431 			next: '.next',

   432 			prevPage: '.prevPage',

   433 			nextPage: '.nextPage',			

   434 			navi: '.navi',

   435 			naviItem: 'a',

   436 

   437 			

   438 			// callbacks

   439 			onBeforeSeek: null,

   440 			onSeek: null,

   441 			alert: true

   442 		}; 

   443 		

   444 		

   445 		$.extend(opts, conf);		

   446 		

   447 		this.each(function() {			

   448 			var el = new Scrollable($(this), opts);

   449 			$(this).data("scrollable", el);	

   450 		});

   451 		

   452 		return this; 

   453 		

   454 	};

   455 			

   456 	

   457 })(jQuery);