Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

gallery-2011.04.20-13-04 jlizarraga gallery-yui-slideshow

  • Loading branch information...
commit e2bb7b6ae70b7504b8b3a6c984617219d2ba033f 1 parent 12e5b5e
YUI Builder authored
View
10 src/gallery-yui-slideshow/README
@@ -5,6 +5,16 @@ Inspired by jQuery Cycle: http://malsup.com/jquery/cycle/
Changelog:
+v2.1.0 - April 15, 2011
+
+* Added proper events, including "previous", "next", "pause", "play", "slide", "timeout", "hoverpause", and "hoverplay".
+* "interval" configuration attribute can now accept an array of timing settings (must have 1 element per slide).
+* "pages" configuration attribute now expects a selector string for the page elements or a NodeList.
+* When using pages, the active page will now receive the class "yui3-slideshow-active".
+* Added "visibility" definitions to default "before" and "after" settings.
+* Fixed a bug where mouseleave would *always* cause the slideshow to play when "pauseOnHover" was enabled.
+* Minor bug fixes and refactoring.
+
v2.0.0 - March 30, 2011
* Refactored module with better YUI3 conventions.
View
688 src/gallery-yui-slideshow/js/gallery-yui-slideshow.js
@@ -1,20 +1,22 @@
-/**
- * A simple YUI3 slideshow kit inspired by the jQuery Cycle plugin.
- * @module gallery-yui-slideshow
- * @requires widget, transition, event-mouseenter
- * @author Josh Lizarraga
- */
-
+
+ /**
+ * A simple YUI3 slideshow kit inspired by the jQuery Cycle plugin.
+ * @module gallery-yui-slideshow
+ * @requires widget, transition, event-mouseenter
+ * @author Josh Lizarraga
+ */
+
/**
+ * A simple YUI3 slideshow kit inspired by the jQuery Cycle plugin.
* @class Slideshow
* @constructor
* @param {Object} config Widget configuration object.
*/
- var Slideshow = function(config){
-
- Slideshow.superclass.constructor.apply(this, arguments);
-
- };
+ var Slideshow = function(config){
+
+ Slideshow.superclass.constructor.apply(this, arguments);
+
+ };
/**
* @property NAME
@@ -23,7 +25,7 @@
*/
Slideshow.NAME = 'Slideshow';
- // Presets:
+ /* ! Slideshow.PRESETS */
Slideshow.PRESETS = {
@@ -78,7 +80,7 @@
/**
* Both slides slide from right to left.
- * @property PRESETS.slideRight
+ * @property PRESETS.slideLeft
* @type Preset Slide Transition
*/
slideLeft: {
@@ -150,9 +152,9 @@
};
- // Attributes:
+ /* ! Attributes */
- Slideshow.ATTRS = {
+ Slideshow.ATTRS = {
/**
* Slides NodeList instance.
@@ -215,8 +217,8 @@
},
/**
- * Node/selector string for the element whose children correspond to slides.
- * This setting works best with an ordered list of links.
+ * NodeList/selector string for the elements that correspond to slides.
+ * This setting works best with list items.
* @attribute pages
* @type Mixed
* @default null
@@ -226,9 +228,9 @@
},
/**
- * Time interval between slide transitions in seconds.
+ * Time interval(s) between slide transitions in seconds.
* @attribute interval
- * @type Float
+ * @type Float|Array
* @default 4
*/
interval: {
@@ -296,19 +298,20 @@
},
/**
- * Default transIn (incoming slide) "before" settings. Sets z-index to 1.
+ * Default transIn (incoming slide) "before" settings. Sets visibility:visible and z-index:1.
* @attribute transInBefore
* @type Object
* @default (See source)
*/
transInBefore: {
value: {
- zIndex: 1
+ visibility: 'visible',
+ zIndex: 1
}
},
/**
- * Default transIn (incoming slide) "after" settings. Sets z-index to 2.
+ * Default transIn (incoming slide) "after" settings. Sets z-index:2.
* @attribute transInAfter
* @type Object
* @default (See source)
@@ -320,7 +323,7 @@
},
/**
- * Default transOut (outgoing slide) "before" settings. Sets z-index to 2.
+ * Default transOut (outgoing slide) "before" settings. Sets z-index:2.
* @attribute transOutBefore
* @type Object
* @default (See source)
@@ -332,144 +335,143 @@
},
/**
- * Default transOut (outgoing slide) "after" settings. Sets z-index to -30000.
+ * Default transOut (outgoing slide) "after" settings. Sets visibility:hidden and z-index:-30000.
* @attribute transOutAfter
* @type Object
* @default (See source)
*/
transOutAfter: {
value: {
- zIndex: -30000
+ visibility: 'hidden',
+ zIndex: -30000
}
},
/**
- * Changes timer from setInterval to setTimeout. Can be useful for debugging slide transitions.
- * @attribute _debug
+ * The ID returned by autoplay's setTimeout call.
+ * @attribute _timeoutID
+ * @protected
+ * @type Integer
+ * @default null
+ */
+ _timeoutID: {
+ value: null
+ },
+
+ /**
+ * Paused flag.
+ * @attribute _isPaused
+ * @protected
+ * @type Boolean
+ * @default true
+ */
+ _isPaused: {
+ value: true
+ },
+
+ /**
+ * Hover paused flag.
+ * @attribute _isHoverPaused
* @protected
* @type Boolean
* @default false
*/
- _debug: {
+ _isHoverPaused: {
value: false
},
/**
- * The ID returned by autoplay's setInterval call.
- * @attribute _intervalID
+ * Outgoing slide Node.
+ * @attribute _outgoingSlide
* @protected
- * @type Integer
+ * @type Node Instance
* @default null
*/
- _intervalID: {
+ _outgoingSlide: {
value: null
},
/**
- * Paused flag.
- * @attribute _isPaused
+ * Incoming slide Node.
+ * @attribute _incomingSlide
* @protected
- * @type Boolean
- * @default true
+ * @type Node Instance
+ * @default null
*/
- _isPaused: {
- value: true
+ _incomingSlide: {
+ value: null
}
- };
-
- Y.extend(Slideshow, Y.Widget, {
+ };
+
+ Y.extend(Slideshow, Y.Widget, {
- // Public methods:
+ /* ! Public Methods */
/**
- * Advances the slideshow by one slide.
+ * Fires "slideshow:next" event.
+ * This method is chainable.
* @method next
*/
- next: function(){
+ next: function(){
- if( this.get('pauseOnChange') ){
-
- this.pause();
-
- }
+ this.fire('next');
- this.slide('next');
+ return this;
- },
+ },
/**
- * Pauses the slideshow.
+ * Fires "slideshow:pause" event.
+ * This method is chainable.
* @method pause
*/
- pause: function(){
+ pause: function(){
- if( !this.get('_isPaused') ){
-
- window.clearInterval( this.get('_intervalID') );
-
- this.set('_isPaused', true);
-
- }
+ this.fire('pause');
+
+ return this;
- },
+ },
/**
- * Plays the slideshow.
+ * Fires "slideshow:play" event.
+ * This method is chainable.
* @method play
*/
- play: function(){
+ play: function(){
- var $that = this,
- $function;
+ this.fire('play');
- if( this.get('_isPaused') ){
-
- $function = this.get('_debug') ? 'setTimeout' : 'setInterval' ;
-
- this.set( '_intervalID', window[$function](function(){
-
- $that.slide('next');
-
- }, parseInt( this.get('interval') * 1000, 10 )) );
-
- this.set('_isPaused', false);
-
- }
+ return this;
- },
+ },
/**
- * Reverses the slideshow by one slide.
+ * Fires "slideshow:previous" event.
+ * This method is chainable.
* @method previous
*/
- previous: function(){
+ previous: function(){
- if( this.get('pauseOnChange') ){
-
- this.pause();
-
- }
+ this.fire('previous');
- this.slide('previous');
+ return this;
- },
+ },
/**
- * Advances the slideshow to a given slide.
+ * Adjusts the currentIndex and fires the "slideshow:slide" event.
+ * This method is chainable.
* @method slide
* @param $which {Mixed} The slide to advance to. Can be a slide index, "next", or "previous".
*/
- slide: function($which){
+ slide: function($which){
- var $that = this,
- $currentIndex = this.get('currentIndex'),
- $slides = this.get('slides'),
- $slideTransition = this.get('transition'),
- $outgoingSlide,
- $incomingSlide;
+ var $currentIndex = this.get('currentIndex'),
+ $slides = this.get('slides');
- $outgoingSlide = $slides.item($currentIndex);
+ this.set('_outgoingSlide', $slides.item($currentIndex));
switch( $which ){
@@ -523,95 +525,15 @@
this.set('currentIndex', $currentIndex);
- $incomingSlide = $slides.item($currentIndex);
-
- // Duraton and easing:
-
- if( Y.Lang.isUndefined($slideTransition.slideOut.transition.duration) ){
-
- $slideTransition.slideOut.transition.duration = this.get('duration');
-
- }
-
- if( Y.Lang.isUndefined($slideTransition.slideOut.transition.easing) ){
-
- $slideTransition.slideOut.transition.easing = this.get('easing');
-
- }
-
- if( Y.Lang.isUndefined($slideTransition.slideIn.transition.duration) ){
-
- $slideTransition.slideIn.transition.duration = this.get('duration');
-
- }
-
- if( Y.Lang.isUndefined($slideTransition.slideIn.transition.easing) ){
-
- $slideTransition.slideIn.transition.easing = this.get('easing');
-
- }
-
- // Default "before" styles:
-
- this._setStyles( $outgoingSlide, this.get('transOutBefore') );
-
- this._setStyles( $incomingSlide, this.get('transInBefore') );
-
- // Transition "before" styles:
-
- if( Y.Lang.isObject($slideTransition.slideOut.before) ){
-
- this._setStyles( $outgoingSlide, $slideTransition.slideOut.before );
-
- }
-
- if( Y.Lang.isObject($slideTransition.slideIn.before) ){
-
- this._setStyles( $incomingSlide, $slideTransition.slideIn.before );
-
- }
-
- // Transitions:
+ this.set('_incomingSlide', $slides.item($currentIndex));
- $slideTransition.slideOut.transition = this._checkTransitionValues($outgoingSlide, $slideTransition.slideOut.transition);
+ this.fire('slide');
- $slideTransition.slideIn.transition = this._checkTransitionValues($incomingSlide, $slideTransition.slideIn.transition);
+ return this;
- $outgoingSlide.transition($slideTransition.slideOut.transition, function(){
-
- // Default "after" styles:
-
- $that._setStyles( $outgoingSlide, $that.get('transOutAfter') );
-
- // Transition "after" styles:
-
- if( Y.Lang.isObject($slideTransition.slideOut.after) ){
-
- $that._setStyles( $outgoingSlide, $slideTransition.slideOut.after );
-
- }
-
- });
-
- $incomingSlide.transition($slideTransition.slideIn.transition, function(){
-
- // Default "after" styles:
-
- $that._setStyles( $incomingSlide, $that.get('transInAfter') );
-
- // Transition "after" styles:
-
- if( Y.Lang.isObject($slideTransition.slideIn.after) ){
-
- $that._setStyles( $incomingSlide, $slideTransition.slideIn.after );
-
- }
-
- });
-
- },
+ },
- // Protected methods:
+ /* ! Protected Methods */
/**
* Checks CSS values for shortcut keywords.
@@ -621,7 +543,7 @@
* @param {Mixed} $value The CSS value to check.
* @return {Mixed} The parsed CSS value.
*/
- _checkCSSValue: function($node, $value){
+ _checkCSSValue: function($node, $value){
switch( $value ){
@@ -630,66 +552,48 @@
return parseInt(this.get('contentBox').get('offsetWidth'), 10) + 'px';
- break;
-
case '-cW':
case '-containerWidth':
return (parseInt(this.get('contentBox').get('offsetWidth'), 10) * -1) + 'px';
- break;
-
case 'cH':
case 'containerHeight':
return parseInt(this.get('contentBox').get('offsetHeight'), 10) + 'px';
- break;
-
case '-cH':
case '-containerHeight':
return (parseInt(this.get('contentBox').get('offsetHeight'), 10) * -1) + 'px';
- break;
-
case 'sW':
case 'slideWidth':
- return parseInt($node.get('offsetWidth')) + 'px';
-
- break;
+ return parseInt($node.get('offsetWidth'), 10) + 'px';
case '-sW':
case '-slideWidth':
- return (parseInt($node.get('offsetWidth')) * -1) + 'px';
-
- break;
+ return (parseInt($node.get('offsetWidth'), 10) * -1) + 'px';
case 'sH':
case 'slideHeight':
- return parseInt($node.get('offsetHeight')) + 'px';
-
- break;
+ return parseInt($node.get('offsetHeight'), 10) + 'px';
case '-sH':
case '-slideHeight':
- return (parseInt($node.get('offsetHeight')) * -1) + 'px';
-
- break;
+ return (parseInt($node.get('offsetHeight'), 10) * -1) + 'px';
default:
return $value;
- break;
-
}
- },
+ },
/**
* Sanitizes transition values with _checkCSSValue.
@@ -699,10 +603,10 @@
* @param {Object} $transition The transition to check.
* @return {Mixed} The sanitized transition.
*/
- _checkTransitionValues: function($node, $transition){
+ _checkTransitionValues: function($node, $transition){
var $sanitized = {},
- $i;
+ i;
for( i in $transition ){
@@ -720,7 +624,39 @@
return $sanitized;
- },
+ },
+
+ /**
+ * Handles mouseenter on the contentBox.
+ * @method _handleMouseenter
+ * @protected
+ * @param {Event} e The Event object.
+ */
+ _handleMouseenter: function(e){
+
+ if( !this.get('_isPaused') && !this.get('_isHoverPaused') ){
+
+ this.fire('hoverpause');
+
+ }
+
+ },
+
+ /**
+ * Handles mouseleave on the contentBox.
+ * @method _handleMouseleave
+ * @protected
+ * @param {Event} e The Event object.
+ */
+ _handleMouseleave: function(e){
+
+ if( this.get('_isHoverPaused') ){
+
+ this.fire('hoverplay');
+
+ }
+
+ },
/**
* Handles clicks on pagination elements.
@@ -728,7 +664,7 @@
* @protected
* @param {Event} e The Event object.
*/
- _handlePageClick: function(e){
+ _handlePageClick: function(e){
if( this.get('pauseOnChange') ){
@@ -740,7 +676,128 @@
this.slide( this.get('pages').indexOf(e.target) );
- },
+ },
+
+ /**
+ * Pauses the slideshow momentarily if not already paused.
+ * @event _hoverpause
+ * @param {Event} e The Event object.
+ */
+ _hoverpause: function(e){
+
+ if( !this.get('_isPaused') && !this.get('_isHoverPaused') ){
+
+ this.pause();
+
+ this.set('_isHoverPaused', true);
+
+ }
+
+ },
+
+ /**
+ * Plays the slideshow if it was hoverpaused.
+ * @event _hoverplay
+ * @param {Event} e The Event object.
+ */
+ _hoverplay: function(e){
+
+ if( this.get('_isHoverPaused') ){
+
+ this.play();
+
+ }
+
+ },
+
+ /**
+ * Advances the slideshow by one slide.
+ * @event _next
+ * @param {Event} e The Event object.
+ */
+ _next: function(e){
+
+ if( this.get('pauseOnChange') ){
+
+ this.pause();
+
+ }
+
+ this.slide('next');
+
+ },
+
+ /**
+ * Pauses the slideshow.
+ * @event _pause
+ * @param {Event} e The Event object.
+ */
+ _pause: function(e){
+
+ if( !this.get('_isPaused') ){
+
+ window.clearInterval( this.get('_timeoutID') );
+
+ this.set('_isPaused', true);
+
+ }
+
+ },
+
+ /**
+ * Plays the slideshow.
+ * @event _play
+ * @param {Event} e The Event object.
+ */
+ _play: function(e){
+
+ if( this.get('_isPaused') ){
+
+ this.set('_isPaused', false);
+
+ this.set('_isHoverPaused', false);
+
+ this.fire('timeout');
+
+ }
+
+ },
+
+ /**
+ * Reverses the slideshow by one slide.
+ * @event _previous
+ * @param {Event} e The Event object.
+ */
+ _previous: function(e){
+
+ if( this.get('pauseOnChange') ){
+
+ this.pause();
+
+ }
+
+ this.slide('previous');
+
+ },
+
+ /**
+ * Sets active class on current page Node.
+ * @method _setActivePage
+ * @protected
+ */
+ _setActivePage: function(){
+
+ var $pages = this.get('pages');
+
+ if( !Y.Lang.isNull($pages) ){
+
+ $pages.removeClass( this.getClassName('active') );
+
+ $pages.item( this.get('currentIndex') ).addClass( this.getClassName('active') );
+
+ }
+
+ },
/**
* Sets styles after they are sanitized by _checkCSSValue.
@@ -749,7 +806,7 @@
* @param {Node} $node The node to style.
* @param {Object} $styles The styles to set.
*/
- _setStyles: function($node, $styles){
+ _setStyles: function($node, $styles){
for( var i in $styles ){
@@ -761,26 +818,167 @@
}
- },
+ },
- // Lifecycle methods:
+ /**
+ * Performs the slide transition.
+ * @event _slide
+ * @param {Event} e The Event object.
+ */
+ _slide: function(e){
+
+ var $that = this,
+ $slideTransition = this.get('transition'),
+ $outgoingSlide = this.get('_outgoingSlide'),
+ $incomingSlide = this.get('_incomingSlide');
+
+ // Duraton and easing:
+
+ if( Y.Lang.isUndefined($slideTransition.slideOut.transition.duration) ){
+
+ $slideTransition.slideOut.transition.duration = this.get('duration');
+
+ }
+
+ if( Y.Lang.isUndefined($slideTransition.slideOut.transition.easing) ){
+
+ $slideTransition.slideOut.transition.easing = this.get('easing');
+
+ }
+
+ if( Y.Lang.isUndefined($slideTransition.slideIn.transition.duration) ){
+
+ $slideTransition.slideIn.transition.duration = this.get('duration');
+
+ }
+
+ if( Y.Lang.isUndefined($slideTransition.slideIn.transition.easing) ){
+
+ $slideTransition.slideIn.transition.easing = this.get('easing');
+
+ }
+
+ // Default "before" styles:
+
+ this._setStyles( $outgoingSlide, this.get('transOutBefore') );
+
+ this._setStyles( $incomingSlide, this.get('transInBefore') );
+
+ // Transition "before" styles:
+
+ if( Y.Lang.isObject($slideTransition.slideOut.before) ){
+
+ this._setStyles( $outgoingSlide, $slideTransition.slideOut.before );
+
+ }
+
+ if( Y.Lang.isObject($slideTransition.slideIn.before) ){
+
+ this._setStyles( $incomingSlide, $slideTransition.slideIn.before );
+
+ }
+
+ // Transitions:
+
+ $slideTransition.slideOut.transition = this._checkTransitionValues($outgoingSlide, $slideTransition.slideOut.transition);
+
+ $slideTransition.slideIn.transition = this._checkTransitionValues($incomingSlide, $slideTransition.slideIn.transition);
+
+ $outgoingSlide.transition($slideTransition.slideOut.transition, function(){
+
+ // Default "after" styles:
+
+ $that._setStyles( $outgoingSlide, $that.get('transOutAfter') );
+
+ // Transition "after" styles:
+
+ if( Y.Lang.isObject($slideTransition.slideOut.after) ){
+
+ $that._setStyles( $outgoingSlide, $slideTransition.slideOut.after );
+
+ }
+
+ });
+
+ $incomingSlide.transition($slideTransition.slideIn.transition, function(){
+
+ // Default "after" styles:
+
+ $that._setStyles( $incomingSlide, $that.get('transInAfter') );
+
+ // Transition "after" styles:
+
+ if( Y.Lang.isObject($slideTransition.slideIn.after) ){
+
+ $that._setStyles( $incomingSlide, $slideTransition.slideIn.after );
+
+ }
+
+ });
+
+ // Update active page:
+
+ this._setActivePage();
+
+ },
+
+ /**
+ * Calls setTimeout for autoplay.
+ * @event _timeout
+ * @param {Event} e The Event object.
+ */
+ _timeout: function(e){
+
+ var $that = this,
+ $interval = this.get('interval');
+
+ if( Y.Lang.isArray($interval) ){
+
+ $interval = $interval[ this.get('currentIndex') ];
+
+ }
+
+ if( !this.get('_isPaused') && !this.get('_isHoverPaused') ){
+
+ this.set( '_timeoutID', window.setTimeout(function(){
+
+ $that.slide('next');
+
+ $that.fire('timeout');
+
+ }, parseInt( $interval * 1000, 10 )) );
+
+ }
+
+ },
+
+ /* ! Lifecycle Methods */
/**
- * Binds event handlers to previous, next, pause, and play buttons.
+ * Binds event handlers and publishes custom events.
* @method bindUI
*/
- bindUI: function(){
+ bindUI: function(){
var $buttons = ['previous', 'next', 'pause', 'play'],
$pages = this.get('pages'),
- $button,
$target,
i;
+
+ // Buttons and Published Events:
+
+ this.publish('timeout', { defaultFn: this._timeout });
+
+ this.publish('slide', { defaultFn: this._slide });
- // Buttons:
+ this.publish('hoverpause', { defaultFn: this._hoverpause });
+
+ this.publish('hoverplay', { defaultFn: this._hoverplay });
for( i = 0; i < $buttons.length; i++ ){
+ this.publish($buttons[i], { defaultFn: this['_' + $buttons[i]] });
+
$target = this.get( $buttons[i] + 'Button' );
if( !Y.Lang.isNull($target) ){
@@ -791,7 +989,7 @@
}
- // Pages?
+ // Pages:
if( !Y.Lang.isNull($pages) ){
@@ -799,23 +997,23 @@
}
- // Hover?
+ // Hover:
if( this.get('pauseOnHover') ){
- this.get('contentBox').on('mouseenter', this.pause, this);
+ this.get('contentBox').on('mouseenter', this._handleMouseenter, this);
- this.get('contentBox').on('mouseleave', this.play, this);
+ this.get('contentBox').on('mouseleave', this._handleMouseleave, this);
}
- },
+ },
/**
* Sets initial widget state.
- * @method bindUI
+ * @method syncUI
*/
- syncUI: function(){
+ syncUI: function(){
var $that = this,
$pages = this.get('pages'),
@@ -835,7 +1033,7 @@
});
- // Pages?
+ // Pages:
if( !Y.Lang.isNull($pages) ){
@@ -843,7 +1041,7 @@
}
- // Autoplay?
+ // Autoplay:
if( this.get('autoplay') ){
@@ -851,39 +1049,29 @@
}
- },
-
+ },
+
/**
* Initializes the Slideshow.
* @method initializer
*/
- initializer: function(){
-
- var $pages = this.get('pages');
+ initializer: function(){
// Slides:
this.set('slides', this.get('contentBox').get('children'));
- // Pages?
+ // Pages:
- if( Y.Lang.isString($pages) ){
+ if( Y.Lang.isString(this.get('pages')) ){
- $pages = Y.one($pages);
+ this.set('pages', Y.all(this.get('pages')));
}
- if( !Y.Lang.isNull($pages) ){
-
- $pages = $pages.get('children');
-
- }
-
- this.set('pages', $pages);
-
- }
-
- });
-
- Y.Slideshow = Slideshow;
-
+ }
+
+ });
+
+ Y.Slideshow = Slideshow;
+
Please sign in to comment.
Something went wrong with that request. Please try again.