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 - + -
-