diff --git a/code/ImageEditor.php b/code/ImageEditor.php
index aa6f8105..a755abba 100644
--- a/code/ImageEditor.php
+++ b/code/ImageEditor.php
@@ -8,6 +8,8 @@
public $fileToEdit = "";
+ public $fileToEditOnlyName = "";
+
/**
* Includes all JS required for ImageEditor. This method requires setting
* a fileToEdit URL in POST.
@@ -39,6 +41,7 @@
if(!isset($this->requestParams['fileToEdit'])) $this->raiseError();
$fileWithPath = $this->requestParams['fileToEdit'];
$this->fileToEdit = $this->file2Origin($fileWithPath);
+ $this->fileToEditOnlyName = $this->urlToFilename($this->fileToEdit);
return $this->renderWith(__CLASS__);
}
@@ -220,4 +223,16 @@
echo "parent.parent.parent.statusMessage('Error: " . $message . "','bad',false);";
exit();
}
+
+ /**
+ * Method converts retrieves filename from url
+ *
+ * @param url
+ *
+ */
+
+ private function urlToFilename($url) {
+ $path = pathinfo($url);
+ return $path['filename'] . "." . substr($path['extension'],0,strpos($path['extension'],'?'));
+ }
}
diff --git a/css/ImageEditor/ImageEditor.css b/css/ImageEditor/ImageEditor.css
index 9741f2f4..434c8bf1 100644
--- a/css/ImageEditor/ImageEditor.css
+++ b/css/ImageEditor/ImageEditor.css
@@ -1,14 +1,21 @@
*
{
- margin: 0px;
- padding: 0px;
+ margin: 0;
+ padding: 0;
+}
+a, a:visited
+{
+ text-decoration: none;
+ width: 0;
+ height: 0;
+ position: absolute;
}
.clickBox
{
width: 7px;
height: 7px;
- background-color: red;
+ background-image: url(../../images/ImageEditor/clickBox.png);
position: absolute;
overflow: hidden;
}
@@ -64,18 +71,32 @@
{
position: absolute;
}
-#menuBarContainer
+#MenuBar
{
- border-bottom: 1px solid;
- height: 100px;
+ height: 132px;
+ background-image: url(../../images/ImageEditor/topLeft.png);
}
+#TopLeft {
+ float: left;
+ width: 584px;
+ height: 132px;
+ background-image: url(../../images/ImageEditor/topLeft.png);
+ display: inline;
+}
+#TopRight {
+ position: absolute;
+ width: 180px;
+ height: 132px;
+ background-image: url(../../images/ImageEditor/topRight.png);
+}
+
#image
{
display: block;
}
-.floatRight
+.floatLeft
{
- float: right;
+ float: left;
}
#loadingIndicatorContainer
{
@@ -112,19 +133,290 @@ body
height: 100%;
width: 100%;
}
-#mainContainer
+#Main
{
position: absolute;
border-color: black;
border-style: solid;
- height: 97%;
- width: 98%;
- left: 1%;
- top: 1%;
+ height: 95%;
+ width: 99%;
background-color: white;
}
#imageEditorContainer
{
position: relative;
+ top: 15px;
+ left: 15px;
+ overflow: auto;
+ background-image: url(../../images/ImageEditor/back.png);
+}
+#Actions
+{
+ position: absolute;
+ left: 10px;
+ top: 38px;
+ width: 211px;
+ height: 73px;
+ background-image: url(../../images/ImageEditor/c1.png);
+}
+#SaveText
+{
+ position: absolute;
+ top: 40px;
+ left: 13px;
+}
+#SaveIcon
+{
+ position: absolute;
+ left: 33px;
+ top: 10px;
+ width: 30px;
+ height: 30px;
+ background-image: url(../../images/ImageEditor/c1Save.png);
+ cursor: hand;/* IE Hack, because have 0 width/height.*/
+}
+#ExitText
+{
+ position: absolute;
+ top: 40px;
+ left: 95px;
+}
+#ExitIcon
+{
+ position: absolute;
+ left: 97px;
+ top: 15px;
+ width: 26px;
+ height: 26px;
+ background-image: url(../../images/ImageEditor/c1Exit.png);
+ cursor: hand;/* IE Hack, because have 0 width/height.*/
+}
+#UndoText
+{
+ position: absolute;
+ top: 14px;
+ left: 175px;
+}
+#UndoIcon
+{
+ position: absolute;
+ left: 145px;
+ top: 15px;
+ width: 24px;
+ height: 14px;
+ background-image: url(../../images/ImageEditor/c1Undo.png);
+ background-repeat: no-repeat;/* IE hack */
+ cursor: hand;/* IE Hack, because have 0 width/height.*/
+}
+#RedoText
+{
+ position: absolute;
+ top: 38px;
+ left: 175px;
+}
+#RedoIcon
+{
+ position: absolute;
+ left: 143px;
+ top: 38px;
+ width: 25px;
+ height: 13px;
+ background-image: url(../../images/ImageEditor/c1Redo.png);
+ background-repeat: no-repeat;/* IE hack */
+ cursor: hand;/* IE Hack, because have width/height.*/
+}
+#ActionsDescription
+{
+ position: absolute;
+ top: 57px;
+ left: 85px;
+}
+.menuText
+{
+ color: #6C889E;
+ font-family: sans-serif;
+ font-size: 13px;
+}
+#Functions
+{
+ position: absolute;
+ left: 240px;
+ top: 38px;
+ height: 73px;
+ width: 220px;
+ background-image: url(../../images/ImageEditor/c2.png);
+}
+#RotateIcon
+{
+ position: absolute;
+ left: 17px;
+ top: 11px;
+ height: 26px;
+ width: 30px;
+ background-image: url(../../images/ImageEditor/c2Rotate.png);
+ cursor: hand;/* IE Hack, because have width/height.*/
+}
+#RotateText
+{
+ position: absolute;
+ top: 39px;
+ left: 15px;
+}
+#CropIcon
+{
+ position: absolute;
+ left: 66px;
+ top: 11px;
+ height: 28px;
+ width: 31px;
+ background-image: url(../../images/ImageEditor/c2Crop.png);
+ cursor: hand;/* IE Hack, because have width/height.*/
+
+}
+#CropText
+{
+ position: absolute;
+ top: 38px;
+ left: 67px;
+}
+#ImageWidthLabel
+{
+ position: absolute;
+ top: 11px;
+ left: 114px;
+}
+#ImageHeightLabel
+{
+ position: absolute;
+ top: 33px;
+ left: 114px;
+}
+#ImageWidth
+{
+ position: absolute;
+ top: 14px;
+ left: 157px;
+ color: #7A7D80;
+ font-size: 9px;
+
+}
+#ImageHeight
+{
+ position: absolute;
+ top: 36px;
+ left: 157px;
+ color: #7A7D80;
+ font-size: 9px;
+}
+#FunctionsDescription
+{
+ position: absolute;
+ top: 57px;
+ left: 70px;
+}
+
+#TopRuler
+{
+ position: absolute;
+ width: 100%;
+ height: 15px;
+ background-image: url(../../images/ImageEditor/topRuler.png);
+ overflow: hidden;
+}
+#LeftRuler
+{
+ position: absolute;
+ width: 15px;
+ height: 100%;
+ top: 147px;
+ background-image: url(../../images/ImageEditor/leftRuler.png);
+}
+#Filename p
+{
+ position: absolute;
+ color: white;
+ left: 20px;
+ top: 7px;
+ font-family: sans-serif;
+ font-size: 14px;
+}
+
+#CurrentAction
+{
+ position: absolute;
+ top: 38px;
+ left: 479px;
+ width: 106px;
+ height: 73px;
+ background-image: url(../../images/ImageEditor/c3.png);
+}
+#ApplyIcon
+{
+ position: absolute;
+ left:59px;
+ top: 14px;
+ width: 24px;
+ height: 23px;
+ background-image: url(../../images/ImageEditor/c3Apply.png);
+}
+#ApplyText
+{
+ position: absolute;
+ top: 39px;
+ left: 57px;
+}
+
+#CancelIcon
+{
+ position: absolute;
+ left:18px;
+ top: 13px;
+ width: 26px;
+ height: 25px;
+ background-image: url(../../images/ImageEditor/c3Cancel.png);
+}
+#CancelText
+{
+ position: absolute;
+ top: 39px;
+ left: 12px;
+}
+#CurrentActionDescription
+{
+ position: absolute;
+ top: 57px;
+ left: 12px;
+}
+
+/*
+ * Status, Directly copied from cms_right.css
+ */
+
+#statusMessage {
+ position: absolute;
+ z-index: 500;
+ bottom: 30px;
+ left: 30px;
+ text-align: left;
+ padding: 1px 1px 1px 40px;
+
+ font-size: 16px;
+ font-weight: bold;
+
+ /* border: 1px solid #cc9; */
+ color: #660;
+ /* background-color: #F9F9E3; */
+ margin: 2px;
+}
+#statusMessage.good {
+ border-color: #9c9;
+ color: #060;
+ background: url(../../images/alert-good.gif) /*#E2F9E3*/ 7px no-repeat;
+}
+#statusMessage.bad {
+ border-color: #c99;
+ color: #c00;
+ background: url(../../images/alert-bad.gif) #fff 7px no-repeat;
+ max-height: 300px;
overflow: auto;
}
\ No newline at end of file
diff --git a/images/ImageEditor/back.png b/images/ImageEditor/back.png
new file mode 100644
index 00000000..97016acb
Binary files /dev/null and b/images/ImageEditor/back.png differ
diff --git a/images/ImageEditor/c1.png b/images/ImageEditor/c1.png
new file mode 100644
index 00000000..bdc71c37
Binary files /dev/null and b/images/ImageEditor/c1.png differ
diff --git a/images/ImageEditor/c1Exit.png b/images/ImageEditor/c1Exit.png
new file mode 100644
index 00000000..07800784
Binary files /dev/null and b/images/ImageEditor/c1Exit.png differ
diff --git a/images/ImageEditor/c1Redo.png b/images/ImageEditor/c1Redo.png
new file mode 100644
index 00000000..2775f359
Binary files /dev/null and b/images/ImageEditor/c1Redo.png differ
diff --git a/images/ImageEditor/c1Save.png b/images/ImageEditor/c1Save.png
new file mode 100644
index 00000000..7bb8119d
Binary files /dev/null and b/images/ImageEditor/c1Save.png differ
diff --git a/images/ImageEditor/c1Undo.png b/images/ImageEditor/c1Undo.png
new file mode 100644
index 00000000..0fb317a3
Binary files /dev/null and b/images/ImageEditor/c1Undo.png differ
diff --git a/images/ImageEditor/c2.png b/images/ImageEditor/c2.png
new file mode 100644
index 00000000..9fd70dba
Binary files /dev/null and b/images/ImageEditor/c2.png differ
diff --git a/images/ImageEditor/c2Crop.png b/images/ImageEditor/c2Crop.png
new file mode 100644
index 00000000..8b70386b
Binary files /dev/null and b/images/ImageEditor/c2Crop.png differ
diff --git a/images/ImageEditor/c2Rotate.png b/images/ImageEditor/c2Rotate.png
new file mode 100644
index 00000000..f8cd9631
Binary files /dev/null and b/images/ImageEditor/c2Rotate.png differ
diff --git a/images/ImageEditor/c3.png b/images/ImageEditor/c3.png
new file mode 100644
index 00000000..3332b676
Binary files /dev/null and b/images/ImageEditor/c3.png differ
diff --git a/images/ImageEditor/c3Apply.png b/images/ImageEditor/c3Apply.png
new file mode 100644
index 00000000..ff7949c9
Binary files /dev/null and b/images/ImageEditor/c3Apply.png differ
diff --git a/images/ImageEditor/c3Cancel.png b/images/ImageEditor/c3Cancel.png
new file mode 100644
index 00000000..b2e9e9e5
Binary files /dev/null and b/images/ImageEditor/c3Cancel.png differ
diff --git a/images/ImageEditor/clickBox.JPG b/images/ImageEditor/clickBox.JPG
deleted file mode 100644
index 717c3912..00000000
Binary files a/images/ImageEditor/clickBox.JPG and /dev/null differ
diff --git a/images/ImageEditor/clickBox.png b/images/ImageEditor/clickBox.png
new file mode 100644
index 00000000..aba455ff
Binary files /dev/null and b/images/ImageEditor/clickBox.png differ
diff --git a/images/ImageEditor/leftRuler.png b/images/ImageEditor/leftRuler.png
new file mode 100644
index 00000000..d0c844e8
Binary files /dev/null and b/images/ImageEditor/leftRuler.png differ
diff --git a/images/ImageEditor/topLeft.png b/images/ImageEditor/topLeft.png
new file mode 100644
index 00000000..81a880f0
Binary files /dev/null and b/images/ImageEditor/topLeft.png differ
diff --git a/images/ImageEditor/topRight.png b/images/ImageEditor/topRight.png
new file mode 100644
index 00000000..e8994f29
Binary files /dev/null and b/images/ImageEditor/topRight.png differ
diff --git a/images/ImageEditor/topRuler.png b/images/ImageEditor/topRuler.png
new file mode 100644
index 00000000..739474e5
Binary files /dev/null and b/images/ImageEditor/topRuler.png differ
diff --git a/javascript/ImageEditor/Activator.js b/javascript/ImageEditor/Activator.js
index 846a5e0a..253ed4ee 100644
--- a/javascript/ImageEditor/Activator.js
+++ b/javascript/ImageEditor/Activator.js
@@ -14,15 +14,28 @@ var ImageEditorActivator = {
fileToEdit = $('ImageEditorActivator').firstChild.src;
iframe.setAttribute("src","admin/ImageEditor?fileToEdit=" + fileToEdit);
iframe.id = 'imageEditorIframe';
- iframe.style.width = windowWidth - 30 + 'px';
+ iframe.style.width = windowWidth - 6 + 'px';
iframe.style.height = windowHeight + 10 + 'px';
iframe.style.zIndex = "1000";
iframe.style.position = "absolute";
- iframe.style.top = "-2%";
- iframe.style.left = "1.5%";
+ 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');
+ divLeft.style.width = "8px";
+ divLeft.style.height = "300%";
+ divLeft.style.zIndex = "1000";
+ divLeft.style.top = "0";
+ divLeft.style.position = "absolute";
+ divRight.style.width = "10px";
+ divRight.style.height = "300%";
+ divRight.style.zIndex = "1000";
+ divRight.style.top = "0";
+ divRight.style.position = "absolute";
+ divRight.style.left = Element.getDimensions(divLeft).width + Element.getDimensions(iframe).width - 4 + 'px';
+ window.top.document.body.appendChild(divLeft);
+ window.top.document.body.appendChild(divRight);
}
}
\ No newline at end of file
diff --git a/javascript/ImageEditor/Crop.js b/javascript/ImageEditor/Crop.js
index 80cc6be2..3ab0d992 100644
--- a/javascript/ImageEditor/Crop.js
+++ b/javascript/ImageEditor/Crop.js
@@ -117,19 +117,20 @@ var Crop = {
cropCallback: function() {
resize.imageContainerResize.placeClickBox();
resize.imageContainerResize.setVisible(true);
- Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('cropOk'),$('cropCancel'));
+ Element.show($('CropText'));
+ Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('CurrentAction'));
},
setListeners: function() {
- Event.observe('cropStart','click',this.onCropStart);
- Event.observe('cropOk','click',this.onCropOk);
- Event.observe('cropCancel','click',this.onCropCancel);
+ Event.observe('CropButton','click',this.onCropStart);
+ Event.observe('CancelButton','click',this.onCropCancel);
+ Event.observe('ApplyButton','click',this.onCropOk);
},
onCropStart: function() {
if(this.isEnabled) {
$('image').style.visibility = "hidden";//hack for IE for not selecting image during crop
this.setVisible(true);
- Element.show($('cropOk'),$('cropCancel'));
+ Element.show($('CurrentAction'));
imageHistory.disable();
effects.disableRotate();
this.enable();
@@ -138,19 +139,20 @@ var Crop = {
onCropOk: function() {
if(this.isEnabled) {
- if(this.doCrop()) Element.hide($('cropOk'),$('cropCancel'));
+ if(this.doCrop()) Element.hide($('CurrentAction'));
}
},
- onCropCancel: function() {
+ onCropCancel: function(event) {
if(this.isEnabled) {
- Element.hide($('cropOk'),$('cropCancel'));
+ Element.hide($('CurrentAction'));
+ Element.show($('CropText'));
this.setVisible(false);
imageHistory.enable();
effects.enableRotate();
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
},
setVisible: function(setVisible) {
@@ -160,7 +162,7 @@ var Crop = {
this.centerCropBox();
this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight());
} else {
- Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('cropOk'),$('cropCancel'));
+ Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('CurrentAction'));
}
resize.imageContainerResize.setVisible(!setVisible);
this.resizeCropBox.setVisible(setVisible);
diff --git a/javascript/ImageEditor/DocumentBody.js b/javascript/ImageEditor/DocumentBody.js
index f6b69615..3df726d6 100644
--- a/javascript/ImageEditor/DocumentBody.js
+++ b/javascript/ImageEditor/DocumentBody.js
@@ -3,19 +3,29 @@
*/
var DocumentBody = {
initialize: function() {
- var windowHeight = Element.getDimensions(window.top.document.body).height;
- Event.observe(window.top,'resize',DocumentBody.onWindowResize.bind(this));
- Event.observe($('imageEditorContainer'),'scroll',DocumentBody.onImageEditorScroll.bind(this));
- $('imageEditorContainer').style.height = windowHeight - 109 + 'px';
+ this.placeUI = DocumentBody.placeUI.bind(this);
+ this.placeUI();
+ Event.observe(window.top,'resize',DocumentBody.resizeIframe.bind(this));
},
- onWindowResize: function() {
- var windowWidth = Element.getDimensions(window.top.document.body).width;
+ 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');
- iframe.style.width = windowWidth - 30 + 'px';
+ iframe.style.width = windowWidth - 6 + 'px';
iframe.style.height = windowHeight + 10 + 'px';
- $('imageEditorContainer').style.height = windowHeight - 105 + 'px';
+ this.placeUI();
+ },
+
+ placeUI: function() {
+ var iframe = window.top.document.getElementById('imageEditorIframe');
+ $('imageEditorContainer').style.height = Element.getDimensions(iframe).height - Element.getDimensions($('TopRuler')).height - Element.getDimensions($('MenuBar')).height - 32 + 'px';
+ $('imageEditorContainer').style.width = Element.getDimensions(iframe).width - Element.getDimensions($('LeftRuler')).width - 14 + 'px';
+ $('LeftRuler').style.height = $('imageEditorContainer').style.height;
+ $('TopLeft').style.width = Element.getDimensions($('MenuBar')).width -
+ Element.getDimensions($('TopRight')).width + 'px';
+ $('TopRight').style.left = Element.getDimensions($('TopLeft')).width + 'px';
+
},
onImageEditorScroll: function() {
diff --git a/javascript/ImageEditor/Effects.js b/javascript/ImageEditor/Effects.js
index dcfdbbfc..442b2232 100644
--- a/javascript/ImageEditor/Effects.js
+++ b/javascript/ImageEditor/Effects.js
@@ -27,7 +27,7 @@ var Effects = {
},
setListeners: function() {
- Event.observe('rotateButton','click',this.rotate);
+ Event.observe('RotateButton','click',this.rotate);
},
disableRotate: function() {
diff --git a/javascript/ImageEditor/Image.js b/javascript/ImageEditor/Image.js
index ebcbcef8..abddd568 100644
--- a/javascript/ImageEditor/Image.js
+++ b/javascript/ImageEditor/Image.js
@@ -14,11 +14,11 @@ var ImageToResize = {
reportSize: function(width,height) {
if(width != null && height != null) {
- $('imageWidth').innerHTML = width + "px";
- $('imageHeight').innerHTML = height + "px";
+ $('ImageWidth').innerHTML = width + "px";
+ $('ImageHeight').innerHTML = height + "px";
} else {
- $('imageWidth').innerHTML = this.imageToResize.width + "px";
- $('imageHeight').innerHTML = this.imageToResize.height + "px";
+ $('ImageWidth').innerHTML = this.imageToResize.width + "px";
+ $('ImageHeight').innerHTML = this.imageToResize.height + "px";
}
},
@@ -27,6 +27,10 @@ var ImageToResize = {
$('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")';
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);
this.resizeOnFirstLoad();
@@ -35,18 +39,14 @@ var ImageToResize = {
resize.imageContainerResize.originalWidth = this.imageToResize.width;
resize.imageContainerResize.originalHeight = this.imageToResize.height;
resize.imageContainerResize.placeClickBox();
- crop.enable();
- resize.imageContainerResize.enable();
- effects.enableRotate();
- imageHistory.enable();
crop.onImageLoadCallback();
}
this.reportSize();
},
resizeOnFirstLoad: function() {
- var windowWidth = Element.getDimensions($('mainContainer')).width;
- var windowHeight = Element.getDimensions($('mainContainer')).height - 100;
+ var windowWidth = Element.getDimensions($('Main')).width;
+ var windowHeight = Element.getDimensions($('Main')).height - 100;
var imageWidth = Element.getDimensions($('image')).width;
var imageHeight = Element.getDimensions($('image')).height;
if(imageWidth > windowWidth - 40 || imageHeight > windowHeight - 40) {
@@ -61,6 +61,10 @@ var ImageToResize = {
}
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);
}
},
diff --git a/javascript/ImageEditor/ImageBox.js b/javascript/ImageEditor/ImageBox.js
index 07408a3b..8b8016ae 100644
--- a/javascript/ImageEditor/ImageBox.js
+++ b/javascript/ImageEditor/ImageBox.js
@@ -15,7 +15,7 @@ var ImageBox = {
Element.hide(this.imageContainer);
this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer'));
this.indicatorImage = Positioning.addBehaviour($('loadingIndicator'));
- Positioning.addBehaviour($('mainContainer'));
+ Positioning.addBehaviour($('Main'));
},
showIndicator: function(container) {
diff --git a/javascript/ImageEditor/ImageEditor.js b/javascript/ImageEditor/ImageEditor.js
index d3af6844..a6ed8227 100644
--- a/javascript/ImageEditor/ImageEditor.js
+++ b/javascript/ImageEditor/ImageEditor.js
@@ -17,8 +17,9 @@ var ImageEditor = {
this.tottalyOriginalImageFile = imageFile;
this.onSaveClick = ImageEditor.onSaveClick.bind(this);
this.onCloseClick = ImageEditor.onCloseClick.bind(this);
- Event.observe($('saveButton'),'click',this.onSaveClick);
- Event.observe($('closeButton'),'click',this.onCloseClick);
+ Event.observe($('SaveButton'),'click',this.onSaveClick);
+ Event.observe($('ExitButton'),'click',this.onCloseClick);
+ Element.hide($('CurrentAction'));
},
onSaveClick: function() {
if(this.tottalyOriginalImageFile != $('image').src) {
diff --git a/javascript/ImageEditor/ImageHistory.js b/javascript/ImageEditor/ImageHistory.js
index 49f098c9..4a67d7ee 100644
--- a/javascript/ImageEditor/ImageHistory.js
+++ b/javascript/ImageEditor/ImageHistory.js
@@ -24,7 +24,8 @@ ImageHistory = {
this.enable = ImageHistory.enable.bind(this);
this.disable = ImageHistory.disable.bind(this);
this.clear = ImageHistory.clear.bind(this);
- this.addListeners();
+ this.addListeners();
+ statusMessage = new StatusMessage.initialize();
},
undo: function() {
@@ -38,7 +39,7 @@ ImageHistory = {
this.historyPointer = this.historyPointer - 1;
this.image.src = this.history[this.historyPointer].fileUrl;
} else {
- alert("No more undo");
+ statusMessage.statusMessage("No more undo","bad");
}
},
@@ -50,7 +51,7 @@ ImageHistory = {
this.historyPointer = this.historyPointer + 1;
this.image.src = this.history[this.historyPointer].fileUrl;
} else {
- alert("No more redo");
+ statusMessage.statusMessage("No more redo","bad");
}
},
@@ -69,8 +70,8 @@ ImageHistory = {
},
addListeners: function() {
- this.undoListener = Event.observe('undoButton','click',this.undo);
- this.redoListener = Event.observe('redoButton','click',this.redo);
+ this.undoListener = Event.observe('UndoButton','click',this.undo);
+ this.redoListener = Event.observe('RedoButton','click',this.redo);
},
operationMade: function(historyPointer,operation) {
@@ -91,8 +92,8 @@ ImageHistory = {
disable: function() {
if(this.isEnabled) {
- Event.stopObserving($('undoButton'),'click', this.undo);
- Event.stopObserving($('redoButton'),'click', this.redo);
+ Event.stopObserving($('UndoButton'),'click', this.undo);
+ Event.stopObserving($('RedoButton'),'click', this.redo);
this.isEnabled = false;
}
},
diff --git a/javascript/ImageEditor/ImageTransformation.js b/javascript/ImageEditor/ImageTransformation.js
index 17de60d2..8dcf9ada 100644
--- a/javascript/ImageEditor/ImageTransformation.js
+++ b/javascript/ImageEditor/ImageTransformation.js
@@ -30,7 +30,7 @@ var ImageTransformation = {
};
if(imageAlreadyChangedSize == false) {
- imageBox.showIndicator($('mainContainer'));
+ imageBox.showIndicator($('Main'));
} else {
imageBox.showIndicator();
}
diff --git a/javascript/ImageEditor/Resize.js b/javascript/ImageEditor/Resize.js
index f3aa0c21..ad389074 100644
--- a/javascript/ImageEditor/Resize.js
+++ b/javascript/ImageEditor/Resize.js
@@ -5,8 +5,8 @@ var Resize = {
initialize: function(element) {
this.element = element;
- this.leftBoxConstraint = 4;
- this.topBoxConstraint = 4;
+ this.leftBoxConstraint = 2;
+ this.topBoxConstraint = 0;
this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this);
options = {
resizeStop: Resize.resizeStop.bind(this),
diff --git a/javascript/ImageEditor/Resizeable.js b/javascript/ImageEditor/Resizeable.js
index 4139e549..fcec1651 100644
--- a/javascript/ImageEditor/Resizeable.js
+++ b/javascript/ImageEditor/Resizeable.js
@@ -228,8 +228,8 @@ Resizeable = {
},
setListeners: function() {
- Event.observe('mainContainer','mousemove',this.onResize);
- Event.observe('mainContainer','mouseup',this.resizeStop);
+ Event.observe('Main','mousemove',this.onResize);
+ Event.observe('Main','mouseup',this.resizeStop);
},
addListener: function(element) {
diff --git a/javascript/ImageEditor/Utils.js b/javascript/ImageEditor/Utils.js
index 34168337..581af5da 100644
--- a/javascript/ImageEditor/Utils.js
+++ b/javascript/ImageEditor/Utils.js
@@ -83,3 +83,20 @@ Random = {
return string;
}
}
+
+StatusMessage = {
+ initialize: function() {
+ this.statusMessage = StatusMessage.statusMessage.bind(this);
+ window.frameElement.statusMessage = statusMessage;
+ var s1 = $('statusMessage');
+ var s2 = window.top.document.getElementById('statusMessage');
+ s1.showMessage = s2.showMessage;
+ s1.clearMessage = s2.clearMessage;
+ s1.fade = s2.fade;
+ s1.afterFade = s2.afterFade;
+ },
+
+ statusMessage: function(msg, type, clearManually) {
+ window.frameElement.statusMessage(msg, type, clearManually);
+ }
+}
diff --git a/templates/ImageEditor.ss b/templates/ImageEditor.ss
index 76d0d5fb..d19e9c89 100644
--- a/templates/ImageEditor.ss
+++ b/templates/ImageEditor.ss
@@ -4,33 +4,98 @@
<% base_tag %>
Untitled Document
-
+
-
-