fix docs

[roojs1] / Roo / bootstrap / DocumentSlider.js

diff --git a/Roo/bootstrap/DocumentSlider.js b/Roo/bootstrap/DocumentSlider.js
index dfd7f0a..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
          */
-        "initial" : true
+        "update" : true,
+        /**
+         * @event click
+         * Fire after click
+         * @param {Roo.bootstrap.DocumentSlider} this
+         */
+        "click" : true
     });
 };
 
 Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component,  {
     
+    files : false,
+    
+    indicator : 0,
+    
     getAutoCreate : function()
     {
         var cfg = {
@@ -39,8 +57,8 @@ Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component,  {
                     cls : 'roo-document-slider-header',
                     cn : [
                         {
-                            tag : 'span',
-                            html : 'test'
+                            tag : 'div',
+                            cls : 'roo-document-slider-header-title'
                         }
                     ]
                 },
@@ -88,6 +106,12 @@ Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component,  {
     
     initEvents : function()
     {
+        this.headerEl = this.el.select('.roo-document-slider-header', true).first();
+        this.headerEl.setVisibilityMode(Roo.Element.DISPLAY);
+        
+        this.titleEl = this.el.select('.roo-document-slider-header .roo-document-slider-header-title', true).first();
+        this.titleEl.setVisibilityMode(Roo.Element.DISPLAY);
+        
         this.bodyEl = this.el.select('.roo-document-slider-body', true).first();
         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
         
@@ -96,10 +120,76 @@ 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.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.prevIndicator.on('click', this.prev, 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();
     }
 });