// Extend the Native Element Class with a tracer method for DOM els. Element.extend({ showme: function(){ console.log(this); return this; } }); ScrollPanel = new Class({ // Default Options. options: { contentDiv: 'homebox', innerDiv: 'slider', panelClass: 'block', linkClass: 'panellink', currentLinkClass: 'current', currentPanelClass: 'currentpanel', lifeOfItsOwn: false, morphTabs:false, refreshRate: 8000, scrollDuration: 'normal', scrollTransition:'elastic:out', useConsole: false }, panels:Array(), initialize: function(options) { // Set the Options. this.setOptions(options); // Do this within a try/catch so there are no nasty 'uncaught exception' error messages if // anything goes wrong. try { // Get the Container, Panels and Tabs as Class properties.. ScrollPanel.container = $(this.options.innerDiv); ScrollPanel.panels = $$('#' + this.options.contentDiv + ' .' + this.options.panelClass); ScrollPanel.tabs = $$('#' + this.options.contentDiv + ' .' + this.options.linkClass); // We use this as a big mouseover button. ScrollPanel.viewport = $(this.options.contentDiv); // Get the Width of the 1st Panel. ScrollPanel.paneldimension = this.getPanelDimension(); // Get Start position. ScrollPanel.panelposition = this.getCurrentPosition(); // Set Start Position as our Margin. ScrollPanel.startmargin = ScrollPanel.panelposition; // Loop thru our Panels. ScrollPanel.panels.each(function(panelEl,i) { // For each Panel we will set a few things as Properties. // Work out each Panels offset by using its index as a modifiier. // Remember this needs to be a minus figure as we are using margin-left. var ppos = -((ScrollPanel.startmargin + ScrollPanel.paneldimension) * i); // Set as Prop. panelEl.pos = ppos; // Set Index as Prop. panelEl.index = i; // Get the corresponding Tab. var ta = ScrollPanel.tabs[i]; // Add the activeTab and showPanel Methods. ta.addEvent("click", this.showPanel.bindWithEvent(this, panelEl)); // If the option is set, use periodical to flick between panels. if(this.options.lifeOfItsOwn) { // Add our own event that we can call whenever we need to change the panel on the fly. ta.addEvent("calledpanel", this.showPanel.bindWithEvent(this, panelEl)); ScrollPanel.viewport.addEvent("mouseleave", this.beginPeriodical.bindWithEvent(this)); ScrollPanel.viewport.addEvent("mouseenter", this.pausePeriodical.bindWithEvent(this)); } // Set the Tab as a property of the Panel. panelEl.tab = ta; }, this); // End panel Loop. // If set in the Options, start a periodical effect. if(this.options.lifeOfItsOwn) { ScrollPanel.interval = this.beginPeriodical(); } // Set Start Panel. ScrollPanel.current_panel = ScrollPanel.panels[0].id; ScrollPanel.next_panel = false; } catch(err) { if(this.options.useConsole) { console.log(err); } } }, periodicScroll:function() { // Get hold of the panel - random for testing. var nextIndex = $(ScrollPanel.current_panel).index + 1; var len = ScrollPanel.panels.length; if(nextIndex == len) { nextIndex = 0; } var nextPanel = ScrollPanel.panels[nextIndex]; if(nextPanel && nextPanel.tab) { nextPanel.tab.fireEvent('calledpanel'); } }, beginPeriodical:function() { this.resetPeriodical(); var myRefreshRate = this.options.refreshRate; ScrollPanel.interval = this.periodicScroll.periodical(myRefreshRate); return ScrollPanel.interval; }, pausePeriodical:function() { return this.resetPeriodical(); }, resetPeriodical:function() { return $clear(ScrollPanel.interval); }, morphActiveTab:function() { try { var targ = $(ScrollPanel.current_panel.tab).getFirst(); // Loop thru all Tabs and remove the 'current' css class. ScrollPanel.tabs.each(function(linkEl) { var l = linkEl.getFirst(); // remove morph. l.removeClass(this.options.currentLinkClass); }, this); // End Panel Loop. // Swap for morph. targ.addClass(this.options.currentLinkClass); // var myMorph = new Fx.Morph(targ.id, {wait: false}); // myMorph.start('current'); } catch(err) { if(this.options.useConsole) { console.log(err); } } }, activeTab:function() { try { var targ = $(ScrollPanel.current_panel.tab).getFirst(); // Loop thru all Tabs and remove the 'current' css class. ScrollPanel.tabs.each(function(linkEl) { var l = linkEl.getFirst(); // remove morph. l.removeClass(this.options.currentLinkClass); }, this); // End Panel Loop. // Swap for morph. targ.addClass(this.options.currentLinkClass); } catch(err) { if(this.options.useConsole) { console.log(err); } } // Reset the peridiocal onclick as well. // this.pausePeriodical(); // this.beginPeriodical(); }, showPanel:function(event, panel) { try { if(event) { event = new Event(event).stop(); } // When we Initialised the Class we looped the Panels and set their offset as a Property. var newposition = panel.pos; // Update to the new position. ScrollPanel.panelposition = newposition; ScrollPanel.current_panel = panel; // Use Morph on Tabs if its set in the Options. if(this.options.morphTabs) { this.morphActiveTab(); } else { this.activeTab(); } var myDuration = this.options.scrollDuration; var myTransition = this.options.scrollTransition; // Set an Effect on the margin-left of the container
. /*var slider = new Fx.Tween(ScrollPanel.container, 'margin-left', { 'duration': myDuration, 'transition': myTransition, 'link': 'chain' });*/ var slider = new Fx.Tween(ScrollPanel.container, {property: 'margin-left', 'duration': myDuration, 'transition': myTransition, 'link': 'chain' }); //el.widthFx = new Fx.Tween(el.fill, {property: 'width', link: 'chain'}); // Start Effect. slider.start(newposition); } catch(err) { if(this.options.useConsole) { console.log(err); } } return false; }, getCurrentPosition: function(panel) { // This is called on Class initialisation to get the start position. if(!panel) { var pos = (ScrollPanel.container) ? ScrollPanel.container.getStyle('marginLeft').toInt() : 0; } else { var pos = $(panel) ? $(panel).getStyle('marginLeft').toInt() : 0; } return pos; }, getPanelDimension:function() { // This is called on Class initialisation to get the panel width. // The script assumes all panels are the same width. if((ScrollPanel.panels) && (ScrollPanel.panels.length > 0) && (!ScrollPanel.panelDimension)) { var panel = ScrollPanel.panels[0]; ScrollPanel.panelDimension = panel.getStyle('width').toInt(); } return (ScrollPanel.panelDimension) ? ScrollPanel.panelDimension : 0; } }); // Extend the Scrollpanel Class with the Options Class. ScrollPanel.implement(new Options()); // Add the Class init to the DomReady signal. window.addEvent('domready', function() { /* OPTIONS --------- @scrollDuration - short,normal,long or numeric. @scrollTransition - there are loads in the manual, here are a few: 'quint:in:out' 'sine:out' 'expo:in' 'elastic:out' 'bounce:out' 'linear' @lifeOfItsOwn - sets up the periodical if set true. @refreshRate - if set to lifeOfItsOwn:true, this is the pause between scrolls. The other options allow you to create multiple instances of scrollpanel on a page. Check the code, at some parts it starts its element duties from the @contentDiv option below. @useConsole - is to turn on/off debug in firebug console. */ var scrollPanelObj = new ScrollPanel({ contentDiv: 'homebox', innerDiv: 'slider', panelClass: 'block', linkClass: 'panellink', currentLinkClass: 'current', currentPanelClass: 'currentpanel', lifeOfItsOwn: true, morphTabs:false, refreshRate: 9000, scrollDuration: 1000, scrollTransition: 'expo:out', useConsole: true }); });