git.roojs.org Git - roojs1/blob - Roo/bootstrap/DocumentSlider.js

   1
   2 /*
   3 * Licence: LGPL
   4 */
   5
   6 /**
   7  * @class Roo.bootstrap.DocumentSlider
   8  * @extends Roo.bootstrap.Component
   9  * Bootstrap DocumentSlider class
  10  * @cfg {Number} total
  11  *
  12  * @constructor
  13  * Create a new DocumentViewer
  14  * @param {Object} config The config object
  15  */
  16
  17 Roo.bootstrap.DocumentSlider = function(config){
  18     Roo.bootstrap.DocumentSlider.superclass.constructor.call(this, config);
  19
  20     this.files = [];
  21
  22     this.addEvents({
  23         /**
  24          * @event initial
  25          * Fire after initEvent
  26          * @param {Roo.bootstrap.DocumentSlider} this
  27          */
  28         "initial" : true,
  29         /**
  30          * @event update
  31          * Fire after update
  32          * @param {Roo.bootstrap.DocumentSlider} this
  33          */
  34         "update" : true
  35     });
  36 };
  37
  38 Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component,  {
  39
  40     files : false,
  41
  42     indicator : 0,
  43
  44     getAutoCreate : function()
  45     {
  46         var cfg = {
  47             tag : 'div',
  48             cls : 'roo-document-slider',
  49             cn : [
  50                 {
  51                     tag : 'div',
  52                     cls : 'roo-document-slider-header',
  53                     cn : [
  54                         {
  55                             tag : 'div',
  56                             cls : 'roo-document-slider-header-title'
  57                         }
  58                     ]
  59                 },
  60                 {
  61                     tag : 'div',
  62                     cls : 'roo-document-slider-body',
  63                     cn : [
  64                         {
  65                             tag : 'div',
  66                             cls : 'roo-document-slider-prev',
  67                             cn : [
  68                                 {
  69                                     tag : 'i',
  70                                     cls : 'fa fa-chevron-left'
  71                                 }
  72                             ]
  73                         },
  74                         {
  75                             tag : 'div',
  76                             cls : 'roo-document-slider-thumb',
  77                             cn : [
  78                                 {
  79                                     tag : 'img',
  80                                     cls : 'roo-document-slider-image'
  81                                 }
  82                             ]
  83                         },
  84                         {
  85                             tag : 'div',
  86                             cls : 'roo-document-slider-next',
  87                             cn : [
  88                                 {
  89                                     tag : 'i',
  90                                     cls : 'fa fa-chevron-right'
  91                                 }
  92                             ]
  93                         }
  94                     ]
  95                 }
  96             ]
  97         };
  98
  99         return cfg;
 100     },
 101
 102     initEvents : function()
 103     {
 104         this.headerEl = this.el.select('.roo-document-slider-header', true).first();
 105         this.headerEl.setVisibilityMode(Roo.Element.DISPLAY);
 106
 107         this.titleEl = this.el.select('.roo-document-slider-header .roo-document-slider-header-title', true).first();
 108         this.titleEl.setVisibilityMode(Roo.Element.DISPLAY);
 109
 110         this.bodyEl = this.el.select('.roo-document-slider-body', true).first();
 111         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
 112
 113         this.thumbEl = this.el.select('.roo-document-slider-thumb', true).first();
 114         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
 115
 116         this.imageEl = this.el.select('.roo-document-slider-image', true).first();
 117         this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
 118
 119         this.prevIndicator = this.el.select('.roo-document-slider-prev i', true).first();
 120         this.prevIndicator.setVisibilityMode(Roo.Element.DISPLAY);
 121
 122         this.nextIndicator = this.el.select('.roo-document-slider-next i', true).first();
 123         this.nextIndicator.setVisibilityMode(Roo.Element.DISPLAY);
 124
 125         this.prevIndicator.on('click', this.prev, this);
 126
 127         this.nextIndicator.on('click', this.next, this);
 128
 129     },
 130
 131     initial : function()
 132     {
 133         if(this.files.length){
 134             this.indicator = 1;
 135             this.update()
 136         }
 137
 138         this.fireEvent('initial', this);
 139     },
 140
 141     update : function()
 142     {
 143         this.imageEl.attr('src', this.files[this.indicator - 1]);
 144
 145         this.titleEl.dom.innerHTML = String.format('{0} / {1}', this.indicator, this.files.length);
 146
 147         if(this.indicator == 1){
 148             this.prevIndicator.hide();
 149         }
 150
 151         if(this.indicator == this.files.length){
 152             Roo.log('run???');
 153             this.nextIndicator.hide();
 154         }
 155
 156         this.thumbEl.scrollTo('top');
 157
 158         this.fireEvent('update', this);
 159     },
 160
 161     prev : function()
 162     {
 163         this.indicator = Math.min(1, this.indicator - 1);
 164
 165         this.update();
 166     },
 167
 168     next : function()
 169     {
 170         this.indicator = Math.min(this.files.length, this.indicator + 1);
 171
 172         this.update();
 173     }
 174 });