Files
@ b2ac49a7e169
Branch filter:
Location: SlatePermutate/glider.js
b2ac49a7e169
4.0 KiB
text/javascript
merge
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | /**
* @author Bruno Bornsztein <bruno@missingmethod.com>
* @copyright 2007 Curbly LLC
* @package Glider
* @license MIT
* @url http://www.missingmethod.com/projects/glider/
* @version 0.0.3
* @dependencies prototype.js 1.5.1+, effects.js
*/
/* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
initialize: function(wrapper, options){
this.scrolling = false;
this.wrapper = $(wrapper);
this.scroller = this.wrapper.down('div.scroller');
this.sections = this.wrapper.getElementsBySelector('div.section');
this.options = Object.extend({ duration: 1.0, frequency: 3 }, options || {});
this.sections.each( function(section, index) {
section._index = index;
});
this.events = {
click: this.click.bind(this)
};
this.addObservers();
if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration }); // initialSection should be the id of the section you want to show up on load
if(this.options.autoGlide) this.start();
},
addObservers: function() {
var controls = this.wrapper.getElementsBySelector('div.controls a');
controls.invoke('observe', 'click', this.events.click);
},
click: function(event) {
this.stop();
var element = Event.findElement(event, 'a');
if (this.scrolling) this.scrolling.cancel();
this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });
Event.stop(event);
},
moveTo: function(element, container, options){
this.current = $(element);
Position.prepare();
var containerOffset = Position.cumulativeOffset(container),
elementOffset = Position.cumulativeOffset($(element));
this.scrolling = new Effect.SmoothScroll(container,
{duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
return false;
},
next: function(){
if (this.current) {
var currentIndex = this.current._index;
var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;
} else var nextIndex = 1;
this.moveTo(this.sections[nextIndex], this.scroller, {
duration: this.options.duration
});
},
previous: function(){
if (this.current) {
var currentIndex = this.current._index;
var prevIndex = (currentIndex == 0) ? this.sections.length - 1 :
currentIndex - 1;
} else var prevIndex = this.sections.length - 1;
this.moveTo(this.sections[prevIndex], this.scroller, {
duration: this.options.duration
});
},
stop: function()
{
clearTimeout(this.timer);
},
start: function()
{
this.periodicallyUpdate();
},
periodicallyUpdate: function()
{
if (this.timer != null) {
clearTimeout(this.timer);
this.next();
}
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
}
});
Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
var options = Object.extend({
x: 0,
y: 0,
mode: 'absolute'
} , arguments[1] || {} );
this.start(options);
},
setup: function() {
if (this.options.continuous && !this.element._ext ) {
this.element.cleanWhitespace();
this.element._ext=true;
this.element.appendChild(this.element.firstChild);
}
this.originalLeft=this.element.scrollLeft;
this.originalTop=this.element.scrollTop;
if(this.options.mode == 'absolute') {
this.options.x -= this.originalLeft;
this.options.y -= this.originalTop;
}
},
update: function(position) {
this.element.scrollLeft = this.options.x * position + this.originalLeft;
this.element.scrollTop = this.options.y * position + this.originalTop;
}
});
|