tonyair/silverstripe-cms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-cms synced 2024-07-01 00:49:26 +02:00
Code Issues Projects Releases Wiki Activity

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)

Browse Source 
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 2007-10-02 23:26:35 +00:00
parent ca8c9ea955
commit b0d78ea5bd
16 changed files with 261 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
code/AssetTableField.php
View File

@ -92,7 +92,7 @@ class AssetTableField extends ComplexTableField {
new Tab("Image", new Tab("Image",
new LiteralField("ImageFull", new LiteralField("ImageFull",
'<a id="ImageEditorActivator" href="javascript: void(0)">' . "<img id='thumbnailImage' src='{$thumbnail}?r=" . rand(1,100000) . "' 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>' '<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' 'Main'

14
javascript/ImageEditor/Activator.js
View File

@ -1,17 +1,19 @@
var ImageEditorActivator = { ImageEditor = {};
ImageEditor.Activator = {
initialize: function() { initialize: function() {
this.onOpen = ImageEditorActivator.onOpen.bind(this); this.onOpen = ImageEditor.Activator.onOpen.bind(this);
}, },
onOpen: function() { onOpen: function() {
var windowWidth = Element.getDimensions(window.top.document.body).width; var windowWidth = Element.getDimensions(window.top.document.body).width;
var windowHeight = Element.getDimensions(window.top.document.body).height; 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) { if(iframe != null) {
iframe.parentNode.removeChild(iframe); iframe.parentNode.removeChild(iframe);
} }
iframe = window.top.document.createElement('iframe'); iframe = window.top.document.createElement('iframe');
fileToEdit = $('ImageEditorActivator').firstChild.src; var fileToEdit = $('ImageEditorActivator').firstChild.src;
iframe.setAttribute("src","admin/ImageEditor?fileToEdit=" + fileToEdit); iframe.setAttribute("src","admin/ImageEditor?fileToEdit=" + fileToEdit);
iframe.id = 'imageEditorIframe'; iframe.id = 'imageEditorIframe';
iframe.style.width = windowWidth - 6 + 'px'; iframe.style.width = windowWidth - 6 + 'px';
@ -21,8 +23,8 @@ var ImageEditorActivator = {
iframe.style.top = "8px"; iframe.style.top = "8px";
iframe.style.left = "8px"; iframe.style.left = "8px";
window.top.document.body.appendChild(iframe); window.top.document.body.appendChild(iframe);
divLeft = window.top.document.createElement('div'); var divLeft = window.top.document.createElement('div');
divRight = window.top.document.createElement('div'); var divRight = window.top.document.createElement('div');
divLeft.style.width = "8px"; divLeft.style.width = "8px";
divLeft.style.height = "300%"; divLeft.style.height = "300%";
divLeft.style.zIndex = "1000"; divLeft.style.zIndex = "1000";

73
javascript/ImageEditor/Crop.js
View File

@ -1,35 +1,35 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
var Crop = { ImageEditor.Crop = {
initialize: function() { initialize: function() {
this.cropBox = $('cropBox'); this.cropBox = $('cropBox');
new Positioning.addBehaviour(this.cropBox); new ImageEditor.Positioning.addBehaviour(this.cropBox);
this.imageContainer = $('imageContainer'); this.imageContainer = $('imageContainer');
this.leftGreyBox = $('leftGreyBox'); this.leftGreyBox = $('leftGreyBox');
this.rightGreyBox = $('rightGreyBox'); this.rightGreyBox = $('rightGreyBox');
this.upperGreyBox = $('upperGreyBox'); this.upperGreyBox = $('upperGreyBox');
this.lowerGreyBox = $('lowerGreyBox'); this.lowerGreyBox = $('lowerGreyBox');
this.centerCropBox = Crop.centerCropBox.bind(this); this.centerCropBox = ImageEditor.Crop.centerCropBox.bind(this);
this.placeGreyBox = Crop.placeGreyBox.bind(this); this.placeGreyBox = ImageEditor.Crop.placeGreyBox.bind(this);
this.setListeners = Crop.setListeners.bind(this); this.setListeners = ImageEditor.Crop.setListeners.bind(this);
this.onCropStart = Crop.onCropStart.bind(this); this.onCropStart = ImageEditor.Crop.onCropStart.bind(this);
this.onCropOk = Crop.onCropOk.bind(this); this.onCropOk = ImageEditor.Crop.onCropOk.bind(this);
this.onCropCancel = Crop.onCropCancel.bind(this); this.onCropCancel = ImageEditor.Crop.onCropCancel.bind(this);
this.doCrop = Crop.doCrop.bind(this); this.doCrop = ImageEditor.Crop.doCrop.bind(this);
this.setVisible = Crop.setVisible.bind(this); this.setVisible = ImageEditor.Crop.setVisible.bind(this);
this.enable = Crop.enable.bind(this); this.enable = ImageEditor.Crop.enable.bind(this);
this.disable = Crop.disable.bind(this); this.disable = ImageEditor.Crop.disable.bind(this);
this.onImageLoadCallback = Crop.onImageLoadCallback.bind(this); this.onImageLoadCallback = ImageEditor.Crop.onImageLoadCallback.bind(this);
Event.observe('image','load',this.centerCropBox); Event.observe('image','load',this.centerCropBox);
options = { var options = {
resizeStop: Crop.resizeStop.bind(this), resizeStop: ImageEditor.Crop.resizeStop.bind(this),
onDrag: Crop.onDrag.bind(this), onDrag: ImageEditor.Crop.onDrag.bind(this),
onResize: Crop.onResize.bind(this), onResize: ImageEditor.Crop.onResize.bind(this),
getMousePos: Crop.getMousePos.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)); Event.observe(this.cropBox,'dblclick',this.onCropOk.bind(this));
this.setListeners(); this.setListeners();
this.isVisible = false; this.isVisible = false;
@ -39,7 +39,7 @@ var Crop = {
resizeStop: function(event) { resizeStop: function(event) {
if(this.isVisible) { if(this.isVisible) {
EventStack.clearStack(); ImageEditor.EventStack.clearStack();
this.resizeCropBox.originalHeight = this.cropBox.getHeight(); this.resizeCropBox.originalHeight = this.cropBox.getHeight();
this.resizeCropBox.originalWidth = this.cropBox.getWidth(); this.resizeCropBox.originalWidth = this.cropBox.getWidth();
} }
@ -96,9 +96,10 @@ var Crop = {
} }
this.placeGreyBox(width,height); this.placeGreyBox(width,height);
}, },
getMousePos: function(event) { getMousePos: function(event) {
x = Event.pointerX(event) + $('imageEditorContainer').scrollLeft; var x = Event.pointerX(event) + $('imageEditorContainer').scrollLeft;
y = Event.pointerY(event) + $('imageEditorContainer').scrollTop; var y = Event.pointerY(event) + $('imageEditorContainer').scrollTop;
if(x <= this.leftBoxConstraint) x = this.leftBoxConstraint; if(x <= this.leftBoxConstraint) x = this.leftBoxConstraint;
if(y <= this.topBoxConstraint) y = this.topBoxConstraint; if(y <= this.topBoxConstraint) y = this.topBoxConstraint;
if(x >= this.rightBoxConstraint) x = this.rightBoxConstraint; if(x >= this.rightBoxConstraint) x = this.rightBoxConstraint;
@ -108,15 +109,15 @@ var Crop = {
doCrop: function() { doCrop: function() {
if(this.isEnabled) { if(this.isEnabled) {
newWidth = this.cropBox.getWidth() var newWidth = this.cropBox.getWidth()
newHeight = this.cropBox.getHeight() ; var newHeight = this.cropBox.getHeight() ;
startTop = this.cropBox.getTop() ; var startTop = this.cropBox.getTop() ;
startLeft = this.cropBox.getLeft() ; var startLeft = this.cropBox.getLeft() ;
if(newWidth > 35 && newHeight > 35) { 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(); this.disable();
} else { } else {
statusMessageWrapper.statusMessage("Crop area too small","bad"); ImageEditor.statusMessageWrapper.statusMessage("Crop area too small","bad");
return false; return false;
} }
$('image').style.visibility = 'visible';//hack for IE for not selecting image during crop $('image').style.visibility = 'visible';//hack for IE for not selecting image during crop
@ -125,8 +126,8 @@ var Crop = {
}, },
cropCallback: function() { cropCallback: function() {
resize.imageContainerResize.placeClickBox(); ImageEditor.resize.imageContainerResize.placeClickBox();
resize.imageContainerResize.setVisible(true); ImageEditor.resize.imageContainerResize.setVisible(true);
Element.show($('CropText')); Element.show($('CropText'));
Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('CurrentAction')); 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 $('image').style.visibility = "hidden";//hack for IE for not selecting image during crop
this.setVisible(true); this.setVisible(true);
Element.show($('CurrentAction')); Element.show($('CurrentAction'));
imageHistory.disable(); ImageEditor.imageHistory.disable();
effects.disableRotate(); ImageEditor.effects.disableRotate();
this.enable(); this.enable();
} }
}, },
@ -158,8 +159,8 @@ var Crop = {
Element.hide($('CurrentAction')); Element.hide($('CurrentAction'));
Element.show($('CropText')); Element.show($('CropText'));
this.setVisible(false); this.setVisible(false);
imageHistory.enable(); ImageEditor.imageHistory.enable();
effects.enableRotate(); ImageEditor.effects.enableRotate();
this.enable(); this.enable();
} }
$('image').style.visibility = 'visible';//hack for IE for not selecting image during crop $('image').style.visibility = 'visible';//hack for IE for not selecting image during crop
@ -174,7 +175,7 @@ var Crop = {
} else { } else {
Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('CurrentAction')); 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); this.resizeCropBox.setVisible(setVisible);
}, },
@ -187,7 +188,7 @@ var Crop = {
}, },
onImageLoadCallback: function() { onImageLoadCallback: function() {
crop.setVisible(false); ImageEditor.crop.setVisible(false);
} }
} }

10
javascript/ImageEditor/DocumentBody.js
View File

@ -1,17 +1,17 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
var DocumentBody = { ImageEditor.DocumentBody = {
initialize: function() { initialize: function() {
this.placeUI = DocumentBody.placeUI.bind(this); this.placeUI = ImageEditor.DocumentBody.placeUI.bind(this);
this.placeUI(); this.placeUI();
Event.observe(window.top,'resize',DocumentBody.resizeIframe.bind(this)); Event.observe(window.top,'resize',ImageEditor.DocumentBody.resizeIframe.bind(this));
}, },
resizeIframe: function(event) { resizeIframe: function(event) {
var windowWidth = Element.getDimensions(window.top.document.body).width; var windowWidth = Element.getDimensions(window.top.document.body).width;
var windowHeight = Element.getDimensions(window.top.document.body).height; 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.width = windowWidth - 6 + 'px';
iframe.style.height = windowHeight + 10 + 'px'; iframe.style.height = windowHeight + 10 + 'px';
this.placeUI(); this.placeUI();
@ -29,6 +29,6 @@ var DocumentBody = {
}, },
onImageEditorScroll: function() { onImageEditorScroll: function() {
imageBox.reCenterIndicator(); ImageEditor.imageBox.reCenterIndicator();
} }
} }

20
javascript/ImageEditor/Effects.js
View File

@ -1,28 +1,28 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
var Effects = { ImageEditor.Effects = {
initialize: function() { initialize: function() {
this.setListeners = Effects.setListeners.bind(this); this.setListeners = ImageEditor.Effects.setListeners.bind(this);
this.rotate = Effects.rotate.bind(this); this.rotate = ImageEditor.Effects.rotate.bind(this);
this.setListeners(); this.setListeners();
this.isRotateEnabled = true; this.isRotateEnabled = true;
this.enableRotate = Effects.enableRotate.bind(this); this.enableRotate = ImageEditor.Effects.enableRotate.bind(this);
this.disableRotate = Effects.disableRotate.bind(this); this.disableRotate = ImageEditor.Effects.disableRotate.bind(this);
}, },
rotate: function() { rotate: function() {
if(this.isRotateEnabled) { if(this.isRotateEnabled) {
resize.imageContainerResize.disable(); ImageEditor.resize.imageContainerResize.disable();
crop.disable(); ImageEditor.crop.disable();
imageHistory.disable(); ImageEditor.imageHistory.disable();
imageTransformation.rotate(90,Effects.rotateCallback.bind(this)); ImageEditor.imageTransformation.rotate(90,ImageEditor.Effects.rotateCallback.bind(this));
this.isRotateEnabled = false; this.isRotateEnabled = false;
} }
}, },
rotateCallback: function() { rotateCallback: function() {
resize.imageContainerResize.placeClickBox(); ImageEditor.resize.imageContainerResize.placeClickBox();
this.isRotateEnabled = true; this.isRotateEnabled = true;
}, },

6
javascript/ImageEditor/Environment.js
View File

@ -1,9 +1,9 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
var Environment = { ImageEditor.Environment = {
initialize: function (imageFile) { initialize: function (imageFile) {
imageBox = new ImageBox.initialize(); ImageEditor.imageBox = new ImageEditor.ImageBox.initialize();
imageToResize = new ImageToResize.initialize(imageFile); ImageEditor.imageToResize = new ImageEditor.ImageToResize.initialize(imageFile);
} }
} }

54
javascript/ImageEditor/Image.js
View File

@ -1,14 +1,14 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
var ImageToResize = { ImageEditor.ImageToResize = {
initialize: function(imageFile) { initialize: function(imageFile) {
Element.hide($('image')); Element.hide($('image'));
this.imageToResize = $('image'); this.imageToResize = $('image');
this.imageToResize.src = imageFile; this.imageToResize.src = imageFile;
this.reportSize = ImageToResize.reportSize.bind(this); this.reportSize = ImageEditor.ImageToResize.reportSize.bind(this);
this.onImageLoad = ImageToResize.onImageLoad.bind(this); this.onImageLoad = ImageEditor.ImageToResize.onImageLoad.bind(this);
this.resizeOnFirstLoad = ImageToResize.resizeOnFirstLoad.bind(this); this.resizeOnFirstLoad = ImageEditor.ImageToResize.resizeOnFirstLoad.bind(this);
Event.observe(this.imageToResize,'load',this.onImageLoad); Event.observe(this.imageToResize,'load',this.onImageLoad);
}, },
@ -25,21 +25,21 @@ var ImageToResize = {
onImageLoad: function(event) { onImageLoad: function(event) {
if(this.imageToResize.width != 0 && this.imageToResize.height != 0) { if(this.imageToResize.width != 0 && this.imageToResize.height != 0) {
$('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")'; $('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")';
imageBox.hideIndicator(); ImageEditor.imageBox.hideIndicator();
Element.show($('imageContainer'),$('image')); Element.show($('imageContainer'),$('image'));
crop.enable(); ImageEditor.crop.enable();
resize.imageContainerResize.enable(); ImageEditor.resize.imageContainerResize.enable();
effects.enableRotate(); ImageEditor.effects.enableRotate();
imageHistory.enable(); ImageEditor.imageHistory.enable();
if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) { if(ImageEditor.resize.imageContainerResize.originalHeight == 0 && ImageEditor.resize.imageContainerResize.originalWidth == 0) {
imageHistory.add('initialize',$('image').src); ImageEditor.imageHistory.add('initialize',$('image').src);
this.resizeOnFirstLoad(); this.resizeOnFirstLoad();
imageBox.center(); ImageEditor.imageBox.center();
} }
resize.imageContainerResize.originalWidth = this.imageToResize.width; ImageEditor.resize.imageContainerResize.originalWidth = this.imageToResize.width;
resize.imageContainerResize.originalHeight = this.imageToResize.height; ImageEditor.resize.imageContainerResize.originalHeight = this.imageToResize.height;
resize.imageContainerResize.placeClickBox(); ImageEditor.resize.imageContainerResize.placeClickBox();
crop.onImageLoadCallback(); ImageEditor.crop.onImageLoadCallback();
} }
this.reportSize(); this.reportSize();
}, },
@ -50,9 +50,9 @@ var ImageToResize = {
var imageWidth = Element.getDimensions($('image')).width; var imageWidth = Element.getDimensions($('image')).width;
var imageHeight = Element.getDimensions($('image')).height; var imageHeight = Element.getDimensions($('image')).height;
if(imageWidth > windowWidth - 40 || imageHeight > windowHeight - 40) { if(imageWidth > windowWidth - 40 || imageHeight > windowHeight - 40) {
imageHistory.clear(); ImageEditor.imageHistory.clear();
Element.hide($('imageContainer'),$('image')); Element.hide($('imageContainer'),$('image'));
ratio = imageWidth / imageHeight; var ratio = imageWidth / imageHeight;
$('loadingIndicatorContainer2').style.left = windowWidth/2 + 'px'; $('loadingIndicatorContainer2').style.left = windowWidth/2 + 'px';
$('loadingIndicatorContainer2').style.top = windowHeight/2 + 100 + 'px'; $('loadingIndicatorContainer2').style.top = windowHeight/2 + 100 + 'px';
while(imageWidth > windowWidth - 40 || imageHeight > windowHeight - 40) { while(imageWidth > windowWidth - 40 || imageHeight > windowHeight - 40) {
@ -60,19 +60,19 @@ var ImageToResize = {
imageHeight = imageWidth * (1/ratio); imageHeight = imageWidth * (1/ratio);
} }
this.reportSize(0,0); this.reportSize(0,0);
resize.imageContainerResize.setVisible(false); ImageEditor.resize.imageContainerResize.setVisible(false);
crop.disable(); ImageEditor.crop.disable();
resize.imageContainerResize.disable(); ImageEditor.resize.imageContainerResize.disable();
effects.disableRotate(); ImageEditor.effects.disableRotate();
imageHistory.disable(); ImageEditor.imageHistory.disable();
imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this),false); ImageEditor.imageTransformation.resize(imageWidth,imageHeight,ImageEditor.ImageToResize.resizeOnFirstLoadCallBack.bind(this),false);
} }
}, },
resizeOnFirstLoadCallBack: function() { resizeOnFirstLoadCallBack: function() {
Element.hide($('loadingIndicatorContainer2')); Element.hide($('loadingIndicatorContainer2'));
resize.imageContainerResize.setVisible(true); ImageEditor.resize.imageContainerResize.setVisible(true);
resize.imageContainerResize.placeClickBox(); ImageEditor.resize.imageContainerResize.placeClickBox();
imageBox.center(); ImageEditor.imageBox.center();
} }
}; };

20
javascript/ImageEditor/ImageBox.js
View File

@ -1,21 +1,21 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
var ImageBox = { ImageEditor.ImageBox = {
initialize: function() { initialize: function() {
this.indicatorWidth = 32; this.indicatorWidth = 32;
this.indicatorHeight = 32; this.indicatorHeight = 32;
this.showIndicator = ImageBox.showIndicator.bind(this); this.showIndicator = ImageEditor.ImageBox.showIndicator.bind(this);
this.hideIndicator = ImageBox.hideIndicator.bind(this); this.hideIndicator = ImageEditor.ImageBox.hideIndicator.bind(this);
this.reCenterIndicator = ImageBox.reCenterIndicator.bind(this); this.reCenterIndicator = ImageEditor.ImageBox.reCenterIndicator.bind(this);
this.centerIndicator = ImageBox.centerIndicator.bind(this); this.centerIndicator = ImageEditor.ImageBox.centerIndicator.bind(this);
this.center = ImageBox.center.bind(this); this.center = ImageEditor.ImageBox.center.bind(this);
this.imageContainer = Positioning.addBehaviour($('imageContainer')); this.imageContainer = ImageEditor.Positioning.addBehaviour($('imageContainer'));
Element.hide(this.imageContainer); Element.hide(this.imageContainer);
this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer')); this.indicator = ImageEditor.Positioning.addBehaviour($('loadingIndicatorContainer'));
this.indicatorImage = Positioning.addBehaviour($('loadingIndicator')); this.indicatorImage = ImageEditor.Positioning.addBehaviour($('loadingIndicator'));
Positioning.addBehaviour($('Main')); ImageEditor.Positioning.addBehaviour($('Main'));
}, },
showIndicator: function(container) { showIndicator: function(container) {

28
javascript/ImageEditor/ImageEditor.js
View File

@ -1,29 +1,29 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
ImageEditor.Main = {
var ImageEditor = {
initialize: function(imageFile) { initialize: function(imageFile) {
imageFile += '1234'; imageFile += '1234';
crop = null; ImageEditor.crop = null;
imageHistory = new ImageHistory.initialize(); ImageEditor.imageHistory = new ImageEditor.ImageHistory.initialize();
environment = new Environment.initialize(imageFile); ImageEditor.environment = new ImageEditor.Environment.initialize(imageFile);
imageTransformation = new ImageTransformation.initialize(); ImageEditor.imageTransformation = new ImageEditor.ImageTransformation.initialize();
resize = new Resize.initialize($('imageContainer')); ImageEditor.resize = new ImageEditor.Resize.initialize($('imageContainer'));
effects = new Effects.initialize(); ImageEditor.effects = new ImageEditor.Effects.initialize();
crop = new Crop.initialize(); ImageEditor.crop = new ImageEditor.Crop.initialize();
documentBody = new DocumentBody.initialize(); ImageEditor.documentBody = new ImageEditor.DocumentBody.initialize();
this.originalImageFile = imageFile; this.originalImageFile = imageFile;
this.tottalyOriginalImageFile = imageFile; this.tottalyOriginalImageFile = imageFile;
this.onSaveClick = ImageEditor.onSaveClick.bind(this); this.onSaveClick = ImageEditor.Main.onSaveClick.bind(this);
this.onCloseClick = ImageEditor.onCloseClick.bind(this); this.onCloseClick = ImageEditor.Main.onCloseClick.bind(this);
Event.observe($('SaveButton'),'click',this.onSaveClick); Event.observe($('SaveButton'),'click',this.onSaveClick);
Event.observe($('ExitButton'),'click',this.onCloseClick); Event.observe($('ExitButton'),'click',this.onCloseClick);
Element.hide($('CurrentAction')); Element.hide($('CurrentAction'));
}, },
onSaveClick: function() { onSaveClick: function() {
if(this.tottalyOriginalImageFile != $('image').src) { if(this.tottalyOriginalImageFile != $('image').src) {
imageTransformation.save(this.tottalyOriginalImageFile,$('image').src,this.onCloseClick); ImageEditor.imageTransformation.save(this.tottalyOriginalImageFile,$('image').src,this.onCloseClick);
} else { } else {
this.onCloseClick(); this.onCloseClick();
} }
@ -32,7 +32,7 @@ var ImageEditor = {
onCloseClick: function() { onCloseClick: function() {
window.parent.frames[0].location.reload(1); window.parent.frames[0].location.reload(1);
window.parent.frames[1].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() { onCloseCallback: function() {

40
javascript/ImageEditor/ImageHistory.js
View File

@ -1,35 +1,35 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
ImageHistory = { ImageEditor.ImageHistory = {
initialize: function() { initialize: function() {
this.history = new Array(); this.history = new Array();
this.historyPointer = -1; this.historyPointer = -1;
this.modifiedOriginalImage = false; this.modifiedOriginalImage = false;
this.isEnabled = true; this.isEnabled = true;
this.image = Positioning.addBehaviour($('image')); this.image = ImageEditor.Positioning.addBehaviour($('image'));
this.size = new Array(); this.size = new Array();
this.fakeImage = $('fakeImg'); this.fakeImage = $('fakeImg');
this.image = $('image'); this.image = $('image');
this.undo = ImageHistory.undo.bind(this); this.undo = ImageEditor.ImageHistory.undo.bind(this);
this.redo = ImageHistory.redo.bind(this); this.redo = ImageEditor.ImageHistory.redo.bind(this);
this.add = ImageHistory.add.bind(this); this.add = ImageEditor.ImageHistory.add.bind(this);
this.addListeners = ImageHistory.addListeners.bind(this); this.addListeners = ImageEditor.ImageHistory.addListeners.bind(this);
this.operationMade = ImageHistory.operationMade.bind(this); this.operationMade = ImageEditor.ImageHistory.operationMade.bind(this);
this.isInHistory = ImageHistory.isInHistory.bind(this); this.isInHistory = ImageEditor.ImageHistory.isInHistory.bind(this);
this.onImageLoad = ImageHistory.onImageLoad.bind(this); this.onImageLoad = ImageEditor.ImageHistory.onImageLoad.bind(this);
this.removeLastOperation = ImageHistory.removeLastOperation.bind(this); this.removeLastOperation = ImageEditor.ImageHistory.removeLastOperation.bind(this);
this.enable = ImageHistory.enable.bind(this); this.enable = ImageEditor.ImageHistory.enable.bind(this);
this.disable = ImageHistory.disable.bind(this); this.disable = ImageEditor.ImageHistory.disable.bind(this);
this.clear = ImageHistory.clear.bind(this); this.clear = ImageEditor.ImageHistory.clear.bind(this);
this.addListeners(); this.addListeners();
}, },
undo: function() { undo: function() {
if(this.historyPointer >= 1) { if(this.historyPointer >= 1) {
operation = this.history[this.historyPointer].operation; var operation = this.history[this.historyPointer].operation;
if(operation == 'rotate' || operation == 'crop') { if(operation == 'rotate' || operation == 'crop') {
if(this.operationMade(this.historyPointer-1,'rotate') || this.operationMade(this.historyPointer-1,'crop')) if(this.operationMade(this.historyPointer-1,'rotate') || this.operationMade(this.historyPointer-1,'crop'))
this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false; this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false;
@ -38,19 +38,19 @@ ImageHistory = {
this.historyPointer = this.historyPointer - 1; this.historyPointer = this.historyPointer - 1;
this.image.src = this.history[this.historyPointer].fileUrl; this.image.src = this.history[this.historyPointer].fileUrl;
} else { } else {
statusMessageWrapper.statusMessage("No more undo","bad"); ImageEditor.statusMessageWrapper.statusMessage("No more undo","bad");
} }
}, },
redo: function() { redo: function() {
if(this.historyPointer < this.history.length-1) { 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; if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
Event.observe('image','load',this.onImageLoad); Event.observe('image','load',this.onImageLoad);
this.historyPointer = this.historyPointer + 1; this.historyPointer = this.historyPointer + 1;
this.image.src = this.history[this.historyPointer].fileUrl; this.image.src = this.history[this.historyPointer].fileUrl;
} else { } 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'; this.image.style.height = this.size[this.historyPointer].height + 'px';
$('imageContainer').style.width = this.size[this.historyPointer].width + 'px'; $('imageContainer').style.width = this.size[this.historyPointer].width + 'px';
$('imageContainer').style.height = this.size[this.historyPointer].height + 'px'; $('imageContainer').style.height = this.size[this.historyPointer].height + 'px';
resize.imageContainerResize.originalWidth = this.size[this.historyPointer].width; ImageEditor.resize.imageContainerResize.originalWidth = this.size[this.historyPointer].width;
resize.imageContainerResize.originalHeight = this.size[this.historyPointer].height; ImageEditor.resize.imageContainerResize.originalHeight = this.size[this.historyPointer].height;
imageToResize.onImageLoad(); ImageEditor.imageToResize.onImageLoad();
} }
}; };

38
javascript/ImageEditor/ImageTransformation.js
View File

@ -1,27 +1,27 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
var ImageTransformation = { ImageEditor.ImageTransformation = {
initialize: function() { initialize: function() {
this.currentOperation = ""; this.currentOperation = "";
this.currentResponse = new Array(); this.currentResponse = new Array();
this.currentCallback = null; this.currentCallback = null;
this.resize = ImageTransformation.resize.bind(this); this.resize = ImageEditor.ImageTransformation.resize.bind(this);
this.rotate = ImageTransformation.rotate.bind(this); this.rotate = ImageEditor.ImageTransformation.rotate.bind(this);
this.crop = ImageTransformation.crop.bind(this); this.crop = ImageEditor.ImageTransformation.crop.bind(this);
this.save = ImageTransformation.save.bind(this); this.save = ImageEditor.ImageTransformation.save.bind(this);
this.close = ImageTransformation.close.bind(this); this.close = ImageEditor.ImageTransformation.close.bind(this);
this.onSuccess = ImageTransformation.onSuccess.bind(this); this.onSuccess = ImageEditor.ImageTransformation.onSuccess.bind(this);
this.onImageLoad = ImageTransformation.onImageLoad.bind(this); this.onImageLoad = ImageEditor.ImageTransformation.onImageLoad.bind(this);
}, },
resize: function(width,height,callback,imageAlreadyChangedSize) { resize: function(width,height,callback,imageAlreadyChangedSize) {
this.currentOperation = "resize"; this.currentOperation = "resize";
this.currentCallback = callback; this.currentCallback = callback;
if(imageHistory.modifiedOriginalImage) { if(ImageEditor.imageHistory.modifiedOriginalImage) {
fileToResize = $('image').src; var fileToResize = $('image').src;
} else { } else {
fileToResize = imageEditor.originalImageFile; var fileToResize = ImageEditor.imageEditor.originalImageFile;
} }
var options = { var options = {
method: 'post', method: 'post',
@ -30,9 +30,9 @@ var ImageTransformation = {
}; };
if(imageAlreadyChangedSize == false) { if(imageAlreadyChangedSize == false) {
imageBox.showIndicator($('Main')); ImageEditor.imageBox.showIndicator($('Main'));
} else { } else {
imageBox.showIndicator(); ImageEditor.imageBox.showIndicator();
} }
new Ajax.Request('admin/ImageEditor/manipulate', options); new Ajax.Request('admin/ImageEditor/manipulate', options);
}, },
@ -45,7 +45,7 @@ var ImageTransformation = {
postBody: 'command=rotate&file=' + $('image').src + '&angle=' + angle , postBody: 'command=rotate&file=' + $('image').src + '&angle=' + angle ,
onSuccess: this.onSuccess onSuccess: this.onSuccess
}; };
imageBox.showIndicator(); ImageEditor.imageBox.showIndicator();
new Ajax.Request('admin/ImageEditor/manipulate', options); 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, postBody: 'command=crop&file=' + $('image').src + '&top=' + top + '&left=' + left + '&width=' + width + '&height=' + height,
onSuccess: this.onSuccess onSuccess: this.onSuccess
}; };
imageBox.showIndicator(); ImageEditor.imageBox.showIndicator();
new Ajax.Request('admin/ImageEditor/manipulate', options); new Ajax.Request('admin/ImageEditor/manipulate', options);
}, },
@ -94,14 +94,14 @@ var ImageTransformation = {
onImageLoad: function(event) { onImageLoad: function(event) {
Event.stopObserving('fakeImg','load', this.onImageLoad); Event.stopObserving('fakeImg','load', this.onImageLoad);
$('image').src = this.currentResponse.fileName; $('image').src = this.currentResponse.fileName;
imageBox.hideIndicator(); ImageEditor.imageBox.hideIndicator();
resize.imageContainerResize.originalWidth = this.currentResponse.width; ImageEditor.resize.imageContainerResize.originalWidth = this.currentResponse.width;
resize.imageContainerResize.originalHeight = this.currentResponse.height; ImageEditor.resize.imageContainerResize.originalHeight = this.currentResponse.height;
$('imageContainer').style.height = this.currentResponse.height + 'px'; $('imageContainer').style.height = this.currentResponse.height + 'px';
$('imageContainer').style.width = this.currentResponse.width + 'px'; $('imageContainer').style.width = this.currentResponse.width + 'px';
$('image').style.height = this.currentResponse.height + 'px'; $('image').style.height = this.currentResponse.height + 'px';
$('image').style.width = this.currentResponse.width + '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(); if(this.currentCallback != null) this.currentCallback();
} }
} }

3
javascript/ImageEditor/Require.js
View File

@ -1,3 +0,0 @@
/**
* @author Mateusz
*/

42
javascript/ImageEditor/Resize.js
View File

@ -1,36 +1,36 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
var Resize = { ImageEditor.Resize = {
initialize: function(element) { initialize: function(element) {
this.element = element; this.element = element;
this.leftBoxConstraint = 1; this.leftBoxConstraint = 1;
this.topBoxConstraint = 0; this.topBoxConstraint = 0;
this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this); this.getRelativeMousePos = ImageEditor.Resize.getRelativeMousePos.bind(this);
options = { var options = {
resizeStop: Resize.resizeStop.bind(this), resizeStop: ImageEditor.Resize.resizeStop.bind(this),
onDrag: Resize.onDrag.bind(this), onDrag: ImageEditor.Resize.onDrag.bind(this),
onResize: Resize.onResize.bind(this), onResize: ImageEditor.Resize.onResize.bind(this),
getMousePos: Resize.getMousePos.bind(this) getMousePos: ImageEditor.Resize.getMousePos.bind(this)
}; };
new Positioning.addBehaviour(this.element); new ImageEditor.Positioning.addBehaviour(this.element);
this.imageContainerResize = new Resizeable.initialize(element,options); this.imageContainerResize = new ImageEditor.Resizeable.initialize(element,options);
this.imageContainerResize.setVisible(false); this.imageContainerResize.setVisible(false);
}, },
resizeStop: function(event) { resizeStop: function(event) {
if(EventStack.getLastEventElement() != null) { if(ImageEditor.EventStack.getLastEventElement() != null) {
imageElement = $('image'); var imageElement = $('image');
EventStack.clearStack(); ImageEditor.EventStack.clearStack();
if(this.imageContainerResize.isEnabled) { if(this.imageContainerResize.isEnabled) {
if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) { if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) {
$('imageContainer').style.backgroundImage = 'url("")'; $('imageContainer').style.backgroundImage = 'url("")';
imageTransformation.resize(imageElement.width,imageElement.height,Resize.resizeCallback.bind(this)); ImageEditor.imageTransformation.resize(imageElement.width,imageElement.height,ImageEditor.Resize.resizeCallback.bind(this));
effects.disableRotate(); ImageEditor.effects.disableRotate();
crop.disable(); ImageEditor.crop.disable();
this.imageContainerResize.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.getTop() < this.topBoxConstraint) this.element.style.top = this.topBoxConstraint + "px";
if(this.element.getLeft() < this.leftBoxConstraint) this.element.style.left = this.leftBoxConstraint + "px"; if(this.element.getLeft() < this.leftBoxConstraint) this.element.style.left = this.leftBoxConstraint + "px";
imageBox.reCenterIndicator(); ImageEditor.imageBox.reCenterIndicator();
}, },
onResize: function(width,height) { onResize: function(width,height) {
@ -52,16 +52,16 @@ var Resize = {
$('image').style.height = height + "px"; $('image').style.height = height + "px";
}, },
getMousePos: function(event) { getMousePos: function(event) {
relativeMouseX = this.getRelativeMousePos(event).x; var relativeMouseX = this.getRelativeMousePos(event).x;
relativeMouseY = this.getRelativeMousePos(event).y; var relativeMouseY = this.getRelativeMousePos(event).y;
if(relativeMouseX <= this.leftBoxConstraint) x = this.leftBoxConstraint + this.element.getParentLeft(); else x = relativeMouseX + this.element.getParentLeft(); 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(); if(relativeMouseY <= this.topBoxConstraint) y = this.topBoxConstraint + this.element.getParentTop(); else y = relativeMouseY + this.element.getParentTop();
return {x: x,y: y}; return {x: x,y: y};
}, },
getRelativeMousePos: function(event) { getRelativeMousePos: function(event) {
relativeMouseX = Event.pointerX(event) + $('imageEditorContainer').scrollLeft - this.element.getParentLeft(); var relativeMouseX = Event.pointerX(event) + $('imageEditorContainer').scrollLeft - this.element.getParentLeft();
relativeMouseY = Event.pointerY(event) + $('imageEditorContainer').scrollTop - this.element.getParentTop(); var relativeMouseY = Event.pointerY(event) + $('imageEditorContainer').scrollTop - this.element.getParentTop();
return {x: relativeMouseX,y: relativeMouseY}; return {x: relativeMouseX,y: relativeMouseY};
} }
} }

122
javascript/ImageEditor/Resizeable.js
View File

@ -1,14 +1,14 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
Resizeable = { ImageEditor.Resizeable = {
initialize: function(element,options) { initialize: function(element,options) {
this.resizeStop = options.resizeStop.bind(this); this.resizeStop = options.resizeStop.bind(this);
this.onDrag = options.onDrag.bind(this); this.onDrag = options.onDrag.bind(this);
this.customOnResize = options.onResize.bind(this); this.customOnResize = options.onResize.bind(this);
this.getMousePos = options.getMousePos.bind(this); this.getMousePos = options.getMousePos.bind(this);
this.bindAll = Resizeable.bindAll.bind(this); this.bindAll = ImageEditor.Resizeable.bindAll.bind(this);
this.bindAll(); this.bindAll();
this.element = element; this.element = element;
this.createClickBoxes(); this.createClickBoxes();
@ -20,14 +20,14 @@ Resizeable = {
resizeStart: function(event) { resizeStart: function(event) {
if(Element.hasClassName(Event.element(event),'clickBox')) { if(Element.hasClassName(Event.element(event),'clickBox')) {
EventStack.addEvent(event); ImageEditor.EventStack.addEvent(event);
Event.stop(event); Event.stop(event);
} }
}, },
leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) { leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
newHeight = top - relativeMouseY + height; var newHeight = top - relativeMouseY + height;
newWidth = Math.round(newHeight / ratio); var newWidth = Math.round(newHeight / ratio);
if(this.resize(newWidth,newHeight)) { if(this.resize(newWidth,newHeight)) {
this.element.style.top = top - (newHeight - height) + "px"; this.element.style.top = top - (newHeight - height) + "px";
this.element.style.left = left - (newWidth - width) + "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) { 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"; 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) { leftLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
newHeight = relativeMouseY - (top + height) + height; var newHeight = relativeMouseY - (top + height) + height;
newWidth = Math.round(newHeight / ratio); var newWidth = Math.round(newHeight / ratio);
if(this.resize(newWidth,newHeight)) { if(this.resize(newWidth,newHeight)) {
this.element.style.left = left - (newWidth - width) + "px"; this.element.style.left = left - (newWidth - width) + "px";
if(parseInt(this.element.style.left) < 0) this.element.style.left = "1px"; 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) { rightUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
newHeight = top - relativeMouseY + height; var newHeight = top - relativeMouseY + height;
newWidth = Math.round(newHeight / ratio); var newWidth = Math.round(newHeight / ratio);
if(this.resize(newWidth,newHeight)) this.element.style.top = (top - (newHeight - height) ) + 'px'; if(this.resize(newWidth,newHeight)) this.element.style.top = (top - (newHeight - height) ) + 'px';
}, },
rightMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) { rightMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
newWidth = relativeMouseX - left; var newWidth = relativeMouseX - left;
this.resize(newWidth,-1000); this.resize(newWidth,-1000);
}, },
rightLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) { rightLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
newHeight = relativeMouseY - top; var newHeight = relativeMouseY - top;
newWidth = Math.round(newHeight / ratio); var newWidth = Math.round(newHeight / ratio);
this.resize(newWidth,newHeight); this.resize(newWidth,newHeight);
}, },
upperMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) { 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)) { if(this.resize(-1000,newHeight)) {
this.element.style.top = (top - (newHeight - height)) + 'px'; this.element.style.top = (top - (newHeight - height)) + 'px';
} }
}, },
lowerMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) { 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); this.resize(-1000,newHeight);
}, },
onResize: function(event) { onResize: function(event) {
if(EventStack.getLastEventElement() != null && this.isVisible && this.isEnabled) { if(ImageEditor.EventStack.getLastEventElement() != null && this.isVisible && this.isEnabled) {
lastEventElement = EventStack.getLastEventElement(); var lastEventElement = ImageEditor.EventStack.getLastEventElement();
var relativeMouseX = this.getMousePos(event).x - this.element.getParentLeft(); var relativeMouseX = this.getMousePos(event).x - this.element.getParentLeft();
var relativeMouseY = this.getMousePos(event).y - this.element.getParentTop(); var relativeMouseY = this.getMousePos(event).y - this.element.getParentTop();
if(Element.hasClassName(lastEventElement,'leftUpperClickBox')) { if(Element.hasClassName(lastEventElement,'leftUpperClickBox')) {
@ -109,7 +109,7 @@ Resizeable = {
} }
this.placeClickBox(); this.placeClickBox();
this.customOnResize(this.element.getWidth(),this.element.getHeight()); this.customOnResize(this.element.getWidth(),this.element.getHeight());
imageBox.reCenterIndicator(); ImageEditor.imageBox.reCenterIndicator();
Event.stop(event); Event.stop(event);
} }
}, },
@ -130,7 +130,7 @@ Resizeable = {
if(height == -1000) { if(height == -1000) {
height = this.originalHeight; height = this.originalHeight;
} }
if(!crop.isVisible) { if(!ImageEditor.crop.isVisible) {
$('image').style.width = width + 'px'; $('image').style.width = width + 'px';
$('image').style.height = height + 'px'; $('image').style.height = height + 'px';
} }
@ -144,18 +144,18 @@ Resizeable = {
this.originalHeight = Element.getDimensions(this.element).height; this.originalHeight = Element.getDimensions(this.element).height;
this.originalWidth = Element.getDimensions(this.element).width; this.originalWidth = Element.getDimensions(this.element).width;
} }
width = Element.getDimensions(this.element).width; var width = Element.getDimensions(this.element).width;
height = Element.getDimensions(this.element).height; var height = Element.getDimensions(this.element).height;
clickBoxHalfWidth = Math.floor(Element.getDimensions(this.leftUpperClickBox2).width/2)+1; var clickBoxHalfWidth = Math.floor(Element.getDimensions(this.leftUpperClickBox2).width/2)+1;
leftUpper = new Point.initialize(-clickBoxHalfWidth,-clickBoxHalfWidth); var leftUpper = new ImageEditor.Point.initialize(-clickBoxHalfWidth,-clickBoxHalfWidth);
leftMiddle = new Point.initialize(-clickBoxHalfWidth,height/2-clickBoxHalfWidth); var leftMiddle = new ImageEditor.Point.initialize(-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
leftLower = new Point.initialize(-clickBoxHalfWidth,height-clickBoxHalfWidth); var leftLower = new ImageEditor.Point.initialize(-clickBoxHalfWidth,height-clickBoxHalfWidth);
rightUpper = new Point.initialize(width-clickBoxHalfWidth,-clickBoxHalfWidth); var rightUpper = new ImageEditor.Point.initialize(width-clickBoxHalfWidth,-clickBoxHalfWidth);
rightMiddle = new Point.initialize(width-clickBoxHalfWidth,height/2-clickBoxHalfWidth); var rightMiddle = new ImageEditor.Point.initialize(width-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
rightLower = new Point.initialize(width-clickBoxHalfWidth,height-clickBoxHalfWidth); var rightLower = new ImageEditor.Point.initialize(width-clickBoxHalfWidth,height-clickBoxHalfWidth);
upperMiddle = new Point.initialize(width/2-clickBoxHalfWidth,-clickBoxHalfWidth); var upperMiddle = new ImageEditor.Point.initialize(width/2-clickBoxHalfWidth,-clickBoxHalfWidth);
lowerMiddle = new Point.initialize(width/2-clickBoxHalfWidth,height-clickBoxHalfWidth); var lowerMiddle = new ImageEditor.Point.initialize(width/2-clickBoxHalfWidth,height-clickBoxHalfWidth);
this.leftUpperClickBox.style.left = leftUpper.x + 'px'; this.leftUpperClickBox.style.left = leftUpper.x + 'px';
this.leftUpperClickBox.style.top = leftUpper.y + 'px'; this.leftUpperClickBox.style.top = leftUpper.y + 'px';
@ -181,21 +181,21 @@ Resizeable = {
}, },
createClickBoxes: function() { createClickBoxes: function() {
this.leftUpperClickBox = this.createElement('div',Random.string(5),["leftUpperClickBox","clickBox"]); this.leftUpperClickBox = this.createElement('div',ImageEditor.Random.string(5),["leftUpperClickBox","clickBox"]);
this.leftMiddleClickBox = this.createElement('div',Random.string(5),["leftMiddleClickBox","clickBox"]); this.leftMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["leftMiddleClickBox","clickBox"]);
this.leftLowerClickBox = this.createElement('div',Random.string(5),["leftLowerClickBox","clickBox"]); this.leftLowerClickBox = this.createElement('div',ImageEditor.Random.string(5),["leftLowerClickBox","clickBox"]);
this.rightUpperClickBox = this.createElement('div',Random.string(5),["rightUpperClickBox","clickBox"]); this.rightUpperClickBox = this.createElement('div',ImageEditor.Random.string(5),["rightUpperClickBox","clickBox"]);
this.rightMiddleClickBox = this.createElement('div',Random.string(5),["rightMiddleClickBox","clickBox"]); this.rightMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["rightMiddleClickBox","clickBox"]);
this.rightLowerClickBox = this.createElement('div',Random.string(5),["rightLowerClickBox","clickBox"]); this.rightLowerClickBox = this.createElement('div',ImageEditor.Random.string(5),["rightLowerClickBox","clickBox"]);
this.upperMiddleClickBox = this.createElement('div',Random.string(5),["upperMiddleClickBox","clickBox"]); this.upperMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["upperMiddleClickBox","clickBox"]);
this.lowerMiddleClickBox = this.createElement('div',Random.string(5),["lowerMiddleClickBox","clickBox"]); this.lowerMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["lowerMiddleClickBox","clickBox"]);
this.leftUpperClickBox2 = this.createElement('div',Random.string(5),["leftUpperClickBox","clickBox"]); this.leftUpperClickBox2 = this.createElement('div',ImageEditor.Random.string(5),["leftUpperClickBox","clickBox"]);
//Safarai requires creating another clickbox because leftUppperClickBox is hidden (hack) //Safarai requires creating another clickbox because leftUppperClickBox is hidden (hack)
}, },
createElement: function(tag,id,classes) { createElement: function(tag,id,classes) {
newElement = document.createElement(tag); var newElement = document.createElement(tag);
newElement.id = id; newElement.id = id;
classes.each(function(item) { classes.each(function(item) {
Element.addClassName(newElement,item); Element.addClassName(newElement,item);
@ -207,28 +207,28 @@ Resizeable = {
}, },
bindAll: function() { bindAll: function() {
this.setListeners = Resizeable.setListeners.bind(this); this.setListeners = ImageEditor.Resizeable.setListeners.bind(this);
this.placeClickBox = Resizeable.placeClickBox.bind(this); this.placeClickBox = ImageEditor.Resizeable.placeClickBox.bind(this);
this.resizeStart = Resizeable.resizeStart.bind(this); this.resizeStart = ImageEditor.Resizeable.resizeStart.bind(this);
this.onResize = Resizeable.onResize.bind(this); this.onResize = ImageEditor.Resizeable.onResize.bind(this);
this.resize = Resizeable.resize.bind(this); this.resize = ImageEditor.Resizeable.resize.bind(this);
this.createClickBoxes = Resizeable.createClickBoxes.bind(this); this.createClickBoxes = ImageEditor.Resizeable.createClickBoxes.bind(this);
this.createElement = Resizeable.createElement.bind(this); this.createElement = ImageEditor.Resizeable.createElement.bind(this);
this.addListener = Resizeable.addListener.bind(this); this.addListener = ImageEditor.Resizeable.addListener.bind(this);
this.addDraging = Resizeable.addDraging.bind(this); this.addDraging = ImageEditor.Resizeable.addDraging.bind(this);
this.setVisible = Resizeable.setVisible.bind(this); this.setVisible = ImageEditor.Resizeable.setVisible.bind(this);
this.removeDraging = Resizeable.removeDraging.bind(this); this.removeDraging = ImageEditor.Resizeable.removeDraging.bind(this);
this.disable = Resizeable.disable.bind(this); this.disable = ImageEditor.Resizeable.disable.bind(this);
this.enable = Resizeable.enable.bind(this); this.enable = ImageEditor.Resizeable.enable.bind(this);
this.leftUpperDrag = Resizeable.leftUpperDrag.bind(this); this.leftUpperDrag = ImageEditor.Resizeable.leftUpperDrag.bind(this);
this.leftMiddleDrag = Resizeable.leftMiddleDrag.bind(this); this.leftMiddleDrag = ImageEditor.Resizeable.leftMiddleDrag.bind(this);
this.leftLowerDrag = Resizeable.leftLowerDrag.bind(this); this.leftLowerDrag = ImageEditor.Resizeable.leftLowerDrag.bind(this);
this.rightUpperDrag = Resizeable.rightUpperDrag.bind(this); this.rightUpperDrag = ImageEditor.Resizeable.rightUpperDrag.bind(this);
this.rightMiddleDrag = Resizeable.rightMiddleDrag.bind(this); this.rightMiddleDrag = ImageEditor.Resizeable.rightMiddleDrag.bind(this);
this.rightLowerDrag = Resizeable.rightLowerDrag.bind(this); this.rightLowerDrag = ImageEditor.Resizeable.rightLowerDrag.bind(this);
this.upperMiddleDrag = Resizeable.upperMiddleDrag.bind(this); this.upperMiddleDrag = ImageEditor.Resizeable.upperMiddleDrag.bind(this);
this.lowerMiddleDrag = Resizeable.lowerMiddleDrag.bind(this); this.lowerMiddleDrag = ImageEditor.Resizeable.lowerMiddleDrag.bind(this);
}, },
setListeners: function() { setListeners: function() {

44
javascript/ImageEditor/Utils.js
View File

@ -1,21 +1,22 @@
/** /**
* @author Mateusz * @author Mateusz
*/ */
Point = { ImageEditor = {};
ImageEditor.Point = {
initialize: function(x,y) { initialize: function(x,y) {
this.x = x; this.x = x;
this.y = y; this.y = y;
} }
} }
EventStack = { ImageEditor.EventStack = {
lastEventElement: null, lastEventElement: null,
getLastEventElement: function(){ getLastEventElement: function(){
return EventStack.lastEventElement; return ImageEditor.EventStack.lastEventElement;
}, },
addEvent: function(event) { addEvent: function(event) {
EventStack.lastEventElement = Event.element(event); ImageEditor.EventStack.lastEventElement = Event.element(event);
}, },
clearStack: function() { clearStack: function() {
@ -23,17 +24,17 @@ EventStack = {
} }
} }
Positioning = { ImageEditor.Positioning = {
addBehaviour: function(element) { addBehaviour: function(element) {
this.element = element; this.element = element;
this.element.getTop = Positioning.getTop.bind(this); this.element.getTop = ImageEditor.Positioning.getTop.bind(this);
this.element.getLeft = Positioning.getLeft.bind(this); this.element.getLeft = ImageEditor.Positioning.getLeft.bind(this);
this.element.getWidth = Positioning.getWidth.bind(this); this.element.getWidth = ImageEditor.Positioning.getWidth.bind(this);
this.element.getHeight = Positioning.getHeight.bind(this); this.element.getHeight = ImageEditor.Positioning.getHeight.bind(this);
this.element.getParentLeft = Positioning.getParentLeft.bind(this); this.element.getParentLeft = ImageEditor.Positioning.getParentLeft.bind(this);
this.element.getParentTop = Positioning.getParentTop.bind(this); this.element.getParentTop = ImageEditor.Positioning.getParentTop.bind(this);
this.element.getParentHeight = Positioning.getParentHeight.bind(this); this.element.getParentHeight = ImageEditor.Positioning.getParentHeight.bind(this);
this.element.getParentWidth = Positioning.getParentWidth.bind(this); this.element.getParentWidth = ImageEditor.Positioning.getParentWidth.bind(this);
return this.element; return this.element;
}, },
@ -54,12 +55,12 @@ Positioning = {
}, },
getParentLeft: function() { getParentLeft: function() {
parentLeft = Position.cumulativeOffset(Position.offsetParent(this.element))[0]; var parentLeft = Position.cumulativeOffset(Position.offsetParent(this.element))[0];
return parentLeft; return parentLeft;
}, },
getParentTop: function() { getParentTop: function() {
parentTop = Position.cumulativeOffset(Position.offsetParent(this.element))[1]; var parentTop = Position.cumulativeOffset(Position.offsetParent(this.element))[1];
return parentTop; return parentTop;
}, },
@ -72,10 +73,11 @@ Positioning = {
} }
} }
Random = { ImageEditor.Random = {
string: function(length) { string: function(length) {
chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
string = ""; var string = "";
var i = 0;
for(x=0;x<length;x++) { for(x=0;x<length;x++) {
i = Math.floor(Math.random() * 57); i = Math.floor(Math.random() * 57);
string += chars.charAt(i); string += chars.charAt(i);
@ -84,9 +86,9 @@ Random = {
} }
} }
StatusMessage = { ImageEditor.StatusMessage = {
initialize: function() { initialize: function() {
this.statusMessage = StatusMessage.statusMessage.bind(this); this.statusMessage = ImageEditor.StatusMessage.statusMessage.bind(this);
window.frameElement.statusMessage = window.top.statusMessage; window.frameElement.statusMessage = window.top.statusMessage;
var s1 = $('statusMessage'); var s1 = $('statusMessage');
var s2 = window.top.document.getElementById('statusMessage'); var s2 = window.top.document.getElementById('statusMessage');
@ -101,4 +103,4 @@ StatusMessage = {
window.frameElement.statusMessage(msg, type, clearManually,this.statusMessageContainer); 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();});

2
templates/ImageEditor.ss
View File

@ -6,7 +6,7 @@
<title><% _t('UNTITLED','Untitled Document') %></title> <title><% _t('UNTITLED','Untitled Document') %></title>
<meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="imagetoolbar" content="no">
</head> </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="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"> <div id="Main">
<script type="text/javascript"> <script type="text/javascript">