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.DocumentViewer} this
  27          */
  28         "initial" : true
  29     });
  30 };
  31
  32 Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component,  {
  33
  34     files : false,
  35
  36     indicator : 0,
  37
  38     getAutoCreate : function()
  39     {
  40         var cfg = {
  41             tag : 'div',
  42             cls : 'roo-document-slider',
  43             cn : [
  44                 {
  45                     tag : 'div',
  46                     cls : 'roo-document-slider-header',
  47                     cn : [
  48                         {
  49                             tag : 'div',
  50                             cls : 'roo-document-slider-header-title'
  51                         }
  52                     ]
  53                 },
  54                 {
  55                     tag : 'div',
  56                     cls : 'roo-document-slider-body',
  57                     cn : [
  58                         {
  59                             tag : 'div',
  60                             cls : 'roo-document-slider-prev',
  61                             cn : [
  62                                 {
  63                                     tag : 'i',
  64                                     cls : 'fa fa-chevron-left'
  65                                 }
  66                             ]
  67                         },
  68                         {
  69                             tag : 'div',
  70                             cls : 'roo-document-slider-thumb',
  71                             cn : [
  72                                 {
  73                                     tag : 'img',
  74                                     cls : 'roo-document-slider-image'
  75                                 }
  76                             ]
  77                         },
  78                         {
  79                             tag : 'div',
  80                             cls : 'roo-document-slider-next',
  81                             cn : [
  82                                 {
  83                                     tag : 'i',
  84                                     cls : 'fa fa-chevron-right'
  85                                 }
  86                             ]
  87                         }
  88                     ]
  89                 }
  90             ]
  91         };
  92
  93         return cfg;
  94     },
  95
  96     initEvents : function()
  97     {
  98         this.headerEl = this.el.select('.roo-document-slider-header', true).first();
  99         this.headerEl.setVisibilityMode(Roo.Element.DISPLAY);
 100
 101         this.titleEl = this.el.select('.roo-document-slider-header .roo-document-slider-header-title', true).first();
 102         this.titleEl.setVisibilityMode(Roo.Element.DISPLAY);
 103
 104         this.bodyEl = this.el.select('.roo-document-slider-body', true).first();
 105         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
 106
 107         this.thumbEl = this.el.select('.roo-document-slider-thumb', true).first();
 108         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
 109
 110         this.imageEl = this.el.select('.roo-document-slider-image', true).first();
 111         this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
 112
 113         this.prevIndicator = this.el.select('.roo-document-slider-prev i', true).first();
 114         this.prevIndicator.setVisibilityMode(Roo.Element.DISPLAY);
 115
 116         this.nextIndicator = this.el.select('.roo-document-slider-next i', true).first();
 117         this.nextIndicator.setVisibilityMode(Roo.Element.DISPLAY);
 118
 119         this.prevIndicator.on('click', this.prev, this);
 120
 121         this.nextIndicator.on('click', this.next, this);
 122
 123     },
 124
 125     initial : function()
 126     {
 127         if(this.files.length){
 128             this.indicator = 1;
 129             this.update()
 130         }
 131
 132         this.fireEvent('initial', this);
 133     },
 134
 135     update : function()
 136     {
 137         this.imageEl.attr('src', this.files[this.indicator]);
 138
 139         this.titleEl.dom.innerHTML = String.format('{0} / {1}', this.indicator, this.files.length);
 140
 141         if(this.indicator <= 1){
 142             this.prevIndicator.hide();
 143         }
 144
 145         if(this.indicator == 0 || this.indicator == this.files.length){
 146             this.nextIndicator.hide();
 147         }
 148     },
 149
 150     prev : function()
 151     {
 152         this.indicator = Math.min(1, this.indicator - 1);
 153
 154         this.update();
 155     },
 156
 157     next : function()
 158     {
 159
 160     }
 161 });