if (this.allow_close) {
this.closeEl.on('click', this.hide, this);
}
+
+ var _this = this;
+
+ window.addEventListener("resize", function() { _this.resize(); } );
},
+
+ resize : function()
+ {
+ this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+ },
+
show : function() {
if (!this.rendered) {
* @cfg {String} autocomplete - default is new-password see: https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs?hl=en
* @cfg {String} align (left|center|right) Default left
+ * @cfg {Boolean} forceFeedback (true|false) Default false
*
*
*
readOnly : false,
align : false,
formatedValue : false,
+ forceFeedback : false,
parentLabelAlign : function()
{
if(feedback){
this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
- if(this.getValue().length){
+ if(this.getValue().length || this.forceFeedback){
this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
}
* @extends Roo.bootstrap.Component
* Bootstrap UploadCropbox class
* @cfg {String} emptyText show when image has been loaded
+ * @cfg {String} rotateNotify show when image too small to rotate
+ * @cfg {Number} errorTimeout default 3000
* @cfg {Number} minWidth default 300
* @cfg {Number} minHeight default 300
* @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
* @param {Roo.bootstrap.UploadCropbox} this
* @param {String} type
*/
- "footerbuttonclick" : true
+ "footerbuttonclick" : true,
+ /**
+ * @event resize
+ * Fire when resize
+ * @param {Roo.bootstrap.UploadCropbox} this
+ */
+ "resize" : true
});
Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component, {
emptyText : 'Click to upload image',
+ rotateNotify : 'Image is too small to rotate',
+ errorTimeout : 3000,
scale : 0,
baseScale : 1,
rotate : 0,
baseRotate : 1,
cropType : 'image/jpeg',
buttons : false,
+ canvasLoaded : false,
getAutoCreate : function()
{
{
tag : 'div',
cls : 'roo-upload-cropbox-body',
+ style : 'cursor:pointer',
cn : [
{
tag : 'div',
tag : 'div',
cls : 'roo-upload-cropbox-empty-notify',
html : this.emptyText
+ },
+ {
+ tag : 'div',
+ cls : 'roo-upload-cropbox-error-notify alert alert-danger',
+ html : this.rotateNotify
}
]
},
this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- this.bodyHasOnClickEvent = false;
this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
+ this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.errorEl.hide();
+
this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.footerEl.hide();
this.bind();
+ this.resize();
+
this.fireEvent('initial', this);
},
window.addEventListener("resize", function() { _this.resize(); } );
- if(!this.bodyHasOnClickEvent){
- this.bodyEl.on('click', this.beforeSelectFile, this);
- this.bodyHasOnClickEvent = true;
- }
+ this.bodyEl.on('click', this.beforeSelectFile, this);
if(Roo.isTouch){
this.bodyEl.on('touchstart', this.onTouchStart, this);
this.mouseX = 0;
this.mouseY = 0;
this.cropData = false;
+ this.notifyEl.dom.innerHTML = this.emptyText;
},
resize : function()
{
- this.setThumbBoxPosition();
- this.setCanvasPosition();
+ if(this.fireEvent('resize', this) != false){
+ this.setThumbBoxPosition();
+ this.setCanvasPosition();
+ }
},
onFooterButtonClick : function(e, el, o, type)
beforeSelectFile : function(e)
{
- if(e){
- e.preventDefault();
- }
-
this.fireEvent('beforeselectfile', this);
},
trash : function(e)
{
- if(e){
- e.preventDefault();
- }
-
this.fireEvent('trash', this);
},
download : function(e)
{
- if(e){
- e.preventDefault();
- }
-
this.fireEvent('download', this);
},
onLoadCanvas : function()
{
- if(this.bodyHasOnClickEvent){
- this.bodyEl.un('click', this.beforeSelectFile, this);
- this.bodyHasOnClickEvent = false;
- }
+ this.bodyEl.un('click', this.beforeSelectFile, this);
this.notifyEl.hide();
this.thumbEl.show();
this.draw();
+ this.resize();
+
+ this.canvasLoaded = true;
+
},
setCanvasPosition : function()
this.previewEl.setLeft(pw);
this.previewEl.setTop(ph);
+
},
onMouseDown : function(e)
{
e.stopEvent();
+ if(!this.canvasLoaded){
+ return;
+ }
+
if (!this.dragable){
return;
}
{
e.stopEvent();
- this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
+ this.startScale = this.scale;
- var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel());
- var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel());
+ this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
- if(
- e.getWheelDelta() == -1 &&
- (
- (
- (this.rotate == 0 || this.rotate == 180) && (width < this.thumbEl.getWidth() || height < this.thumbEl.getHeight())
- )
- ||
- (
- (this.rotate == 90 || this.rotate == 270) && (height < this.thumbEl.getWidth() || width < this.thumbEl.getHeight())
- )
- )
- ){
- this.scale = (e.getWheelDelta() == 1) ? (this.scale - 1) : (this.scale + 1);
+ if(!this.zoomable()){
+ this.scale = this.startScale;
return;
}
this.draw();
+
+ return;
},
- onRotateLeft : function(e)
+ zoomable : function()
{
- if(e){
- e.preventDefault();
- }
+ 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.rotate == 0 || this.rotate == 180) &&
(
- (this.rotate == 0 || this.rotate == 180)
- &&
- (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())
+ width / minScale < this.minWidth ||
+ width / minScale > this.imageEl.OriginWidth ||
+ height / minScale < this.minHeight ||
+ height / minScale > this.imageEl.OriginHeight
)
- ||
+ ){
+ return false;
+ }
+
+ if(
+ (this.rotate == 90 || this.rotate == 270) &&
(
- (this.rotate == 90 || this.rotate == 270)
- &&
- (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())
+ width / minScale < this.minHeight ||
+ width / minScale > this.imageEl.OriginWidth ||
+ height / minScale < this.minWidth ||
+ height / minScale > this.imageEl.OriginHeight
)
-
){
- return;
+ return false;
+ }
+
+ return true;
+
+ },
+
+ onRotateLeft : function(e)
+ {
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
+
+ if(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();
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ this.scale = this.scale + 1;
+
+ if(!this.zoomable()){
+ break;
+ }
+
+ if(
+ bw * this.getScaleLevel() < this.thumbEl.getHeight() ||
+ bh * this.getScaleLevel() < this.thumbEl.getWidth()
+ ){
+ continue;
+ }
+
+ this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
+
+ this.draw();
+
+ return;
+ }
+
+ this.scale = this.startScale;
+
+ this.onRotateFail();
+
+ return false;
}
this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
onRotateRight : function(e)
{
- if(e){
- e.preventDefault();
- }
+ var minScale = this.thumbEl.getWidth() / this.minWidth;
- if(
- (
- (this.rotate == 0 || this.rotate == 180)
- &&
- (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())
- )
- ||
- (
- (this.rotate == 90 || this.rotate == 270)
- &&
- (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())
- )
+ if(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();
+
+ this.startScale = this.scale;
+
+ while (this.getScaleLevel() < minScale){
+
+ this.scale = this.scale + 1;
- ){
+ if(!this.zoomable()){
+ break;
+ }
+
+ if(
+ bw * this.getScaleLevel() < this.thumbEl.getHeight() ||
+ bh * this.getScaleLevel() < this.thumbEl.getWidth()
+ ){
+ continue;
+ }
+
+ this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
+
+ this.draw();
+
+ return;
+ }
+
+ this.scale = this.startScale;
+
+ this.onRotateFail();
+
return false;
}
this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
this.draw();
+ },
+
+ onRotateFail : function()
+ {
+ this.errorEl.show(true);
+
+ var _this = this;
+ (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
},
draw : function()
crop : function()
{
+ if(!this.canvasLoaded){
+ return;
+ }
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
onTouchStart : function(e)
{
- e.stopEvent();
+ if(!this.canvasLoaded){
+ this.beforeSelectFile(e);
+ return;
+ }
var touches = e.browserEvent.touches;
onTouchMove : function(e)
{
- e.stopEvent();
-
if(!this.pinching && !this.dragable){
return;
}
this.endDistance = Math.sqrt(x + y);
- var scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
-
- var width = Math.ceil(this.imageEl.OriginWidth * this.baseScale * Math.pow(1.1, scale));
- var height = Math.ceil(this.imageEl.OriginHeight * this.baseScale * Math.pow(1.1, scale));
+ this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
- if(
- this.endDistance / this.startDistance < 1 &&
- (
- (
- (this.rotate == 0 || this.rotate == 180) && (width < this.thumbEl.getWidth() || height < this.thumbEl.getHeight())
- )
- ||
- (
- (this.rotate == 90 || this.rotate == 270) && (height < this.thumbEl.getWidth() || width < this.thumbEl.getHeight())
- )
- )
- ){
+ if(!this.zoomable()){
+ this.scale = this.startScale;
return;
}
- this.scale = scale;
-
this.draw();
},
onTouchEnd : function(e)
{
- e.stopEvent();
-
this.pinching = false;
this.dragable = false;
* @cfg {String} paramName default 'imageUpload'
* @cfg {String} method default POST
* @cfg {String} url action url
- * @cfg {Number} boxes number of boxes to show default 12
+ * @cfg {Number} boxes number of boxes default 12
* @cfg {Boolean} multiple multiple upload default true
* @cfg {Number} minWidth default 300
* @cfg {Number} minHeight default 300
return;
}
- if(this.files.length > 12){
- this.files = this.files.slice(0, 12);
+ if(this.files.length > this.boxes){
+ this.files = this.files.slice(0, this.boxes);
}
var xhr = new XMLHttpRequest();
}, this);
- if(this.files.length > 11){
+ if(this.files.length > this.boxes - 1 ){
this.uploader.hide();
}
this.uploader.show();
- if(this.files.length > 11){
+ if(this.files.length > this.boxes - 1){
this.uploader.hide();
}
projects / roojs1 / blobdiff