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