Fix #6464 - card header

[roojs1] / Roo / bootstrap / DocumentSlider.js

diff --git a/Roo/bootstrap/DocumentSlider.js b/Roo/bootstrap/DocumentSlider.js
index ca99213..043ae0c 100644 (file)
--- a/Roo/bootstrap/DocumentSlider.js
+++ b/Roo/bootstrap/DocumentSlider.js
@@ -16,18 +16,36 @@
 Roo.bootstrap.DocumentSlider = function(config){
     Roo.bootstrap.DocumentSlider.superclass.constructor.call(this, config);
     
+    this.files = [];
+    
     this.addEvents({
         /**
          * @event initial
          * Fire after initEvent
-         * @param {Roo.bootstrap.DocumentViewer} this
+         * @param {Roo.bootstrap.DocumentSlider} this
+         */
+        "initial" : true,
+        /**
+         * @event update
+         * Fire after update
+         * @param {Roo.bootstrap.DocumentSlider} this
+         */
+        "update" : true,
+        /**
+         * @event click
+         * Fire after click
+         * @param {Roo.bootstrap.DocumentSlider} this
          */
-        "initial" : true
+        "click" : true
     });
 };
 
 Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component,  {
     
+    files : false,
+    
+    indicator : 0,
+    
     getAutoCreate : function()
     {
         var cfg = {
@@ -103,19 +121,75 @@ Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component,  {
         this.imageEl = this.el.select('.roo-document-slider-image', true).first();
         this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
         
-        this.prevEl = this.el.select('.roo-document-slider-prev i', true).first();
-        this.prevEl.setVisibilityMode(Roo.Element.DISPLAY);
+        this.prevIndicator = this.el.select('.roo-document-slider-prev i', true).first();
+        this.prevIndicator.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        this.nextIndicator = this.el.select('.roo-document-slider-next i', true).first();
+        this.nextIndicator.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        this.thumbEl.on('click', this.onClick, this);
         
-        this.nextEl = this.el.select('.roo-document-slider-next i', true).first();
-        this.nextEl.setVisibilityMode(Roo.Element.DISPLAY);
+        this.prevIndicator.on('click', this.prev, this);
         
-        this.prevEl.on('click', this.prev, this);
-        this.nextEl.on('click', this.next, this);
+        this.nextIndicator.on('click', this.next, this);
         
     },
     
     initial : function()
     {
+        if(this.files.length){
+            this.indicator = 1;
+            this.update()
+        }
+        
         this.fireEvent('initial', this);
+    },
+    
+    update : function()
+    {
+        this.imageEl.attr('src', this.files[this.indicator - 1]);
+        
+        this.titleEl.dom.innerHTML = String.format('{0} / {1}', this.indicator, this.files.length);
+        
+        this.prevIndicator.show();
+        
+        if(this.indicator == 1){
+            this.prevIndicator.hide();
+        }
+        
+        this.nextIndicator.show();
+        
+        if(this.indicator == this.files.length){
+            this.nextIndicator.hide();
+        }
+        
+        this.thumbEl.scrollTo('top');
+        
+        this.fireEvent('update', this);
+    },
+    
+    onClick : function(e)
+    {
+        e.preventDefault();
+        
+        this.fireEvent('click', this);
+    },
+    
+    prev : function(e)
+    {
+        e.preventDefault();
+        
+        this.indicator = Math.max(1, this.indicator - 1);
+        
+        this.update();
+    },
+    
+    next : function(e)
+    {
+        e.preventDefault();
+        
+        this.indicator = Math.min(this.files.length, this.indicator + 1);
+        
+        this.update();
     }
 });