From cad57b11ec851432e5537f7da38cc44d28a20aae Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Sat, 15 Sep 2007 20:54:37 +0000 Subject: [PATCH] mujma: Added support for IE6. (merged from branches/gsoc) git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41931 467b73ca-7a2a-4603-9d3b-597d59a354a9 --- css/ImageEditor/ImageEditor.css | 10 ++- javascript/ImageEditor/Crop.js | 47 +++++++---- javascript/ImageEditor/Effects.js | 19 +++-- javascript/ImageEditor/Image.js | 81 ++++++++++--------- javascript/ImageEditor/ImageBox.js | 3 +- javascript/ImageEditor/ImageEditor.js | 3 +- javascript/ImageEditor/ImageHistory.js | 67 +++++++++------ javascript/ImageEditor/ImageTransformation.js | 10 ++- javascript/ImageEditor/Resize.js | 17 ++-- javascript/ImageEditor/Resizeable.js | 16 ++-- templates/ImageEditor.ss | 1 + 11 files changed, 160 insertions(+), 114 deletions(-) diff --git a/css/ImageEditor/ImageEditor.css b/css/ImageEditor/ImageEditor.css index 954f920f..8cb2da20 100644 --- a/css/ImageEditor/ImageEditor.css +++ b/css/ImageEditor/ImageEditor.css @@ -90,6 +90,8 @@ #cropBox { position: absolute; + background-image: url("cms/images/ImageEditor/white.gif"); + display: inline; } .greyBox { @@ -97,6 +99,12 @@ position: absolute; opacity: .5; filter: alpha(opacity=50); + overflow:hidden; +} +body +{ + height: 100%; + width: 100%; } #mainContainer { @@ -104,7 +112,7 @@ border-color: black; border-style: solid; height: 40%; - width: 100%; + width: 98%; left: 1%; top: 1%; background-color: white; diff --git a/javascript/ImageEditor/Crop.js b/javascript/ImageEditor/Crop.js index ff5e1860..8ac167a1 100644 --- a/javascript/ImageEditor/Crop.js +++ b/javascript/ImageEditor/Crop.js @@ -22,6 +22,7 @@ var Crop = { this.setVisible = Crop.setVisible.bind(this); this.enable = Crop.enable.bind(this); this.disable = Crop.disable.bind(this); + this.onImageLoadCallback = Crop.onImageLoadCallback.bind(this); Event.observe('image','load',this.centerCropBox); options = { resizeStop: Crop.resizeStop.bind(this), @@ -32,14 +33,17 @@ var Crop = { this.resizeCropBox = new Resizeable.initialize(this.cropBox,options); Event.observe(this.cropBox,'dblclick',this.onCropStop.bind(this)); this.setListeners(); - this.setVisible(false); + this.isVisible = false; + this.setVisible(this.isVisible); this.isEnabled = true; }, resizeStop: function(event) { - EventStack.clearStack(); - this.resizeCropBox.originalHeight = this.cropBox.getHeight(); - this.resizeCropBox.originalWidth = this.cropBox.getWidth(); + if(this.isVisible) { + EventStack.clearStack(); + this.resizeCropBox.originalHeight = this.cropBox.getHeight(); + this.resizeCropBox.originalWidth = this.cropBox.getWidth(); + } }, onDrag: function(event) { @@ -63,18 +67,21 @@ var Crop = { }, placeGreyBox: function(width,height) { - this.lowerGreyBox.style.left = this.cropBox.getLeft() + 'px'; - this.lowerGreyBox.style.width = width + 'px'; - this.lowerGreyBox.style.height = this.cropBox.getParentHeight() - this.cropBox.getTop() - height + "px"; - this.lowerGreyBox.style.top = this.cropBox.getTop() + height + "px"; - this.leftGreyBox.style.width = this.cropBox.getLeft() + "px"; - this.leftGreyBox.style.height = $('imageContainer').getHeight() + 'px'; - this.rightGreyBox.style.width = this.cropBox.getParentWidth() - this.cropBox.getLeft() - width + "px"; - this.rightGreyBox.style.height = $('imageContainer').getHeight() + 'px'; - this.rightGreyBox.style.left = this.cropBox.getLeft() + width + "px"; - this.upperGreyBox.style.width = width + 'px'; - this.upperGreyBox.style.left = this.cropBox.getLeft() + 'px'; - this.upperGreyBox.style.height = this.cropBox.getTop() + 'px'; + if(this.isVisible) { + this.lowerGreyBox.style.left = this.cropBox.getLeft() + 'px'; + this.lowerGreyBox.style.width = width + 'px'; + this.lowerGreyBox.style.height = this.cropBox.getParentHeight() - this.cropBox.getTop() - height + "px"; + this.lowerGreyBox.style.top = this.cropBox.getTop() + height + "px"; + this.leftGreyBox.style.width = this.cropBox.getLeft() + "px"; + this.leftGreyBox.style.height = $('imageContainer').getHeight() + 'px'; + this.rightGreyBox.style.width = this.cropBox.getParentWidth() - this.cropBox.getLeft() - width + "px"; + this.rightGreyBox.style.height = $('imageContainer').getHeight() + 'px'; + this.rightGreyBox.style.left = this.cropBox.getLeft() + width + "px"; + this.upperGreyBox.style.width = width + 'px'; + this.upperGreyBox.style.left = this.cropBox.getLeft() + 'px'; + this.upperGreyBox.style.height = this.cropBox.getTop() + 'px'; + this.resizeCropBox.placeClickBox(); + } }, onResize: function(width,height) { @@ -112,6 +119,7 @@ var Crop = { }, cropCallback: function() { + this.resizeCropBox.placeClickBox(); effects.enableRotate(); this.enable(); @@ -129,6 +137,7 @@ var Crop = { Element.show($('cropOk'),$('cropCancel')); imageHistory.disable(); effects.disableRotate(); + this.enable(); } }, @@ -146,10 +155,12 @@ var Crop = { this.setVisible(false); imageHistory.enable(); effects.enableRotate(); + this.enable(); } }, setVisible: function(setVisible) { + this.isVisible = setVisible; if(setVisible) { Element.show(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox); this.centerCropBox(); @@ -167,6 +178,10 @@ var Crop = { disable: function() { this.isEnabled = false; + }, + + onImageLoadCallback: function() { + crop.setVisible(false); } } \ No newline at end of file diff --git a/javascript/ImageEditor/Effects.js b/javascript/ImageEditor/Effects.js index d448046e..bdbca4c9 100644 --- a/javascript/ImageEditor/Effects.js +++ b/javascript/ImageEditor/Effects.js @@ -13,16 +13,23 @@ var Effects = { rotate: function() { if(this.isRotateEnabled) { - resize.imageContainerResize.disable(); - crop.disable(); - imageTransformation.rotate(90,Effects.rotateCallback.bind(this)); - this.isRotateEnabled = false; + var windowWidth = Element.getDimensions($('mainContainer')).width; + var windowHeight = Element.getDimensions($('mainContainer')).height - 100; + var imageWidth = Element.getDimensions($('image')).height; + var imageHeight = Element.getDimensions($('image')).width; + if(imageWidth > windowWidth - 30 || imageHeight > windowHeight - 30) { + alert('Image to big to rotate'); + } else { + resize.imageContainerResize.disable(); + crop.disable(); + imageTransformation.rotate(90,Effects.rotateCallback.bind(this)); + this.isRotateEnabled = false; + } } }, rotateCallback: function() { - resize.imageContainerResize.enable(); - crop.enable(); + resize.imageContainerResize.placeClickBox(); this.isRotateEnabled = true; }, diff --git a/javascript/ImageEditor/Image.js b/javascript/ImageEditor/Image.js index 7320bc71..92b623d0 100644 --- a/javascript/ImageEditor/Image.js +++ b/javascript/ImageEditor/Image.js @@ -1,70 +1,73 @@ /** * @author Mateusz - */ + */ var ImageToResize = { initialize: function(imageFile) { Element.hide($('image')); - this.image = $('image'); - this.image.src = imageFile; + this.imageToResize = $('image'); + this.imageToResize.src = imageFile; 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); - + Event.observe(this.imageToResize,'load',this.onImageLoad); }, - + 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) { - 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()); + $('imageWidth').innerHTML = this.imageToResize.width + "px"; + $('imageHeight').innerHTML = this.imageToResize.height + "px"; } }, - resizeOnFirstLoad: function() { - windowWidth = Element.getDimensions($('mainContainer')).width; - windowHeight = Element.getDimensions($('mainContainer')).height - 100; - imageWidth = Element.getDimensions(this.image).width; - imageHeight= Element.getDimensions(this.image).height; + onImageLoad: function(event) { + if(this.imageToResize.width != 0 && this.imageToResize.height != 0) { + //$('imageContainer').style.width = this.imageToResize.width + 'px'; + //$('imageContainer').style.height = this.imageToResize.height + 'px'; + imageBox.hideIndicator(); + Element.show($('imageContainer'),$('image')); + if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) { + imageHistory.add('initialize',$('image').src); + this.resizeOnFirstLoad(); + imageBox.center(); + } + resize.imageContainerResize.originalWidth = this.imageToResize.width; + resize.imageContainerResize.originalHeight = this.imageToResize.height; + resize.imageContainerResize.placeClickBox(); + imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight()); + crop.onImageLoadCallback(); + crop.enable(); + resize.imageContainerResize.enable(); + effects.enableRotate(); + } + this.reportSize(); + }, + + resizeOnFirstLoad: function() { + var windowWidth = Element.getDimensions($('mainContainer')).width; + var windowHeight = Element.getDimensions($('mainContainer')).height - 100; + var imageWidth = Element.getDimensions($('image')).width; + var imageHeight = Element.getDimensions($('image')).height; if(imageWidth > windowWidth - 120 || imageHeight > windowHeight - 120) { - ratio = imageWidth / imageHeight; + imageHistory.clear(); + Element.hide($('imageContainer'),$('image')); + ratio = imageWidth / imageHeight; while(imageWidth > windowWidth - 120 || imageHeight > windowHeight - 120) { imageWidth--; imageHeight = imageWidth * (1/ratio); } 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')); + imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this),false); } }, resizeOnFirstLoadCallBack: function() { - imageBox.center(); - Element.show($('image')); + Element.hide($('imageContainer'),$('image')); resize.imageContainerResize.setVisible(true); - imageBox.hideIndicator(); + resize.imageContainerResize.placeClickBox(); + imageBox.center(); } }; diff --git a/javascript/ImageEditor/ImageBox.js b/javascript/ImageEditor/ImageBox.js index 80fd5276..a414fb65 100644 --- a/javascript/ImageEditor/ImageBox.js +++ b/javascript/ImageEditor/ImageBox.js @@ -14,7 +14,7 @@ var ImageBox = { Element.hide(this.imageContainer); this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer')); this.indicatorImage = Positioning.addBehaviour($('loadingIndicator')); - this.showIndicator(Positioning.addBehaviour($('mainContainer'))); + Positioning.addBehaviour($('mainContainer')); }, showIndicator: function(container) { @@ -47,7 +47,6 @@ var ImageBox = { center: function() { 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); }, checkOutOfDrawingArea: function(width,height) { diff --git a/javascript/ImageEditor/ImageEditor.js b/javascript/ImageEditor/ImageEditor.js index c8d83825..575bb862 100644 --- a/javascript/ImageEditor/ImageEditor.js +++ b/javascript/ImageEditor/ImageEditor.js @@ -18,8 +18,6 @@ var ImageEditor = { this.onCloseClick = ImageEditor.onCloseClick.bind(this); Event.observe($('saveButton'),'click',this.onSaveClick); Event.observe($('closeButton'),'click',this.onCloseClick); - imageToResize.onImageLoad(); - resize.imageContainerResize.placeClickBox(); }, onSaveClick: function() { if(this.tottalyOriginalImageFile != $('image').src) { @@ -30,6 +28,7 @@ var ImageEditor = { }, onCloseClick: function() { + window.parent.frames[0].location.reload(1); window.parent.frames[1].location.reload(1); imageTransformation.close(ImageEditor.onCloseCallback.bind(this)); }, diff --git a/javascript/ImageEditor/ImageHistory.js b/javascript/ImageEditor/ImageHistory.js index b391b36c..d6f82769 100644 --- a/javascript/ImageEditor/ImageHistory.js +++ b/javascript/ImageEditor/ImageHistory.js @@ -13,24 +13,32 @@ ImageHistory = { this.addLinsteners = ImageHistory.addLinsteners.bind(this); this.addLinsteners(); this.operationMade = ImageHistory.operationMade.bind(this); - this.onFakeImageLoad = ImageHistory.onFakeImageLoad.bind(this); + this.isInHistory = ImageHistory.isInHistory.bind(this); + this.enable = ImageHistory.enable.bind(this); this.disable = ImageHistory.disable.bind(this); this.clear = ImageHistory.clear.bind(this); + this.fakeImage = Positioning.addBehaviour($('fakeImg')); + this.image = Positioning.addBehaviour($('image')); + this.size = new Array(); }, undo: function() { if(this.historyPointer >= 1) { - image = $('image'); - fakeImage = $('fakeImg'); operation = this.history[this.historyPointer].operation; if(operation == 'rotate' || operation == 'crop') { if(this.operationMade(this.historyPointer-1,'rotate') || this.operationMade(this.historyPointer-1,'crop')) this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false; } - image.src = this.history[this.historyPointer-1].fileUrl; - fakeImage.src = this.history[this.historyPointer-1].fileUrl; - Event.observe('fakeImg','load',this.onFakeImageLoad); + 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--; } else { alert("No more undo"); @@ -41,9 +49,15 @@ ImageHistory = { if(this.historyPointer < this.history.length-1) { operation = this.history[this.historyPointer+1].operation; if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true; - $('image').src = this.history[this.historyPointer+1].fileUrl; - $('fakeImg').src = $('image').src; - Event.observe('fakeImg','load',this.onFakeImageLoad); + 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++; } else { alert("No more redo"); @@ -51,9 +65,15 @@ ImageHistory = { }, add: function(operation,url) { - this.historyPointer++; - this.history[this.historyPointer] = {'operation': operation,'fileUrl' : url}; - if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true; + var imageWidth = isNaN(parseInt($('image').style.width)) ? Element.getDimensions($('image')).width : parseInt($('image').style.width);//IE hack + var imageHeight = isNaN(parseInt($('image').style.height)) ? Element.getDimensions($('image')).height : parseInt($('image').style.height);//IE hack + //code above should be moved to Positioning.addBehaviour + if(!this.isInHistory(operation,url)) { + this.historyPointer++; + this.size[this.historyPointer] = {'width': imageWidth,'height': imageHeight}; + this.history[this.historyPointer] = {'operation': operation,'fileUrl' : url}; + if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true; + } }, addLinsteners: function() { @@ -70,18 +90,6 @@ ImageHistory = { return false; }, - onFakeImageLoad: function() { - imageBox.checkOutOfDrawingArea(fakeImage.width,fakeImage.height); - $('image').style.width = fakeImage.width + 'px'; - $('image').style.height = fakeImage.height + 'px'; - $('imageContainer').style.width = fakeImage.width + 'px'; - $('imageContainer').style.height = fakeImage.height + 'px'; - resize.imageContainerResize.originalWidth = fakeImage.width; - resize.imageContainerResize.originalHeight = fakeImage.height; - resize.imageContainerResize.placeClickBox(); - imageToResize.onImageLoad(); - }, - enable: function() { this.addLinsteners(); }, @@ -94,5 +102,16 @@ ImageHistory = { clear: function() { this.history = new Array(); this.historyPointer = -1; + this.size = new Array(); + }, + + isInHistory: function(operation,url) { + if(operation == 'initialize' && this.historyPointer != -1) return true; + for(var k=0;k
+