Team:UPO-Sevilla/js/anythingSlider.js

• <a href="#">' + o.backText + '</a>

• <a href="#">' + o.forwardText + '</a>

} // include half of the left position to include extra width from themes like tabs-light and tabs-dark (still not perfect) base.navWidths = base.$nav.find('li').map(function(){ return $(this).innerWidth() + Math.ceil(parseInt($(this).find('span').css('left'),10)/2 || 0); }).get(); base.navLeft = 1; // add 5 pixels to make sure the tabs don't wrap to the next line base.$nav.width( base.navWidth( 1, base.pages + 1 ) + 5 ); base.$controls.find('.anythingNavWindow') .width( base.navWidth( 1, o.navigationSize + 1 ) ).end() .find('.prev,.next').bind(o.clickControls, function(e) { if (!base.flag) { base.flag = true; setTimeout(function(){ base.flag = false; }, 200); base.navWindow( base.navLeft + o.navigationSize * ( $(this).is('.prev') ? -1 : 1 ) ); } e.preventDefault(); }); }

} };

base.navWidth = function(x,y){ var s = Math.min(x,y), e = Math.max(x,y), w = 0; for (; s < e; s++) { w += base.navWidths[s-1] || 0; } return w; };

base.navWindow = function(n){ var p = base.pages - o.navigationSize + 1; n = (n <= 1) ? 1 : (n > 1 && n < p) ? n : p; if (n !== base.navLeft) { base.$controls.find('.anythingNavWindow').animate( { scrollLeft: base.navWidth(1, n), width: base.navWidth(n, n + o.navigationSize) }, { queue: false, duration: o.animationTime }); base.navLeft = n; } };

// Creates the Forward/Backward buttons base.buildNextBackButtons = function() { base.$forward = $('<a href="#">' + o.forwardText + '</a>'); base.$back = $('<a href="#">' + o.backText + '</a>');

// Bind to the forward and back buttons base.$back.bind(o.clickBackArrow, function(e) { // prevent running functions twice (once for click, second time for swipe) if (o.enableArrows && !base.flag) { base.flag = true; setTimeout(function(){ base.flag = false; }, 100); base.goBack(); } e.preventDefault(); }); base.$forward.bind(o.clickForwardArrow, function(e) { // prevent running functions twice (once for click, second time for swipe) if (o.enableArrows && !base.flag) { base.flag = true; setTimeout(function(){ base.flag = false; }, 100); base.goForward(); } e.preventDefault(); }); // using tab to get to arrow links will show they have focus (outline is disabled in css) base.$back.add(base.$forward).find('a').bind('focusin focusout',function(){ $(this).toggleClass('hover'); });

// Append elements to page base.$back.appendTo( (o.appendBackTo !== null && $(o.appendBackTo).length) ? $(o.appendBackTo) : base.$wrapper ); base.$forward.appendTo( (o.appendForwardTo !== null && $(o.appendForwardTo).length) ? $(o.appendForwardTo) : base.$wrapper );

base.$arrowWidth = base.$forward.width(); // assuming the left & right arrows are the same width - used for toggle };

// Creates the Start/Stop button base.buildAutoPlay = function(){ base.$startStop .html('' + (base.playing ? o.stopText : o.startText) + '') .bind(o.clickSlideshow, function(e) { if (o.enableStartStop) { base.startStop(!base.playing); base.makeActive(); if (base.playing && !o.autoPlayDelayed) { base.goForward(true); } } e.preventDefault(); }) // show button has focus while tabbing .bind('focusin focusout',function(){ $(this).toggleClass('hover'); }); };

// Adjust slider dimensions on parent element resize base.checkResize = function(stopTimer){ clearTimeout(base.resizeTimer); base.resizeTimer = setTimeout(function(){ var w = base.$outer.width() - base.outerPad[0], h = (base.$outer[0].tagName === "BODY" ? base.$win.height() : base.$outer.height()) - base.outerPad[1]; // base.width = width of one panel, so multiply by # of panels; outerPad is padding added for arrows. if (base.width * o.showMultiple !== w || base.height !== h) { base.setDimensions(); // adjust panel sizes // make sure page is lined up (use -1 animation time, so we can differeniate it from when animationTime = 0) base.gotoPage(base.currentPage, base.playing, null, -1); } if (typeof(stopTimer) === 'undefined'){ base.checkResize(); } }, 500); };

// Set panel dimensions to either resize content or adjust panel to content base.setDimensions = function(){ var w, h, c, edge = 0, // determine panel width pw = (o.showMultiple > 1) ? base.width || base.$window.width()/o.showMultiple : base.$window.width(), winw = base.$win.width(); if (o.expand){ w = base.$outer.width() - base.outerPad[0]; base.height = h = base.$outer.height() - base.outerPad[1]; base.$wrapper.add(base.$window).add(base.$items).css({ width: w, height: h }); base.width = pw = (o.showMultiple > 1) ? w/o.showMultiple : w; } base.$items.each(function(i){ c = $(this).children(); if (o.resizeContents){ // resize panel w = base.width; h = base.height; $(this).css({ width: w, height: h }); if (c.length && c[0].tagName === "EMBED") { c.attr({ width: '100%', height: '100%' }); } // needed for IE7; also c.length > 1 in IE7 // resize panel contents, if solitary (wrapped content or solitary image) if (c.length === 1){ c.css({ width: '100%', height: '100%' }); } } else { // get panel width & height and save it w = $(this).width(); // if not defined, it will return the width of the ul parent if (c.length === 1 && w >= winw){ w = (c.width() >= winw) ? pw : c.width(); // get width of solitary child c.css('max-width', w); // set max width for all children } $(this).css('width', w); // set width of panel h = (c.length === 1) ? c.outerHeight(true) : $(this).height(); // get height after setting width $(this).css('height', h); } base.panelSize[i] = [w,h,edge]; edge += (o.vertical) ? h : w; }); // Set total width of slider, Note that this is limited to 32766 by Opera - option removed base.$el.css((o.vertical ? 'height' : 'width'), edge); };

// get dimension of multiple panels, as needed base.getDim = function(page){ if (base.pages < 1 || isNaN(page)) { return [ base.width, base.height ]; } // prevent errors when base.panelSize is empty page = (o.infiniteSlides && base.pages > 1) ? page : page - 1; var i, w = base.panelSize[page][0], h = base.panelSize[page][1]; if (o.showMultiple > 1) { for (i=1; i < o.showMultiple; i++) { w += base.panelSize[(page + i)%o.showMultiple][0]; h = Math.max(h, base.panelSize[page + i][1]); } } return [w,h]; };

base.goForward = function(autoplay) { base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? -1 : 1), autoplay); };

base.goBack = function(autoplay) { base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? 1 : -1), autoplay); };

base.gotoPage = function(page, autoplay, callback, time) { if (autoplay !== true) { autoplay = false; base.startStop(false); base.makeActive(); } // check if page is an id or class name if (/^[#|.]/.test(page) && $(page).length) { page = $(page).closest('.panel').index() + base.adj; } // rewind effect occurs here when changeBy > 1 if (o.changeBy !== 1){ if (page < 0) { page += base.pages; } if (page > base.pages) { page -= base.pages; } } if (base.pages <= 1) { return; } // prevents animation base.$lastPage = base.$currentPage; if (typeof(page) !== "number") { page = o.startPanel; base.setCurrentPage(page); }

// pause YouTube videos before scrolling or prevent change if playing if (autoplay && o.isVideoPlaying(base)) { return; }

if (page > base.pages + 1 - base.adj) { page = (!o.infiniteSlides && !o.stopAtEnd) ? 1 : base.pages; } if (page < base.adj ) { page = (!o.infiniteSlides && !o.stopAtEnd) ? base.pages : 1; } base.currentPage = ( page > base.pages ) ? base.pages : ( page < 1 ) ? 1 : base.currentPage; base.$currentPage = base.$items.eq(base.currentPage - base.adj); base.exactPage = page; base.$targetPage = base.$items.eq( (page === 0) ? base.pages - base.adj : (page > base.pages) ? 1 - base.adj : page - base.adj ); time = time || o.animationTime; // don't trigger events when time = 1 - to prevent FX from firing multiple times on page resize if (time >= 0) { base.$el.trigger('slide_init', base); }

base.slideControls(true, false);

// When autoplay isn't passed, we stop the timer if (autoplay !== true) { autoplay = false; } // Stop the slider when we reach the last page, if the option stopAtEnd is set to true if (!autoplay || (o.stopAtEnd && page === base.pages)) { base.startStop(false); }

if (time >= 0) { base.$el.trigger('slide_begin', base); }

// delay starting slide animation setTimeout(function(d){ // resize slider if content size varies if (!o.resizeContents) { // animating the wrapper resize before the window prevents flickering in Firefox d = base.getDim(page); base.$wrapper.filter(':not(:animated)').animate( // prevent animating a dimension to zero { width: d[0] || base.width, height: d[1] || base.height }, { queue: false, duration: (time < 0 ? 0 : time), easing: o.easing } ); } d = {}; d[base.dir] = -base.panelSize[(o.infiniteSlides && base.pages > 1) ? page : page - 1][2]; // Animate Slider base.$el.filter(':not(:animated)').animate( d, { queue: false, duration: time, easing: o.easing, complete: function(){ base.endAnimation(page, callback, time); } } ); }, parseInt(o.delayBeforeAnimate, 10) || 0); };

base.endAnimation = function(page, callback, time){ if (page === 0) { base.$el.css( base.dir, -base.panelSize[base.pages][2]); page = base.pages; } else if (page > base.pages) { // reset back to start position base.$el.css( base.dir, -base.panelSize[1][2]); page = 1; } base.exactPage = page; base.setCurrentPage(page, false); // Add active panel class base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');

if (!base.hovered) { base.slideControls(false); }

if (time >= 0) { base.$el.trigger('slide_complete', base); } // callback from external slide control: $('#slider').anythingSlider(4, function(slider){ }) if (typeof callback === 'function') { callback(base); }

// Continue slideshow after a delay if (o.autoPlayLocked && !base.playing) { setTimeout(function(){ base.startStop(true); // subtract out slide delay as the slideshow waits that additional time. }, o.resumeDelay - (o.autoPlayDelayed ? o.delay : 0)); } };

base.setCurrentPage = function(page, move) { page = parseInt(page, 10); if (base.pages < 1 || page === 0 || isNaN(page)) { return; } if (page > base.pages + 1 - base.adj) { page = base.pages - base.adj; } if (page < base.adj ) { page = 1; }

// Set visual if (o.buildNavigation){ base.$nav .find('.cur').removeClass('cur').end() .find('a').eq(page - 1).addClass('cur'); }

// hide/show arrows based on infinite scroll mode if (!o.infiniteSlides && o.stopAtEnd){ base.$wrapper .find('span.forward')[ page === base.pages ? 'addClass' : 'removeClass']('disabled').end() .find('span.back')[ page === 1 ? 'addClass' : 'removeClass']('disabled'); if (page === base.pages && base.playing) { base.startStop(); } }

// Only change left if move does not equal false if (!move) { var d = base.getDim(page); base.$wrapper .css({ width: d[0], height: d[1] }) .add(base.$window).scrollLeft(0); // reset in case tabbing changed this scrollLeft - probably overly redundant base.$el.css( base.dir, -base.panelSize[(o.infiniteSlides && base.pages > 1) ? page : page - 1][2] ); } // Update local variable base.currentPage = page; base.$currentPage = base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');

};

base.makeActive = function(){ // Set current slider as active so keyboard navigation works properly if (!base.$wrapper.is('.activeSlider')){ $('.activeSlider').removeClass('activeSlider'); base.$wrapper.addClass('activeSlider'); } };

// This method tries to find a hash that matches an ID and panel-X // If either found, it tries to find a matching item // If that is found as well, then it returns the page number base.gotoHash = function(){ var h = base.win.location.hash, i = h.indexOf('&'), n = h.match(base.regex); if (n === null && !/^#&/.test(h)) { // #quote2&panel1-3&panel3-3 h = h.substring(0, (i >= 0 ? i : h.length)); // ensure the element is in the same slider n = ($(h).closest('.anythingBase')[0] === base.el) ? $(h).closest('.panel').index() : null; } else if (n !== null) { // #&panel1-3&panel3-3 n = (o.hashTags) ? parseInt(n[1],10) : null; } return n; };

base.setHash = function(n){ var s = 'panel' + base.runTimes + '-', h = base.win.location.hash; if ( typeof h !== 'undefined' ) { base.win.location.hash = (h.indexOf(s) > 0) ? h.replace(base.regex, s + n) : h + "&" + s + n; } };

// Slide controls (nav and play/stop button up or down) base.slideControls = function(toggle){ var dir = (toggle) ? 'slideDown' : 'slideUp', t1 = (toggle) ? 0 : o.animationTime, t2 = (toggle) ? o.animationTime: 0, op = (toggle) ? 1 : 0, sign = (toggle) ? 0 : 1; // 0 = visible, 1 = hidden if (o.toggleControls) { base.$controls.stop(true,true).delay(t1)[dir](o.animationTime/2).delay(t2); } if (o.buildArrows && o.toggleArrows) { if (!base.hovered && base.playing) { sign = 1; op = 0; } // don't animate arrows during slideshow base.$forward.stop(true,true).delay(t1).animate({ right: sign * base.$arrowWidth, opacity: op }, o.animationTime/2); base.$back.stop(true,true).delay(t1).animate({ left: sign * base.$arrowWidth, opacity: op }, o.animationTime/2); } };

base.clearTimer = function(paused){ // Clear the timer only if it is set if (base.timer) { base.win.clearInterval(base.timer); if (!paused && base.slideshow) { base.$el.trigger('slideshow_stop', base); base.slideshow = false; } } };

// Pass startStop(false) to stop and startStop(true) to play base.startStop = function(playing, paused) { if (playing !== true) { playing = false; } // Default if not supplied is false base.playing = playing;

if (playing && !paused) { base.$el.trigger('slideshow_start', base); base.slideshow = true; }

// Toggle playing and text if (o.buildStartStop) { base.$startStop.toggleClass('playing', playing).find('span').html( playing ? o.stopText : o.startText ); // add button text to title attribute if it is hidden by text-indent if (parseInt(base.$startStop.find('span').css('text-indent'),10) < 0) { base.$startStop.addClass(o.tooltipClass).attr( 'title', playing ? o.stopText : o.startText ); } }

// Pause slideshow while video is playing if (playing){ base.clearTimer(true); // Just in case this was triggered twice in a row base.timer = base.win.setInterval(function() { // prevent autoplay if video is playing if ( !o.isVideoPlaying(base) ) { base.goForward(true); // stop slideshow if resume if false } else if (!o.resumeOnVideoEnd) { base.startStop(); } }, o.delay); } else { base.clearTimer(); } };

// Trigger the initialization base.init(); };

$.anythingSlider.defaults = { // Appearance theme  : "default", // Theme name, add the css stylesheet manually expand  : false, // If true, the entire slider will expand to fit the parent element resizeContents  : true, // If true, solitary images/objects in the panel will expand to fit the viewport vertical  : false, // If true, all panels will slide vertically; they slide horizontally otherwise showMultiple  : false, // Set this value to a number and it will show that many slides at once easing  : "swing", // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI

buildArrows  : true, // If true, builds the forwards and backwards buttons buildNavigation  : true, // If true, builds a list of anchor links to link to each panel buildStartStop  : true, // ** If true, builds the start/stop button

appendForwardTo  : null, // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null appendBackTo  : null, // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null appendControlsTo  : null, // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null appendNavigationTo  : null, // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null appendStartStopTo  : null, // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null

toggleArrows  : false, // If true, side navigation arrows will slide out on hovering & hide @ other times toggleControls  : false, // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times

startText  : "Start", // Start button text stopText  : "Stop", // Stop button text forwardText  : "»", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image) backText  : "«", // Link text used to move the slider back (hidden by CSS, replace with arrow image) tooltipClass  : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)

// Function enableArrows  : true, // if false, arrows will be visible, but not clickable. enableNavigation  : true, // if false, navigation links will still be visible, but not clickable. enableStartStop  : true, // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay" enableKeyboard  : true, // if false, keyboard arrow keys will not work for this slider.

// Navigation startPanel  : 1, // This sets the initial panel changeBy  : 1, // Amount to go forward or back when changing panels. hashTags  : true, // Should links change the hashtag in the URL? infiniteSlides  : true, // if false, the slider will not wrap & not clone any panels navigationFormatter : null, // Details at the top of the file on this use (advanced use) navigationSize  : false, // Set this to the maximum number of visible navigation tabs; false to disable

// Slideshow options autoPlay  : false, // If true, the slideshow will start running; replaces "startStopped" option autoPlayLocked  : false, // If true, user changing slides will not stop the slideshow autoPlayDelayed  : false, // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts pauseOnHover  : true, // If true & the slideshow is active, the slideshow will pause on hover stopAtEnd  : false, // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false. playRtl  : false, // If true, the slideshow will move right-to-left

// Times delay  : 3000, // How long between slideshow transitions in AutoPlay mode (in milliseconds) resumeDelay  : 15000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds). animationTime  : 600, // How long the slideshow transition takes (in milliseconds) delayBeforeAnimate  : 0, // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).

// Callbacks - removed from options to reduce size - they still work

// Interactivity clickForwardArrow  : "click", // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight") clickBackArrow  : "click", // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft") clickControls  : "click focusin", // Events used to activate navigation control functionality clickSlideshow  : "click", // Event used to activate slideshow play/stop button

// Video resumeOnVideoEnd  : true, // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete addWmodeToObject  : "opaque", // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting isVideoPlaying  : function(base){ return false; } // return true if video is playing or false if not - used by video extension

};

$.fn.anythingSlider = function(options, callback) {

return this.each(function(){ var page, anySlide = $(this).data('AnythingSlider');

// initialize the slider but prevent multiple initializations if ((typeof(options)).match('object|undefined')){ if (!anySlide) { (new $.anythingSlider(this, options)); } else { anySlide.updateSlider(); } // If options is a number, process as an external link to page #: $(element).anythingSlider(#) } else if (/\d/.test(options) && !isNaN(options) && anySlide) { page = (typeof(options) === "number") ? options : parseInt($.trim(options),10); // accepts " 2 " // ignore out of bound pages if ( page >= 1 && page <= anySlide.pages ) { anySlide.gotoPage(page, false, callback); // page #, autoplay, one time callback } // Accept id or class name } else if (/^[#|.]/.test(options) && $(options).length) { anySlide.gotoPage(options, false, callback); } }); };