X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=docs%2Fsymbols%2Fsrc%2FRoo_bootstrap_UploadCropbox.js.html;h=8a6887094a59fe29589bcdbb0b077e29d39831e3;hb=64caeb06484d53f2e26031b56cf24b94f20e1a79;hp=44594375d90ce0a7f305cddbc731ad0c97c71fa0;hpb=b6ee9075560b25263a655f72e775b709f79b67c9;p=roojs1
diff --git a/docs/symbols/src/Roo_bootstrap_UploadCropbox.js.html b/docs/symbols/src/Roo_bootstrap_UploadCropbox.js.html
index 44594375d9..8a6887094a 100644
--- a/docs/symbols/src/Roo_bootstrap_UploadCropbox.js.html
+++ b/docs/symbols/src/Roo_bootstrap_UploadCropbox.js.html
@@ -8,6 +8,8 @@
* @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']
@@ -95,6 +97,8 @@
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,
@@ -110,6 +114,7 @@
baseRotate : 1,
cropType : 'image/jpeg',
buttons : false,
+ canvasLoaded : false,
getAutoCreate : function()
{
@@ -120,6 +125,7 @@
{
tag : 'div',
cls : 'roo-upload-cropbox-body',
+ style : 'cursor:pointer',
cn : [
{
tag : 'div',
@@ -133,6 +139,11 @@
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
}
]
},
@@ -175,7 +186,6 @@
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';
@@ -187,6 +197,10 @@
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();
@@ -206,10 +220,7 @@
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);
@@ -279,28 +290,16 @@
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);
},
@@ -322,10 +321,7 @@
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();
@@ -342,6 +338,8 @@
this.resize();
+ this.canvasLoaded = true;
+
},
setCanvasPosition : function()
@@ -355,6 +353,7 @@
this.previewEl.setLeft(pw);
this.previewEl.setTop(ph);
+
},
onMouseDown : function(e)
@@ -373,7 +372,7 @@
{
e.stopEvent();
- if(typeof(this.canvasEl) == 'undefined'){
+ if(!this.canvasLoaded){
return;
}
@@ -417,51 +416,93 @@
{
e.stopEvent();
+ this.startScale = this.scale;
+
this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
+ if(!this.zoomable()){
+ this.scale = this.startScale;
+ return;
+ }
+
+ this.draw();
+
+ return;
+ },
+
+ zoomable : function()
+ {
+ 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(
- e.getWheelDelta() == -1 &&
+ (this.rotate == 0 || this.rotate == 180) &&
(
- (
- (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())
- )
- )
+ width / minScale < this.minWidth ||
+ width / minScale > this.imageEl.OriginWidth ||
+ height / minScale < this.minHeight ||
+ height / minScale > this.imageEl.OriginHeight
+ )
){
- this.scale = (e.getWheelDelta() == 1) ? (this.scale - 1) : (this.scale + 1);
- return;
+ return false;
}
- this.draw();
+ if(
+ (this.rotate == 90 || this.rotate == 270) &&
+ (
+ width / minScale < this.minHeight ||
+ width / minScale > this.imageEl.OriginWidth ||
+ height / minScale < this.minWidth ||
+ height / minScale > this.imageEl.OriginHeight
+ )
+ ){
+ return false;
+ }
+
+ return true;
+
},
onRotateLeft : 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;
- ){
- return;
+ 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;
@@ -472,31 +513,56 @@
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()
@@ -587,7 +653,7 @@
crop : function()
{
- if(typeof(this.canvasEl) == 'undefined'){
+ if(!this.canvasLoaded){
return;
}
var canvas = document.createElement("canvas");
@@ -725,7 +791,10 @@
onTouchStart : function(e)
{
- e.stopEvent();
+ if(!this.canvasLoaded){
+ this.beforeSelectFile(e);
+ return;
+ }
var touches = e.browserEvent.touches;
@@ -762,8 +831,6 @@
onTouchMove : function(e)
{
- e.stopEvent();
-
if(!this.pinching && !this.dragable){
return;
}
@@ -790,36 +857,19 @@
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;