},
setTitle: function(str)
{
+ this.title = str;
this.el.select('.popover-title',true).first().dom.innerHTML = str;
},
setContent: function(str)
{
+ this.html = str;
this.el.select('.popover-content',true).first().dom.innerHTML = str;
},
// as it get's added to the bottom of the page.
// set content.
this.el.select('.popover-title',true).first().dom.innerHtml = this.title;
if (this.html !== false) {
- this.el.select('.popover-content',true).first().dom.innerHtml = this.title;
+ this.el.select('.popover-content',true).first().dom.innerHtml = this.html;
}
this.el.removeClass(['fade','top','bottom', 'left', 'right','in']);
if (!this.title.length) {
//arrow.set(align[2],
this.el.addClass('in');
- this.hoverState = null;
+
if (this.el.hasClass('fade')) {
// fade it?
this.el.setXY([0,0]);
this.el.removeClass('in');
this.el.hide();
+ this.hoverState = null;
}
//html : 'submit'
pressed : toggle ? false : null,
listeners : {}
- }
+ };
a.listeners[toggle ? 'toggle' : 'click'] = function() {
handler ? handler.call(_this,this) :_this.onBtnClick.call(_this, cmd || id);
- }
+ };
children.push(a);
return a;
}
emptyText : 'Click to upload image',
scale : 0,
+ baseScale : 1,
rotate : 0,
dragable : false,
mouseX : 0,
reset : function()
{
this.scale = 0;
+ this.baseScale = 1;
this.rotate = 0;
this.dragable = false;
this.mouseX = 0;
this.image.OriginWidth = this.image.getWidth();
this.image.OriginHeight = this.image.getHeight();
+ this.fitThumbBox();
+
+ this.image.setWidth(this.image.OriginWidth * this.getScaleLevel(false));
+ this.image.setHeight(this.image.OriginHeight * this.getScaleLevel(false));
+
this.footerSection.show();
this.setCanvasPosition();
{
e.stopEvent();
- var scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
+ this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
- var width = this.image.OriginWidth * Math.pow(1.1, scale);
- var height = this.image.OriginHeight * Math.pow(1.1, scale);
+ var width = this.image.OriginWidth * this.getScaleLevel(false);
+ var height = this.image.OriginHeight * this.getScaleLevel(false);
if(
e.getWheelDelta() == -1 &&
(
- width < this.thumb.getWidth() ||
- height < this.thumb.getHeight()
+ (
+ (this.rotate == 0 || this.rotate == 180) && (width < this.thumb.getWidth() || height < this.thumb.getHeight())
+ )
+ ||
+ (
+ (this.rotate == 90 || this.rotate == 270) && (height < this.thumb.getWidth() || width < this.thumb.getHeight())
+ )
)
){
+ this.scale = (e.getWheelDelta() == 1) ? (this.scale - 1) : (this.scale + 1);
return;
}
- this.scale = scale;
-
this.image.setWidth(width);
this.image.setHeight(height);
{
e.stopEvent();
- this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
+ if(
+ (
+ (this.rotate == 0 || this.rotate == 180)
+ &&
+ (this.image.getHeight() < this.thumb.getWidth() || this.image.getWidth() < this.thumb.getHeight())
+ )
+ ||
+ (
+ (this.rotate == 90 || this.rotate == 270)
+ &&
+ (this.image.getWidth() < this.thumb.getWidth() || this.image.getHeight() < this.thumb.getHeight())
+ )
+
+ ){
+ return;
+ }
+ this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
+
this.imageCanvas.setStyle({
'-ms-transform' : 'rotate(' + this.rotate + 'deg)',
'-webkit-transform' : 'rotate(' + this.rotate + 'deg)',
'transform' : 'rotate(' + this.rotate + 'deg)'
});
-
+
this.setCanvasPosition();
+
},
onRotateRight : function(e)
{
e.stopEvent();
- this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
+ if(
+ (
+ (this.rotate == 0 || this.rotate == 180)
+ &&
+ (this.image.getHeight() < this.thumb.getWidth() || this.image.getWidth() < this.thumb.getHeight())
+ )
+ ||
+ (
+ (this.rotate == 90 || this.rotate == 270)
+ &&
+ (this.image.getWidth() < this.thumb.getWidth() || this.image.getHeight() < this.thumb.getHeight())
+ )
+
+ ){
+ return false;
+ }
+ this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
+
this.imageCanvas.setStyle({
'-ms-transform' : 'rotate(' + this.rotate + 'deg)',
'-webkit-transform' : 'rotate(' + this.rotate + 'deg)',
'transform' : 'rotate(' + this.rotate + 'deg)'
});
-
+
this.setCanvasPosition();
+
+
},
crop : function()
{
var canvas = document.createElement("canvas");
- var thumbWidth = this.thumb.getWidth();
- var thumbHeight = this.thumb.getHeight();
+ var context = canvas.getContext("2d");
+
+ canvas.width = this.minWidth;
+ canvas.height = this.minHeight;
+
+ var centerX = this.minWidth / 2;
+ var centerY = this.minHeight / 2;
- var centerX = thumbWidth / 2;
- var centerY = thumbHeight / 2
+ var cropWidth = this.thumb.getWidth() * this.getScaleLevel(true);
+ var cropHeight = this.thumb.getHeight() * this.getScaleLevel(true);
var transform = new WebKitCSSMatrix(window.getComputedStyle(this.thumb.dom).webkitTransform);
var thumbX = this.thumb.getLeft(true) + transform.m41;
var thumbY = this.thumb.getTop(true) + transform.m42;
- var x = (thumbX - this.imageCanvas.getLeft(true)) * Math.pow(1.1, this.scale * -1);
- var y = (thumbY - this.imageCanvas.getTop(true)) * Math.pow(1.1, this.scale * -1);
+ var x = (thumbX - this.imageCanvas.getLeft(true)) * this.getScaleLevel(true);
+ var y = (thumbY - this.imageCanvas.getTop(true)) * this.getScaleLevel(true);
+
+ if(this.rotate == 90){
+
+ x = thumbY + (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getTop(true);
+ y = this.image.getHeight() - this.thumb.getWidth() - (thumbX - (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getLeft(true));
+
+ x = x * this.getScaleLevel(true);
+ y = y * this.getScaleLevel(true);
+
+ x = x < 0 ? 0 : x;
+ y = y < 0 ? 0 : y;
+
+ cropWidth = this.thumb.getHeight() * this.getScaleLevel(true);
+ cropHeight = this.thumb.getWidth() * this.getScaleLevel(true);
+
+ canvas.width = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
+ canvas.height = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
+
+ centerX = this.minWidth > this.minHeight ? (this.minWidth / 2) : (this.minHeight / 2);
+ centerY = this.minWidth > this.minHeight ? (this.minWidth / 2) : (this.minHeight / 2);
+
+ context.translate(centerX, centerY);
+ context.rotate(this.rotate * Math.PI / 180);
+
+ context.drawImage(this.image.dom, x, y, cropWidth, cropHeight, centerX * -1, centerY * -1, this.minHeight, this.minWidth);
- var cropWidth = thumbWidth * Math.pow(1.1, this.scale * -1);
- var cropHeight = thumbHeight * Math.pow(1.1, this.scale * -1);
+ var canvas2 = document.createElement("canvas");
+ var context2 = canvas2.getContext("2d");
+
+ canvas2.width = this.minWidth;
+ canvas2.height = this.minHeight;
+
+ context2.drawImage(canvas, Math.abs(this.minWidth - this.minHeight), 0, this.minWidth, this.minHeight, 0, 0, this.minWidth, this.minHeight);
+
+ this.cropImageData = canvas2.toDataURL(this.cropType);
+
+ this.fireEvent('crop', this, this.cropImageData);
+
+ return;
+
+ }
- canvas.width = thumbWidth;
- canvas.height = thumbHeight;
+ if(this.rotate == 270){
+
+ x = thumbY + (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getTop(true);
+ y = thumbX - (this.image.getWidth() - this.image.getHeight()) / 2 - this.imageCanvas.getLeft(true);
+
+ x = (this.image.getWidth() - this.thumb.getHeight() - x) * this.getScaleLevel(true);
+ y = y * this.getScaleLevel(true);
+
+ x = x < 0 ? 0 : x;
+ y = y < 0 ? 0 : y;
+
+ cropWidth = this.thumb.getHeight() * this.getScaleLevel(true);
+ cropHeight = this.thumb.getWidth() * this.getScaleLevel(true);
+
+ canvas.width = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
+ canvas.height = this.minWidth > this.minHeight ? this.minWidth : this.minHeight;
+
+ centerX = this.minWidth > this.minHeight ? (this.minWidth / 2) : (this.minHeight / 2);
+ centerY = this.minWidth > this.minHeight ? (this.minWidth / 2) : (this.minHeight / 2);
+
+ context.translate(centerX, centerY);
+ context.rotate(this.rotate * Math.PI / 180);
+
+ context.drawImage(this.image.dom, x, y, cropWidth, cropHeight, centerX * -1, centerY * -1, this.minHeight, this.minWidth);
- var context = canvas.getContext("2d");
+ var canvas2 = document.createElement("canvas");
+ var context2 = canvas2.getContext("2d");
+
+ canvas2.width = this.minWidth;
+ canvas2.height = this.minHeight;
+
+ context2.drawImage(canvas, 0, 0, this.minWidth, this.minHeight, 0, 0, this.minWidth, this.minHeight);
+
+ this.cropImageData = canvas2.toDataURL(this.cropType);
+
+ this.fireEvent('crop', this, this.cropImageData);
+
+ return;
+
+ }
+
+ if(this.rotate == 180){
+ x = this.image.OriginWidth - this.thumb.getWidth() * this.getScaleLevel(true) - x;
+ y = this.image.OriginHeight - this.thumb.getHeight() * this.getScaleLevel(true) - y;
+ }
+ x = x < 0 ? 0 : x;
+ y = y < 0 ? 0 : y;
+
context.translate(centerX, centerY);
context.rotate(this.rotate * Math.PI / 180);
- context.drawImage(this.image.dom, x, y, cropWidth, cropHeight, centerX * -1, centerY * -1, thumbWidth, thumbHeight);
+ context.drawImage(this.image.dom, x, y, cropWidth, cropHeight, centerX * -1, centerY * -1, canvas.width, canvas.height);
this.cropImageData = canvas.toDataURL(this.cropType);
return;
+ },
+
+ fitThumbBox : function()
+ {
+ var width = this.thumb.getWidth();
+ var height = this.image.OriginHeight * width / this.image.OriginWidth;
+
+ this.baseScale = width / this.image.OriginWidth;
+
+ if(this.image.OriginWidth > this.image.OriginHeight){
+ height = this.thumb.getHeight();
+ width = this.image.OriginWidth * height / this.image.OriginHeight;
+
+ this.baseScale = height / this.image.OriginHeight;
+ }
+
+ return;
+ },
+
+ getScaleLevel : function(reverse)
+ {
+ if(reverse){
+ return Math.pow(1.1, this.scale * -1) / this.baseScale;
+ }
+
+ return this.baseScale * Math.pow(1.1, this.scale);
}
});
projects / roojs1 / blobdiff