From f436292174d952861984204220e5a8948ca81b8f Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Sat, 15 Sep 2007 01:26:36 +0000 Subject: [PATCH] mujma: Added support for large images (larger than browser window). (merged from branches/gsoc) git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41894 467b73ca-7a2a-4603-9d3b-597d59a354a9 --- code/ImageEditor.php | 8 +-- javascript/ImageEditor/.project | 11 ---- javascript/ImageEditor/Environment.js | 2 +- javascript/ImageEditor/Image.js | 51 ++++++++++++++++--- javascript/ImageEditor/ImageHistory.js | 6 +++ javascript/ImageEditor/ImageTransformation.js | 13 +++-- javascript/ImageEditor/Resize.js | 2 +- 7 files changed, 66 insertions(+), 27 deletions(-) delete mode 100644 javascript/ImageEditor/.project diff --git a/code/ImageEditor.php b/code/ImageEditor.php index ffecbc34..4c8704fb 100644 --- a/code/ImageEditor.php +++ b/code/ImageEditor.php @@ -38,7 +38,6 @@ if(!isset($this->requestParams['fileToEdit'])) $this->raiseError(); $fileWithPath = $this->requestParams['fileToEdit']; $this->fileToEdit = $this->file2Origin($fileWithPath); - return $this->renderWith(__CLASS__); } @@ -78,7 +77,7 @@ } $rand = md5(rand(1,100000)); $gd->writeTo('../assets/tmp/' . $rand . '.jpg'); - return $this->getImageInfoInJSON($gd,'../assets/tmp/' . $rand . '.jpg'); + return $this->getImageInfoInJSON($gd,'assets/tmp/' . $rand . '.jpg'); } /** @@ -181,7 +180,7 @@ if(strpos($url,'?') !== false) $url = substr($url,0,strpos($url,'?')); $pathInfo = pathinfo($url); if(count($pathInfo) < 3) $this->raiseError(); - if(!in_array($pathInfo['extension'],array('jpeg','jpg','jpe','png','gif'))) $this->raiseError(); + if(!in_array($pathInfo['extension'],array('jpeg','jpg','jpe','png','gif','JPEG','JPG','JPE','PNG','GIF'))) $this->raiseError(); $path = explode('/',$pathInfo['dirname']); if(count($path) > 1) { $assetId = array_search('assets',$path); @@ -195,7 +194,8 @@ } else { $this->raiseError(); } - if(file_exists($realPath)) { return true; + if(file_exists($realPath)) { + return true; } else { $this->raiseError(); } diff --git a/javascript/ImageEditor/.project b/javascript/ImageEditor/.project deleted file mode 100644 index 1e36a9d4..00000000 --- a/javascript/ImageEditor/.project +++ /dev/null @@ -1,11 +0,0 @@ - - - ImageEditor-SS - - - - - - - - diff --git a/javascript/ImageEditor/Environment.js b/javascript/ImageEditor/Environment.js index bc571303..84707fc0 100644 --- a/javascript/ImageEditor/Environment.js +++ b/javascript/ImageEditor/Environment.js @@ -4,6 +4,6 @@ var Environment = { initialize: function (imageFile) { imageBox = new ImageBox.initialize(); - imageToResize = new Image.initialize(imageFile); + imageToResize = new ImageToResize.initialize(imageFile); } } \ No newline at end of file diff --git a/javascript/ImageEditor/Image.js b/javascript/ImageEditor/Image.js index d0240c92..94f698cb 100644 --- a/javascript/ImageEditor/Image.js +++ b/javascript/ImageEditor/Image.js @@ -1,19 +1,27 @@ /** * @author Mateusz */ -var Image = { +var ImageToResize = { initialize: function(imageFile) { + Element.hide($('image')); this.image = $('image'); this.image.src = imageFile; - this.reportSize = Image.reportSize.bind(this); - this.onImageLoad = Image.onImageLoad.bind(this); + this.reportSize = ImageToResize.reportSize.bind(this); + this.onImageLoad = ImageToResize.onImageLoad.bind(this); + this.resizeOnFirstLoad = ImageToResize.resizeOnFirstLoad.bind(this); Event.observe(this.image,'load',this.onImageLoad); imageHistory.add('initialize',this.image.src); + }, - reportSize: function() { - $('imageWidth').innerHTML = this.image.width + "px"; - $('imageHeight').innerHTML = this.image.height + "px"; + reportSize: function(width,height) { + if(width != null && height != null) { + $('imageWidth').innerHTML = width + "px"; + $('imageHeight').innerHTML = height + "px"; + } else { + $('imageWidth').innerHTML = this.image.width + "px"; + $('imageHeight').innerHTML = this.image.height + "px"; + } }, onImageLoad: function(event) { @@ -22,9 +30,38 @@ var Image = { $('imageContainer').style.height = this.image.height + 'px'; 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()); - } + }, + + resizeOnFirstLoad: function() { + windowWidth = Element.getDimensions($('mainContainer')).width; + windowHeight = Element.getDimensions($('mainContainer')).height; + imageWidth = Element.getDimensions(this.image).width; + imageHeight= Element.getDimensions(this.image).height; + if(imageWidth > windowWidth || imageHeight > windowHeight) { + ratio = imageWidth / imageHeight; + if(imageWidth > imageHeight) { + newWidth = windowWidth - windowWidth/1.75; + newHeight = newWidth * (1/ratio); + } else { + newHeight = windowHeight - windowHeight/1.75; + newWidth = newHeight * ratio; + } + this.reportSize(0,0); + imageHistory.clear(); + imageTransformation.resize(newWidth,newHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this)); + } else { + if(imageWidth != 0 && imageHeight != 0) Element.show($('image')); + } + }, + + resizeOnFirstLoadCallBack: function() { + imageBox.center(); + Element.show($('image')); + resize.imageContainerResize.setVisible(true); + } }; diff --git a/javascript/ImageEditor/ImageHistory.js b/javascript/ImageEditor/ImageHistory.js index 5551aa9a..b391b36c 100644 --- a/javascript/ImageEditor/ImageHistory.js +++ b/javascript/ImageEditor/ImageHistory.js @@ -16,6 +16,7 @@ ImageHistory = { this.onFakeImageLoad = ImageHistory.onFakeImageLoad.bind(this); this.enable = ImageHistory.enable.bind(this); this.disable = ImageHistory.disable.bind(this); + this.clear = ImageHistory.clear.bind(this); }, undo: function() { @@ -88,5 +89,10 @@ ImageHistory = { disable: function() { Event.stopObserving($('undoButton'),'click', this.undo); Event.stopObserving($('redoButton'),'click', this.redo); + }, + + clear: function() { + this.history = new Array(); + this.historyPointer = -1; } }; \ No newline at end of file diff --git a/javascript/ImageEditor/ImageTransformation.js b/javascript/ImageEditor/ImageTransformation.js index 4b6f02be..92d3bd24 100644 --- a/javascript/ImageEditor/ImageTransformation.js +++ b/javascript/ImageEditor/ImageTransformation.js @@ -10,7 +10,7 @@ var ImageTransformation = { this.close = ImageTransformation.close.bind(this); }, - resize: function(width,height) { + resize: function(width,height,callback) { if(imageHistory.modifiedOriginalImage) { fileToResize = $('image').src; } else { @@ -23,7 +23,14 @@ var ImageTransformation = { imageBox.hideIndicator(); response = eval('(' + transport.responseText + ')'); $('image').src = response.fileName; - imageHistory.add('resize',$('image').src); + $('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(); + } } }; imageBox.showIndicator(); @@ -69,7 +76,7 @@ var ImageTransformation = { } }; imageBox.showIndicator(); - new Ajax.Request('/admin/ImageEditor/manipulate', options); + new Ajax.Request('admin/ImageEditor/manipulate', options); }, save: function(originalFile,editedFile) { diff --git a/javascript/ImageEditor/Resize.js b/javascript/ImageEditor/Resize.js index 27f6a9a9..e6d83f9b 100644 --- a/javascript/ImageEditor/Resize.js +++ b/javascript/ImageEditor/Resize.js @@ -16,7 +16,7 @@ var Resize = { }; new Positioning.addBehaviour(this.element); this.imageContainerResize = new Resizeable.initialize(element,options); - this.imageContainerResize.setVisible(true); + this.imageContainerResize.setVisible(false); }, resizeStop: function(event) {