diff --git a/code/AssetTableField.php b/code/AssetTableField.php index f8169ecf..269168f7 100755 --- a/code/AssetTableField.php +++ b/code/AssetTableField.php @@ -12,6 +12,7 @@ class AssetTableField extends ComplexTableField { $this->sourceSort = "Title"; $this->Markable = true; Requirements::javascript("cms/javascript/ImageEditor/Activator.js"); + } function setFolder($folder) { @@ -86,7 +87,7 @@ class AssetTableField extends ComplexTableField { $detailFormFields->addFieldToTab("BottomRoot", new Tab("Image", new LiteralField("ImageFull", - '' . "{$childData->Name}" . '' . + '' . "{$childData->Name}" . '' . '' ) ), diff --git a/code/ImageEditor.php b/code/ImageEditor.php index d838af89..ffecbc34 100644 --- a/code/ImageEditor.php +++ b/code/ImageEditor.php @@ -18,8 +18,18 @@ Requirements::clear(); Requirements::javascript("jsparty/prototype.js"); Requirements::javascript("jsparty/scriptaculous/scriptaculous.js"); - Requirements::javascript("/cms/javascript/ImageEditor/Require.js"); + Requirements::javascript('cms/javascript/ImageEditor/Utils.js'); + Requirements::javascript('cms/javascript/ImageEditor/ImageHistory.js'); + Requirements::javascript('cms/javascript/ImageEditor/Image.js'); + Requirements::javascript('cms/javascript/ImageEditor/ImageTransformation.js'); + Requirements::javascript('cms/javascript/ImageEditor/Resizeable.js'); + Requirements::javascript('cms/javascript/ImageEditor/Effects.js'); + Requirements::javascript('cms/javascript/ImageEditor/Environment.js'); + Requirements::javascript('cms/javascript/ImageEditor/Crop.js'); + Requirements::javascript('cms/javascript/ImageEditor/Resize.js'); + Requirements::javascript('cms/javascript/ImageEditor/ImageBox.js'); Requirements::javascript("cms/javascript/ImageEditor/ImageEditor.js"); + Requirements::javascript("jsparty/loader.js"); Requirements::javascript("jsparty/behaviour.js"); Requirements::javascript("cms/javascript/LeftAndMain.js"); @@ -44,6 +54,7 @@ */ public function manipulate() { $fileName = $this->requestParams['file']; + if(strpos($fileName,'?') !== false) $fileName = substr($fileName,0,strpos($fileName,'?')); $command = $this->requestParams['command']; $this->checkFileExists($fileName); $gd = new GD($fileName); @@ -85,6 +96,7 @@ if(isset($this->requestParams['originalFile']) && isset($this->requestParams['editedFile'])) { $originalFile = $this->requestParams['originalFile']; $editedFile = $this->requestParams['editedFile']; + if(strpos($originalFile,'?') !== false) $originalFile = substr($originalFile,0,strpos($originalFile,'?')); if($this->checkFileExists($originalFile) && $this->checkFileExists($editedFile)) { if($editedFile != $originalFile && copy($this->url2File($editedFile),$this->url2File($originalFile))) { $image = DataObject::get_one('File',"Filename = '" . substr($this->url2File($originalFile),3) . "'"); @@ -166,8 +178,9 @@ */ private function checkFileExists($url) { + if(strpos($url,'?') !== false) $url = substr($url,0,strpos($url,'?')); $pathInfo = pathinfo($url); - if(count($pathInfo) <= 3) $this->raiseError(); + if(count($pathInfo) < 3) $this->raiseError(); if(!in_array($pathInfo['extension'],array('jpeg','jpg','jpe','png','gif'))) $this->raiseError(); $path = explode('/',$pathInfo['dirname']); if(count($path) > 1) { diff --git a/css/ImageEditor/ImageEditor.css b/css/ImageEditor/ImageEditor.css index 8eb61af7..954f920f 100644 --- a/css/ImageEditor/ImageEditor.css +++ b/css/ImageEditor/ImageEditor.css @@ -1,109 +1,111 @@ * { - margin: 0px; - padding: 0px; + margin: 0px; + padding: 0px; } .clickBox -{ - width: 7px; - height: 7px; - background-color: red; - position: absolute; +{ + width: 7px; + height: 7px; + background-color: red; + position: absolute; + overflow: hidden; } .leftUpperClickBox { - cursor: nw-resize; + cursor: nw-resize; } .leftMiddleClickBox { - cursor: e-resize; + cursor: e-resize; } .leftLowerClickBox { - cursor: ne-resize; + cursor: ne-resize; } .rightUpperClickBox { - cursor: ne-resize; + cursor: ne-resize; } .rightMiddleClickBox { - cursor: w-resize; + cursor: w-resize; } .rightLowerClickBox { - cursor: nw-resize; + cursor: nw-resize; } .upperMiddleClickBox { - cursor: n-resize; + cursor: n-resize; } .lowerMiddleClickBox { - cursor: n-resize; + cursor: n-resize; } .inline { - display: inline; + display: inline; } -#mainContainer +.displayNone { - width: 100%; - height:600px; + display: none; } + #imageContainer { - position: absolute; + position: absolute; } #menuBarContainer { - border-bottom: 1px solid; - height: 100px; -} -.floatRight -{ - float: right; -} -#loadingIndicatorContainer -{ - display: none; - z-index: 1000; - position: absolute; -} -#fakeImg -{ - display: none; + border-bottom: 1px solid; + height: 100px; } #image { - width: 100%; - height: 100%; + display: block; +} +.floatRight +{ + float: right; +} +#loadingIndicatorContainer +{ + display: none; + position: absolute; + z-index: 1000; +} +#fakeImg +{ + display: none; } #cropBox { - position: absolute; + position: absolute; } .greyBox { - background-color: black; - position: absolute; - opacity: 0.5; + background-color: black; + position: absolute; + opacity: .5; + filter: alpha(opacity=50); } #mainContainer { - border-color: black; - border-style: solid; - background-color: white; - margin: 0px; - position: absolute; - top: 20px; - padding: 0px; -} + position: absolute; + border-color: black; + border-style: solid; + height: 40%; + width: 100%; + left: 1%; + top: 1%; + background-color: white; +} \ No newline at end of file diff --git a/javascript/ImageEditor/Activator.js b/javascript/ImageEditor/Activator.js index 327afcdc..dfda517b 100644 --- a/javascript/ImageEditor/Activator.js +++ b/javascript/ImageEditor/Activator.js @@ -8,7 +8,7 @@ var ImageEditorActivator = { if(iframe != null) { iframe.parentNode.removeChild(iframe); } - iframe = document.createElement('iframe'); + iframe = window.top.document.createElement('iframe'); fileToEdit = $('ImageEditorActivator').firstChild.src; iframe.setAttribute("src","admin/ImageEditor?fileToEdit=" + fileToEdit); iframe.id = 'imageEditorIframe'; @@ -19,6 +19,8 @@ var ImageEditorActivator = { iframe.style.top = "-2%"; iframe.style.left = "1.5%"; window.top.document.body.appendChild(iframe); + + } } \ No newline at end of file diff --git a/javascript/ImageEditor/Crop.js b/javascript/ImageEditor/Crop.js index 9afa07d7..f52cb7bf 100644 --- a/javascript/ImageEditor/Crop.js +++ b/javascript/ImageEditor/Crop.js @@ -11,12 +11,6 @@ var Crop = { this.rightGreyBox = $('rightGreyBox'); this.upperGreyBox = $('upperGreyBox'); this.lowerGreyBox = $('lowerGreyBox'); - options = { - resizeStop: Crop.resizeStop.bind(this), - onDrag: Crop.onDrag.bind(this), - onResize: Crop.onResize.bind(this), - getMousePos: Crop.getMousePos.bind(this) - }; this.centerCropBox = Crop.centerCropBox.bind(this); this.placeGreyBox = Crop.placeGreyBox.bind(this); this.setListeners = Crop.setListeners.bind(this); @@ -27,8 +21,14 @@ var Crop = { this.doCrop = Crop.doCrop.bind(this); this.setVisible = Crop.setVisible.bind(this); Event.observe('image','load',this.centerCropBox); + options = { + resizeStop: Crop.resizeStop.bind(this), + onDrag: Crop.onDrag.bind(this), + onResize: Crop.onResize.bind(this), + getMousePos: Crop.getMousePos.bind(this) + }; this.resizeCropBox = new Resizeable.initialize(this.cropBox,options); - Event.observe(this.cropBox,'dblclick',this.onCropStop); + Event.observe(this.cropBox,'dblclick',this.onCropStop.bind(this)); this.setListeners(); this.setVisible(false); }, @@ -39,12 +39,12 @@ var Crop = { this.resizeCropBox.originalWidth = this.cropBox.getWidth(); }, - onDrag: function() { + onDrag: function(event) { if(this.cropBox.getLeft() <= 0 ) this.cropBox.style.left = '0px'; if(this.cropBox.getTop() <= 0 ) this.cropBox.style.top = '0px'; if(this.cropBox.getLeft() + this.cropBox.getWidth() > this.cropBox.getParentWidth()) this.cropBox.style.left = this.cropBox.getParentWidth()- this.cropBox.getWidth() + 'px'; if(this.cropBox.getTop() + this.cropBox.getHeight() > this.cropBox.getParentHeight()) this.cropBox.style.top = this.cropBox.getParentHeight() - this.cropBox.getHeight() + 'px'; - this.placeGreyBox(); + this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight()); }, centerCropBox: function() { @@ -52,32 +52,30 @@ var Crop = { this.cropBox.style.height = this.cropBox.getParentHeight()/2 + 'px'; this.cropBox.style.left = (this.cropBox.getParentWidth() - this.cropBox.getWidth())/2 + "px"; this.cropBox.style.top = (this.cropBox.getParentHeight() - this.cropBox.getHeight())/2 + "px"; - this.placeGreyBox(); + this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight()); this.leftBoxConstraint = this.cropBox.getParentLeft(); this.topBoxConstraint = this.cropBox.getParentTop(); this.rightBoxConstraint = this.cropBox.getParentLeft() + this.cropBox.getParentWidth(); this.bottomBoxConstraint = this.cropBox.getParentTop() + this.cropBox.getParentHeight()-1;//hack without 1 doesn't work; }, - placeGreyBox: function() { + 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 = "100%"; - this.rightGreyBox.style.width = this.cropBox.getParentWidth() - this.cropBox.getLeft() - this.cropBox.getWidth() + "px"; - this.rightGreyBox.style.height = "100%"; - this.rightGreyBox.style.left = this.cropBox.getLeft() + this.cropBox.getWidth() + "px"; - this.upperGreyBox.style.width = this.cropBox.getWidth() + '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.lowerGreyBox.style.width = "100%"; - this.lowerGreyBox.style.height = this.cropBox.getParentHeight() - this.cropBox.getTop() - this.cropBox.getHeight() + "px"; - this.lowerGreyBox.style.top = this.cropBox.getTop() + this.cropBox.getHeight() + "px"; - this.lowerGreyBox.style.width = this.cropBox.getWidth() + 'px'; - this.lowerGreyBox.style.left = this.cropBox.getLeft() + 'px'; }, - onResize: function(event) { - x = Event.pointerX(event); - this.placeGreyBox(); + onResize: function(width,height) { + this.placeGreyBox(width,height); }, getMousePos: function(event) { x = Event.pointerX(event); @@ -98,7 +96,7 @@ var Crop = { newHeight = this.cropBox.getHeight() ; startTop = this.cropBox.getTop() ; startLeft = this.cropBox.getLeft() ; - if(newWidth > 30 && newHeight > 30) { + if(newWidth > 35 && newHeight > 35) { imageTransformation.crop(startTop,startLeft,newWidth,newHeight); imageHistory.enable(); } else { @@ -133,7 +131,7 @@ var Crop = { if(setVisible) { Element.show(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox); this.centerCropBox(); - this.placeGreyBox(); + this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight()); } else { Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('cropOk'),$('cropCancel')); } diff --git a/javascript/ImageEditor/Environment.js b/javascript/ImageEditor/Environment.js index 8a8b2c0c..bc571303 100644 --- a/javascript/ImageEditor/Environment.js +++ b/javascript/ImageEditor/Environment.js @@ -4,6 +4,6 @@ var Environment = { initialize: function (imageFile) { imageBox = new ImageBox.initialize(); - image = new Image.initialize(imageFile); - }, + imageToResize = new Image.initialize(imageFile); + } } \ No newline at end of file diff --git a/javascript/ImageEditor/Image.js b/javascript/ImageEditor/Image.js index ee2149b9..d0240c92 100644 --- a/javascript/ImageEditor/Image.js +++ b/javascript/ImageEditor/Image.js @@ -7,7 +7,7 @@ var Image = { this.image.src = imageFile; this.reportSize = Image.reportSize.bind(this); this.onImageLoad = Image.onImageLoad.bind(this); - Event.observe('image','load',this.onImageLoad); + Event.observe(this.image,'load',this.onImageLoad); imageHistory.add('initialize',this.image.src); }, @@ -16,15 +16,15 @@ var Image = { $('imageHeight').innerHTML = this.image.height + "px"; }, - onImageLoad: function() { + onImageLoad: function(event) { this.reportSize(); - if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) { - imageBox.center(); - } $('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(); + } resize.imageContainerResize.originalWidth = this.image.width; resize.imageContainerResize.originalHeight = this.image.height; - - }, + imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight()); + } }; diff --git a/javascript/ImageEditor/ImageBox.js b/javascript/ImageEditor/ImageBox.js index cbb76d12..def4e072 100644 --- a/javascript/ImageEditor/ImageBox.js +++ b/javascript/ImageEditor/ImageBox.js @@ -8,6 +8,7 @@ var ImageBox = { this.hideIndicator = ImageBox.hideIndicator.bind(this); this.reCenterIndicator = ImageBox.reCenterIndicator.bind(this); 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); @@ -19,19 +20,20 @@ var ImageBox = { }, hideIndicator: function() { - indicator = $('loadingIndicatorContainer'); - indicator.style.display = 'none'; + Element.hide($('loadingIndicatorContainer')); }, centerIndicator: function() { indicator = $('loadingIndicatorContainer'); indicatorImage = $('loadingIndicator'); - top = this.imageContainer.getTop(); - left = this.imageContainer.getLeft(); - width = this.imageContainer.getWidth(); - height = this.imageContainer.getHeight(); - indicator.style.left = left + width/2 - indicatorImage.width/2 + "px"; - indicator.style.top = top + height/2 - indicatorImage.height/2 + "px"; + 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"; }, reCenterIndicator: function() { @@ -44,6 +46,21 @@ var ImageBox = { $('imageContainer').style.left = this.imageContainer.getParentWidth()/2 - this.imageContainer.getWidth()/2 + 'px'; $('imageContainer').style.top = this.imageContainer.getParentHeight()/2 - this.imageContainer.getHeight()/2 + 'px'; Element.show(this.imageContainer); + }, + + checkOutOfDrawingArea: function(width,height) { + var left = this.imageContainer.getLeft(); + var top = this.imageContainer.getTop(); + var parentLeft = this.imageContainer.getParentLeft(); + var parentTop = this.imageContainer.getParentTop(); + var parentWidth = this.imageContainer.getParentWidth(); + var parentHeight = this.imageContainer.getParentHeight(); + if(left + width > parentWidth) { + $('imageContainer').style.left = left - (left + width - parentWidth) - 3+ 'px'; + } + if(top + height > parentHeight) { + $('imageContainer').style.top = top - (top + height - parentHeight) - 3 + 'px'; + } } diff --git a/javascript/ImageEditor/ImageEditor.js b/javascript/ImageEditor/ImageEditor.js index 56754fd2..a849f5f5 100644 --- a/javascript/ImageEditor/ImageEditor.js +++ b/javascript/ImageEditor/ImageEditor.js @@ -2,18 +2,10 @@ * @author Mateusz */ -Scriptaculous.require('cms/javascript/ImageEditor/Utils.js'); -Scriptaculous.require('cms/javascript/ImageEditor/ImageHistory.js'); -Scriptaculous.require('cms/javascript/ImageEditor/Image.js"'); -Scriptaculous.require('cms/javascript/ImageEditor/ImageTransformation.js'); -Scriptaculous.require('cms/javascript/ImageEditor/Resizeable.js'); -Scriptaculous.require('cms/javascript/ImageEditor/Effects.js'); -Scriptaculous.require('cms/javascript/ImageEditor/Environment.js'); -Scriptaculous.require('cms/javascript/ImageEditor/Crop.js'); -Scriptaculous.require('cms/javascript/ImageEditor/Resize.js'); -Scriptaculous.require('cms/javascript/ImageEditor/ImageBox.js'); var ImageEditor = { initialize: function(imageFile) { + imageFile += '1234'; + crop = null; imageHistory = new ImageHistory.initialize(); environment = new Environment.initialize(imageFile); imageTransformation = new ImageTransformation.initialize(); @@ -26,6 +18,8 @@ var ImageEditor = { this.onClose = ImageEditor.onClose.bind(this); Event.observe($('saveButton'),'click',this.onSave); Event.observe($('closeButton'),'click',this.onClose); + imageToResize.onImageLoad(); + resize.imageContainerResize.placeClickBox(); }, onSave: function() { if(this.tottalyOriginalImageFile != $('image').src) { @@ -41,3 +35,4 @@ var ImageEditor = { imageTransformation.close(); } } + diff --git a/javascript/ImageEditor/ImageHistory.js b/javascript/ImageEditor/ImageHistory.js index cc2b076f..5551aa9a 100644 --- a/javascript/ImageEditor/ImageHistory.js +++ b/javascript/ImageEditor/ImageHistory.js @@ -70,11 +70,15 @@ ImageHistory = { }, 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() { @@ -84,5 +88,5 @@ ImageHistory = { disable: function() { Event.stopObserving($('undoButton'),'click', this.undo); Event.stopObserving($('redoButton'),'click', this.redo); - }, + } }; \ No newline at end of file diff --git a/javascript/ImageEditor/ImageTransformation.js b/javascript/ImageEditor/ImageTransformation.js index d249483e..4b6f02be 100644 --- a/javascript/ImageEditor/ImageTransformation.js +++ b/javascript/ImageEditor/ImageTransformation.js @@ -24,10 +24,10 @@ var ImageTransformation = { response = eval('(' + transport.responseText + ')'); $('image').src = response.fileName; imageHistory.add('resize',$('image').src); - }, + } }; imageBox.showIndicator(); - new Ajax.Request('admin/ImageEditor/manipulate', options); + new Ajax.Request('admin/ImageEditor/manipulate', options); }, rotate: function(angle) { @@ -37,7 +37,10 @@ var ImageTransformation = { onSuccess: function(transport) { 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); @@ -45,6 +48,7 @@ var ImageTransformation = { } }; imageBox.showIndicator(); + new Ajax.Request('admin/ImageEditor/manipulate', options); }, @@ -56,14 +60,16 @@ var ImageTransformation = { 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('crop',$('image').src); crop.setVisible(false); - }, + } }; imageBox.showIndicator(); - new Ajax.Request('admin/ImageEditor/manipulate', options); + new Ajax.Request('/admin/ImageEditor/manipulate', options); }, save: function(originalFile,editedFile) { @@ -73,7 +79,7 @@ var ImageTransformation = { onSuccess: function(transport) { eval(transport.responseText); imageEditor.onClose(); - }, + } }; new Ajax.Request('admin/ImageEditor/save', options); }, @@ -84,7 +90,7 @@ var ImageTransformation = { postBody: '', onSuccess: function(transport) { eval(transport.responseText); - }, + } }; new Ajax.Request('admin/ImageEditor/close', options); } diff --git a/javascript/ImageEditor/Resize.js b/javascript/ImageEditor/Resize.js index baed4ab9..27f6a9a9 100644 --- a/javascript/ImageEditor/Resize.js +++ b/javascript/ImageEditor/Resize.js @@ -11,7 +11,7 @@ var Resize = { options = { resizeStop: Resize.resizeStop.bind(this), onDrag: Resize.onDrag.bind(this), - onResize: Resize.onResize, + onResize: Resize.onResize.bind(this), getMousePos: Resize.getMousePos.bind(this) }; new Positioning.addBehaviour(this.element); @@ -20,13 +20,11 @@ var Resize = { }, resizeStop: function(event) { - if(EventStack.getLastEvent() != null) { - imageElement = $('image'); - EventStack.clearStack(); - if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) { - imageTransformation.resize(imageElement.width,imageElement.height); - } - } + imageElement = $('image'); + EventStack.clearStack(); + if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) { + imageTransformation.resize(imageElement.width,imageElement.height); + } }, onDrag: function() @@ -38,7 +36,9 @@ var Resize = { imageBox.reCenterIndicator(); }, - onResize: function() { + onResize: function(width,height) { + $('image').style.width = width + "px"; + $('image').style.height = height + "px"; }, getMousePos: function(event) { relativeMouseX = this.getRelativeMousePos(event).x; diff --git a/javascript/ImageEditor/Resizeable.js b/javascript/ImageEditor/Resizeable.js index b174b83d..adae5d81 100644 --- a/javascript/ImageEditor/Resizeable.js +++ b/javascript/ImageEditor/Resizeable.js @@ -19,8 +19,10 @@ Resizeable = { }, resizeStart: function(event) { - EventStack.addEvent(event); - Event.stop(event); + if(Element.hasClassName(Event.element(event),'clickBox')) { + EventStack.addEvent(event); + Event.stop(event); + } }, leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) { @@ -73,8 +75,8 @@ Resizeable = { }, onResize: function(event) { - if(EventStack.getLastEvent() != null && this.isVisible) { - lastEventElement = Event.element(EventStack.getLastEvent()); + if(EventStack.getLastEventElement() != null && this.isVisible) { + lastEventElement = EventStack.getLastEventElement(); var relativeMouseX = this.getMousePos(event).x - this.element.getParentLeft(); var relativeMouseY = this.getMousePos(event).y - this.element.getParentTop(); if(Element.hasClassName(lastEventElement,'leftUpperClickBox')) { @@ -102,31 +104,30 @@ Resizeable = { this.lowerMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY); } this.placeClickBox(); + this.customOnResize(this.element.getWidth(),this.element.getHeight()); imageBox.reCenterIndicator(); - this.customOnResize(); - } + } }, resize: function(width,height) { - if(width < 30 && height == -1000) { + if(width < 35 && height == -1000) { return false; } - if(height < 30 && width == -1000) { + if(height < 35 && width == -1000) { return false; } - if((width < 30 || height < 30) && (width != -1000 && height != -1000)) { + if((width < 35 || height < 35) && (width != -1000 && height != -1000)) { return false; } - if(width != -1000) { - this.element.style.width = width + "px"; - } else { - this.element.style.width = this.originalWidth + "px"; + if(width == -1000) { + width = this.originalWidth; } - if(height != -1000) { - this.element.style.height = height + "px"; - } else { - this.element.style.height = this.originalHeight + "px"; - } + if(height == -1000) { + height = this.originalHeight; + } + + this.element.style.width = width + "px"; + this.element.style.height = height + "px"; return true; }, @@ -141,8 +142,7 @@ Resizeable = { } width = Element.getDimensions(this.element).width; height = Element.getDimensions(this.element).height; - - clickBoxHalfWidth = Math.floor(Element.getDimensions(this.leftUpperClickBox).width/2); + clickBoxHalfWidth = Math.floor(Element.getDimensions(this.leftUpperClickBox2).width/2)+1; leftUpper = new Point.initialize(-clickBoxHalfWidth,-clickBoxHalfWidth); leftMiddle = new Point.initialize(-clickBoxHalfWidth,height/2-clickBoxHalfWidth); @@ -155,6 +155,8 @@ Resizeable = { this.leftUpperClickBox.style.left = leftUpper.x + 'px'; this.leftUpperClickBox.style.top = leftUpper.y + 'px'; + this.leftUpperClickBox2.style.left = leftUpper.x + 'px'; + this.leftUpperClickBox2.style.top = leftUpper.y + 'px'; this.leftMiddleClickBox.style.left = leftMiddle.x + 'px'; this.leftMiddleClickBox.style.top = leftMiddle.y + 'px'; this.leftLowerClickBox.style.left = leftLower.x + 'px'; @@ -170,18 +172,24 @@ Resizeable = { this.upperMiddleClickBox.style.left = upperMiddle.x + 'px'; this.upperMiddleClickBox.style.top = upperMiddle.y + 'px'; this.lowerMiddleClickBox.style.left = lowerMiddle.x + 'px'; - this.lowerMiddleClickBox.style.top = lowerMiddle.y + 'px'; + this.lowerMiddleClickBox.style.top = lowerMiddle.y + 'px'; + if(crop != null) { + crop.placeGreyBox(); + } }, createClickBoxes: function() { - this.leftUpperClickBox = this.createElement('div',Math.random(),["leftUpperClickBox","clickBox"]); - this.leftMiddleClickBox = this.createElement('div',Math.random(),["leftMiddleClickBox","clickBox"]); - this.leftLowerClickBox = this.createElement('div',Math.random(),["leftLowerClickBox","clickBox"]); - this.rightUpperClickBox = this.createElement('div',Math.random(),["rightUpperClickBox","clickBox"]); - this.rightMiddleClickBox = this.createElement('div',Math.random(),["rightMiddleClickBox","clickBox"]); - this.rightLowerClickBox = this.createElement('div',Math.random(),["rightLowerClickBox","clickBox"]); - this.upperMiddleClickBox = this.createElement('div',Math.random(),["upperMiddleClickBox","clickBox"]); - this.lowerMiddleClickBox = this.createElement('div',Math.random(),["lowerMiddleClickBox","clickBox"]); + this.leftUpperClickBox = this.createElement('div',Random.string(5),["leftUpperClickBox","clickBox"]); + this.leftMiddleClickBox = this.createElement('div',Random.string(5),["leftMiddleClickBox","clickBox"]); + this.leftLowerClickBox = this.createElement('div',Random.string(5),["leftLowerClickBox","clickBox"]); + this.rightUpperClickBox = this.createElement('div',Random.string(5),["rightUpperClickBox","clickBox"]); + this.rightMiddleClickBox = this.createElement('div',Random.string(5),["rightMiddleClickBox","clickBox"]); + this.rightLowerClickBox = this.createElement('div',Random.string(5),["rightLowerClickBox","clickBox"]); + this.upperMiddleClickBox = this.createElement('div',Random.string(5),["upperMiddleClickBox","clickBox"]); + this.lowerMiddleClickBox = this.createElement('div',Random.string(5),["lowerMiddleClickBox","clickBox"]); + this.leftUpperClickBox2 = this.createElement('div',Random.string(5),["leftUpperClickBox","clickBox"]); + //Safarai requires creating another clickbox because leftUppperClickBox is hidden (hack) + }, createElement: function(tag,id,classes) { @@ -236,7 +244,7 @@ Resizeable = { var options = { starteffect: function() {}, endeffect: function() {}, - change: this.onDrag, + change: this.onDrag }; this.draggableImage = new Draggable(this.element,options); }, @@ -253,6 +261,7 @@ Resizeable = { if(setVisible) { Element.show( this.leftUpperClickBox, + this.leftUpperClickBox2, this.leftMiddleClickBox, this.leftLowerClickBox, this.rightUpperClickBox, @@ -265,6 +274,7 @@ Resizeable = { } else { Element.hide( this.leftUpperClickBox, + this.leftUpperClickBox2, this.leftMiddleClickBox, this.leftLowerClickBox, this.rightUpperClickBox, diff --git a/javascript/ImageEditor/Utils.js b/javascript/ImageEditor/Utils.js index 502fd9d7..a8360b5c 100644 --- a/javascript/ImageEditor/Utils.js +++ b/javascript/ImageEditor/Utils.js @@ -9,17 +9,17 @@ Point = { } EventStack = { - lastEvent: null, - getLastEvent: function(){ - return EventStack.lastEvent + lastEventElement: null, + getLastEventElement: function(){ + return EventStack.lastEventElement; }, addEvent: function(event) { - EventStack.lastEvent = event; + EventStack.lastEventElement = Event.element(event); }, clearStack: function() { - this.lastEvent = null; + this.lastEventElement = null; } } @@ -69,4 +69,16 @@ Positioning = { getParentWidth: function() { return Element.getDimensions(Position.offsetParent(this.element)).width } -} \ No newline at end of file +} + +Random = { + string: function(length) { + chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; + string = ""; + for(x=0;x - - - - <% base_tag %> - Untitled Document - - - -
- -
-
-
-
-
-
- We have encountered an error -
-
-
- indicator -
-
-
-
- fakeImg -
- - + + + + <% base_tag %> + Untitled Document + + +
+ +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+ \ No newline at end of file