Created
April 19, 2011 20:22
-
-
Save joecritch/929535 to your computer and use it in GitHub Desktop.
All of the plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($) { | |
// Static constructs | |
$.motionlab = $.motionlab || {}; | |
$.motionlab.simpleScroll = { | |
conf: { | |
auto_slide: 0, | |
hover_pause: 0, | |
auto_slide_seconds: 1000 | |
} | |
} | |
// Give your class a capitalised camel-cased name. You also need to pass 2 things into it: the actual object that the plugin called, and any options that the user has chosen. | |
function SimpleScroll(root, conf) { | |
// At this point, "this" is scoped to the SimpleScroll class - let's capture it before it disappears! | |
var self = this, | |
// I chose an 'alias' for the main object at this point to make it more in context. This is optional. | |
cara = root, | |
// Add any variables you need to calculate and/or track at this point. | |
item_width = cara.find('li').eq(0).outerWidth(true), | |
// Used for callbacks | |
fire = root.add(self); | |
// Ok now you're adding some new functions to the class. These will essentially be your public methods when we add the API, so don't add any utility or private functions in here. | |
$.extend(self, { | |
slide: function(where) { | |
// Plugin-specific code inside here... | |
var where = where || 'right', | |
left_indent; | |
if(cara.is(':animated')) { | |
return false; | |
} | |
if(where == 'left'){ | |
left_indent = parseInt(cara.css('left')) + item_width; | |
} else { | |
left_indent = parseInt(cara.css('left')) - item_width; | |
} | |
left_indent = left_indent || 0; | |
// Trigger the callback. You can also pass custom data into trigger events. Very useful for callbacks. | |
fire.trigger("onSlide", [where]); | |
cara.animate({'left' : left_indent}, 500, function() { | |
if(where == 'left') { | |
cara.find('li:first').before(cara.find('li:last')); | |
} else { | |
cara.find('li:last').after(cara.find('li:first')); | |
} | |
cara.css({'left' : (item_width * -1) + 'px'}); | |
}); | |
// .. just remember to return the class again, so you can have chaining on the upcoming API. | |
return self; | |
} | |
}); | |
// callbacks -- add these after you extend self with your public methods. | |
$.each(['onSlide', 'anotherCallback', 'yetAnotherCallback'], function(i, name) { | |
// configuration | |
if ($.isFunction(conf[name])) { | |
$(self).bind(name, conf[name]); | |
} | |
self[name] = function(fn) { | |
if (fn) { $(self).bind(name, fn); } | |
return self; | |
}; | |
}); | |
cara.find('li:first').before(cara.find('li:last')); | |
// Check this out. You can the newly extended class instantly. The slide function was only just created a moment ago, but the chances are you'll need it for your initialisations straight afterward. E.g... | |
self.slide('right'); | |
// Also, see how the 'conf' object is accessible locally too? No more crazy methods to get to what you require... | |
if(conf.auto_slide == 1) { | |
var timer = setInterval(function() { | |
self.slide('right'); | |
}, conf.auto_slide_seconds); | |
} | |
if(conf.hover_pause == 1) { | |
cara.hover(function() { | |
clearInterval(timer); | |
}, function() { | |
timer = setInterval(function() { | |
self.slide('right'); | |
}, conf.auto_slide_seconds); | |
}); | |
} | |
} | |
$.fn.simpleScroll = function(conf) { | |
// already constructed --> return API | |
var el = this.data("simpleScroll"); | |
if (el) { return el; } | |
var conf = $.extend({}, $.motionlab.simpleScroll.conf, conf); | |
return this.each(function() { | |
el = new SimpleScroll($(this), conf); | |
$(this).data("simpleScroll", el); | |
}); | |
}; | |
})(this.jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment