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: BUGIX: From now should work properly on servers with low bandwidth .

Browse Source 
(merged from branches/gsocmujma: BUGIX: From now should work properly on servers with low bandwidth . 
(merged from branches/gsoc))


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41930 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-15 20:53:26 +00:00
parent 35bf8b58ae
commit c3988b53f2
5 changed files with 61 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
javascript/ImageEditor/Image.js
View File

@ -25,9 +25,11 @@ var ImageToResize = {
}, },
onImageLoad: function(event) { onImageLoad: function(event) {
if(this.image.width != 0 && this.image.height != 0) {
this.reportSize(); this.reportSize();
$('imageContainer').style.width = this.image.width + 'px'; $('imageContainer').style.width = this.image.width + 'px';
$('imageContainer').style.height = this.image.height + 'px'; $('imageContainer').style.height = this.image.height + 'px';
imageBox.hideIndicator();
if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) { if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) {
imageBox.center(); imageBox.center();
this.resizeOnFirstLoad(); this.resizeOnFirstLoad();
@ -35,6 +37,7 @@ var ImageToResize = {
resize.imageContainerResize.originalWidth = this.image.width; resize.imageContainerResize.originalWidth = this.image.width;
resize.imageContainerResize.originalHeight = this.image.height; resize.imageContainerResize.originalHeight = this.image.height;
imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight()); imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight());
}
}, },
resizeOnFirstLoad: function() { resizeOnFirstLoad: function() {
@ -50,6 +53,8 @@ var ImageToResize = {
} }
this.reportSize(0,0); this.reportSize(0,0);
imageHistory.clear(); imageHistory.clear();
imageBox.showIndicator();
resize.imageContainerResize.setVisible(false);
imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this)); imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this));
} else { } else {
if(imageWidth != 0 && imageHeight != 0) Element.show($('image')); if(imageWidth != 0 && imageHeight != 0) Element.show($('image'));
@ -60,5 +65,6 @@ var ImageToResize = {
imageBox.center(); imageBox.center();
Element.show($('image')); Element.show($('image'));
resize.imageContainerResize.setVisible(true); resize.imageContainerResize.setVisible(true);
imageBox.hideIndicator();
} }
}; };

48
javascript/ImageEditor/ImageBox.js
View File

@ -10,41 +10,43 @@ var ImageBox = {
this.centerIndicator = ImageBox.centerIndicator.bind(this); this.centerIndicator = ImageBox.centerIndicator.bind(this);
this.checkOutOfDrawingArea = ImageBox.checkOutOfDrawingArea.bind(this); this.checkOutOfDrawingArea = ImageBox.checkOutOfDrawingArea.bind(this);
this.center = ImageBox.center.bind(this); this.center = ImageBox.center.bind(this);
this.imageContainer = $('imageContainer'); this.imageContainer = Positioning.addBehaviour($('imageContainer'));
Element.hide(this.imageContainer); Element.hide(this.imageContainer);
this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer'));
this.indicatorImage = Positioning.addBehaviour($('loadingIndicator'));
this.showIndicator(Positioning.addBehaviour($('mainContainer')));
}, },
showIndicator: function() { showIndicator: function(container) {
this.centerIndicator(); if(container == null) container = this.imageContainer;
indicator.style.display = 'inline'; this.centerIndicator(container);
this.indicator.style.display = 'inline';
}, },
hideIndicator: function() { hideIndicator: function() {
Element.hide($('loadingIndicatorContainer')); Element.hide(this.indicator);
}, },
centerIndicator: function() { centerIndicator: function(container) {
indicator = $('loadingIndicatorContainer'); var top = container.getTop();
indicatorImage = $('loadingIndicator'); var left = container.getLeft();
var top = this.imageContainer.getTop(); var width = container.getWidth();
var left = this.imageContainer.getLeft(); var height = container.getHeight();
var width = this.imageContainer.getWidth(); var parentTop = container.getParentTop();
var height = this.imageContainer.getHeight(); var parentLeft = container.getParentLeft();
var parentTop = this.imageContainer.getParentTop(); this.indicator.style.left = parentLeft + left + width/2 - this.indicatorImage.width/2 + 2 + "px";
var parentLeft = this.imageContainer.getParentLeft(); this.indicator.style.top = parentTop + top + height/2 - this.indicatorImage.height/2 + 2 + "px";
indicator.style.left = parentLeft + left + width/2 - indicatorImage.width/2 + 2 + "px";
indicator.style.top = parentTop + top + height/2 - indicatorImage.height/2 + 2 + "px";
}, },
reCenterIndicator: function() { reCenterIndicator: function() {
if($('loadingIndicatorContainer').style.display == 'inline') { if(this.indicator.style.display == 'inline') {
this.centerIndicator(); this.centerIndicator(this.imageContainer);
} }
}, },
center: function() { center: function() {
$('imageContainer').style.left = this.imageContainer.getParentWidth()/2 - this.imageContainer.getWidth()/2 + 'px'; this.imageContainer.style.left = this.imageContainer.getParentWidth()/2 - this.imageContainer.getWidth()/2 + 'px';
$('imageContainer').style.top = this.imageContainer.getParentHeight()/2 - this.imageContainer.getHeight()/2 + 'px'; this.imageContainer.style.top = this.imageContainer.getParentHeight()/2 - this.imageContainer.getHeight()/2 + 'px';
Element.show(this.imageContainer); Element.show(this.imageContainer);
}, },
@ -56,12 +58,10 @@ var ImageBox = {
var parentWidth = this.imageContainer.getParentWidth(); var parentWidth = this.imageContainer.getParentWidth();
var parentHeight = this.imageContainer.getParentHeight(); var parentHeight = this.imageContainer.getParentHeight();
if(left + width > parentWidth) { if(left + width > parentWidth) {
$('imageContainer').style.left = left - (left + width - parentWidth) - 3+ 'px'; this.imageContainer.style.left = left - (left + width - parentWidth) - 3+ 'px';
} }
if(top + height > parentHeight) { if(top + height > parentHeight) {
$('imageContainer').style.top = top - (top + height - parentHeight) - 3 + 'px'; this.imageContainer.style.top = top - (top + height - parentHeight) - 3 + 'px';
} }
} }
}; };

24
javascript/ImageEditor/ImageEditor.js
View File

@ -14,25 +14,29 @@ var ImageEditor = {
crop = new Crop.initialize(); crop = new Crop.initialize();
this.originalImageFile = imageFile; this.originalImageFile = imageFile;
this.tottalyOriginalImageFile = imageFile; this.tottalyOriginalImageFile = imageFile;
this.onSave = ImageEditor.onSave.bind(this); this.onSaveClick = ImageEditor.onSaveClick.bind(this);
this.onClose = ImageEditor.onClose.bind(this); this.onCloseClick = ImageEditor.onCloseClick.bind(this);
Event.observe($('saveButton'),'click',this.onSave); Event.observe($('saveButton'),'click',this.onSaveClick);
Event.observe($('closeButton'),'click',this.onClose); Event.observe($('closeButton'),'click',this.onCloseClick);
imageToResize.onImageLoad(); imageToResize.onImageLoad();
resize.imageContainerResize.placeClickBox(); resize.imageContainerResize.placeClickBox();
}, },
onSave: function() { onSaveClick: function() {
if(this.tottalyOriginalImageFile != $('image').src) { if(this.tottalyOriginalImageFile != $('image').src) {
imageTransformation.save(this.tottalyOriginalImageFile,$('image').src); imageTransformation.save(this.tottalyOriginalImageFile,$('image').src,this.onCloseClick);
} else { } else {
this.onClose(); this.onCloseClick();
} }
}, },
onClose: function() { onCloseClick: function() {
window.parent.frames[1].location.reload(1); window.parent.frames[1].location.reload(1);
imageTransformation.close(ImageEditor.onCloseCallback.bind(this));
},
onCloseCallback: function() {
Element.hide(window.frameElement); Element.hide(window.frameElement);
imageTransformation.close(); }
}
} }

11
javascript/ImageEditor/ImageTransformation.js
View File

@ -28,9 +28,7 @@ var ImageTransformation = {
$('imageContainer').style.width = response.width + 'px'; $('imageContainer').style.width = response.width + 'px';
$('imageContainer').style.height = response.height + 'px'; $('imageContainer').style.height = response.height + 'px';
imageHistory.add('resize',$('image').src); imageHistory.add('resize',$('image').src);
if(callback != null) { if(callback != null) callback();
callback();
}
} }
}; };
imageBox.showIndicator(); imageBox.showIndicator();
@ -81,24 +79,25 @@ var ImageTransformation = {
new Ajax.Request('admin/ImageEditor/manipulate', options); new Ajax.Request('admin/ImageEditor/manipulate', options);
}, },
save: function(originalFile,editedFile) { save: function(originalFile,editedFile,callback) {
var options = { var options = {
method: 'post', method: 'post',
postBody: 'command=save&editedFile=' + editedFile + '&originalFile=' + originalFile, postBody: 'command=save&editedFile=' + editedFile + '&originalFile=' + originalFile,
onSuccess: function(transport) { onSuccess: function(transport) {
eval(transport.responseText); eval(transport.responseText);
imageEditor.onClose(); callback();
} }
}; };
new Ajax.Request('admin/ImageEditor/save', options); new Ajax.Request('admin/ImageEditor/save', options);
}, },
close: function() { close: function(callback) {
var options = { var options = {
method: 'post', method: 'post',
postBody: '', postBody: '',
onSuccess: function(transport) { onSuccess: function(transport) {
eval(transport.responseText); eval(transport.responseText);
callback();
} }
}; };
new Ajax.Request('admin/ImageEditor/close', options); new Ajax.Request('admin/ImageEditor/close', options);

1
javascript/ImageEditor/Utils.js
View File

@ -34,6 +34,7 @@ Positioning = {
this.element.getParentTop = Positioning.getParentTop.bind(this); this.element.getParentTop = Positioning.getParentTop.bind(this);
this.element.getParentHeight = Positioning.getParentHeight.bind(this); this.element.getParentHeight = Positioning.getParentHeight.bind(this);
this.element.getParentWidth = Positioning.getParentWidth.bind(this); this.element.getParentWidth = Positioning.getParentWidth.bind(this);
return this.element;
}, },
getTop: function() { getTop: function() {