mujma: Fixed various browser compatibility problems. Now should work on Safari 3.0.2 /Windows, FF 1.5/2.0 Windows/Linux.
(merged from branches/gsoc) git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41891 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer
parent
ff2a7bc7f8
commit
31a9fbee3c
|
|
@ -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",
|
||||
'<a id="ImageEditorActivator" href="javascript: void(0)">' . "<img id='thumbnailImage' src='{$thumbnail}' alt='{$childData->Name}' />" . '</a>' .
|
||||
'<a id="ImageEditorActivator" href="javascript: void(0)">' . "<img id='thumbnailImage' src='{$thumbnail}?r=" . rand(1,100000) . "' alt='{$childData->Name}' />" . '</a>' .
|
||||
'<script type="text/javascript" src="cms/javascript/ImageEditor/Activator.js"></script><script type="text/javascript">imageActivator = new ImageEditorActivator.initialize();Event.observe("ImageEditorActivator","click",imageActivator.onOpen);</script>'
|
||||
)
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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'));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
var Environment = {
|
||||
initialize: function (imageFile) {
|
||||
imageBox = new ImageBox.initialize();
|
||||
image = new Image.initialize(imageFile);
|
||||
},
|
||||
imageToResize = new Image.initialize(imageFile);
|
||||
}
|
||||
}
|
||||
|
|
@ -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());
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Random = {
|
||||
string: function(length) {
|
||||
chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
string = "";
|
||||
for(x=0;x<length;x++) {
|
||||
i = Math.floor(Math.random() * 57);
|
||||
string += chars.charAt(i);
|
||||
}
|
||||
return string;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,53 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||
<% base_tag %>
|
||||
<title>Untitled Document</title>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="css/main.css" />
|
||||
</head>
|
||||
<body id="body">
|
||||
<div id="mainContainer">
|
||||
<div id="menuBarContainer">
|
||||
<div id="photoInfoContainer" class="floatRight">
|
||||
<p>Size</p>
|
||||
<p class="inline">Width:</p><p id="imageWidth" class="inline">0px</p>
|
||||
<p class="inline">Height:</p><p id="imageHeight" class="inline">0px</p>
|
||||
</div>
|
||||
<div id="historyContainer" class="floatRight">
|
||||
<p><a id="undoButton" href="#">Undo</a></p>
|
||||
<p><a id="redoButton" href="#">Redo</a></p>
|
||||
</div>
|
||||
<div id="effectsContainer" class="floatRight">
|
||||
<p><a id="rotateButton" href="#">Rotate</a></p>
|
||||
</div>
|
||||
<div id="cropContainer" class="floatRight">
|
||||
<p><a id="cropStart" href="#">Crop start</a></p>
|
||||
<p><a id="cropOk" href="#" class="hidden">Ok</a></p>
|
||||
<p><a id="cropCancel" href="#" class="hidden">Cancel</a></p>
|
||||
</div>
|
||||
<div id="operationContainer" class="floatRight">
|
||||
<p><a id="saveButton" href="#">Save</a></p>
|
||||
<p><a id="closeButton" href="#">Cancel</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="imageEditorContainer">
|
||||
<div id="imageContainer">
|
||||
<div id="leftGreyBox" class="greyBox"></div>
|
||||
<div id="rightGreyBox" class="greyBox"></div>
|
||||
<div id="upperGreyBox" class="greyBox"></div>
|
||||
<div id="lowerGreyBox" class="greyBox"></div>
|
||||
<img id="image" src="#" alt="We have encountered an error"/>
|
||||
<div id="cropBox"></div>
|
||||
</div>
|
||||
<div id="loadingIndicatorContainer">
|
||||
<img id="loadingIndicator" alt="indicator" src="cms/images/ImageEditor/indicator.gif">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="fakeImgContainer">
|
||||
<img id="fakeImg" src="#" alt="fakeImg"/>
|
||||
</div>
|
||||
<script type="text/javascript">imageEditor = new ImageEditor.initialize("$fileToEdit")</script>
|
||||
</body>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" debug=true>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||
<% base_tag %>
|
||||
<title>Untitled Document</title>
|
||||
</head>
|
||||
<body id="body" onload="setTimeout(function() { imageEditor = new ImageEditor.initialize('$fileToEdit'); }, 0);">
|
||||
<div id="mainContainer">
|
||||
<div id="menuBarContainer">
|
||||
<div id="photoInfoContainer" class="floatRight">
|
||||
<p>Size</p>
|
||||
<p class="inline">Width:</p><p id="imageWidth" class="inline">0px</p>
|
||||
<p class="inline">Height:</p><p id="imageHeight" class="inline">0px</p>
|
||||
</div>
|
||||
<div id="historyContainer" class="floatRight">
|
||||
<p><a id="undoButton" href="#">Undo</a></p>
|
||||
<p><a id="redoButton" href="#">Redo</a></p>
|
||||
</div>
|
||||
<div id="effectsContainer" class="floatRight">
|
||||
<p><a id="rotateButton" href="#">Rotate</a></p>
|
||||
</div>
|
||||
<div id="cropContainer" class="floatRight">
|
||||
<p><a id="cropStart" href="#">Crop start</a></p>
|
||||
<p><a id="cropOk" href="#" class="hidden">Ok</a></p>
|
||||
<p><a id="cropCancel" href="#" class="hidden">Cancel</a></p>
|
||||
</div>
|
||||
<div id="operationContainer" class="floatRight">
|
||||
<p><a id="saveButton" href="#">Save</a></p>
|
||||
<p><a id="closeButton" href="#">Cancel</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="imageEditorContainer">
|
||||
<div id="imageContainer">
|
||||
<div id="leftGreyBox" class="greyBox"></div>
|
||||
<div id="rightGreyBox" class="greyBox"></div>
|
||||
<div id="upperGreyBox" class="greyBox"></div>
|
||||
<div id="lowerGreyBox" class="greyBox"></div>
|
||||
<img id="image" src="#" alt=""/>
|
||||
<div id="cropBox"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="fakeImgContainer">
|
||||
<img id="fakeImg" src="#" alt=""/>
|
||||
</div>
|
||||
<div id="loadingIndicatorContainer">
|
||||
<img id="loadingIndicator" alt="" src="cms/images/ImageEditor/indicator.gif">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue