* @cfg {boolean} condensed Format condensed
* @cfg {boolean} responsive Format condensed
* @cfg {Boolean} loadMask (true|false) default false
- * @cfg {Boolean} tfoot (true|false) generate tfoot, default true
- * @cfg {Boolean} thead (true|false) generate thead, default true
- * @cfg {Boolean} RowSelection (true|false) default false
- * @cfg {Boolean} CellSelection (true|false) default false
+ * @cfg {Boolean} footerShow (true|false) generate tfoot, default true
+ * @cfg {Boolean} headerShow (true|false) generate thead, default true
+ * @cfg {Boolean} rowSelection (true|false) default false
+ * @cfg {Boolean} cellSelection (true|false) default false
* @cfg {Roo.bootstrap.PagingToolbar} footer a paging toolbar
*
Roo.bootstrap.Table = function(config){
Roo.bootstrap.Table.superclass.constructor.call(this, config);
+ // BC...
+ this.rowSelection = (typeof(config.RowSelection) != 'undefined') ? config.RowSelection : this.rowSelection;
+ this.cellSelection = (typeof(config.CellSelection) != 'undefined') ? config.CellSelection : this.cellSelection;
+ this.headerShow = (typeof(config.thead) != 'undefined') ? config.thead : this.headerShow;
+ this.footerShow = (typeof(config.tfoot) != 'undefined') ? config.tfoot : this.footerShow;
+
+
if (this.sm) {
this.selModel = Roo.factory(this.sm, Roo.bootstrap.Table);
this.sm = this.selModel;
cm : false,
store : false,
loadMask : false,
- tfoot : true,
- thead : true,
- RowSelection : false,
- CellSelection : false,
+ footerShow : true,
+ headerShow : true,
+
+ rowSelection : false,
+ cellSelection : false,
layout : false,
// Roo.Element - the tbody
}
if(this.store || this.cm){
- if(this.thead){
+ if(this.headerShow){
cfg.cn.push(this.renderHeader());
}
cfg.cn.push(this.renderBody());
- if(this.tfoot){
+ if(this.footerShow){
cfg.cn.push(this.renderFooter());
}
{
var cell = Roo.get(el);
- if(!cell || (!this.CellSelection && !this.RowSelection)){
+ if(!cell || (!this.cellSelection && !this.rowSelection)){
return;
}
var cellIndex = cell.dom.cellIndex;
var rowIndex = this.getRowIndex(row);
- if(this.CellSelection){
+ // why??? - should these not be based on SelectionModel?
+ if(this.cellSelection){
this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e);
}
- if(this.RowSelection){
+ if(this.rowSelection){
this.fireEvent('rowclick', this, row, rowIndex, e);
}
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
var config = cm.config[i];
-
+
var c = {
tag: 'th',
style : '',
/**
* @class Roo.bootstrap.PagingToolbar
- * @extends Roo.Row
+ * @extends Roo.bootstrap.NavSimplebar
* A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
* @constructor
* Create a new PagingToolbar
* @param {Object} config The config object
+ * @param {Roo.data.Store} store
*/
Roo.bootstrap.PagingToolbar = function(config)
{
// old args format still supported... - xtype is prefered..
// created from xtype...
- var ds = config.dataSource;
+
+ this.ds = config.dataSource;
+
+ if (config.store && !this.ds) {
+ this.store= Roo.factory(config.store, Roo.data);
+ this.ds = this.store;
+ this.ds.xmodule = this.xmodule || false;
+ }
+
this.toolbarItems = [];
if (config.items) {
this.toolbarItems = config.items;
-// config.items = [];
}
Roo.bootstrap.PagingToolbar.superclass.constructor.call(this, config);
- this.ds = ds;
+
this.cursor = 0;
- if (ds) {
- this.bind(ds);
+
+ if (this.ds) {
+ this.bind(this.ds);
}
this.navgroup = new Roo.bootstrap.NavGroup({ cls: 'pagination' });
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
});
-
+
},
// private
}
-
-
if (this.currentTip.el) {
- this.currentTip.el.hide(); // force hiding...
+ this.currentTip.el.setVisibilityMode(Roo.Element.DISPLAY).hide(); // force hiding...
}
//Roo.log(ev);
var bindEl = el;
* @cfg {Number} minWidth default 300
* @cfg {Number} minHeight default 300
* @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
+ * @cfg {Boolean} isDocument (true|false) default false
*
* @constructor
* Create a new UploadCropbox
* Fire when resize
* @param {Roo.bootstrap.UploadCropbox} this
*/
- "resize" : true
-
+ "resize" : true,
+ /**
+ * @event rotate
+ * Fire when rotate the image
+ * @param {Roo.bootstrap.UploadCropbox} this
+ * @param {String} pos
+ */
+ "rotate" : true
});
this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD;
cropType : 'image/jpeg',
buttons : false,
canvasLoaded : false,
+ isDocument : false,
getAutoCreate : function()
{
this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
- this.setThumbBoxPosition();
this.baseRotateLevel();
+
+ if(this.isDocument){
+ this.setThumbBoxSize();
+ }
+
+ this.setThumbBoxPosition();
+
this.baseScaleLevel();
this.draw();
this.dragable = true;
this.pinching = false;
+ if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
+ this.dragable = false;
+ return;
+ }
+
this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
{
var minScale = this.thumbEl.getWidth() / this.minWidth;
- var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel());
- var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel());
+ if(this.minWidth < this.minHeight){
+ minScale = this.thumbEl.getHeight() / this.minHeight;
+ }
+
+ var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
+ var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
+
+ if(
+ this.isDocument &&
+ (this.rotate == 0 || this.rotate == 180) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minWidth && height < this.minHeight)
+ )
+ ){
+ return false;
+ }
+
+ if(
+ this.isDocument &&
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width > this.imageEl.OriginWidth ||
+ height > this.imageEl.OriginHeight ||
+ (width < this.minHeight && height < this.minWidth)
+ )
+ ){
+ return false;
+ }
if(
+ !this.isDocument &&
(this.rotate == 0 || this.rotate == 180) &&
(
- width / minScale < this.minWidth ||
- width / minScale > this.imageEl.OriginWidth ||
- height / minScale < this.minHeight ||
- height / minScale > this.imageEl.OriginHeight
+ width < this.minWidth ||
+ width > this.imageEl.OriginWidth ||
+ height < this.minHeight ||
+ height > this.imageEl.OriginHeight
)
){
return false;
}
if(
+ !this.isDocument &&
(this.rotate == 90 || this.rotate == 270) &&
(
- width / minScale < this.minHeight ||
- width / minScale > this.imageEl.OriginWidth ||
- height / minScale < this.minWidth ||
- height / minScale > this.imageEl.OriginHeight
+ width < this.minHeight ||
+ width > this.imageEl.OriginWidth ||
+ height < this.minWidth ||
+ height > this.imageEl.OriginHeight
)
){
return false;
onRotateLeft : function(e)
{
- var minScale = this.thumbEl.getWidth() / this.minWidth;
-
- if(this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight()){
+ if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
- var bw = this.canvasEl.width / this.getScaleLevel();
- var bh = this.canvasEl.height / this.getScaleLevel();
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
this.startScale = this.scale;
}
if(
- bw * this.getScaleLevel() < this.thumbEl.getHeight() ||
- bh * this.getScaleLevel() < this.thumbEl.getWidth()
+ Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
+ Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
){
continue;
}
this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
+ if(this.isDocument){
+ this.setThumbBoxSize();
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ }
+
this.draw();
+ this.fireEvent('rotate', this, 'left');
+
},
onRotateRight : function(e)
{
- var minScale = this.thumbEl.getWidth() / this.minWidth;
-
- if(this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight()){
+ if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
- var bw = this.canvasEl.width / this.getScaleLevel();
- var bh = this.canvasEl.height / this.getScaleLevel();
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+ var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
this.startScale = this.scale;
}
if(
- bw * this.getScaleLevel() < this.thumbEl.getHeight() ||
- bh * this.getScaleLevel() < this.thumbEl.getWidth()
+ Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
+ Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
){
continue;
}
this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
+ if(this.isDocument){
+ this.setThumbBoxSize();
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ }
+
this.draw();
+
+ this.fireEvent('rotate', this, 'right');
},
onRotateFail : function()
if(!this.canvasLoaded){
return;
}
- var canvas = document.createElement("canvas");
- var context = canvas.getContext("2d");
+ var imageCanvas = document.createElement("canvas");
- canvas.width = this.minWidth;
- canvas.height = this.minHeight;
+ var imageContext = imageCanvas.getContext("2d");
- var cropWidth = this.thumbEl.getWidth();
- var cropHeight = this.thumbEl.getHeight();
+ imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+ imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
- var x = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
- var y = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
+ var center = imageCanvas.width / 2;
- if(this.canvasEl.width - cropWidth < x){
- x = this.canvasEl.width - cropWidth;
- }
+ imageContext.translate(center, center);
- if(this.canvasEl.height - cropHeight < y){
- y = this.canvasEl.height - cropHeight;
- }
+ imageContext.rotate(this.rotate * Math.PI / 180);
- x = x < 0 ? 0 : x;
- y = y < 0 ? 0 : y;
+ imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+
+ var canvas = document.createElement("canvas");
- context.drawImage(this.canvasEl, x, y, cropWidth, cropHeight, 0, 0, canvas.width, canvas.height);
+ var context = canvas.getContext("2d");
+
+ canvas.width = this.minWidth;
+ canvas.height = this.minHeight;
+
+ switch (this.rotate) {
+ case 0 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 90 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 180 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
+ sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ case 270 :
+
+ var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+ var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
+
+ var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+ var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+
+ var targetWidth = this.minWidth - 2 * x;
+ var targetHeight = this.minHeight - 2 * y;
+
+ var scale = 1;
+
+ if((x == 0 && y == 0) || (x == 0 && y > 0)){
+ scale = targetWidth / width;
+ }
+
+ if(x > 0 && y == 0){
+ scale = targetHeight / height;
+ }
+
+ if(x > 0 && y > 0){
+ scale = targetWidth / width;
+
+ if(width < height){
+ scale = targetHeight / height;
+ }
+ }
+
+ context.scale(scale, scale);
+
+ var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+ var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+ sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+ sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+ sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
+
+ context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+
+ break;
+ default :
+ break;
+ }
this.cropData = canvas.toDataURL(this.cropType);
setThumbBoxSize : function()
{
- var height = 300;
- var width = Math.ceil(this.minWidth * height / this.minHeight);
+ var width, height;
+
+ if(this.isDocument && typeof(this.imageEl) != 'undefined'){
+ width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
+ height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
+
+ this.minWidth = width;
+ this.minHeight = height;
+
+ if(this.rotate == 90 || this.rotate == 270){
+ this.minWidth = height;
+ this.minHeight = width;
+ }
+ }
+
+ height = 300;
+ width = Math.ceil(this.minWidth * height / this.minHeight);
if(this.minWidth > this.minHeight){
width = 300;
{
var width, height;
+ if(this.isDocument){
+
+ if(this.baseRotate == 6 || this.baseRotate == 8){
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginWidth;
+
+ if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginHeight;
+ }
+
+ return;
+ }
+
+ height = this.thumbEl.getHeight();
+ this.baseScale = height / this.imageEl.OriginHeight;
+
+ if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
+ width = this.thumbEl.getWidth();
+ this.baseScale = width / this.imageEl.OriginWidth;
+ }
+
+ return;
+ }
+
if(this.baseRotate == 6 || this.baseRotate == 8){
width = this.thumbEl.getHeight();
- this.baseScale = height / this.imageEl.OriginHeight;
+ this.baseScale = width / this.imageEl.OriginHeight;
if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
height = this.thumbEl.getWidth();
this.baseScale = height / this.imageEl.OriginHeight;
}
-
if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
height = this.thumbEl.getHeight();
},
- prepare : function(input)
- {
+ prepare : function(file)
+ {
this.file = false;
this.exif = {};
- if(typeof(input) === 'string'){
- this.loadCanvas(input);
+ if(typeof(file) === 'string'){
+ this.loadCanvas(file);
return;
}
- if(!input.files || !input.files[0] || !this.urlAPI){
+ if(!file || !this.urlAPI){
return;
}
- this.file = input.files[0];
- this.cropType = this.file.type;
+ this.file = file;
+ this.cropType = file.type;
var _this = this;
}
]
}
+ ],
+ ROTATOR : [
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-left',
+ action : 'rotate-left',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-undo"></i>'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ cls : 'btn-group roo-upload-cropbox-rotate-right',
+ action : 'rotate-right',
+ cn : [
+ {
+ tag : 'button',
+ cls : 'btn btn-default',
+ html : '<i class="fa fa-repeat"></i>'
+ }
+ ]
+ }
]
}
});
* @cfg {String} fieldLabel
* @cfg {Number} labelWidth default 4
* @cfg {String} labelAlign (left|top) default left
+ * @cfg {Boolean} editable (true|false) allow edit when upload a image default true
*
* @constructor
* Create a new DocumentManager
* @param {Roo.bootstrap.DocumentManager} this
* @param {Object} file
*/
- "click" : true
+ "click" : true,
+ /**
+ * @event edit
+ * Fire when upload a image and editable set to true
+ * @param {Roo.bootstrap.DocumentManager} this
+ * @param {Object} file
+ */
+ "edit" : true,
+ /**
+ * @event beforeselectfile
+ * Fire before select file
+ * @param {Roo.bootstrap.DocumentManager} this
+ */
+ "beforeselectfile" : true
});
};
fieldLabel : '',
labelWidth : 4,
labelAlign : 'left',
+ editable : true,
+ delegates : [],
getAutoCreate : function()
{
this.selectorEl.attr('multiple', 'multiple');
}
- this.selectorEl.on('change', this.onSelect, this);
+ this.selectorEl.on('change', this.onFileSelected, this);
this.uploader = this.el.select('.roo-document-manager-uploader', true).first();
this.uploader.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- this.uploader.on('click', this.onUpload, this);
+ this.uploader.on('click', this.onUploaderClick, this);
+
+ this.renderProgressDialog();
var _this = this;
this.fireEvent('initial', this);
},
- onUpload : function(e)
+ renderProgressDialog : function()
+ {
+ var _this = this;
+
+ this.progressDialog = new Roo.bootstrap.Modal({
+ cls : 'roo-document-manager-progress-dialog',
+ allow_close : false,
+ title : '',
+ buttons : [
+ {
+ name :'cancel',
+ weight : 'danger',
+ html : 'Cancel'
+ }
+ ],
+ listeners : {
+ btnclick : function() {
+ _this.uploadCancel();
+ this.hide();
+ }
+ }
+ });
+
+ this.progressDialog.render(Roo.get(document.body));
+
+ this.progress = new Roo.bootstrap.Progress({
+ cls : 'roo-document-manager-progress',
+ active : true,
+ striped : true
+ });
+
+ this.progress.render(this.progressDialog.getChildContainer());
+
+ this.progressBar = new Roo.bootstrap.ProgressBar({
+ cls : 'roo-document-manager-progress-bar',
+ aria_valuenow : 0,
+ aria_valuemin : 0,
+ aria_valuemax : 12,
+ panel : 'success'
+ });
+
+ this.progressBar.render(this.progress.getChildContainer());
+ },
+
+ onUploaderClick : function(e)
{
e.preventDefault();
- this.selectorEl.dom.click();
+ if(this.fireEvent('beforeselectfile', this) != false){
+ this.selectorEl.dom.click();
+ }
},
- onSelect : function(e)
+ onFileSelected : function(e)
{
e.preventDefault();
}
}, this);
- this.process();
+ this.queue();
},
- process : function()
+ queue : function()
{
this.selectorEl.dom.value = '';
this.files = this.files.slice(0, this.boxes);
}
- var xhr = new XMLHttpRequest();
+ this.uploader.show();
- Roo.each(this.files, function(file, index){
- if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
- return;
- }
-
- file.xhr = xhr;
-
- this.managerEl.createChild({
- tag : 'div',
- cls : 'roo-document-manager-loading',
- cn : [
- {
- tag : 'div',
- tooltip : file.name,
- cls : 'roo-document-manager-thumb',
- html : '<i class="fa fa-spinner fa-pulse"></i>'
- }
- ]
-
- });
-
- }, this);
-
- if(this.files.length > this.boxes - 1 ){
+ if(this.files.length > this.boxes - 1){
this.uploader.hide();
}
- var headers = {
- "Accept": "application/json",
- "Cache-Control": "no-cache",
- "X-Requested-With": "XMLHttpRequest"
- };
-
- xhr.open(this.method, this.url, true);
-
- for (var headerName in headers) {
- var headerValue = headers[headerName];
- if (headerValue) {
- xhr.setRequestHeader(headerName, headerValue);
- }
- }
-
var _this = this;
- xhr.onload = function()
- {
- _this.xhrOnLoad(xhr);
- }
-
- xhr.onerror = function()
- {
- _this.xhrOnError(xhr);
- }
-
- var formData = new FormData();
-
- formData.append('returnHTML', 'NO');
+ var files = [];
- Roo.each(this.files, function(file, index){
+ Roo.each(this.files, function(file){
if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
+ var f = this.renderPreview(file);
+ files.push(f);
return;
}
- formData.append(this.getParamName(index), file, file.name);
+ this.delegates.push(
+ (function(){
+ _this.process(file);
+ }).createDelegate(this)
+ );
}, this);
- if(this.fireEvent('prepare', this, formData) != false){
- xhr.send(formData);
- };
+ this.files = files;
- },
-
- getParamName : function(i)
- {
- if(!this.multiple){
- return this.paramName;
+ if(!this.delegates.length){
+ this.refresh();
+ return;
}
- return this.paramName + "_" + i;
+ this.progressBar.aria_valuemax = this.delegates.length;
+
+ this.arrange();
+
+ return;
},
- refresh : function()
+ arrange : function()
{
- Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
- el.remove();
- }, this);
+ if(!this.delegates.length){
+ this.progressDialog.hide();
+ this.refresh();
+ return;
+ }
+ var delegate = this.delegates.shift();
- var files = [];
+ this.progressDialog.show();
- Roo.each(this.files, function(file){
-
- if(typeof(file.id) == 'undefined' || file.id * 1 < 1){
- return;
- }
-
- if(file.target){
- files.push(file);
- return;
- }
-
- var previewEl = this.managerEl.createChild({
- tag : 'div',
- cls : 'roo-document-manager-preview',
- cn : [
- {
- tag : 'div',
- tooltip : file.filename,
- cls : 'roo-document-manager-thumb',
- html : '<img src="' + baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename + '">'
- },
- {
- tag : 'button',
- cls : 'close',
- html : 'x'
- }
- ]
- });
-
- var close = previewEl.select('button.close', true).first();
-
- close.on('click', this.onRemove, this, file);
-
- file.target = previewEl;
-
- var image = previewEl.select('img', true).first();
-
- image.on('click', this.onClick, this, file);
-
- files.push(file);
-
- return;
-
- }, this);
+ this.progressDialog.setTitle((this.progressBar.aria_valuemax - this.delegates.length) + ' / ' + this.progressBar.aria_valuemax);
- this.files = files;
+ this.progressBar.update(this.progressBar.aria_valuemax - this.delegates.length);
+ delegate();
+ },
+
+ refresh : function()
+ {
this.uploader.show();
if(this.files.length > this.boxes - 1){
xhrOnLoad : function(xhr)
{
+ Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
+ el.remove();
+ }, this);
+
if (xhr.readyState !== 4) {
- this.refresh();
+ this.arrange();
this.fireEvent('exception', this, xhr);
return;
}
var response = Roo.decode(xhr.responseText);
if(!response.success){
- this.refresh();
+ this.arrange();
this.fireEvent('exception', this, xhr);
return;
}
- var i = 0;
+ var file = this.renderPreview(response.data);
- Roo.each(this.files, function(file, index){
-
- if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
- return;
- }
-
- this.files[index] = response.data[i];
- i++;
-
- return;
-
- }, this);
+ this.files.push(file);
- this.refresh();
+ this.arrange();
},
var response = Roo.decode(xhr.responseText);
Roo.log(response);
- }
+
+ this.arrange();
+ },
+ process : function(file)
+ {
+ if(this.editable && file.type.indexOf('image') != -1){
+ this.fireEvent('edit', this, file);
+ return;
+ }
+
+ this.uploadStart(file, false);
+
+ return;
+ },
+
+ uploadStart : function(file, crop)
+ {
+ this.xhr = new XMLHttpRequest();
+
+ if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
+ this.arrange();
+ return;
+ }
+
+ file.xhr = this.xhr;
+
+ this.managerEl.createChild({
+ tag : 'div',
+ cls : 'roo-document-manager-loading',
+ cn : [
+ {
+ tag : 'div',
+ tooltip : file.name,
+ cls : 'roo-document-manager-thumb',
+ html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
+ }
+ ]
+
+ });
+
+ this.xhr.open(this.method, this.url, true);
+
+ var headers = {
+ "Accept": "application/json",
+ "Cache-Control": "no-cache",
+ "X-Requested-With": "XMLHttpRequest"
+ };
+
+ for (var headerName in headers) {
+ var headerValue = headers[headerName];
+ if (headerValue) {
+ this.xhr.setRequestHeader(headerName, headerValue);
+ }
+ }
+
+ var _this = this;
+
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
+ }
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ if(crop){
+ formData.append('crop', crop);
+ }
+
+ formData.append(this.paramName, file, file.name);
+
+ if(this.fireEvent('prepare', this, formData) != false){
+ this.xhr.send(formData);
+ };
+ },
+ uploadCancel : function()
+ {
+ this.xhr.abort();
+
+ this.delegates = [];
+
+ Roo.each(this.managerEl.select('.roo-document-manager-loading', true).elements, function(el){
+ el.remove();
+ }, this);
+
+ this.arrange();
+ },
+ renderPreview : function(file)
+ {
+ if(typeof(file.target) != 'undefined' && file.target){
+ return file;
+ }
+
+ var previewEl = this.managerEl.createChild({
+ tag : 'div',
+ cls : 'roo-document-manager-preview',
+ cn : [
+ {
+ tag : 'div',
+ tooltip : file.filename,
+ cls : 'roo-document-manager-thumb',
+ html : '<img src="' + baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename + '">'
+ },
+ {
+ tag : 'button',
+ cls : 'close',
+ html : '<i class="fa fa-times-circle"></i>'
+ }
+ ]
+ });
+
+ var close = previewEl.select('button.close', true).first();
+
+ close.on('click', this.onRemove, this, file);
+
+ file.target = previewEl;
+
+ var image = previewEl.select('img', true).first();
+
+ var _this = this;
+
+ image.dom.addEventListener("load", function(){ _this.onPreviewLoad(file, image); });
+
+ image.on('click', this.onClick, this, file);
+
+ return file;
+
+ },
+
+ onPreviewLoad : function(file, image)
+ {
+ if(typeof(file.target) == 'undefined' || !file.target){
+ return;
+ }
+
+ var width = image.dom.naturalWidth || image.dom.width;
+ var height = image.dom.naturalHeight || image.dom.height;
+
+ if(width > height){
+ file.target.addClass('wide');
+ return;
+ }
+
+ file.target.addClass('tall');
+ return;
+
+ }
});
+
/*
* Licence: LGPL
*/
}
});
+/*
+ * - LGPL
+ *
+ * nav progress bar
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.NavProgressBar
+ * @extends Roo.bootstrap.Component
+ * Bootstrap NavProgressBar class
+ *
+ * @constructor
+ * Create a new nav progress bar
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.NavProgressBar = function(config){
+ Roo.bootstrap.NavProgressBar.superclass.constructor.call(this, config);
+
+ this.bullets = this.bullets || [];
+
+// Roo.bootstrap.NavProgressBar.register(this);
+ this.addEvents({
+ /**
+ * @event changed
+ * Fires when the active item changes
+ * @param {Roo.bootstrap.NavProgressBar} this
+ * @param {Roo.bootstrap.NavProgressItem} selected The item selected
+ * @param {Roo.bootstrap.NavProgressItem} prev The previously selected item
+ */
+ 'changed': true
+ });
+
+};
+
+Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component, {
+
+ bullets : [],
+ barItems : [],
+
+
+ getAutoCreate : function()
+ {
+ var cfg = Roo.apply({}, Roo.bootstrap.NavProgressBar.superclass.getAutoCreate.call(this));
+
+ cfg = {
+ tag : 'ul',
+ cls: 'roo-navigation-bar'
+ }
+
+ return cfg;
+
+ },
+
+ onRender : function(ct, position)
+ {
+ Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
+
+ if(this.bullets.length){
+ Roo.each(this.bullets, function(b){
+ this.addItem(b);
+ }, this);
+ }
+
+ },
+
+ addItem : function(cfg)
+ {
+ var item = new Roo.bootstrap.NavProgressItem(cfg);
+
+ item.parentId = this.id;
+ item.onRender(this.el, null);
+
+ this.barItems.push(item);
+
+ this.formatBullets();
+
+ return item;
+ },
+
+ getActive : function()
+ {
+ var active = false;
+
+ Roo.each(this.barItems, function(v){
+
+ if (!v.isActive()) {
+ return;
+ }
+
+ active = v;
+ return false;
+
+ });
+
+ return active;
+ },
+
+ setActiveItem : function(item)
+ {
+ var prev = false;
+
+ Roo.each(this.barItems, function(v){
+ if (v.rid == item.rid) {
+ return ;
+ }
+
+ if (v.isActive()) {
+ v.setActive(false);
+ prev = v;
+ }
+ });
+
+ item.setActive(true);
+
+ this.fireEvent('changed', this, item, prev);
+ },
+
+ getBarItem: function(rid)
+ {
+ var ret = false;
+
+ Roo.each(this.barItems, function(e) {
+ if (e.rid != rid) {
+ return;
+ }
+
+ ret = e;
+ return false;
+ });
+
+ return ret;
+ },
+
+ indexOfItem : function(item)
+ {
+ var index = false;
+
+ Roo.each(this.barItems, function(v, i){
+
+ if (v.rid != item.rid) {
+ return;
+ }
+
+ index = i;
+ return false
+ });
+
+ return index;
+ },
+
+ setActiveNext : function()
+ {
+ var i = this.indexOfItem(this.getActive());
+
+ if (i > this.barItems.length) {
+ return;
+ }
+
+ this.setActiveItem(this.barItems[i+1]);
+ },
+
+ setActivePrev : function()
+ {
+ var i = this.indexOfItem(this.getActive());
+
+ if (i < 1) {
+ return;
+ }
+
+ this.setActiveItem(this.barItems[i-1]);
+ },
+
+ formatBullets : function()
+ {
+ if(!this.barItems.length){
+ return;
+ }
+
+ var width = 100 / this.barItems.length;
+
+ Roo.each(this.barItems, function(i){
+ i.el.setStyle('width', width + '%');
+ }, this);
+ }
+
+});
+/*
+ * - LGPL
+ *
+ * Nav Progress Item
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.NavProgressItem
+ * @extends Roo.bootstrap.Component
+ * Bootstrap NavProgressItem class
+ * @cfg {String} rid the reference id
+ * @cfg {Boolean} active (true|false) Is item active default false
+ * @cfg {Boolean} disabled (true|false) Is item active default false
+ * @cfg {String} html
+ * @cfg {String} position (top|bottom) text position default bottom
+ * @cfg {String} icon show icon instead of number
+ * @cfg {Boolean} forceIcon (true|false) true to force show icon..if set to false, Roo.isTouch showing icon, otherwish number
+ *
+ * @constructor
+ * Create a new NavProgressItem
+ * @param {Object} config The config object
+ */
+Roo.bootstrap.NavProgressItem = function(config){
+ Roo.bootstrap.NavProgressItem.superclass.constructor.call(this, config);
+ this.addEvents({
+ // raw events
+ /**
+ * @event click
+ * The raw click event for the entire grid.
+ * @param {Roo.bootstrap.NavProgressItem} this
+ * @param {Roo.EventObject} e
+ */
+ "click" : true
+ });
+
+};
+
+Roo.extend(Roo.bootstrap.NavProgressItem, Roo.bootstrap.Component, {
+
+ rid : '',
+ active : false,
+ disabled : false,
+ html : '',
+ position : 'bottom',
+ icon : false,
+ forceIcon : false,
+
+ getAutoCreate : function()
+ {
+ var iconCls = 'roo-navigation-bar-item-icon';
+
+ if((this.forceIcon && this.icon) || !this.forceIcon && Roo.isTouch){
+ iconCls += ' ' + this.icon;
+ }
+
+ var cfg = {
+ tag: 'li',
+ cls: 'roo-navigation-bar-item',
+ cn : [
+ {
+ tag : 'i',
+ cls : iconCls
+ },
+ {
+ tag : 'span',
+ cls : 'roo-navigation-bar-item-text ' + this.position,
+ html : this.html
+ }
+ ]
+ }
+
+ if(this.active){
+ cfg.cls += ' active';
+ }
+ if(this.disabled){
+ cfg.cls += ' disabled';
+ }
+
+ return cfg;
+ },
+
+ initEvents: function()
+ {
+ this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
+ this.textEl = this.el.select('.roo-navigation-bar-item-text', true).first();
+
+ if(Roo.isTouch){
+ this.textEl.setVisibilityMode(Roo.Element.DISPLAY).hide();
+ }
+
+ this.iconEl.on('click', this.onClick, this);
+
+ },
+
+ onClick : function(e)
+ {
+ e.preventDefault();
+
+ if(this.disabled){
+ return;
+ }
+
+ if(this.fireEvent('click', this, e) === false){
+ return;
+ };
+
+ this.parent().setActiveItem(this);
+ },
+
+ isActive: function ()
+ {
+ return this.active;
+ },
+
+ setActive : function(state)
+ {
+ if(this.active == state){
+ return;
+ }
+
+ this.active = state;
+
+ if (state) {
+ this.el.addClass('active');
+ return;
+ }
+
+ this.el.removeClass('active');
+
+ return;
+ },
+
+ setDisabled : function(state)
+ {
+ if(this.disabled == state){
+ return;
+ }
+
+ this.disabled = state;
+
+ if (state) {
+ this.el.addClass('disabled');
+ return;
+ }
+
+ this.el.removeClass('disabled');
+ },
+
+ tooltipEl : function()
+ {
+ return this.el.select('.roo-navigation-bar-item-icon', true).first();;
+ }
+});
+
+
+
\ No newline at end of file
projects / roojs1 / blobdiff