7 * @class Roo.bootstrap.DocumentSlider
8 * @extends Roo.bootstrap.Component
9 * Bootstrap DocumentSlider class
12 * Create a new DocumentViewer
13 * @param {Object} config The config object
16 Roo.bootstrap.DocumentSlider = function(config){
17 Roo.bootstrap.DocumentSlider.superclass.constructor.call(this, config);
24 * Fire after initEvent
25 * @param {Roo.bootstrap.DocumentSlider} this
31 * @param {Roo.bootstrap.DocumentSlider} this
37 * @param {Roo.bootstrap.DocumentSlider} this
43 Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component, {
49 getAutoCreate : function()
53 cls : 'roo-document-slider',
57 cls : 'roo-document-slider-header',
61 cls : 'roo-document-slider-header-title'
67 cls : 'roo-document-slider-body',
71 cls : 'roo-document-slider-prev',
75 cls : 'fa fa-chevron-left'
81 cls : 'roo-document-slider-thumb',
85 cls : 'roo-document-slider-image'
91 cls : 'roo-document-slider-next',
95 cls : 'fa fa-chevron-right'
107 initEvents : function()
109 this.headerEl = this.el.select('.roo-document-slider-header', true).first();
110 this.headerEl.setVisibilityMode(Roo.Element.DISPLAY);
112 this.titleEl = this.el.select('.roo-document-slider-header .roo-document-slider-header-title', true).first();
113 this.titleEl.setVisibilityMode(Roo.Element.DISPLAY);
115 this.bodyEl = this.el.select('.roo-document-slider-body', true).first();
116 this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
118 this.thumbEl = this.el.select('.roo-document-slider-thumb', true).first();
119 this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
121 this.imageEl = this.el.select('.roo-document-slider-image', true).first();
122 this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
124 this.prevIndicator = this.el.select('.roo-document-slider-prev i', true).first();
125 this.prevIndicator.setVisibilityMode(Roo.Element.DISPLAY);
127 this.nextIndicator = this.el.select('.roo-document-slider-next i', true).first();
128 this.nextIndicator.setVisibilityMode(Roo.Element.DISPLAY);
130 this.thumbEl.on('click', this.onClick, this);
132 this.prevIndicator.on('click', this.prev, this);
134 this.nextIndicator.on('click', this.next, this);
140 if(this.files.length){
145 this.fireEvent('initial', this);
150 this.imageEl.attr('src', this.files[this.indicator - 1]);
152 this.titleEl.dom.innerHTML = String.format('{0} / {1}', this.indicator, this.files.length);
154 this.prevIndicator.show();
156 if(this.indicator == 1){
157 this.prevIndicator.hide();
160 this.nextIndicator.show();
162 if(this.indicator == this.files.length){
163 this.nextIndicator.hide();
166 this.thumbEl.scrollTo('top');
168 this.fireEvent('update', this);
171 onClick : function(e)
175 this.fireEvent('click', this);
182 this.indicator = Math.max(1, this.indicator - 1);
191 this.indicator = Math.min(this.files.length, this.indicator + 1);