* @class Roo.bootstrap.DocumentSlider
* @extends Roo.bootstrap.Component
* Bootstrap DocumentSlider class
- * @cfg {Boolean} showDownload (true|false) show download button (default true)
- * @cfg {Boolean} showTrash (true|false) show trash button (default true)
*
* @constructor
* Create a new DocumentViewer
* @param {Object} config The config object
*/
-Roo.bootstrap.DocumentViewer = function(config){
- Roo.bootstrap.DocumentViewer.superclass.constructor.call(this, config);
+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 click
- * Fire after click
- * @param {Roo.bootstrap.DocumentViewer} this
+ * @event update
+ * Fire after update
+ * @param {Roo.bootstrap.DocumentSlider} this
*/
- "click" : true,
+ "update" : true,
/**
- * @event download
- * Fire after download button
- * @param {Roo.bootstrap.DocumentViewer} this
- */
- "download" : true,
- /**
- * @event trash
- * Fire after trash button
- * @param {Roo.bootstrap.DocumentViewer} this
+ * @event click
+ * Fire after click
+ * @param {Roo.bootstrap.DocumentSlider} this
*/
- "trash" : true
-
+ "click" : true
});
};
-Roo.extend(Roo.bootstrap.DocumentViewer, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.DocumentSlider, Roo.bootstrap.Component, {
- showDownload : true,
+ files : false,
- showTrash : true,
+ indicator : 0,
getAutoCreate : function()
{
var cfg = {
tag : 'div',
- cls : 'roo-document-viewer',
+ cls : 'roo-document-slider',
cn : [
{
tag : 'div',
- cls : 'roo-document-viewer-body',
+ cls : 'roo-document-slider-header',
+ cn : [
+ {
+ tag : 'div',
+ cls : 'roo-document-slider-header-title'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'roo-document-slider-body',
cn : [
{
tag : 'div',
- cls : 'roo-document-viewer-thumb',
+ cls : 'roo-document-slider-prev',
+ cn : [
+ {
+ tag : 'i',
+ cls : 'fa fa-chevron-left'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'roo-document-slider-thumb',
cn : [
{
tag : 'img',
- cls : 'roo-document-viewer-image'
+ cls : 'roo-document-slider-image'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'roo-document-slider-next',
+ cn : [
+ {
+ tag : 'i',
+ cls : 'fa fa-chevron-right'
}
]
}
]
- },
- {
- tag : 'div',
- cls : 'roo-document-viewer-footer',
- cn : {
- tag : 'div',
- cls : 'btn-group btn-group-justified roo-document-viewer-btn-group',
- cn : [
- {
- tag : 'div',
- cls : 'btn-group roo-document-viewer-download',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-download"></i>'
- }
- ]
- },
- {
- tag : 'div',
- cls : 'btn-group roo-document-viewer-trash',
- cn : [
- {
- tag : 'button',
- cls : 'btn btn-default',
- html : '<i class="fa fa-trash"></i>'
- }
- ]
- }
- ]
- }
}
]
};
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-viewer-body', true).first();
+ this.bodyEl = this.el.select('.roo-document-slider-body', true).first();
this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
- this.thumbEl = this.el.select('.roo-document-viewer-thumb', true).first();
+ this.thumbEl = this.el.select('.roo-document-slider-thumb', true).first();
this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
- this.imageEl = this.el.select('.roo-document-viewer-image', true).first();
+ this.imageEl = this.el.select('.roo-document-slider-image', true).first();
this.imageEl.setVisibilityMode(Roo.Element.DISPLAY);
- this.footerEl = this.el.select('.roo-document-viewer-footer', true).first();
- this.footerEl.setVisibilityMode(Roo.Element.DISPLAY);
+ this.prevIndicator = this.el.select('.roo-document-slider-prev i', true).first();
+ this.prevIndicator.setVisibilityMode(Roo.Element.DISPLAY);
- this.downloadBtn = this.el.select('.roo-document-viewer-download', true).first();
- this.downloadBtn.setVisibilityMode(Roo.Element.DISPLAY);
+ this.nextIndicator = this.el.select('.roo-document-slider-next i', true).first();
+ this.nextIndicator.setVisibilityMode(Roo.Element.DISPLAY);
- this.trashBtn = this.el.select('.roo-document-viewer-trash', true).first();
- this.trashBtn.setVisibilityMode(Roo.Element.DISPLAY);
+ this.thumbEl.on('click', this.onClick, this);
- this.bodyEl.on('click', this.onClick, this);
- this.downloadBtn.on('click', this.onDownload, this);
- this.trashBtn.on('click', this.onTrash, this);
+ this.prevIndicator.on('click', this.prev, this);
- this.downloadBtn.hide();
- this.trashBtn.hide();
+ this.nextIndicator.on('click', this.next, this);
- if(this.showDownload){
- this.downloadBtn.show();
- }
-
- if(this.showTrash){
- this.trashBtn.show();
- }
-
- if(!this.showDownload && !this.showTrash) {
- this.footerEl.hide();
+ },
+
+ initial : function()
+ {
+ if(this.files.length){
+ this.indicator = 1;
+ this.update()
}
+ this.fireEvent('initial', this);
},
- initial : function()
+ update : function()
{
-// this.thumbEl.setStyle('line-height', this.thumbEl.getHeight(true) + 'px');
+ this.imageEl.attr('src', this.files[this.indicator - 1]);
+ this.titleEl.dom.innerHTML = String.format('{0} / {1}', this.indicator, this.files.length);
- this.fireEvent('initial', this);
+ 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)
this.fireEvent('click', this);
},
- onDownload : function(e)
+ prev : function(e)
{
e.preventDefault();
- this.fireEvent('download', this);
+ this.indicator = Math.max(1, this.indicator - 1);
+
+ this.update();
},
- onTrash : function(e)
+ next : function(e)
{
e.preventDefault();
- this.fireEvent('trash', this);
+ this.indicator = Math.min(this.files.length, this.indicator + 1);
+
+ this.update();
}
-
});
projects / roojs1 / blobdiff