* @class Roo.bootstrap.DocumentViewer
* @extends Roo.bootstrap.Component
* Bootstrap DocumentViewer class
- * @cfg {Number} width default 300
- * @cfg {Number} height default 300
+ * @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
* Fire after initEvent
* @param {Roo.bootstrap.DocumentViewer} this
*/
- "initial" : true
+ "initial" : true,
+ /**
+ * @event click
+ * Fire after click
+ * @param {Roo.bootstrap.DocumentViewer} this
+ */
+ "click" : 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
+ */
+ "trash" : true
});
};
Roo.extend(Roo.bootstrap.DocumentViewer, Roo.bootstrap.Component, {
- thumbWidth : 300,
- thumbHeight : 300,
+ showDownload : true,
+
+ showTrash : true,
getAutoCreate : function()
{
{
tag : 'div',
cls : 'roo-document-viewer-thumb',
- style : 'width: ' + this.width + 'px; height: ' + this.height + 'px;'
+ cn : [
+ {
+ tag : 'img',
+ cls : 'roo-document-viewer-image'
+ }
+ ]
}
]
},
cn : [
{
tag : 'div',
- cls : 'btn-group',
+ 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 roo-document-viewer-trash',
+ cls : 'btn btn-default',
html : '<i class="fa fa-trash"></i>'
}
]
initEvents : function()
{
-
this.bodyEl = this.el.select('.roo-document-viewer-body', true).first();
- this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY);
this.thumbEl = this.el.select('.roo-document-viewer-thumb', true).first();
- this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY);
+
+ this.imageEl = this.el.select('.roo-document-viewer-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).originalDisplay = 'block';
+ this.footerEl.setVisibilityMode(Roo.Element.DISPLAY);
+
+ this.downloadBtn = this.el.select('.roo-document-viewer-download', true).first();
+ this.downloadBtn.setVisibilityMode(Roo.Element.DISPLAY);
this.trashBtn = this.el.select('.roo-document-viewer-trash', true).first();
- this.trashBtn.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.trashBtn.setVisibilityMode(Roo.Element.DISPLAY);
this.bodyEl.on('click', this.onClick, this);
-
+ this.downloadBtn.on('click', this.onDownload, this);
this.trashBtn.on('click', this.onTrash, this);
+ this.downloadBtn.hide();
+ this.trashBtn.hide();
+
+ if(this.showDownload){
+ this.downloadBtn.show();
+ }
+
+ if(this.showTrash){
+ this.trashBtn.show();
+ }
+
+ if(!this.showDownload && !this.showTrash) {
+ this.footerEl.hide();
+ }
+
+ },
+
+ initial : function()
+ {
this.fireEvent('initial', this);
+
+ },
+
+ onClick : function(e)
+ {
+ e.preventDefault();
+
+ this.fireEvent('click', this);
},
- onClick : function()
+ onDownload : function(e)
{
+ e.preventDefault();
+ this.fireEvent('download', this);
},
- onTrash : function()
+ onTrash : function(e)
{
+ e.preventDefault();
+ this.fireEvent('trash', this);
}
});