remove debugging code

[roojs1] / ux / Slideshow.js

diff --git a/ux/Slideshow.js b/ux/Slideshow.js
index 53874ff..eef3f62 100644 (file)
--- a/ux/Slideshow.js
+++ b/ux/Slideshow.js
@@ -8,7 +8,7 @@
 Roo.onReady( function() 
 {
    // use a dom selector to define slides..
-    var slides = Roo.DomQuery.select('.category-slide');
+    var slides = Roo.DomQuery.select('.category-slide', true);
    
     oMySlides = new Roo.ux.Slideshow({
         slides                 : slides,
@@ -19,51 +19,89 @@ Roo.onReady( function()
  * 
  * @class Roo.ux.Slideshow
  */
+Roo.namespace('Roo.ux');  
 
-Roo.ux.Slideshow = function(cfg ) {
+Roo.ux.Slideshow = function(cfg ) 
+{
     Roo.apply(this, cfg);
-    if ( this.slides ) {
-        this.numOfImages       = this.slides.length;
-        if ( !this.numOfImages ) {
-            alert('No slides?');
-        }
+    if ( !this.slides || !this.slides.length) {
+        return;
     }
+    if (this.slides.length == 1) {
+        this.slides[0].setVisibilityMode(Roo.Element.DISPLAY);
+        this.slides[0].show();
+        return;
+        
+    }
+    
     this.playButton = Roo.get(this.playButton);
     this.pauseButton = Roo.get(this.pauseButton);
+    this.counter = Roo.get(this.counter);
+    this.caption = Roo.get(this.caption);
     if ( this.autostart ) {
         this.startSlideShow();
     }
 }
+
 Roo.apply(Roo.ux.Slideshow.prototype, {
     
-    wait                       : 4000
-       start                   : 0
-       duration                : 0.5,
+    wait                       : 4000,
+       start                   : 0,
+       duration                : 1,
        autostart               : true ,
-       slides              : false
-       counter             : 0,
-       caption             : '',
+     /**
+     * @cfg {Array} of slides
+     */
+       slides              : false,
+    /**
+     * @cfg id/dom element counter to show the 
+     */
+       counter             : false,
+     /**
+     * @cfg id/dom element of the caption.
+     */
+       caption             : false,
+     /**
+     * @cfg id/dom element for play button
+     */
        playButton              : false, 
+    /**
+     * @cfg id/dom element of the pause button
+     */
        pauseButton         : false, 
        iImageId                : 0, 
-    
+    running         : false,
     
        // The Fade Function
-       swapImage: function (x,y) {             
-               $(this.slides[x]) && $(this.slides[x]).appear({ duration: this.duration });
-               $(this.slides[y]) && $(this.slides[y]).fade({duration: this.duration });
+       swapImage: function (x,y) {
+        if (this.slides[x] ) {
+            this.slides[x].animate( 
+                { opacity : { from : 0.0, to : 1.0 }},
+                this.duration
+            ); 
+            this.slides[x].show();
+        }
+        if (this.slides[y] ) {
+            this.slides[y].animate( 
+                { opacity : { from : 1.0, to : 0.0 }},
+                this.duration
+            ); 
+            this.slides[y].show();
+        } 
+               
        },
        
        // the onload event handler that starts the fading.
        startSlideShow: function () {
         var _t  = this;
-               window.setInterval(function () {
-            _t.play() },this.wait);
+        this.running = true;
                this.playButton && this.playButton.hide();
-               this.pauseButton && this.pauseButton.appear({ duration: 0});
+               this.pauseButton && this.pauseButton.show();
      
                this.updatecounter();
-                                                                       
+        this.slides[0].setStyle({ opacity : 1.0 });
+        this.slides[0].show();
+           this.play.defer(this.wait, this);                           
        },
        
        play: function () {
@@ -73,24 +111,30 @@ Roo.apply(Roo.ux.Slideshow.prototype, {
                imageShow = this.iImageId+1;
                imageHide = this.iImageId;
                
-               if (imageShow == this.numOfImages) {
-                       this.swapImage(0,imageHide);    
+               if (imageShow+1  > this.slides.length) {
+                       this.swapImage(0,imageHide);
+            
                        this.iImageId = 0;                                      
                } else {
                        this.swapImage(imageShow,imageHide);                    
                        this.iImageId++;
                }
                
-               this.textIn = this.iImageId+1 + ' of ' + this.numOfImages;
+               this.textIn = this.iImageId+1 + ' of ' + this.slides.length;
                this.updatecounter();
+        
+        if (this.running) {
+            this.play.defer(this.wait, this);
+        }
+        
        },
        
        stop: function  () {
-               clearInterval(this.play);                               
-               this.playButton && this.playButton.appear({ duration: 0});
+               this.running = false;   
+               this.playButton && this.playButton.show();
                this.pauseButton && this.pauseButton.hide();
        },
-       
+       /*
        goNext: function () {
                clearInterval(this.play);
                $(this.playButton).appear({ duration: 0});
@@ -137,14 +181,18 @@ Roo.apply(Roo.ux.Slideshow.prototype, {
                
                this.updatecounter();
        },
-       
+       */
        updatecounter: function () {
-               var textIn = this.iImageId+1 + ' of ' + this.numOfImages;
-               $(this.counter) && ( $(this.counter).innerHTML = textIn );
-               if ( $(this.caption) && ( oNewCaption = $(this.slides[this.iImageId]).down('.image-caption') ) ) {
-                       $(this.caption).innerHTML = oNewCaption.innerHTML;
+        if (!this.counter) {
+            return;
+        }
+               var textIn = this.iImageId+1 + ' of ' + this.slides.length;
+               this.counter.update( textIn );
+        var oNewCaption = this.slides[this.iImageId].select('.image-caption', true);
+               if ( this.caption &&  oNewCaption.length ) {
+                       this.caption.update( oNewCaption[0].innerHTML);
                }
        }
-}
+});
   
   
\ No newline at end of file