tonyair/silverstripe-cms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-cms synced 2024-10-22 08:05:56 +02:00
Code Issues Projects Releases Wiki Activity

mujma: BUGFIX: Removed image flickering after operation(crop,rotate,resize), problem still occurs under Safari.

Browse Source 
(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41986 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-16 00:49:34 +00:00
parent 37cddf0845
commit fd8ba77c27
4 changed files with 76 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
javascript/ImageEditor/ImageBox.js
View File

@ -4,6 +4,8 @@
var ImageBox = { var ImageBox = {
initialize: function() { initialize: function() {
this.indicatorWidth = 32;
this.indicatorHeight = 32;
this.showIndicator = ImageBox.showIndicator.bind(this); this.showIndicator = ImageBox.showIndicator.bind(this);
this.hideIndicator = ImageBox.hideIndicator.bind(this); this.hideIndicator = ImageBox.hideIndicator.bind(this);
this.reCenterIndicator = ImageBox.reCenterIndicator.bind(this); this.reCenterIndicator = ImageBox.reCenterIndicator.bind(this);
@ -18,13 +20,14 @@ var ImageBox = {
}, },
showIndicator: function(container) { showIndicator: function(container) {
Element.show(this.indicator,this.indicatorImage);
if(container == null) container = this.imageContainer; if(container == null) container = this.imageContainer;
this.centerIndicator(container); this.centerIndicator(container);
this.indicator.style.display = 'inline'; this.indicator.style.display = 'inline';
}, },
hideIndicator: function() { hideIndicator: function() {
Element.hide(this.indicator); Element.hide(this.indicator,this.indicatorImage);
}, },
centerIndicator: function(container) { centerIndicator: function(container) {
@ -34,8 +37,8 @@ var ImageBox = {
var height = container.getHeight(); var height = container.getHeight();
var parentTop = container.getParentTop(); var parentTop = container.getParentTop();
var parentLeft = container.getParentLeft(); var parentLeft = container.getParentLeft();
this.indicator.style.left = parentLeft + left + width/2 - this.indicatorImage.width/2 + 2 + "px"; this.indicator.style.left = parentLeft + left + width/2 - this.indicatorWidth/2 + "px";
this.indicator.style.top = parentTop + top + height/2 - this.indicatorImage.height/2 + 2 + "px"; this.indicator.style.top = parentTop + top + height/2 - this.indicatorHeight/2 + "px";
}, },
reCenterIndicator: function() { reCenterIndicator: function() {

55
javascript/ImageEditor/ImageHistory.js
View File

@ -7,19 +7,23 @@ ImageHistory = {
this.history = new Array(); this.history = new Array();
this.historyPointer = -1; this.historyPointer = -1;
this.modifiedOriginalImage = false; this.modifiedOriginalImage = false;
this.isEnabled = true;
this.image = Positioning.addBehaviour($('image'));
this.size = new Array();
this.fakeImage = $('fakeImg');
this.image = $('image');
this.undo = ImageHistory.undo.bind(this); this.undo = ImageHistory.undo.bind(this);
this.redo = ImageHistory.redo.bind(this); this.redo = ImageHistory.redo.bind(this);
this.add = ImageHistory.add.bind(this); this.add = ImageHistory.add.bind(this);
this.addLinsteners = ImageHistory.addLinsteners.bind(this); this.addListeners = ImageHistory.addListeners.bind(this);
this.addLinsteners();
this.operationMade = ImageHistory.operationMade.bind(this); this.operationMade = ImageHistory.operationMade.bind(this);
this.isInHistory = ImageHistory.isInHistory.bind(this); this.isInHistory = ImageHistory.isInHistory.bind(this);
this.onImageLoad = ImageHistory.onImageLoad.bind(this);
this.enable = ImageHistory.enable.bind(this); this.enable = ImageHistory.enable.bind(this);
this.disable = ImageHistory.disable.bind(this); this.disable = ImageHistory.disable.bind(this);
this.clear = ImageHistory.clear.bind(this); this.clear = ImageHistory.clear.bind(this);
this.image = Positioning.addBehaviour($('image')); this.addListeners();
this.size = new Array();
}, },
undo: function() { undo: function() {
@ -30,15 +34,8 @@ ImageHistory = {
this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false; this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false;
} }
this.image.src = this.history[this.historyPointer-1].fileUrl; this.image.src = this.history[this.historyPointer-1].fileUrl;
imageBox.checkOutOfDrawingArea(this.size[this.historyPointer-1].width,this.size[this.historyPointer-1].height);
this.image.style.width = this.size[this.historyPointer-1].width + 'px';
this.image.style.height = this.size[this.historyPointer-1].height + 'px';
$('imageContainer').style.width = this.size[this.historyPointer-1].width + 'px';
$('imageContainer').style.height = this.size[this.historyPointer-1].height + 'px';
resize.imageContainerResize.originalWidth = this.size[this.historyPointer-1].width;
resize.imageContainerResize.originalHeight = this.size[this.historyPointer-1].height;
imageToResize.onImageLoad();
this.historyPointer--; this.historyPointer--;
this.onImageLoad();
} else { } else {
alert("No more undo"); alert("No more undo");
} }
@ -49,15 +46,8 @@ ImageHistory = {
operation = this.history[this.historyPointer+1].operation; operation = this.history[this.historyPointer+1].operation;
if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true; if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
this.image.src = this.history[this.historyPointer+1].fileUrl; this.image.src = this.history[this.historyPointer+1].fileUrl;
imageBox.checkOutOfDrawingArea(this.size[this.historyPointer+1].width,this.size[this.historyPointer+1].height);
this.image.style.width = this.size[this.historyPointer+1].width + 'px';
this.image.style.height = this.size[this.historyPointer+1].height + 'px';
$('imageContainer').style.width = this.size[this.historyPointer+1].width + 'px';
$('imageContainer').style.height = this.size[this.historyPointer+1].height + 'px';
resize.imageContainerResize.originalWidth = this.size[this.historyPointer+1].width;
resize.imageContainerResize.originalHeight = this.size[this.historyPointer+1].height;
imageToResize.onImageLoad();
this.historyPointer++; this.historyPointer++;
this.onImageLoad();
} else { } else {
alert("No more redo"); alert("No more redo");
} }
@ -75,7 +65,7 @@ ImageHistory = {
} }
}, },
addLinsteners: function() { addListeners: function() {
this.undoListener = Event.observe('undoButton','click',this.undo); this.undoListener = Event.observe('undoButton','click',this.undo);
this.redoListener = Event.observe('redoButton','click',this.redo); this.redoListener = Event.observe('redoButton','click',this.redo);
}, },
@ -90,12 +80,18 @@ ImageHistory = {
}, },
enable: function() { enable: function() {
this.addLinsteners(); if(!this.isEnabled) {
this.addListeners();
this.isEnabled = true;
}
}, },
disable: function() { disable: function() {
Event.stopObserving($('undoButton'),'click', this.undo); if(this.isEnabled) {
Event.stopObserving($('redoButton'),'click', this.redo); Event.stopObserving($('undoButton'),'click', this.undo);
Event.stopObserving($('redoButton'),'click', this.redo);
this.isEnabled = false;
}
}, },
clear: function() { clear: function() {
@ -112,5 +108,16 @@ ImageHistory = {
} }
} }
return false; return false;
},
onImageLoad: function(event) {
imageBox.checkOutOfDrawingArea(this.size[this.historyPointer].width,this.size[this.historyPointer].height);
this.image.style.width = this.size[this.historyPointer].width + 'px';
this.image.style.height = this.size[this.historyPointer].height + 'px';
$('imageContainer').style.width = this.size[this.historyPointer].width + 'px';
$('imageContainer').style.height = this.size[this.historyPointer].height + 'px';
resize.imageContainerResize.originalWidth = this.size[this.historyPointer].width;
resize.imageContainerResize.originalHeight = this.size[this.historyPointer].height;
imageToResize.onImageLoad();
} }
}; };

74
javascript/ImageEditor/ImageTransformation.js
View File

@ -3,14 +3,21 @@
*/ */
var ImageTransformation = { var ImageTransformation = {
initialize: function() { initialize: function() {
this.currentOperation = "";
this.currentResponse = new Array();
this.currentCallback = null;
this.resize = ImageTransformation.resize.bind(this); this.resize = ImageTransformation.resize.bind(this);
this.rotate = ImageTransformation.rotate.bind(this); this.rotate = ImageTransformation.rotate.bind(this);
this.crop = ImageTransformation.crop.bind(this); this.crop = ImageTransformation.crop.bind(this);
this.save = ImageTransformation.save.bind(this); this.save = ImageTransformation.save.bind(this);
this.close = ImageTransformation.close.bind(this); this.close = ImageTransformation.close.bind(this);
this.onSuccess = ImageTransformation.onSuccess.bind(this);
this.onImageLoad = ImageTransformation.onImageLoad.bind(this);
}, },
resize: function(width,height,callback,imageAlreadyChangedSize) { resize: function(width,height,callback,imageAlreadyChangedSize) {
this.currentOperation = "resize";
this.currentCallback = callback;
if(imageHistory.modifiedOriginalImage) { if(imageHistory.modifiedOriginalImage) {
fileToResize = $('image').src; fileToResize = $('image').src;
} else { } else {
@ -19,63 +26,36 @@ var ImageTransformation = {
var options = { var options = {
method: 'post', method: 'post',
postBody: 'command=resize&file=' + fileToResize + '&newImageWidth=' + width + '&newImageHeight=' + height, postBody: 'command=resize&file=' + fileToResize + '&newImageWidth=' + width + '&newImageHeight=' + height,
onSuccess: function(transport) { onSuccess: this.onSuccess
imageBox.hideIndicator(); };
response = eval('(' + transport.responseText + ')');
$('image').src = response.fileName;
$('image').style.width = response.width + 'px';
$('image').style.height = response.height + 'px';
$('imageContainer').style.width = response.width + 'px';
$('imageContainer').style.height = response.height + 'px';
imageHistory.add('resize',$('image').src);
if(callback != null) callback();
}
};
if(imageAlreadyChangedSize == false) { if(imageAlreadyChangedSize == false) {
imageBox.showIndicator($('mainContainer')); imageBox.showIndicator($('mainContainer'));
} else { } else {
imageBox.showIndicator(); imageBox.showIndicator();
} }
new Ajax.Request('admin/ImageEditor/manipulate', options); new Ajax.Request('admin/ImageEditor/manipulate', options);
}, },
rotate: function(angle,callback) { rotate: function(angle,callback) {
this.currentOperation = "rotate";
this.currentCallback = callback;
var options = { var options = {
method: 'post', method: 'post',
postBody: 'command=rotate&file=' + $('image').src + '&angle=' + angle , postBody: 'command=rotate&file=' + $('image').src + '&angle=' + angle ,
onSuccess: function(transport) { onSuccess: this.onSuccess
imageBox.hideIndicator();
response = eval('(' + transport.responseText + ')');
imageBox.checkOutOfDrawingArea(response.width,response.height);
$('image').src = response.fileName;
$('image').style.width = response.width + 'px';
$('image').style.height = response.height + 'px';
$('imageContainer').style.width = response.width + 'px';
$('imageContainer').style.height = response.height + 'px';
imageHistory.add('rotate',$('image').src);
if(callback != null) callback();
}
}; };
imageBox.showIndicator(); imageBox.showIndicator();
new Ajax.Request('admin/ImageEditor/manipulate', options); new Ajax.Request('admin/ImageEditor/manipulate', options);
}, },
crop: function(top,left,width,height,callback) { crop: function(top,left,width,height,callback) {
this.currentOperation = "crop";
this.currentCallback = callback;
var options = { var options = {
method: 'post', method: 'post',
postBody: 'command=crop&file=' + $('image').src + '&top=' + top + '&left=' + left + '&width=' + width + '&height=' + height, postBody: 'command=crop&file=' + $('image').src + '&top=' + top + '&left=' + left + '&width=' + width + '&height=' + height,
onSuccess: function(transport) { onSuccess: this.onSuccess
imageBox.hideIndicator();
response = eval('(' + transport.responseText + ')');
$('image').src = response.fileName;
$('image').style.width = response.width + 'px';
$('image').style.height = response.height + 'px';
$('imageContainer').style.width = response.width + 'px';
$('imageContainer').style.height = response.height + 'px';
if(callback != null) callback();
imageHistory.add('crop',$('image').src);
}
}; };
imageBox.showIndicator(); imageBox.showIndicator();
new Ajax.Request('admin/ImageEditor/manipulate', options); new Ajax.Request('admin/ImageEditor/manipulate', options);
@ -103,6 +83,26 @@ var ImageTransformation = {
} }
}; };
new Ajax.Request('admin/ImageEditor/close', options); new Ajax.Request('admin/ImageEditor/close', options);
},
onSuccess: function(transport) {
this.currentResponse = eval('(' + transport.responseText + ')');
$('fakeImg').src = this.currentResponse.fileName;
Event.observe('fakeImg','load',this.onImageLoad);
},
onImageLoad: function(event) {
Event.stopObserving('fakeImg','load', this.onImageLoad);
$('image').src = this.currentResponse.fileName;
imageBox.hideIndicator();
resize.imageContainerResize.originalWidth = this.currentResponse.width;
resize.imageContainerResize.originalHeight = this.currentResponse.height;
$('imageContainer').style.height = this.currentResponse.height + 'px';
$('imageContainer').style.width = this.currentResponse.width + 'px';
$('image').style.height = this.currentResponse.height + 'px';
$('image').style.width = this.currentResponse.width + 'px';
imageHistory.add(this.currentOperation,$('image').src);
if(this.currentCallback != null) this.currentCallback();
} }
} }

2
javascript/ImageEditor/Resize.js
View File

@ -25,6 +25,7 @@ var Resize = {
EventStack.clearStack(); EventStack.clearStack();
if(this.imageContainerResize.isEnabled) { if(this.imageContainerResize.isEnabled) {
if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) { if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) {
$('imageContainer').style.backgroundImage = 'url("")';
imageTransformation.resize(imageElement.width,imageElement.height,Resize.resizeCallback.bind(this)); imageTransformation.resize(imageElement.width,imageElement.height,Resize.resizeCallback.bind(this));
effects.disableRotate(); effects.disableRotate();
crop.disable(); crop.disable();
@ -36,6 +37,7 @@ var Resize = {
}, },
resizeCallback: function() { resizeCallback: function() {
$('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")';
}, },
onDrag: function() onDrag: function()