cycle2-rails 1.0.0 → 1.1.0

data/app/assets/javascripts/jquery.cycle2.carousel.js

@@ -0,0 +1,271 @@
+//= require jquery.cycle2
+
+/*! carousel transition plugin for Cycle2;  version: 20130528 */
+(function($) {
+"use strict";
+
+$( document ).on('cycle-bootstrap', function( e, opts, API ) {
+    if ( opts.fx !== 'carousel' )
+        return;
+
+    API.getSlideIndex = function( el ) {
+        var slides = this.opts()._carouselWrap.children();
+        var i = slides.index( el );
+        return i % slides.length;
+    };
+
+    // override default 'next' function
+    API.next = function() {
+        var count = opts.reverse ? -1 : 1;
+        if ( opts.allowWrap === false && ( opts.currSlide + count ) > opts.slideCount - opts.carouselVisible )
+            return;
+        opts.API.advanceSlide( count );
+        opts.API.trigger('cycle-next', [ opts ]).log('cycle-next');
+    };
+
+});
+
+
+$.fn.cycle.transitions.carousel = {
+    // transition API impl
+    preInit: function( opts ) {
+        opts.hideNonActive = false;
+        
+        opts.container.on('cycle-destroyed', $.proxy(this.onDestroy, opts.API));
+        // override default API implementation
+        opts.API.stopTransition = this.stopTransition;
+
+        // issue #10
+        for (var i=0; i < opts.startingSlide; i++) {
+            opts.container.append( opts.slides[0] );
+        }        
+    },
+
+    // transition API impl
+    postInit: function( opts ) {
+        var i, j, slide, pagerCutoffIndex, wrap;
+        var vert = opts.carouselVertical;
+        if (opts.carouselVisible && opts.carouselVisible > opts.slideCount)
+            opts.carouselVisible = opts.slideCount - 1;
+        var visCount = opts.carouselVisible || opts.slides.length;
+        var slideCSS = { display: vert ? 'block' : 'inline-block', position: 'static' };
+
+        // required styles
+        opts.container.css({ position: 'relative', overflow: 'hidden' });
+        opts.slides.css( slideCSS );
+
+        opts._currSlide = opts.currSlide;
+
+        // wrap slides in a div; this div is what is animated
+        wrap = $('<div class="cycle-carousel-wrap"></div>')
+            .prependTo( opts.container )
+            .css({ margin: 0, padding: 0, top: 0, left: 0, position: 'absolute' })
+            .append( opts.slides );
+
+        opts._carouselWrap = wrap;
+
+        if ( !vert )
+            wrap.css('white-space', 'nowrap');
+
+        if ( opts.allowWrap !== false ) {
+            // prepend and append extra slides so we don't see any empty space when we
+            // near the end of the carousel.  for fluid containers, add even more clones
+            // so there is plenty to fill the screen
+            // @todo: optimzie this based on slide sizes
+
+            for ( j=0; j < (opts.carouselVisible === undefined ? 2 : 1); j++ ) {
+                for ( i=0; i < opts.slideCount; i++ ) {
+                    wrap.append( opts.slides[i].cloneNode(true) );
+                }
+                i = opts.slideCount;
+                while ( i-- ) { // #160, #209
+                    wrap.prepend( opts.slides[i].cloneNode(true) );
+                }
+            }
+
+            wrap.find('.cycle-slide-active').removeClass('cycle-slide-active');
+            opts.slides.eq(opts.startingSlide).addClass('cycle-slide-active');
+        }
+
+        if ( opts.pager && opts.allowWrap === false ) {
+            // hide "extra" pagers
+            pagerCutoffIndex = opts.slideCount - visCount;
+            $( opts.pager ).children().filter( ':gt('+pagerCutoffIndex+')' ).hide();
+        }
+
+        opts._nextBoundry = opts.slideCount - opts.carouselVisible;
+
+        this.prepareDimensions( opts );
+    },
+
+    prepareDimensions: function( opts ) {
+        var dim, offset, pagerCutoffIndex, tmp;
+        var vert = opts.carouselVertical;
+        var visCount = opts.carouselVisible || opts.slides.length;
+
+        if ( opts.carouselFluid && opts.carouselVisible ) {
+            if ( ! opts._carouselResizeThrottle ) {
+            // fluid container AND fluid slides; slides need to be resized to fit container
+                this.fluidSlides( opts );
+            }
+        }
+        else if ( opts.carouselVisible && opts.carouselSlideDimension ) {
+            dim = visCount * opts.carouselSlideDimension;
+            opts.container[ vert ? 'height' : 'width' ]( dim );
+        }
+        else if ( opts.carouselVisible ) {
+            dim = visCount * $(opts.slides[0])[vert ? 'outerHeight' : 'outerWidth'](true);
+            opts.container[ vert ? 'height' : 'width' ]( dim );
+        }
+        // else {
+        //     // fluid; don't size the container
+        // }
+
+        offset = ( opts.carouselOffset || 0 );
+        if ( opts.allowWrap !== false ) {
+            if ( opts.carouselSlideDimension ) {
+                offset -= ( (opts.slideCount + opts.currSlide) * opts.carouselSlideDimension );
+            }
+            else {
+                // calculate offset based on actual slide dimensions
+                tmp = opts._carouselWrap.children();
+                for (var j=0; j < (opts.slideCount + opts.currSlide); j++) {
+                    offset -= $(tmp[j])[vert?'outerHeight':'outerWidth'](true);
+                }
+            }
+        }
+
+        opts._carouselWrap.css( vert ? 'top' : 'left', offset );
+    },
+
+    fluidSlides: function( opts ) {
+        var timeout;
+        var slide = opts.slides.eq(0);
+        var adjustment = slide.outerWidth() - slide.width();
+        var prepareDimensions = this.prepareDimensions;
+
+        // throttle resize event
+        $(window).on( 'resize', resizeThrottle);
+
+        opts._carouselResizeThrottle = resizeThrottle;
+        onResize();
+
+        function resizeThrottle() {
+            clearTimeout( timeout );
+            timeout = setTimeout( onResize, 20 );
+        }
+
+        function onResize() {
+            opts._carouselWrap.stop( false, true );
+            var slideWidth = opts.container.width() / opts.carouselVisible;
+            slideWidth = Math.ceil( slideWidth - adjustment );
+            opts._carouselWrap.children().width( slideWidth );
+            if ( opts._sentinel )
+                opts._sentinel.width( slideWidth );
+            prepareDimensions( opts );
+        }
+    },
+
+    // transition API impl
+    transition: function( opts, curr, next, fwd, callback ) {
+        var moveBy, props = {};
+        var hops = opts.nextSlide - opts.currSlide;
+        var vert = opts.carouselVertical;
+        var speed = opts.speed;
+
+        // handle all the edge cases for wrapping & non-wrapping
+        if ( opts.allowWrap === false ) {
+            fwd = hops > 0;
+            var currSlide = opts._currSlide;
+            var maxCurr = opts.slideCount - opts.carouselVisible;
+            if ( hops > 0 && opts.nextSlide > maxCurr && currSlide == maxCurr ) {
+                hops = 0;
+            }
+            else if ( hops > 0 && opts.nextSlide > maxCurr ) {
+                hops = opts.nextSlide - currSlide - (opts.nextSlide - maxCurr);
+            }
+            else if ( hops < 0 && opts.currSlide > maxCurr && opts.nextSlide > maxCurr ) {
+                hops = 0;
+            }
+            else if ( hops < 0 && opts.currSlide > maxCurr ) {
+                hops += opts.currSlide - maxCurr;
+            }
+            else 
+                currSlide = opts.currSlide;
+
+            moveBy = this.getScroll( opts, vert, currSlide, hops );
+            opts.API.opts()._currSlide = opts.nextSlide > maxCurr ? maxCurr : opts.nextSlide;
+        }
+        else {
+            if ( fwd && opts.nextSlide === 0 ) {
+                // moving from last slide to first
+                moveBy = this.getDim( opts, opts.currSlide, vert );
+                callback = this.genCallback( opts, fwd, vert, callback );
+            }
+            else if ( !fwd && opts.nextSlide == opts.slideCount - 1 ) {
+                // moving from first slide to last
+                moveBy = this.getDim( opts, opts.currSlide, vert );
+                callback = this.genCallback( opts, fwd, vert, callback );
+            }
+            else {
+                moveBy = this.getScroll( opts, vert, opts.currSlide, hops );
+            }
+        }
+
+        props[ vert ? 'top' : 'left' ] = fwd ? ( "-=" + moveBy ) : ( "+=" + moveBy );
+
+        // throttleSpeed means to scroll slides at a constant rate, rather than
+        // a constant speed
+        if ( opts.throttleSpeed )
+            speed = (moveBy / $(opts.slides[0])[vert ? 'height' : 'width']() ) * opts.speed;
+
+        opts._carouselWrap.animate( props, speed, opts.easing, callback );
+    },
+
+    getDim: function( opts, index, vert ) {
+        var slide = $( opts.slides[index] );
+        return slide[ vert ? 'outerHeight' : 'outerWidth'](true);
+    },
+
+    getScroll: function( opts, vert, currSlide, hops ) {
+        var i, moveBy = 0;
+
+        if (hops > 0) {
+            for (i=currSlide; i < currSlide+hops; i++)
+                moveBy += this.getDim( opts, i, vert);
+        }
+        else {
+            for (i=currSlide; i > currSlide+hops; i--)
+                moveBy += this.getDim( opts, i, vert);
+        }
+        return moveBy;
+    },
+
+    genCallback: function( opts, fwd, vert, callback ) {
+        // returns callback fn that resets the left/top wrap position to the "real" slides
+        return function() {
+            var pos = $(opts.slides[opts.nextSlide]).position();
+            var offset = 0 - pos[vert?'top':'left'] + (opts.carouselOffset || 0);
+            opts._carouselWrap.css( opts.carouselVertical ? 'top' : 'left', offset );
+            callback();
+        };
+    },
+
+    // core API override
+    stopTransition: function() {
+        var opts = this.opts();
+        opts.slides.stop( false, true );
+        opts._carouselWrap.stop( false, true );
+    },
+
+    // core API supplement
+    onDestroy: function( e ) {
+        var opts = this.opts();
+        if ( opts._carouselResizeThrottle )
+            $( window ).off( 'resize', opts._carouselResizeThrottle );
+        opts.slides.prependTo( opts.container );
+        opts._carouselWrap.remove();
+    }
+};
+
+})(jQuery);

data/app/assets/javascripts/jquery.cycle2.center.js

@@ -0,0 +1,65 @@
+//= require jquery.cycle2
+
+/*! center plugin for Cycle2;  version: 20130324 */
+(function($) {
+"use strict";
+
+$.extend($.fn.cycle.defaults, {
+    centerHorz: false,
+    centerVert: false
+});
+
+$(document).on( 'cycle-pre-initialize', function( e, opts ) {
+    if ( !opts.centerHorz && !opts.centerVert )
+        return;
+
+    // throttle resize event
+    var timeout, timeout2;
+
+    $(window).on( 'resize orientationchange', resize );
+    
+    opts.container.on( 'cycle-destroyed', destroy );
+
+    opts.container.on( 'cycle-initialized cycle-slide-added cycle-slide-removed', function( e, opts, slideOpts, slide ) {
+        adjustActive();
+    });
+
+    adjustActive();
+
+    function resize() {
+        clearTimeout( timeout );
+        timeout = setTimeout( adjustActive, 50 );
+    }
+
+    function destroy( e, opts ) {
+        clearTimeout( timeout );
+        clearTimeout( timeout2 );
+        $( window ).off( 'resize orientationchange', resize );
+    }
+
+    function adjustAll() {
+        opts.slides.each( adjustSlide ); 
+    }
+
+    function adjustActive() {
+        /*jshint validthis: true */
+        adjustSlide.apply( opts.container.find( opts.slideActiveClass ) );
+        clearTimeout( timeout2 );
+        timeout2 = setTimeout( adjustAll, 50 );
+    }
+
+    function adjustSlide() {
+        /*jshint validthis: true */
+        var slide = $(this);
+        var contW = opts.container.width();
+        var contH = opts.container.height();
+        var w = slide.width();
+        var h = slide.height();
+        if (opts.centerHorz && w < contW)
+            slide.css( 'marginLeft', (contW - w) / 2 );
+        if (opts.centerVert && h < contH)
+            slide.css( 'marginTop', (contH - h) / 2 );
+    }
+});
+
+})(jQuery);

data/app/assets/javascripts/jquery.cycle2.command.js

@@ -0,0 +1,182 @@
+//= require jquery.cycle2.core
+
+/*! command plugin for Cycle2;  version: 20130525.1 */
+(function($) {
+"use strict";
+
+var c2 = $.fn.cycle;
+
+$.fn.cycle = function( options ) {
+    var cmd, cmdFn, opts;
+    var args = $.makeArray( arguments );
+
+    if ( $.type( options ) == 'number' ) {
+        return this.cycle( 'goto', options );
+    }
+
+    if ( $.type( options ) == 'string' ) {
+        return this.each(function() {
+            var cmdArgs;
+            cmd = options;
+            opts = $(this).data('cycle.opts');
+
+            if ( opts === undefined ) {
+                c2.log('slideshow must be initialized before sending commands; "' + cmd + '" ignored');
+                return;
+            }
+            else {
+                cmd = cmd == 'goto' ? 'jump' : cmd; // issue #3; change 'goto' to 'jump' internally
+                cmdFn = opts.API[ cmd ];
+                if ( $.isFunction( cmdFn )) {
+                    cmdArgs = $.makeArray( args );
+                    cmdArgs.shift();
+                    return cmdFn.apply( opts.API, cmdArgs );
+                }
+                else {
+                    c2.log( 'unknown command: ', cmd );
+                }
+            }
+        });
+    }
+    else {
+        return c2.apply( this, arguments );
+    }
+};
+
+// copy props
+$.extend( $.fn.cycle, c2 );
+
+$.extend( c2.API, {
+    next: function() {
+        var opts = this.opts();
+        if ( opts.busy && ! opts.manualTrump )
+            return;
+        
+        var count = opts.reverse ? -1 : 1;
+        if ( opts.allowWrap === false && ( opts.currSlide + count ) >= opts.slideCount )
+            return;
+
+        opts.API.advanceSlide( count );
+        opts.API.trigger('cycle-next', [ opts ]).log('cycle-next');
+    },
+
+    prev: function() {
+        var opts = this.opts();
+        if ( opts.busy && ! opts.manualTrump )
+            return;
+        var count = opts.reverse ? 1 : -1;
+        if ( opts.allowWrap === false && ( opts.currSlide + count ) < 0 )
+            return;
+
+        opts.API.advanceSlide( count );
+        opts.API.trigger('cycle-prev', [ opts ]).log('cycle-prev');
+    },
+
+    destroy: function() {
+        this.stop(); //#204
+
+        var opts = this.opts();
+        var clean = $.isFunction( $._data ) ? $._data : $.noop;  // hack for #184 and #201
+        clearTimeout(opts.timeoutId);
+        opts.timeoutId = 0;
+        opts.API.stop();
+        opts.API.trigger( 'cycle-destroyed', [ opts ] ).log('cycle-destroyed');
+        opts.container.removeData();
+        clean( opts.container[0], 'parsedAttrs', false );
+
+        // #75; remove inline styles
+        if ( ! opts.retainStylesOnDestroy ) {
+            opts.container.removeAttr( 'style' );
+            opts.slides.removeAttr( 'style' );
+            opts.slides.removeClass( 'cycle-slide-active' );
+        }
+        opts.slides.each(function() {
+            $(this).removeData();
+            clean( this, 'parsedAttrs', false );
+        });
+    },
+
+    jump: function( index ) {
+        // go to the requested slide
+        var fwd;
+        var opts = this.opts();
+        if ( opts.busy && ! opts.manualTrump )
+            return;
+        var num = parseInt( index, 10 );
+        if (isNaN(num) || num < 0 || num >= opts.slides.length) {
+            opts.API.log('goto: invalid slide index: ' + num);
+            return;
+        }
+        if (num == opts.currSlide) {
+            opts.API.log('goto: skipping, already on slide', num);
+            return;
+        }
+        opts.nextSlide = num;
+        clearTimeout(opts.timeoutId);
+        opts.timeoutId = 0;
+        opts.API.log('goto: ', num, ' (zero-index)');
+        fwd = opts.currSlide < opts.nextSlide;
+        opts.API.prepareTx( true, fwd );
+    },
+
+    stop: function() {
+        var opts = this.opts();
+        var pauseObj = opts.container;
+        clearTimeout(opts.timeoutId);
+        opts.timeoutId = 0;
+        opts.API.stopTransition();
+        if ( opts.pauseOnHover ) {
+            if ( opts.pauseOnHover !== true )
+                pauseObj = $( opts.pauseOnHover );
+            pauseObj.off('mouseenter mouseleave');
+        }
+        opts.API.trigger('cycle-stopped', [ opts ]).log('cycle-stopped');
+    },
+
+    reinit: function() {
+        var opts = this.opts();
+        opts.API.destroy();
+        opts.container.cycle();
+    },
+
+    remove: function( index ) {
+        var opts = this.opts();
+        var slide, slideToRemove, slides = [], slideNum = 1;
+        for ( var i=0; i < opts.slides.length; i++ ) {
+            slide = opts.slides[i];
+            if ( i == index ) {
+                slideToRemove = slide;
+            }
+            else {
+                slides.push( slide );
+                $( slide ).data('cycle.opts').slideNum = slideNum;
+                slideNum++;
+            }
+        }
+        if ( slideToRemove ) {
+            opts.slides = $( slides );
+            opts.slideCount--;
+            $( slideToRemove ).remove();
+            if (index == opts.currSlide) {
+                opts.API.advanceSlide( 1 );
+            }
+
+            opts.API.trigger('cycle-slide-removed', [ opts, index, slideToRemove ]).log('cycle-slide-removed');
+            opts.API.updateView();
+        }
+    }
+
+});
+
+// listen for clicks on elements with data-cycle-cmd attribute
+$(document).on('click.cycle', '[data-cycle-cmd]', function(e) {
+    // issue cycle command
+    e.preventDefault();
+    var el = $(this);
+    var command = el.data('cycle-cmd');
+    var context = el.data('cycle-context') || '.cycle-slideshow';
+    $(context).cycle(command, el.data('cycle-arg'));
+});
+
+
+})(jQuery);