From c3988b53f240f243f12bc5a2de2e7641ef825e63 Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Sat, 15 Sep 2007 20:53:26 +0000 Subject: [PATCH] mujma: BUGIX: From now should work properly on servers with low bandwidth . (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 --- javascript/ImageEditor/Image.js | 24 +++++---- javascript/ImageEditor/ImageBox.js | 50 +++++++++---------- javascript/ImageEditor/ImageEditor.js | 26 ++++++---- javascript/ImageEditor/ImageTransformation.js | 11 ++-- javascript/ImageEditor/Utils.js | 1 + 5 files changed, 61 insertions(+), 51 deletions(-) diff --git a/javascript/ImageEditor/Image.js b/javascript/ImageEditor/Image.js index 921f14aa..7320bc71 100644 --- a/javascript/ImageEditor/Image.js +++ b/javascript/ImageEditor/Image.js @@ -25,16 +25,19 @@ var ImageToResize = { }, onImageLoad: function(event) { - this.reportSize(); - $('imageContainer').style.width = this.image.width + 'px'; - $('imageContainer').style.height = this.image.height + 'px'; - if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) { - imageBox.center(); - this.resizeOnFirstLoad(); + if(this.image.width != 0 && this.image.height != 0) { + this.reportSize(); + $('imageContainer').style.width = this.image.width + 'px'; + $('imageContainer').style.height = this.image.height + 'px'; + imageBox.hideIndicator(); + if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) { + imageBox.center(); + this.resizeOnFirstLoad(); + } + resize.imageContainerResize.originalWidth = this.image.width; + resize.imageContainerResize.originalHeight = this.image.height; + imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight()); } - resize.imageContainerResize.originalWidth = this.image.width; - resize.imageContainerResize.originalHeight = this.image.height; - imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight()); }, resizeOnFirstLoad: function() { @@ -50,6 +53,8 @@ var ImageToResize = { } this.reportSize(0,0); imageHistory.clear(); + imageBox.showIndicator(); + resize.imageContainerResize.setVisible(false); imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this)); } else { if(imageWidth != 0 && imageHeight != 0) Element.show($('image')); @@ -60,5 +65,6 @@ var ImageToResize = { imageBox.center(); Element.show($('image')); resize.imageContainerResize.setVisible(true); + imageBox.hideIndicator(); } }; diff --git a/javascript/ImageEditor/ImageBox.js b/javascript/ImageEditor/ImageBox.js index def4e072..80fd5276 100644 --- a/javascript/ImageEditor/ImageBox.js +++ b/javascript/ImageEditor/ImageBox.js @@ -10,41 +10,43 @@ var ImageBox = { this.centerIndicator = ImageBox.centerIndicator.bind(this); this.checkOutOfDrawingArea = ImageBox.checkOutOfDrawingArea.bind(this); this.center = ImageBox.center.bind(this); - this.imageContainer = $('imageContainer'); - Element.hide(this.imageContainer); + this.imageContainer = Positioning.addBehaviour($('imageContainer')); + Element.hide(this.imageContainer); + this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer')); + this.indicatorImage = Positioning.addBehaviour($('loadingIndicator')); + this.showIndicator(Positioning.addBehaviour($('mainContainer'))); }, - showIndicator: function() { - this.centerIndicator(); - indicator.style.display = 'inline'; + showIndicator: function(container) { + if(container == null) container = this.imageContainer; + this.centerIndicator(container); + this.indicator.style.display = 'inline'; }, hideIndicator: function() { - Element.hide($('loadingIndicatorContainer')); + Element.hide(this.indicator); }, - centerIndicator: function() { - indicator = $('loadingIndicatorContainer'); - indicatorImage = $('loadingIndicator'); - var top = this.imageContainer.getTop(); - var left = this.imageContainer.getLeft(); - var width = this.imageContainer.getWidth(); - var height = this.imageContainer.getHeight(); - var parentTop = this.imageContainer.getParentTop(); - var parentLeft = this.imageContainer.getParentLeft(); - indicator.style.left = parentLeft + left + width/2 - indicatorImage.width/2 + 2 + "px"; - indicator.style.top = parentTop + top + height/2 - indicatorImage.height/2 + 2 + "px"; + centerIndicator: function(container) { + var top = container.getTop(); + var left = container.getLeft(); + var width = container.getWidth(); + var height = container.getHeight(); + var parentTop = container.getParentTop(); + var parentLeft = container.getParentLeft(); + this.indicator.style.left = parentLeft + left + width/2 - this.indicatorImage.width/2 + 2 + "px"; + this.indicator.style.top = parentTop + top + height/2 - this.indicatorImage.height/2 + 2 + "px"; }, reCenterIndicator: function() { - if($('loadingIndicatorContainer').style.display == 'inline') { - this.centerIndicator(); + if(this.indicator.style.display == 'inline') { + this.centerIndicator(this.imageContainer); } }, center: function() { - $('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.left = this.imageContainer.getParentWidth()/2 - this.imageContainer.getWidth()/2 + 'px'; + this.imageContainer.style.top = this.imageContainer.getParentHeight()/2 - this.imageContainer.getHeight()/2 + 'px'; Element.show(this.imageContainer); }, @@ -56,12 +58,10 @@ var ImageBox = { var parentWidth = this.imageContainer.getParentWidth(); var parentHeight = this.imageContainer.getParentHeight(); 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) { - $('imageContainer').style.top = top - (top + height - parentHeight) - 3 + 'px'; + this.imageContainer.style.top = top - (top + height - parentHeight) - 3 + 'px'; } } - - }; diff --git a/javascript/ImageEditor/ImageEditor.js b/javascript/ImageEditor/ImageEditor.js index a849f5f5..c8d83825 100644 --- a/javascript/ImageEditor/ImageEditor.js +++ b/javascript/ImageEditor/ImageEditor.js @@ -14,25 +14,29 @@ var ImageEditor = { crop = new Crop.initialize(); this.originalImageFile = imageFile; this.tottalyOriginalImageFile = imageFile; - this.onSave = ImageEditor.onSave.bind(this); - this.onClose = ImageEditor.onClose.bind(this); - Event.observe($('saveButton'),'click',this.onSave); - Event.observe($('closeButton'),'click',this.onClose); + this.onSaveClick = ImageEditor.onSaveClick.bind(this); + this.onCloseClick = ImageEditor.onCloseClick.bind(this); + Event.observe($('saveButton'),'click',this.onSaveClick); + Event.observe($('closeButton'),'click',this.onCloseClick); imageToResize.onImageLoad(); resize.imageContainerResize.placeClickBox(); }, - onSave: function() { + onSaveClick: function() { if(this.tottalyOriginalImageFile != $('image').src) { - imageTransformation.save(this.tottalyOriginalImageFile,$('image').src); + imageTransformation.save(this.tottalyOriginalImageFile,$('image').src,this.onCloseClick); } else { - this.onClose(); + this.onCloseClick(); } }, - onClose: function() { + onCloseClick: function() { window.parent.frames[1].location.reload(1); - Element.hide(window.frameElement); - imageTransformation.close(); - } + imageTransformation.close(ImageEditor.onCloseCallback.bind(this)); + }, + + onCloseCallback: function() { + Element.hide(window.frameElement); + } + } diff --git a/javascript/ImageEditor/ImageTransformation.js b/javascript/ImageEditor/ImageTransformation.js index 74447b19..5785dc7a 100644 --- a/javascript/ImageEditor/ImageTransformation.js +++ b/javascript/ImageEditor/ImageTransformation.js @@ -28,9 +28,7 @@ var ImageTransformation = { $('imageContainer').style.width = response.width + 'px'; $('imageContainer').style.height = response.height + 'px'; imageHistory.add('resize',$('image').src); - if(callback != null) { - callback(); - } + if(callback != null) callback(); } }; imageBox.showIndicator(); @@ -81,24 +79,25 @@ var ImageTransformation = { new Ajax.Request('admin/ImageEditor/manipulate', options); }, - save: function(originalFile,editedFile) { + save: function(originalFile,editedFile,callback) { var options = { method: 'post', postBody: 'command=save&editedFile=' + editedFile + '&originalFile=' + originalFile, onSuccess: function(transport) { eval(transport.responseText); - imageEditor.onClose(); + callback(); } }; new Ajax.Request('admin/ImageEditor/save', options); }, - close: function() { + close: function(callback) { var options = { method: 'post', postBody: '', onSuccess: function(transport) { eval(transport.responseText); + callback(); } }; new Ajax.Request('admin/ImageEditor/close', options); diff --git a/javascript/ImageEditor/Utils.js b/javascript/ImageEditor/Utils.js index a8360b5c..8387415d 100644 --- a/javascript/ImageEditor/Utils.js +++ b/javascript/ImageEditor/Utils.js @@ -34,6 +34,7 @@ Positioning = { this.element.getParentTop = Positioning.getParentTop.bind(this); this.element.getParentHeight = Positioning.getParentHeight.bind(this); this.element.getParentWidth = Positioning.getParentWidth.bind(this); + return this.element; }, getTop: function() {