mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-10-22 06:05:56 +00:00
mujma: BUGFIX: All global variables added to ImageEditor namespace, solved issue reported in ticket 102, http://support.silverstripe.com/gsoc/ticket/102 (merged from gsoc branch, r42789)
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@42989 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Andrew O'Neil
parent
ca8c9ea955
commit
b0d78ea5bd
@ -92,7 +92,7 @@ class AssetTableField extends ComplexTableField {
|
||||
new Tab("Image",
|
||||
new LiteralField("ImageFull",
|
||||
'<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>'
|
||||
'<script type="text/javascript" src="cms/javascript/ImageEditor/Activator.js"></script><script type="text/javascript">var imageActivator = new ImageEditor.Activator.initialize();Event.observe("ImageEditorActivator","click",imageActivator.onOpen);</script>'
|
||||
)
|
||||
),
|
||||
'Main'
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
var ImageEditorActivator = {
|
||||
ImageEditor = {};
|
||||
|
||||
ImageEditor.Activator = {
|
||||
initialize: function() {
|
||||
this.onOpen = ImageEditorActivator.onOpen.bind(this);
|
||||
this.onOpen = ImageEditor.Activator.onOpen.bind(this);
|
||||
},
|
||||
|
||||
onOpen: function() {
|
||||
var windowWidth = Element.getDimensions(window.top.document.body).width;
|
||||
var windowHeight = Element.getDimensions(window.top.document.body).height;
|
||||
iframe = window.top.document.getElementById('imageEditorIframe');
|
||||
var iframe = window.top.document.getElementById('imageEditorIframe');
|
||||
if(iframe != null) {
|
||||
iframe.parentNode.removeChild(iframe);
|
||||
}
|
||||
iframe = window.top.document.createElement('iframe');
|
||||
fileToEdit = $('ImageEditorActivator').firstChild.src;
|
||||
var fileToEdit = $('ImageEditorActivator').firstChild.src;
|
||||
iframe.setAttribute("src","admin/ImageEditor?fileToEdit=" + fileToEdit);
|
||||
iframe.id = 'imageEditorIframe';
|
||||
iframe.style.width = windowWidth - 6 + 'px';
|
||||
@ -21,8 +23,8 @@ var ImageEditorActivator = {
|
||||
iframe.style.top = "8px";
|
||||
iframe.style.left = "8px";
|
||||
window.top.document.body.appendChild(iframe);
|
||||
divLeft = window.top.document.createElement('div');
|
||||
divRight = window.top.document.createElement('div');
|
||||
var divLeft = window.top.document.createElement('div');
|
||||
var divRight = window.top.document.createElement('div');
|
||||
divLeft.style.width = "8px";
|
||||
divLeft.style.height = "300%";
|
||||
divLeft.style.zIndex = "1000";
|
||||
|
||||
@ -1,35 +1,35 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
var Crop = {
|
||||
ImageEditor.Crop = {
|
||||
|
||||
initialize: function() {
|
||||
this.cropBox = $('cropBox');
|
||||
new Positioning.addBehaviour(this.cropBox);
|
||||
new ImageEditor.Positioning.addBehaviour(this.cropBox);
|
||||
this.imageContainer = $('imageContainer');
|
||||
this.leftGreyBox = $('leftGreyBox');
|
||||
this.rightGreyBox = $('rightGreyBox');
|
||||
this.upperGreyBox = $('upperGreyBox');
|
||||
this.lowerGreyBox = $('lowerGreyBox');
|
||||
this.centerCropBox = Crop.centerCropBox.bind(this);
|
||||
this.placeGreyBox = Crop.placeGreyBox.bind(this);
|
||||
this.setListeners = Crop.setListeners.bind(this);
|
||||
this.onCropStart = Crop.onCropStart.bind(this);
|
||||
this.onCropOk = Crop.onCropOk.bind(this);
|
||||
this.onCropCancel = Crop.onCropCancel.bind(this);
|
||||
this.doCrop = Crop.doCrop.bind(this);
|
||||
this.setVisible = Crop.setVisible.bind(this);
|
||||
this.enable = Crop.enable.bind(this);
|
||||
this.disable = Crop.disable.bind(this);
|
||||
this.onImageLoadCallback = Crop.onImageLoadCallback.bind(this);
|
||||
this.centerCropBox = ImageEditor.Crop.centerCropBox.bind(this);
|
||||
this.placeGreyBox = ImageEditor.Crop.placeGreyBox.bind(this);
|
||||
this.setListeners = ImageEditor.Crop.setListeners.bind(this);
|
||||
this.onCropStart = ImageEditor.Crop.onCropStart.bind(this);
|
||||
this.onCropOk = ImageEditor.Crop.onCropOk.bind(this);
|
||||
this.onCropCancel = ImageEditor.Crop.onCropCancel.bind(this);
|
||||
this.doCrop = ImageEditor.Crop.doCrop.bind(this);
|
||||
this.setVisible = ImageEditor.Crop.setVisible.bind(this);
|
||||
this.enable = ImageEditor.Crop.enable.bind(this);
|
||||
this.disable = ImageEditor.Crop.disable.bind(this);
|
||||
this.onImageLoadCallback = ImageEditor.Crop.onImageLoadCallback.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)
|
||||
var options = {
|
||||
resizeStop: ImageEditor.Crop.resizeStop.bind(this),
|
||||
onDrag: ImageEditor.Crop.onDrag.bind(this),
|
||||
onResize: ImageEditor.Crop.onResize.bind(this),
|
||||
getMousePos: ImageEditor.Crop.getMousePos.bind(this)
|
||||
};
|
||||
this.resizeCropBox = new Resizeable.initialize(this.cropBox,options);
|
||||
this.resizeCropBox = new ImageEditor.Resizeable.initialize(this.cropBox,options);
|
||||
Event.observe(this.cropBox,'dblclick',this.onCropOk.bind(this));
|
||||
this.setListeners();
|
||||
this.isVisible = false;
|
||||
@ -39,7 +39,7 @@ var Crop = {
|
||||
|
||||
resizeStop: function(event) {
|
||||
if(this.isVisible) {
|
||||
EventStack.clearStack();
|
||||
ImageEditor.EventStack.clearStack();
|
||||
this.resizeCropBox.originalHeight = this.cropBox.getHeight();
|
||||
this.resizeCropBox.originalWidth = this.cropBox.getWidth();
|
||||
}
|
||||
@ -96,9 +96,10 @@ var Crop = {
|
||||
}
|
||||
this.placeGreyBox(width,height);
|
||||
},
|
||||
|
||||
getMousePos: function(event) {
|
||||
x = Event.pointerX(event) + $('imageEditorContainer').scrollLeft;
|
||||
y = Event.pointerY(event) + $('imageEditorContainer').scrollTop;
|
||||
var x = Event.pointerX(event) + $('imageEditorContainer').scrollLeft;
|
||||
var y = Event.pointerY(event) + $('imageEditorContainer').scrollTop;
|
||||
if(x <= this.leftBoxConstraint) x = this.leftBoxConstraint;
|
||||
if(y <= this.topBoxConstraint) y = this.topBoxConstraint;
|
||||
if(x >= this.rightBoxConstraint) x = this.rightBoxConstraint;
|
||||
@ -108,15 +109,15 @@ var Crop = {
|
||||
|
||||
doCrop: function() {
|
||||
if(this.isEnabled) {
|
||||
newWidth = this.cropBox.getWidth()
|
||||
newHeight = this.cropBox.getHeight() ;
|
||||
startTop = this.cropBox.getTop() ;
|
||||
startLeft = this.cropBox.getLeft() ;
|
||||
var newWidth = this.cropBox.getWidth()
|
||||
var newHeight = this.cropBox.getHeight() ;
|
||||
var startTop = this.cropBox.getTop() ;
|
||||
var startLeft = this.cropBox.getLeft() ;
|
||||
if(newWidth > 35 && newHeight > 35) {
|
||||
imageTransformation.crop(startTop,startLeft,newWidth,newHeight,Crop.cropCallback.bind(this));
|
||||
ImageEditor.imageTransformation.crop(startTop,startLeft,newWidth,newHeight,ImageEditor.Crop.cropCallback.bind(this));
|
||||
this.disable();
|
||||
} else {
|
||||
statusMessageWrapper.statusMessage("Crop area too small","bad");
|
||||
ImageEditor.statusMessageWrapper.statusMessage("Crop area too small","bad");
|
||||
return false;
|
||||
}
|
||||
$('image').style.visibility = 'visible';//hack for IE for not selecting image during crop
|
||||
@ -125,8 +126,8 @@ var Crop = {
|
||||
},
|
||||
|
||||
cropCallback: function() {
|
||||
resize.imageContainerResize.placeClickBox();
|
||||
resize.imageContainerResize.setVisible(true);
|
||||
ImageEditor.resize.imageContainerResize.placeClickBox();
|
||||
ImageEditor.resize.imageContainerResize.setVisible(true);
|
||||
Element.show($('CropText'));
|
||||
Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('CurrentAction'));
|
||||
},
|
||||
@ -141,8 +142,8 @@ var Crop = {
|
||||
$('image').style.visibility = "hidden";//hack for IE for not selecting image during crop
|
||||
this.setVisible(true);
|
||||
Element.show($('CurrentAction'));
|
||||
imageHistory.disable();
|
||||
effects.disableRotate();
|
||||
ImageEditor.imageHistory.disable();
|
||||
ImageEditor.effects.disableRotate();
|
||||
this.enable();
|
||||
}
|
||||
},
|
||||
@ -158,8 +159,8 @@ var Crop = {
|
||||
Element.hide($('CurrentAction'));
|
||||
Element.show($('CropText'));
|
||||
this.setVisible(false);
|
||||
imageHistory.enable();
|
||||
effects.enableRotate();
|
||||
ImageEditor.imageHistory.enable();
|
||||
ImageEditor.effects.enableRotate();
|
||||
this.enable();
|
||||
}
|
||||
$('image').style.visibility = 'visible';//hack for IE for not selecting image during crop
|
||||
@ -174,7 +175,7 @@ var Crop = {
|
||||
} else {
|
||||
Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('CurrentAction'));
|
||||
}
|
||||
resize.imageContainerResize.setVisible(!setVisible);
|
||||
ImageEditor.resize.imageContainerResize.setVisible(!setVisible);
|
||||
this.resizeCropBox.setVisible(setVisible);
|
||||
},
|
||||
|
||||
@ -187,7 +188,7 @@ var Crop = {
|
||||
},
|
||||
|
||||
onImageLoadCallback: function() {
|
||||
crop.setVisible(false);
|
||||
ImageEditor.crop.setVisible(false);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,17 +1,17 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
var DocumentBody = {
|
||||
ImageEditor.DocumentBody = {
|
||||
initialize: function() {
|
||||
this.placeUI = DocumentBody.placeUI.bind(this);
|
||||
this.placeUI = ImageEditor.DocumentBody.placeUI.bind(this);
|
||||
this.placeUI();
|
||||
Event.observe(window.top,'resize',DocumentBody.resizeIframe.bind(this));
|
||||
Event.observe(window.top,'resize',ImageEditor.DocumentBody.resizeIframe.bind(this));
|
||||
},
|
||||
|
||||
resizeIframe: function(event) {
|
||||
var windowWidth = Element.getDimensions(window.top.document.body).width;
|
||||
var windowHeight = Element.getDimensions(window.top.document.body).height;
|
||||
iframe = window.top.document.getElementById('imageEditorIframe');
|
||||
var iframe = window.top.document.getElementById('imageEditorIframe');
|
||||
iframe.style.width = windowWidth - 6 + 'px';
|
||||
iframe.style.height = windowHeight + 10 + 'px';
|
||||
this.placeUI();
|
||||
@ -29,6 +29,6 @@ var DocumentBody = {
|
||||
},
|
||||
|
||||
onImageEditorScroll: function() {
|
||||
imageBox.reCenterIndicator();
|
||||
ImageEditor.imageBox.reCenterIndicator();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,28 +1,28 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
var Effects = {
|
||||
ImageEditor.Effects = {
|
||||
initialize: function() {
|
||||
this.setListeners = Effects.setListeners.bind(this);
|
||||
this.rotate = Effects.rotate.bind(this);
|
||||
this.setListeners = ImageEditor.Effects.setListeners.bind(this);
|
||||
this.rotate = ImageEditor.Effects.rotate.bind(this);
|
||||
this.setListeners();
|
||||
this.isRotateEnabled = true;
|
||||
this.enableRotate = Effects.enableRotate.bind(this);
|
||||
this.disableRotate = Effects.disableRotate.bind(this);
|
||||
this.enableRotate = ImageEditor.Effects.enableRotate.bind(this);
|
||||
this.disableRotate = ImageEditor.Effects.disableRotate.bind(this);
|
||||
},
|
||||
|
||||
rotate: function() {
|
||||
if(this.isRotateEnabled) {
|
||||
resize.imageContainerResize.disable();
|
||||
crop.disable();
|
||||
imageHistory.disable();
|
||||
imageTransformation.rotate(90,Effects.rotateCallback.bind(this));
|
||||
ImageEditor.resize.imageContainerResize.disable();
|
||||
ImageEditor.crop.disable();
|
||||
ImageEditor.imageHistory.disable();
|
||||
ImageEditor.imageTransformation.rotate(90,ImageEditor.Effects.rotateCallback.bind(this));
|
||||
this.isRotateEnabled = false;
|
||||
}
|
||||
},
|
||||
|
||||
rotateCallback: function() {
|
||||
resize.imageContainerResize.placeClickBox();
|
||||
ImageEditor.resize.imageContainerResize.placeClickBox();
|
||||
this.isRotateEnabled = true;
|
||||
},
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
var Environment = {
|
||||
ImageEditor.Environment = {
|
||||
initialize: function (imageFile) {
|
||||
imageBox = new ImageBox.initialize();
|
||||
imageToResize = new ImageToResize.initialize(imageFile);
|
||||
ImageEditor.imageBox = new ImageEditor.ImageBox.initialize();
|
||||
ImageEditor.imageToResize = new ImageEditor.ImageToResize.initialize(imageFile);
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,14 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
var ImageToResize = {
|
||||
ImageEditor.ImageToResize = {
|
||||
initialize: function(imageFile) {
|
||||
Element.hide($('image'));
|
||||
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);
|
||||
this.reportSize = ImageEditor.ImageToResize.reportSize.bind(this);
|
||||
this.onImageLoad = ImageEditor.ImageToResize.onImageLoad.bind(this);
|
||||
this.resizeOnFirstLoad = ImageEditor.ImageToResize.resizeOnFirstLoad.bind(this);
|
||||
Event.observe(this.imageToResize,'load',this.onImageLoad);
|
||||
},
|
||||
|
||||
@ -25,21 +25,21 @@ var ImageToResize = {
|
||||
onImageLoad: function(event) {
|
||||
if(this.imageToResize.width != 0 && this.imageToResize.height != 0) {
|
||||
$('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")';
|
||||
imageBox.hideIndicator();
|
||||
ImageEditor.imageBox.hideIndicator();
|
||||
Element.show($('imageContainer'),$('image'));
|
||||
crop.enable();
|
||||
resize.imageContainerResize.enable();
|
||||
effects.enableRotate();
|
||||
imageHistory.enable();
|
||||
if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) {
|
||||
imageHistory.add('initialize',$('image').src);
|
||||
ImageEditor.crop.enable();
|
||||
ImageEditor.resize.imageContainerResize.enable();
|
||||
ImageEditor.effects.enableRotate();
|
||||
ImageEditor.imageHistory.enable();
|
||||
if(ImageEditor.resize.imageContainerResize.originalHeight == 0 && ImageEditor.resize.imageContainerResize.originalWidth == 0) {
|
||||
ImageEditor.imageHistory.add('initialize',$('image').src);
|
||||
this.resizeOnFirstLoad();
|
||||
imageBox.center();
|
||||
ImageEditor.imageBox.center();
|
||||
}
|
||||
resize.imageContainerResize.originalWidth = this.imageToResize.width;
|
||||
resize.imageContainerResize.originalHeight = this.imageToResize.height;
|
||||
resize.imageContainerResize.placeClickBox();
|
||||
crop.onImageLoadCallback();
|
||||
ImageEditor.resize.imageContainerResize.originalWidth = this.imageToResize.width;
|
||||
ImageEditor.resize.imageContainerResize.originalHeight = this.imageToResize.height;
|
||||
ImageEditor.resize.imageContainerResize.placeClickBox();
|
||||
ImageEditor.crop.onImageLoadCallback();
|
||||
}
|
||||
this.reportSize();
|
||||
},
|
||||
@ -50,9 +50,9 @@ var ImageToResize = {
|
||||
var imageWidth = Element.getDimensions($('image')).width;
|
||||
var imageHeight = Element.getDimensions($('image')).height;
|
||||
if(imageWidth > windowWidth - 40 || imageHeight > windowHeight - 40) {
|
||||
imageHistory.clear();
|
||||
ImageEditor.imageHistory.clear();
|
||||
Element.hide($('imageContainer'),$('image'));
|
||||
ratio = imageWidth / imageHeight;
|
||||
var ratio = imageWidth / imageHeight;
|
||||
$('loadingIndicatorContainer2').style.left = windowWidth/2 + 'px';
|
||||
$('loadingIndicatorContainer2').style.top = windowHeight/2 + 100 + 'px';
|
||||
while(imageWidth > windowWidth - 40 || imageHeight > windowHeight - 40) {
|
||||
@ -60,19 +60,19 @@ var ImageToResize = {
|
||||
imageHeight = imageWidth * (1/ratio);
|
||||
}
|
||||
this.reportSize(0,0);
|
||||
resize.imageContainerResize.setVisible(false);
|
||||
crop.disable();
|
||||
resize.imageContainerResize.disable();
|
||||
effects.disableRotate();
|
||||
imageHistory.disable();
|
||||
imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this),false);
|
||||
ImageEditor.resize.imageContainerResize.setVisible(false);
|
||||
ImageEditor.crop.disable();
|
||||
ImageEditor.resize.imageContainerResize.disable();
|
||||
ImageEditor.effects.disableRotate();
|
||||
ImageEditor.imageHistory.disable();
|
||||
ImageEditor.imageTransformation.resize(imageWidth,imageHeight,ImageEditor.ImageToResize.resizeOnFirstLoadCallBack.bind(this),false);
|
||||
}
|
||||
},
|
||||
|
||||
resizeOnFirstLoadCallBack: function() {
|
||||
Element.hide($('loadingIndicatorContainer2'));
|
||||
resize.imageContainerResize.setVisible(true);
|
||||
resize.imageContainerResize.placeClickBox();
|
||||
imageBox.center();
|
||||
ImageEditor.resize.imageContainerResize.setVisible(true);
|
||||
ImageEditor.resize.imageContainerResize.placeClickBox();
|
||||
ImageEditor.imageBox.center();
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
var ImageBox = {
|
||||
ImageEditor.ImageBox = {
|
||||
|
||||
initialize: function() {
|
||||
this.indicatorWidth = 32;
|
||||
this.indicatorHeight = 32;
|
||||
this.showIndicator = ImageBox.showIndicator.bind(this);
|
||||
this.hideIndicator = ImageBox.hideIndicator.bind(this);
|
||||
this.reCenterIndicator = ImageBox.reCenterIndicator.bind(this);
|
||||
this.centerIndicator = ImageBox.centerIndicator.bind(this);
|
||||
this.center = ImageBox.center.bind(this);
|
||||
this.imageContainer = Positioning.addBehaviour($('imageContainer'));
|
||||
this.showIndicator = ImageEditor.ImageBox.showIndicator.bind(this);
|
||||
this.hideIndicator = ImageEditor.ImageBox.hideIndicator.bind(this);
|
||||
this.reCenterIndicator = ImageEditor.ImageBox.reCenterIndicator.bind(this);
|
||||
this.centerIndicator = ImageEditor.ImageBox.centerIndicator.bind(this);
|
||||
this.center = ImageEditor.ImageBox.center.bind(this);
|
||||
this.imageContainer = ImageEditor.Positioning.addBehaviour($('imageContainer'));
|
||||
Element.hide(this.imageContainer);
|
||||
this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer'));
|
||||
this.indicatorImage = Positioning.addBehaviour($('loadingIndicator'));
|
||||
Positioning.addBehaviour($('Main'));
|
||||
this.indicator = ImageEditor.Positioning.addBehaviour($('loadingIndicatorContainer'));
|
||||
this.indicatorImage = ImageEditor.Positioning.addBehaviour($('loadingIndicator'));
|
||||
ImageEditor.Positioning.addBehaviour($('Main'));
|
||||
},
|
||||
|
||||
showIndicator: function(container) {
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
|
||||
var ImageEditor = {
|
||||
ImageEditor.Main = {
|
||||
initialize: function(imageFile) {
|
||||
imageFile += '1234';
|
||||
crop = null;
|
||||
imageHistory = new ImageHistory.initialize();
|
||||
environment = new Environment.initialize(imageFile);
|
||||
imageTransformation = new ImageTransformation.initialize();
|
||||
resize = new Resize.initialize($('imageContainer'));
|
||||
effects = new Effects.initialize();
|
||||
crop = new Crop.initialize();
|
||||
documentBody = new DocumentBody.initialize();
|
||||
ImageEditor.crop = null;
|
||||
ImageEditor.imageHistory = new ImageEditor.ImageHistory.initialize();
|
||||
ImageEditor.environment = new ImageEditor.Environment.initialize(imageFile);
|
||||
ImageEditor.imageTransformation = new ImageEditor.ImageTransformation.initialize();
|
||||
ImageEditor.resize = new ImageEditor.Resize.initialize($('imageContainer'));
|
||||
ImageEditor.effects = new ImageEditor.Effects.initialize();
|
||||
ImageEditor.crop = new ImageEditor.Crop.initialize();
|
||||
ImageEditor.documentBody = new ImageEditor.DocumentBody.initialize();
|
||||
this.originalImageFile = imageFile;
|
||||
this.tottalyOriginalImageFile = imageFile;
|
||||
this.onSaveClick = ImageEditor.onSaveClick.bind(this);
|
||||
this.onCloseClick = ImageEditor.onCloseClick.bind(this);
|
||||
this.onSaveClick = ImageEditor.Main.onSaveClick.bind(this);
|
||||
this.onCloseClick = ImageEditor.Main.onCloseClick.bind(this);
|
||||
Event.observe($('SaveButton'),'click',this.onSaveClick);
|
||||
Event.observe($('ExitButton'),'click',this.onCloseClick);
|
||||
Element.hide($('CurrentAction'));
|
||||
},
|
||||
|
||||
onSaveClick: function() {
|
||||
if(this.tottalyOriginalImageFile != $('image').src) {
|
||||
imageTransformation.save(this.tottalyOriginalImageFile,$('image').src,this.onCloseClick);
|
||||
ImageEditor.imageTransformation.save(this.tottalyOriginalImageFile,$('image').src,this.onCloseClick);
|
||||
} else {
|
||||
this.onCloseClick();
|
||||
}
|
||||
@ -32,7 +32,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));
|
||||
ImageEditor.imageTransformation.close(ImageEditor.Main.onCloseCallback.bind(this));
|
||||
},
|
||||
|
||||
onCloseCallback: function() {
|
||||
|
||||
@ -1,35 +1,35 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageHistory = {
|
||||
ImageEditor.ImageHistory = {
|
||||
|
||||
initialize: function() {
|
||||
this.history = new Array();
|
||||
this.historyPointer = -1;
|
||||
this.modifiedOriginalImage = false;
|
||||
this.isEnabled = true;
|
||||
this.image = Positioning.addBehaviour($('image'));
|
||||
this.image = ImageEditor.Positioning.addBehaviour($('image'));
|
||||
this.size = new Array();
|
||||
this.fakeImage = $('fakeImg');
|
||||
this.image = $('image');
|
||||
this.undo = ImageHistory.undo.bind(this);
|
||||
this.redo = ImageHistory.redo.bind(this);
|
||||
this.add = ImageHistory.add.bind(this);
|
||||
this.addListeners = ImageHistory.addListeners.bind(this);
|
||||
this.operationMade = ImageHistory.operationMade.bind(this);
|
||||
this.isInHistory = ImageHistory.isInHistory.bind(this);
|
||||
this.onImageLoad = ImageHistory.onImageLoad.bind(this);
|
||||
this.removeLastOperation = ImageHistory.removeLastOperation.bind(this);
|
||||
this.undo = ImageEditor.ImageHistory.undo.bind(this);
|
||||
this.redo = ImageEditor.ImageHistory.redo.bind(this);
|
||||
this.add = ImageEditor.ImageHistory.add.bind(this);
|
||||
this.addListeners = ImageEditor.ImageHistory.addListeners.bind(this);
|
||||
this.operationMade = ImageEditor.ImageHistory.operationMade.bind(this);
|
||||
this.isInHistory = ImageEditor.ImageHistory.isInHistory.bind(this);
|
||||
this.onImageLoad = ImageEditor.ImageHistory.onImageLoad.bind(this);
|
||||
this.removeLastOperation = ImageEditor.ImageHistory.removeLastOperation.bind(this);
|
||||
|
||||
this.enable = ImageHistory.enable.bind(this);
|
||||
this.disable = ImageHistory.disable.bind(this);
|
||||
this.clear = ImageHistory.clear.bind(this);
|
||||
this.enable = ImageEditor.ImageHistory.enable.bind(this);
|
||||
this.disable = ImageEditor.ImageHistory.disable.bind(this);
|
||||
this.clear = ImageEditor.ImageHistory.clear.bind(this);
|
||||
this.addListeners();
|
||||
},
|
||||
|
||||
undo: function() {
|
||||
if(this.historyPointer >= 1) {
|
||||
operation = this.history[this.historyPointer].operation;
|
||||
var 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;
|
||||
@ -38,19 +38,19 @@ ImageHistory = {
|
||||
this.historyPointer = this.historyPointer - 1;
|
||||
this.image.src = this.history[this.historyPointer].fileUrl;
|
||||
} else {
|
||||
statusMessageWrapper.statusMessage("No more undo","bad");
|
||||
ImageEditor.statusMessageWrapper.statusMessage("No more undo","bad");
|
||||
}
|
||||
},
|
||||
|
||||
redo: function() {
|
||||
if(this.historyPointer < this.history.length-1) {
|
||||
operation = this.history[this.historyPointer+1].operation;
|
||||
var operation = this.history[this.historyPointer+1].operation;
|
||||
if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
|
||||
Event.observe('image','load',this.onImageLoad);
|
||||
this.historyPointer = this.historyPointer + 1;
|
||||
this.image.src = this.history[this.historyPointer].fileUrl;
|
||||
} else {
|
||||
statusMessageWrapper.statusMessage("No more redo","bad");
|
||||
ImageEditor.statusMessageWrapper.statusMessage("No more redo","bad");
|
||||
}
|
||||
},
|
||||
|
||||
@ -125,8 +125,8 @@ ImageHistory = {
|
||||
this.image.style.height = this.size[this.historyPointer].height + 'px';
|
||||
$('imageContainer').style.width = this.size[this.historyPointer].width + 'px';
|
||||
$('imageContainer').style.height = this.size[this.historyPointer].height + 'px';
|
||||
resize.imageContainerResize.originalWidth = this.size[this.historyPointer].width;
|
||||
resize.imageContainerResize.originalHeight = this.size[this.historyPointer].height;
|
||||
imageToResize.onImageLoad();
|
||||
ImageEditor.resize.imageContainerResize.originalWidth = this.size[this.historyPointer].width;
|
||||
ImageEditor.resize.imageContainerResize.originalHeight = this.size[this.historyPointer].height;
|
||||
ImageEditor.imageToResize.onImageLoad();
|
||||
}
|
||||
};
|
||||
@ -1,27 +1,27 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
var ImageTransformation = {
|
||||
ImageEditor.ImageTransformation = {
|
||||
initialize: function() {
|
||||
this.currentOperation = "";
|
||||
this.currentResponse = new Array();
|
||||
this.currentCallback = null;
|
||||
this.resize = ImageTransformation.resize.bind(this);
|
||||
this.rotate = ImageTransformation.rotate.bind(this);
|
||||
this.crop = ImageTransformation.crop.bind(this);
|
||||
this.save = ImageTransformation.save.bind(this);
|
||||
this.close = ImageTransformation.close.bind(this);
|
||||
this.onSuccess = ImageTransformation.onSuccess.bind(this);
|
||||
this.onImageLoad = ImageTransformation.onImageLoad.bind(this);
|
||||
this.resize = ImageEditor.ImageTransformation.resize.bind(this);
|
||||
this.rotate = ImageEditor.ImageTransformation.rotate.bind(this);
|
||||
this.crop = ImageEditor.ImageTransformation.crop.bind(this);
|
||||
this.save = ImageEditor.ImageTransformation.save.bind(this);
|
||||
this.close = ImageEditor.ImageTransformation.close.bind(this);
|
||||
this.onSuccess = ImageEditor.ImageTransformation.onSuccess.bind(this);
|
||||
this.onImageLoad = ImageEditor.ImageTransformation.onImageLoad.bind(this);
|
||||
},
|
||||
|
||||
resize: function(width,height,callback,imageAlreadyChangedSize) {
|
||||
this.currentOperation = "resize";
|
||||
this.currentCallback = callback;
|
||||
if(imageHistory.modifiedOriginalImage) {
|
||||
fileToResize = $('image').src;
|
||||
if(ImageEditor.imageHistory.modifiedOriginalImage) {
|
||||
var fileToResize = $('image').src;
|
||||
} else {
|
||||
fileToResize = imageEditor.originalImageFile;
|
||||
var fileToResize = ImageEditor.imageEditor.originalImageFile;
|
||||
}
|
||||
var options = {
|
||||
method: 'post',
|
||||
@ -30,9 +30,9 @@ var ImageTransformation = {
|
||||
};
|
||||
|
||||
if(imageAlreadyChangedSize == false) {
|
||||
imageBox.showIndicator($('Main'));
|
||||
ImageEditor.imageBox.showIndicator($('Main'));
|
||||
} else {
|
||||
imageBox.showIndicator();
|
||||
ImageEditor.imageBox.showIndicator();
|
||||
}
|
||||
new Ajax.Request('admin/ImageEditor/manipulate', options);
|
||||
},
|
||||
@ -45,7 +45,7 @@ var ImageTransformation = {
|
||||
postBody: 'command=rotate&file=' + $('image').src + '&angle=' + angle ,
|
||||
onSuccess: this.onSuccess
|
||||
};
|
||||
imageBox.showIndicator();
|
||||
ImageEditor.imageBox.showIndicator();
|
||||
new Ajax.Request('admin/ImageEditor/manipulate', options);
|
||||
},
|
||||
|
||||
@ -57,7 +57,7 @@ var ImageTransformation = {
|
||||
postBody: 'command=crop&file=' + $('image').src + '&top=' + top + '&left=' + left + '&width=' + width + '&height=' + height,
|
||||
onSuccess: this.onSuccess
|
||||
};
|
||||
imageBox.showIndicator();
|
||||
ImageEditor.imageBox.showIndicator();
|
||||
new Ajax.Request('admin/ImageEditor/manipulate', options);
|
||||
},
|
||||
|
||||
@ -94,14 +94,14 @@ var ImageTransformation = {
|
||||
onImageLoad: function(event) {
|
||||
Event.stopObserving('fakeImg','load', this.onImageLoad);
|
||||
$('image').src = this.currentResponse.fileName;
|
||||
imageBox.hideIndicator();
|
||||
resize.imageContainerResize.originalWidth = this.currentResponse.width;
|
||||
resize.imageContainerResize.originalHeight = this.currentResponse.height;
|
||||
ImageEditor.imageBox.hideIndicator();
|
||||
ImageEditor.resize.imageContainerResize.originalWidth = this.currentResponse.width;
|
||||
ImageEditor.resize.imageContainerResize.originalHeight = this.currentResponse.height;
|
||||
$('imageContainer').style.height = this.currentResponse.height + 'px';
|
||||
$('imageContainer').style.width = this.currentResponse.width + 'px';
|
||||
$('image').style.height = this.currentResponse.height + 'px';
|
||||
$('image').style.width = this.currentResponse.width + 'px';
|
||||
imageHistory.add(this.currentOperation,$('image').src);
|
||||
ImageEditor.imageHistory.add(this.currentOperation,$('image').src);
|
||||
if(this.currentCallback != null) this.currentCallback();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
@ -1,36 +1,36 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
var Resize = {
|
||||
ImageEditor.Resize = {
|
||||
|
||||
initialize: function(element) {
|
||||
this.element = element;
|
||||
this.leftBoxConstraint = 1;
|
||||
this.topBoxConstraint = 0;
|
||||
this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this);
|
||||
options = {
|
||||
resizeStop: Resize.resizeStop.bind(this),
|
||||
onDrag: Resize.onDrag.bind(this),
|
||||
onResize: Resize.onResize.bind(this),
|
||||
getMousePos: Resize.getMousePos.bind(this)
|
||||
this.getRelativeMousePos = ImageEditor.Resize.getRelativeMousePos.bind(this);
|
||||
var options = {
|
||||
resizeStop: ImageEditor.Resize.resizeStop.bind(this),
|
||||
onDrag: ImageEditor.Resize.onDrag.bind(this),
|
||||
onResize: ImageEditor.Resize.onResize.bind(this),
|
||||
getMousePos: ImageEditor.Resize.getMousePos.bind(this)
|
||||
};
|
||||
new Positioning.addBehaviour(this.element);
|
||||
this.imageContainerResize = new Resizeable.initialize(element,options);
|
||||
new ImageEditor.Positioning.addBehaviour(this.element);
|
||||
this.imageContainerResize = new ImageEditor.Resizeable.initialize(element,options);
|
||||
this.imageContainerResize.setVisible(false);
|
||||
},
|
||||
|
||||
resizeStop: function(event) {
|
||||
if(EventStack.getLastEventElement() != null) {
|
||||
imageElement = $('image');
|
||||
EventStack.clearStack();
|
||||
if(ImageEditor.EventStack.getLastEventElement() != null) {
|
||||
var imageElement = $('image');
|
||||
ImageEditor.EventStack.clearStack();
|
||||
if(this.imageContainerResize.isEnabled) {
|
||||
if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) {
|
||||
$('imageContainer').style.backgroundImage = 'url("")';
|
||||
imageTransformation.resize(imageElement.width,imageElement.height,Resize.resizeCallback.bind(this));
|
||||
effects.disableRotate();
|
||||
crop.disable();
|
||||
ImageEditor.imageTransformation.resize(imageElement.width,imageElement.height,ImageEditor.Resize.resizeCallback.bind(this));
|
||||
ImageEditor.effects.disableRotate();
|
||||
ImageEditor.crop.disable();
|
||||
this.imageContainerResize.disable();
|
||||
imageHistory.disable();
|
||||
ImageEditor.imageHistory.disable();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -44,7 +44,7 @@ var Resize = {
|
||||
{
|
||||
if(this.element.getTop() < this.topBoxConstraint) this.element.style.top = this.topBoxConstraint + "px";
|
||||
if(this.element.getLeft() < this.leftBoxConstraint) this.element.style.left = this.leftBoxConstraint + "px";
|
||||
imageBox.reCenterIndicator();
|
||||
ImageEditor.imageBox.reCenterIndicator();
|
||||
},
|
||||
|
||||
onResize: function(width,height) {
|
||||
@ -52,16 +52,16 @@ var Resize = {
|
||||
$('image').style.height = height + "px";
|
||||
},
|
||||
getMousePos: function(event) {
|
||||
relativeMouseX = this.getRelativeMousePos(event).x;
|
||||
relativeMouseY = this.getRelativeMousePos(event).y;
|
||||
var relativeMouseX = this.getRelativeMousePos(event).x;
|
||||
var relativeMouseY = this.getRelativeMousePos(event).y;
|
||||
if(relativeMouseX <= this.leftBoxConstraint) x = this.leftBoxConstraint + this.element.getParentLeft(); else x = relativeMouseX + this.element.getParentLeft();
|
||||
if(relativeMouseY <= this.topBoxConstraint) y = this.topBoxConstraint + this.element.getParentTop(); else y = relativeMouseY + this.element.getParentTop();
|
||||
return {x: x,y: y};
|
||||
},
|
||||
|
||||
getRelativeMousePos: function(event) {
|
||||
relativeMouseX = Event.pointerX(event) + $('imageEditorContainer').scrollLeft - this.element.getParentLeft();
|
||||
relativeMouseY = Event.pointerY(event) + $('imageEditorContainer').scrollTop - this.element.getParentTop();
|
||||
var relativeMouseX = Event.pointerX(event) + $('imageEditorContainer').scrollLeft - this.element.getParentLeft();
|
||||
var relativeMouseY = Event.pointerY(event) + $('imageEditorContainer').scrollTop - this.element.getParentTop();
|
||||
return {x: relativeMouseX,y: relativeMouseY};
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,14 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
Resizeable = {
|
||||
ImageEditor.Resizeable = {
|
||||
|
||||
initialize: function(element,options) {
|
||||
this.resizeStop = options.resizeStop.bind(this);
|
||||
this.onDrag = options.onDrag.bind(this);
|
||||
this.customOnResize = options.onResize.bind(this);
|
||||
this.getMousePos = options.getMousePos.bind(this);
|
||||
this.bindAll = Resizeable.bindAll.bind(this);
|
||||
this.bindAll = ImageEditor.Resizeable.bindAll.bind(this);
|
||||
this.bindAll();
|
||||
this.element = element;
|
||||
this.createClickBoxes();
|
||||
@ -20,14 +20,14 @@ Resizeable = {
|
||||
|
||||
resizeStart: function(event) {
|
||||
if(Element.hasClassName(Event.element(event),'clickBox')) {
|
||||
EventStack.addEvent(event);
|
||||
ImageEditor.EventStack.addEvent(event);
|
||||
Event.stop(event);
|
||||
}
|
||||
},
|
||||
|
||||
leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
|
||||
newHeight = top - relativeMouseY + height;
|
||||
newWidth = Math.round(newHeight / ratio);
|
||||
var newHeight = top - relativeMouseY + height;
|
||||
var newWidth = Math.round(newHeight / ratio);
|
||||
if(this.resize(newWidth,newHeight)) {
|
||||
this.element.style.top = top - (newHeight - height) + "px";
|
||||
this.element.style.left = left - (newWidth - width) + "px";
|
||||
@ -36,13 +36,13 @@ Resizeable = {
|
||||
},
|
||||
|
||||
leftMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
|
||||
newWidth = left - relativeMouseX + width;
|
||||
var newWidth = left - relativeMouseX + width;
|
||||
if(this.resize(newWidth,-1000)) this.element.style.left = left - (left - relativeMouseX) + "px";
|
||||
},
|
||||
|
||||
leftLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
|
||||
newHeight = relativeMouseY - (top + height) + height;
|
||||
newWidth = Math.round(newHeight / ratio);
|
||||
var newHeight = relativeMouseY - (top + height) + height;
|
||||
var newWidth = Math.round(newHeight / ratio);
|
||||
if(this.resize(newWidth,newHeight)) {
|
||||
this.element.style.left = left - (newWidth - width) + "px";
|
||||
if(parseInt(this.element.style.left) < 0) this.element.style.left = "1px";
|
||||
@ -50,37 +50,37 @@ Resizeable = {
|
||||
},
|
||||
|
||||
rightUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
|
||||
newHeight = top - relativeMouseY + height;
|
||||
newWidth = Math.round(newHeight / ratio);
|
||||
var newHeight = top - relativeMouseY + height;
|
||||
var newWidth = Math.round(newHeight / ratio);
|
||||
if(this.resize(newWidth,newHeight)) this.element.style.top = (top - (newHeight - height) ) + 'px';
|
||||
},
|
||||
|
||||
rightMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
|
||||
newWidth = relativeMouseX - left;
|
||||
var newWidth = relativeMouseX - left;
|
||||
this.resize(newWidth,-1000);
|
||||
},
|
||||
|
||||
rightLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
|
||||
newHeight = relativeMouseY - top;
|
||||
newWidth = Math.round(newHeight / ratio);
|
||||
var newHeight = relativeMouseY - top;
|
||||
var newWidth = Math.round(newHeight / ratio);
|
||||
this.resize(newWidth,newHeight);
|
||||
},
|
||||
|
||||
upperMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
|
||||
newHeight = top - relativeMouseY + height;
|
||||
var newHeight = top - relativeMouseY + height;
|
||||
if(this.resize(-1000,newHeight)) {
|
||||
this.element.style.top = (top - (newHeight - height)) + 'px';
|
||||
}
|
||||
},
|
||||
|
||||
lowerMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
|
||||
newHeight = relativeMouseY - (top + height) + height;
|
||||
var newHeight = relativeMouseY - (top + height) + height;
|
||||
this.resize(-1000,newHeight);
|
||||
},
|
||||
|
||||
onResize: function(event) {
|
||||
if(EventStack.getLastEventElement() != null && this.isVisible && this.isEnabled) {
|
||||
lastEventElement = EventStack.getLastEventElement();
|
||||
if(ImageEditor.EventStack.getLastEventElement() != null && this.isVisible && this.isEnabled) {
|
||||
var lastEventElement = ImageEditor.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')) {
|
||||
@ -109,7 +109,7 @@ Resizeable = {
|
||||
}
|
||||
this.placeClickBox();
|
||||
this.customOnResize(this.element.getWidth(),this.element.getHeight());
|
||||
imageBox.reCenterIndicator();
|
||||
ImageEditor.imageBox.reCenterIndicator();
|
||||
Event.stop(event);
|
||||
}
|
||||
},
|
||||
@ -130,7 +130,7 @@ Resizeable = {
|
||||
if(height == -1000) {
|
||||
height = this.originalHeight;
|
||||
}
|
||||
if(!crop.isVisible) {
|
||||
if(!ImageEditor.crop.isVisible) {
|
||||
$('image').style.width = width + 'px';
|
||||
$('image').style.height = height + 'px';
|
||||
}
|
||||
@ -144,18 +144,18 @@ Resizeable = {
|
||||
this.originalHeight = Element.getDimensions(this.element).height;
|
||||
this.originalWidth = Element.getDimensions(this.element).width;
|
||||
}
|
||||
width = Element.getDimensions(this.element).width;
|
||||
height = Element.getDimensions(this.element).height;
|
||||
clickBoxHalfWidth = Math.floor(Element.getDimensions(this.leftUpperClickBox2).width/2)+1;
|
||||
var width = Element.getDimensions(this.element).width;
|
||||
var height = Element.getDimensions(this.element).height;
|
||||
var clickBoxHalfWidth = Math.floor(Element.getDimensions(this.leftUpperClickBox2).width/2)+1;
|
||||
|
||||
leftUpper = new Point.initialize(-clickBoxHalfWidth,-clickBoxHalfWidth);
|
||||
leftMiddle = new Point.initialize(-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
|
||||
leftLower = new Point.initialize(-clickBoxHalfWidth,height-clickBoxHalfWidth);
|
||||
rightUpper = new Point.initialize(width-clickBoxHalfWidth,-clickBoxHalfWidth);
|
||||
rightMiddle = new Point.initialize(width-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
|
||||
rightLower = new Point.initialize(width-clickBoxHalfWidth,height-clickBoxHalfWidth);
|
||||
upperMiddle = new Point.initialize(width/2-clickBoxHalfWidth,-clickBoxHalfWidth);
|
||||
lowerMiddle = new Point.initialize(width/2-clickBoxHalfWidth,height-clickBoxHalfWidth);
|
||||
var leftUpper = new ImageEditor.Point.initialize(-clickBoxHalfWidth,-clickBoxHalfWidth);
|
||||
var leftMiddle = new ImageEditor.Point.initialize(-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
|
||||
var leftLower = new ImageEditor.Point.initialize(-clickBoxHalfWidth,height-clickBoxHalfWidth);
|
||||
var rightUpper = new ImageEditor.Point.initialize(width-clickBoxHalfWidth,-clickBoxHalfWidth);
|
||||
var rightMiddle = new ImageEditor.Point.initialize(width-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
|
||||
var rightLower = new ImageEditor.Point.initialize(width-clickBoxHalfWidth,height-clickBoxHalfWidth);
|
||||
var upperMiddle = new ImageEditor.Point.initialize(width/2-clickBoxHalfWidth,-clickBoxHalfWidth);
|
||||
var lowerMiddle = new ImageEditor.Point.initialize(width/2-clickBoxHalfWidth,height-clickBoxHalfWidth);
|
||||
|
||||
this.leftUpperClickBox.style.left = leftUpper.x + 'px';
|
||||
this.leftUpperClickBox.style.top = leftUpper.y + 'px';
|
||||
@ -181,21 +181,21 @@ Resizeable = {
|
||||
},
|
||||
|
||||
createClickBoxes: function() {
|
||||
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"]);
|
||||
this.leftUpperClickBox = this.createElement('div',ImageEditor.Random.string(5),["leftUpperClickBox","clickBox"]);
|
||||
this.leftMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["leftMiddleClickBox","clickBox"]);
|
||||
this.leftLowerClickBox = this.createElement('div',ImageEditor.Random.string(5),["leftLowerClickBox","clickBox"]);
|
||||
this.rightUpperClickBox = this.createElement('div',ImageEditor.Random.string(5),["rightUpperClickBox","clickBox"]);
|
||||
this.rightMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["rightMiddleClickBox","clickBox"]);
|
||||
this.rightLowerClickBox = this.createElement('div',ImageEditor.Random.string(5),["rightLowerClickBox","clickBox"]);
|
||||
this.upperMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["upperMiddleClickBox","clickBox"]);
|
||||
this.lowerMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["lowerMiddleClickBox","clickBox"]);
|
||||
this.leftUpperClickBox2 = this.createElement('div',ImageEditor.Random.string(5),["leftUpperClickBox","clickBox"]);
|
||||
//Safarai requires creating another clickbox because leftUppperClickBox is hidden (hack)
|
||||
|
||||
},
|
||||
|
||||
createElement: function(tag,id,classes) {
|
||||
newElement = document.createElement(tag);
|
||||
var newElement = document.createElement(tag);
|
||||
newElement.id = id;
|
||||
classes.each(function(item) {
|
||||
Element.addClassName(newElement,item);
|
||||
@ -207,28 +207,28 @@ Resizeable = {
|
||||
},
|
||||
|
||||
bindAll: function() {
|
||||
this.setListeners = Resizeable.setListeners.bind(this);
|
||||
this.placeClickBox = Resizeable.placeClickBox.bind(this);
|
||||
this.resizeStart = Resizeable.resizeStart.bind(this);
|
||||
this.onResize = Resizeable.onResize.bind(this);
|
||||
this.resize = Resizeable.resize.bind(this);
|
||||
this.createClickBoxes = Resizeable.createClickBoxes.bind(this);
|
||||
this.createElement = Resizeable.createElement.bind(this);
|
||||
this.addListener = Resizeable.addListener.bind(this);
|
||||
this.addDraging = Resizeable.addDraging.bind(this);
|
||||
this.setVisible = Resizeable.setVisible.bind(this);
|
||||
this.removeDraging = Resizeable.removeDraging.bind(this);
|
||||
this.disable = Resizeable.disable.bind(this);
|
||||
this.enable = Resizeable.enable.bind(this);
|
||||
this.setListeners = ImageEditor.Resizeable.setListeners.bind(this);
|
||||
this.placeClickBox = ImageEditor.Resizeable.placeClickBox.bind(this);
|
||||
this.resizeStart = ImageEditor.Resizeable.resizeStart.bind(this);
|
||||
this.onResize = ImageEditor.Resizeable.onResize.bind(this);
|
||||
this.resize = ImageEditor.Resizeable.resize.bind(this);
|
||||
this.createClickBoxes = ImageEditor.Resizeable.createClickBoxes.bind(this);
|
||||
this.createElement = ImageEditor.Resizeable.createElement.bind(this);
|
||||
this.addListener = ImageEditor.Resizeable.addListener.bind(this);
|
||||
this.addDraging = ImageEditor.Resizeable.addDraging.bind(this);
|
||||
this.setVisible = ImageEditor.Resizeable.setVisible.bind(this);
|
||||
this.removeDraging = ImageEditor.Resizeable.removeDraging.bind(this);
|
||||
this.disable = ImageEditor.Resizeable.disable.bind(this);
|
||||
this.enable = ImageEditor.Resizeable.enable.bind(this);
|
||||
|
||||
this.leftUpperDrag = Resizeable.leftUpperDrag.bind(this);
|
||||
this.leftMiddleDrag = Resizeable.leftMiddleDrag.bind(this);
|
||||
this.leftLowerDrag = Resizeable.leftLowerDrag.bind(this);
|
||||
this.rightUpperDrag = Resizeable.rightUpperDrag.bind(this);
|
||||
this.rightMiddleDrag = Resizeable.rightMiddleDrag.bind(this);
|
||||
this.rightLowerDrag = Resizeable.rightLowerDrag.bind(this);
|
||||
this.upperMiddleDrag = Resizeable.upperMiddleDrag.bind(this);
|
||||
this.lowerMiddleDrag = Resizeable.lowerMiddleDrag.bind(this);
|
||||
this.leftUpperDrag = ImageEditor.Resizeable.leftUpperDrag.bind(this);
|
||||
this.leftMiddleDrag = ImageEditor.Resizeable.leftMiddleDrag.bind(this);
|
||||
this.leftLowerDrag = ImageEditor.Resizeable.leftLowerDrag.bind(this);
|
||||
this.rightUpperDrag = ImageEditor.Resizeable.rightUpperDrag.bind(this);
|
||||
this.rightMiddleDrag = ImageEditor.Resizeable.rightMiddleDrag.bind(this);
|
||||
this.rightLowerDrag = ImageEditor.Resizeable.rightLowerDrag.bind(this);
|
||||
this.upperMiddleDrag = ImageEditor.Resizeable.upperMiddleDrag.bind(this);
|
||||
this.lowerMiddleDrag = ImageEditor.Resizeable.lowerMiddleDrag.bind(this);
|
||||
},
|
||||
|
||||
setListeners: function() {
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
Point = {
|
||||
*/
|
||||
ImageEditor = {};
|
||||
ImageEditor.Point = {
|
||||
initialize: function(x,y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
}
|
||||
|
||||
EventStack = {
|
||||
ImageEditor.EventStack = {
|
||||
lastEventElement: null,
|
||||
getLastEventElement: function(){
|
||||
return EventStack.lastEventElement;
|
||||
return ImageEditor.EventStack.lastEventElement;
|
||||
},
|
||||
|
||||
addEvent: function(event) {
|
||||
EventStack.lastEventElement = Event.element(event);
|
||||
ImageEditor.EventStack.lastEventElement = Event.element(event);
|
||||
},
|
||||
|
||||
clearStack: function() {
|
||||
@ -23,17 +24,17 @@ EventStack = {
|
||||
}
|
||||
}
|
||||
|
||||
Positioning = {
|
||||
ImageEditor.Positioning = {
|
||||
addBehaviour: function(element) {
|
||||
this.element = element;
|
||||
this.element.getTop = Positioning.getTop.bind(this);
|
||||
this.element.getLeft = Positioning.getLeft.bind(this);
|
||||
this.element.getWidth = Positioning.getWidth.bind(this);
|
||||
this.element.getHeight = Positioning.getHeight.bind(this);
|
||||
this.element.getParentLeft = Positioning.getParentLeft.bind(this);
|
||||
this.element.getParentTop = Positioning.getParentTop.bind(this);
|
||||
this.element.getParentHeight = Positioning.getParentHeight.bind(this);
|
||||
this.element.getParentWidth = Positioning.getParentWidth.bind(this);
|
||||
this.element.getTop = ImageEditor.Positioning.getTop.bind(this);
|
||||
this.element.getLeft = ImageEditor.Positioning.getLeft.bind(this);
|
||||
this.element.getWidth = ImageEditor.Positioning.getWidth.bind(this);
|
||||
this.element.getHeight = ImageEditor.Positioning.getHeight.bind(this);
|
||||
this.element.getParentLeft = ImageEditor.Positioning.getParentLeft.bind(this);
|
||||
this.element.getParentTop = ImageEditor.Positioning.getParentTop.bind(this);
|
||||
this.element.getParentHeight = ImageEditor.Positioning.getParentHeight.bind(this);
|
||||
this.element.getParentWidth = ImageEditor.Positioning.getParentWidth.bind(this);
|
||||
return this.element;
|
||||
},
|
||||
|
||||
@ -54,12 +55,12 @@ Positioning = {
|
||||
},
|
||||
|
||||
getParentLeft: function() {
|
||||
parentLeft = Position.cumulativeOffset(Position.offsetParent(this.element))[0];
|
||||
var parentLeft = Position.cumulativeOffset(Position.offsetParent(this.element))[0];
|
||||
return parentLeft;
|
||||
},
|
||||
|
||||
getParentTop: function() {
|
||||
parentTop = Position.cumulativeOffset(Position.offsetParent(this.element))[1];
|
||||
var parentTop = Position.cumulativeOffset(Position.offsetParent(this.element))[1];
|
||||
return parentTop;
|
||||
},
|
||||
|
||||
@ -72,10 +73,11 @@ Positioning = {
|
||||
}
|
||||
}
|
||||
|
||||
Random = {
|
||||
ImageEditor.Random = {
|
||||
string: function(length) {
|
||||
chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
string = "";
|
||||
var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
var string = "";
|
||||
var i = 0;
|
||||
for(x=0;x<length;x++) {
|
||||
i = Math.floor(Math.random() * 57);
|
||||
string += chars.charAt(i);
|
||||
@ -84,9 +86,9 @@ Random = {
|
||||
}
|
||||
}
|
||||
|
||||
StatusMessage = {
|
||||
ImageEditor.StatusMessage = {
|
||||
initialize: function() {
|
||||
this.statusMessage = StatusMessage.statusMessage.bind(this);
|
||||
this.statusMessage = ImageEditor.StatusMessage.statusMessage.bind(this);
|
||||
window.frameElement.statusMessage = window.top.statusMessage;
|
||||
var s1 = $('statusMessage');
|
||||
var s2 = window.top.document.getElementById('statusMessage');
|
||||
@ -101,4 +103,4 @@ StatusMessage = {
|
||||
window.frameElement.statusMessage(msg, type, clearManually,this.statusMessageContainer);
|
||||
}
|
||||
}
|
||||
Event.observe(window,'load',function(e) {statusMessageWrapper = new StatusMessage.initialize();});
|
||||
Event.observe(window,'load',function(e) {ImageEditor.statusMessageWrapper = new ImageEditor.StatusMessage.initialize();});
|
||||
@ -6,7 +6,7 @@
|
||||
<title><% _t('UNTITLED','Untitled Document') %></title>
|
||||
<meta http-equiv="imagetoolbar" content="no">
|
||||
</head>
|
||||
<body id="body" onload="imageEditor = new ImageEditor.initialize('$fileToEdit');">
|
||||
<body id="body" onload="ImageEditor.imageEditor = new ImageEditor.Main.initialize('$fileToEdit');">
|
||||
<div id="Loading" style="background: #FFF url(cms/images/loading.gif) 50% 50% no-repeat; position: absolute;z-index: 100000;height: 100%;width: 100%;margin: 0;padding: 0;z-index: 100000;position: absolute;">Loading...</div>
|
||||
<div id="Main">
|
||||
<script type="text/javascript">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user