mujma: ENHANCEMENTS: Added new design for ImageEditor?.

(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@42046 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-16 02:23:10 +00:00
parent 09ef2f0963
commit 030b55d750
33 changed files with 512 additions and 83 deletions

View File

@ -8,6 +8,8 @@
public $fileToEdit = ""; public $fileToEdit = "";
public $fileToEditOnlyName = "";
/** /**
* Includes all JS required for ImageEditor. This method requires setting * Includes all JS required for ImageEditor. This method requires setting
* a fileToEdit URL in POST. * a fileToEdit URL in POST.
@ -39,6 +41,7 @@
if(!isset($this->requestParams['fileToEdit'])) $this->raiseError(); if(!isset($this->requestParams['fileToEdit'])) $this->raiseError();
$fileWithPath = $this->requestParams['fileToEdit']; $fileWithPath = $this->requestParams['fileToEdit'];
$this->fileToEdit = $this->file2Origin($fileWithPath); $this->fileToEdit = $this->file2Origin($fileWithPath);
$this->fileToEditOnlyName = $this->urlToFilename($this->fileToEdit);
return $this->renderWith(__CLASS__); return $this->renderWith(__CLASS__);
} }
@ -220,4 +223,16 @@
echo "parent.parent.parent.statusMessage('Error: " . $message . "','bad',false);"; echo "parent.parent.parent.statusMessage('Error: " . $message . "','bad',false);";
exit(); 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'],'?'));
}
} }

View File

@ -1,14 +1,21 @@
* *
{ {
margin: 0px; margin: 0;
padding: 0px; padding: 0;
}
a, a:visited
{
text-decoration: none;
width: 0;
height: 0;
position: absolute;
} }
.clickBox .clickBox
{ {
width: 7px; width: 7px;
height: 7px; height: 7px;
background-color: red; background-image: url(../../images/ImageEditor/clickBox.png);
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
} }
@ -64,18 +71,32 @@
{ {
position: absolute; position: absolute;
} }
#menuBarContainer #MenuBar
{ {
border-bottom: 1px solid; height: 132px;
height: 100px; 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 #image
{ {
display: block; display: block;
} }
.floatRight .floatLeft
{ {
float: right; float: left;
} }
#loadingIndicatorContainer #loadingIndicatorContainer
{ {
@ -112,19 +133,290 @@ body
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
#mainContainer #Main
{ {
position: absolute; position: absolute;
border-color: black; border-color: black;
border-style: solid; border-style: solid;
height: 97%; height: 95%;
width: 98%; width: 99%;
left: 1%;
top: 1%;
background-color: white; background-color: white;
} }
#imageEditorContainer #imageEditorContainer
{ {
position: relative; 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 <a> 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 <a> 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 <a> 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 <a> 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 <a> 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 <a> 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; overflow: auto;
} }

BIN
images/ImageEditor/back.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 711 B

BIN
images/ImageEditor/c1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 787 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 829 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 835 B

BIN
images/ImageEditor/c2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 451 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
images/ImageEditor/c3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 414 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 633 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 320 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -14,15 +14,28 @@ var ImageEditorActivator = {
fileToEdit = $('ImageEditorActivator').firstChild.src; 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 - 30 + 'px'; iframe.style.width = windowWidth - 6 + 'px';
iframe.style.height = windowHeight + 10 + 'px'; iframe.style.height = windowHeight + 10 + 'px';
iframe.style.zIndex = "1000"; iframe.style.zIndex = "1000";
iframe.style.position = "absolute"; iframe.style.position = "absolute";
iframe.style.top = "-2%"; iframe.style.top = "8px";
iframe.style.left = "1.5%"; iframe.style.left = "8px";
window.top.document.body.appendChild(iframe); 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);
} }
} }

View File

@ -117,19 +117,20 @@ var Crop = {
cropCallback: function() { cropCallback: function() {
resize.imageContainerResize.placeClickBox(); resize.imageContainerResize.placeClickBox();
resize.imageContainerResize.setVisible(true); 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() { setListeners: function() {
Event.observe('cropStart','click',this.onCropStart); Event.observe('CropButton','click',this.onCropStart);
Event.observe('cropOk','click',this.onCropOk); Event.observe('CancelButton','click',this.onCropCancel);
Event.observe('cropCancel','click',this.onCropCancel); Event.observe('ApplyButton','click',this.onCropOk);
}, },
onCropStart: function() { onCropStart: function() {
if(this.isEnabled) { if(this.isEnabled) {
$('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($('cropOk'),$('cropCancel')); Element.show($('CurrentAction'));
imageHistory.disable(); imageHistory.disable();
effects.disableRotate(); effects.disableRotate();
this.enable(); this.enable();
@ -138,13 +139,14 @@ var Crop = {
onCropOk: function() { onCropOk: function() {
if(this.isEnabled) { if(this.isEnabled) {
if(this.doCrop()) Element.hide($('cropOk'),$('cropCancel')); if(this.doCrop()) Element.hide($('CurrentAction'));
} }
}, },
onCropCancel: function() { onCropCancel: function(event) {
if(this.isEnabled) { if(this.isEnabled) {
Element.hide($('cropOk'),$('cropCancel')); Element.hide($('CurrentAction'));
Element.show($('CropText'));
this.setVisible(false); this.setVisible(false);
imageHistory.enable(); imageHistory.enable();
effects.enableRotate(); effects.enableRotate();
@ -160,7 +162,7 @@ var Crop = {
this.centerCropBox(); this.centerCropBox();
this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight()); this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight());
} else { } 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); resize.imageContainerResize.setVisible(!setVisible);
this.resizeCropBox.setVisible(setVisible); this.resizeCropBox.setVisible(setVisible);

View File

@ -3,19 +3,29 @@
*/ */
var DocumentBody = { var DocumentBody = {
initialize: function() { initialize: function() {
var windowHeight = Element.getDimensions(window.top.document.body).height; this.placeUI = DocumentBody.placeUI.bind(this);
Event.observe(window.top,'resize',DocumentBody.onWindowResize.bind(this)); this.placeUI();
Event.observe($('imageEditorContainer'),'scroll',DocumentBody.onImageEditorScroll.bind(this)); Event.observe(window.top,'resize',DocumentBody.resizeIframe.bind(this));
$('imageEditorContainer').style.height = windowHeight - 109 + 'px';
}, },
onWindowResize: function() { 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'); iframe = window.top.document.getElementById('imageEditorIframe');
iframe.style.width = windowWidth - 30 + 'px'; iframe.style.width = windowWidth - 6 + 'px';
iframe.style.height = windowHeight + 10 + '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() { onImageEditorScroll: function() {

View File

@ -27,7 +27,7 @@ var Effects = {
}, },
setListeners: function() { setListeners: function() {
Event.observe('rotateButton','click',this.rotate); Event.observe('RotateButton','click',this.rotate);
}, },
disableRotate: function() { disableRotate: function() {

View File

@ -14,11 +14,11 @@ var ImageToResize = {
reportSize: function(width,height) { reportSize: function(width,height) {
if(width != null && height != null) { if(width != null && height != null) {
$('imageWidth').innerHTML = width + "px"; $('ImageWidth').innerHTML = width + "px";
$('imageHeight').innerHTML = height + "px"; $('ImageHeight').innerHTML = height + "px";
} else { } else {
$('imageWidth').innerHTML = this.imageToResize.width + "px"; $('ImageWidth').innerHTML = this.imageToResize.width + "px";
$('imageHeight').innerHTML = this.imageToResize.height + "px"; $('ImageHeight').innerHTML = this.imageToResize.height + "px";
} }
}, },
@ -27,6 +27,10 @@ var ImageToResize = {
$('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")'; $('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")';
imageBox.hideIndicator(); imageBox.hideIndicator();
Element.show($('imageContainer'),$('image')); Element.show($('imageContainer'),$('image'));
crop.enable();
resize.imageContainerResize.enable();
effects.enableRotate();
imageHistory.enable();
if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) { if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) {
imageHistory.add('initialize',$('image').src); imageHistory.add('initialize',$('image').src);
this.resizeOnFirstLoad(); this.resizeOnFirstLoad();
@ -35,18 +39,14 @@ var ImageToResize = {
resize.imageContainerResize.originalWidth = this.imageToResize.width; resize.imageContainerResize.originalWidth = this.imageToResize.width;
resize.imageContainerResize.originalHeight = this.imageToResize.height; resize.imageContainerResize.originalHeight = this.imageToResize.height;
resize.imageContainerResize.placeClickBox(); resize.imageContainerResize.placeClickBox();
crop.enable();
resize.imageContainerResize.enable();
effects.enableRotate();
imageHistory.enable();
crop.onImageLoadCallback(); crop.onImageLoadCallback();
} }
this.reportSize(); this.reportSize();
}, },
resizeOnFirstLoad: function() { resizeOnFirstLoad: function() {
var windowWidth = Element.getDimensions($('mainContainer')).width; var windowWidth = Element.getDimensions($('Main')).width;
var windowHeight = Element.getDimensions($('mainContainer')).height - 100; var windowHeight = Element.getDimensions($('Main')).height - 100;
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) {
@ -61,6 +61,10 @@ var ImageToResize = {
} }
this.reportSize(0,0); this.reportSize(0,0);
resize.imageContainerResize.setVisible(false); resize.imageContainerResize.setVisible(false);
crop.disable();
resize.imageContainerResize.disable();
effects.disableRotate();
imageHistory.disable();
imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this),false); imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this),false);
} }
}, },

View File

@ -15,7 +15,7 @@ var ImageBox = {
Element.hide(this.imageContainer); Element.hide(this.imageContainer);
this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer')); this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer'));
this.indicatorImage = Positioning.addBehaviour($('loadingIndicator')); this.indicatorImage = Positioning.addBehaviour($('loadingIndicator'));
Positioning.addBehaviour($('mainContainer')); Positioning.addBehaviour($('Main'));
}, },
showIndicator: function(container) { showIndicator: function(container) {

View File

@ -17,8 +17,9 @@ var ImageEditor = {
this.tottalyOriginalImageFile = imageFile; this.tottalyOriginalImageFile = imageFile;
this.onSaveClick = ImageEditor.onSaveClick.bind(this); this.onSaveClick = ImageEditor.onSaveClick.bind(this);
this.onCloseClick = ImageEditor.onCloseClick.bind(this); this.onCloseClick = ImageEditor.onCloseClick.bind(this);
Event.observe($('saveButton'),'click',this.onSaveClick); Event.observe($('SaveButton'),'click',this.onSaveClick);
Event.observe($('closeButton'),'click',this.onCloseClick); Event.observe($('ExitButton'),'click',this.onCloseClick);
Element.hide($('CurrentAction'));
}, },
onSaveClick: function() { onSaveClick: function() {
if(this.tottalyOriginalImageFile != $('image').src) { if(this.tottalyOriginalImageFile != $('image').src) {

View File

@ -25,6 +25,7 @@ ImageHistory = {
this.disable = ImageHistory.disable.bind(this); this.disable = ImageHistory.disable.bind(this);
this.clear = ImageHistory.clear.bind(this); this.clear = ImageHistory.clear.bind(this);
this.addListeners(); this.addListeners();
statusMessage = new StatusMessage.initialize();
}, },
undo: function() { undo: function() {
@ -38,7 +39,7 @@ 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 {
alert("No more undo"); statusMessage.statusMessage("No more undo","bad");
} }
}, },
@ -50,7 +51,7 @@ 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 {
alert("No more redo"); statusMessage.statusMessage("No more redo","bad");
} }
}, },
@ -69,8 +70,8 @@ ImageHistory = {
}, },
addListeners: function() { addListeners: function() {
this.undoListener = Event.observe('undoButton','click',this.undo); this.undoListener = Event.observe('UndoButton','click',this.undo);
this.redoListener = Event.observe('redoButton','click',this.redo); this.redoListener = Event.observe('RedoButton','click',this.redo);
}, },
operationMade: function(historyPointer,operation) { operationMade: function(historyPointer,operation) {
@ -91,8 +92,8 @@ ImageHistory = {
disable: function() { disable: function() {
if(this.isEnabled) { if(this.isEnabled) {
Event.stopObserving($('undoButton'),'click', this.undo); Event.stopObserving($('UndoButton'),'click', this.undo);
Event.stopObserving($('redoButton'),'click', this.redo); Event.stopObserving($('RedoButton'),'click', this.redo);
this.isEnabled = false; this.isEnabled = false;
} }
}, },

View File

@ -30,7 +30,7 @@ var ImageTransformation = {
}; };
if(imageAlreadyChangedSize == false) { if(imageAlreadyChangedSize == false) {
imageBox.showIndicator($('mainContainer')); imageBox.showIndicator($('Main'));
} else { } else {
imageBox.showIndicator(); imageBox.showIndicator();
} }

View File

@ -5,8 +5,8 @@ var Resize = {
initialize: function(element) { initialize: function(element) {
this.element = element; this.element = element;
this.leftBoxConstraint = 4; this.leftBoxConstraint = 2;
this.topBoxConstraint = 4; this.topBoxConstraint = 0;
this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this); this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this);
options = { options = {
resizeStop: Resize.resizeStop.bind(this), resizeStop: Resize.resizeStop.bind(this),

View File

@ -228,8 +228,8 @@ Resizeable = {
}, },
setListeners: function() { setListeners: function() {
Event.observe('mainContainer','mousemove',this.onResize); Event.observe('Main','mousemove',this.onResize);
Event.observe('mainContainer','mouseup',this.resizeStop); Event.observe('Main','mouseup',this.resizeStop);
}, },
addListener: function(element) { addListener: function(element) {

View File

@ -83,3 +83,20 @@ Random = {
return string; 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);
}
}

View File

@ -7,30 +7,95 @@
<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 = new ImageEditor.initialize('$fileToEdit');">
<div id="mainContainer"> <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="menuBarContainer"> <div id="Main">
<div id="photoInfoContainer" class="floatRight"> <script type="text/javascript">
<p>Size</p> </script>
<p class="inline">Width:</p><p id="imageWidth" class="inline">0px</p> <div id="MenuBar">
<p class="inline">Height:</p><p id="imageHeight" class="inline">0px</p> <div id="TopLeft"></div>
<div id="TopRight"></div>
<div id="Filename">
<p>$fileToEditOnlyName</p>
</div> </div>
<div id="historyContainer" class="floatRight"> <div id="Actions">
<p><a id="undoButton" href="#">Undo</a></p> <a id="SaveButton" href="#">
<p><a id="redoButton" href="#">Redo</a></p> <div id="SaveIcon">
</div> </div>
<div id="effectsContainer" class="floatRight"> <p id="SaveText" class="menuText">
<p><a id="rotateButton" href="#">Rotate</a></p> save&nbsp;image
</p>
</a>
<a id="ExitButton" href="#">
<div id="ExitIcon">
</div> </div>
<div id="cropContainer" class="floatRight"> <p id="ExitText" class="menuText">
<p><a id="cropStart" href="#">Crop start</a></p> exit
<p><a id="cropOk" href="#" class="hidden">Ok</a></p> </p>
<p><a id="cropCancel" href="#" class="hidden">Cancel</a></p> </a>
<a id="UndoButton" href="#">
<div id="UndoIcon">
</div> </div>
<div id="operationContainer" class="floatRight"> <p id="UndoText" class="menuText">
<p><a id="saveButton" href="#">Save</a></p> undo
<p><a id="closeButton" href="#">Cancel</a></p> </p>
</a>
<a id="RedoButton" href="#">
<div id="RedoIcon">
</div>
<p id="RedoText" class="menuText">
redo
</p>
</a>
<p id="ActionsDescription" class="menuText">
actions
</p>
</div>
<div id="Functions">
<a id="RotateButton" href="#">
<div id="RotateIcon">
</div>
<p id="RotateText" class="menuText">
rotate
</p>
</a>
<a id="CropButton" href="#">
<div id="CropIcon"></div>
<p id="CropText" class="menuText">
crop
</p>
</a>
<div id="ImageSize">
<p id="ImageWidthLabel" class="menuText">width</p>
<p id="ImageHeightLabel" class="menuText">height</p>
<p id="ImageWidth" class="menuText"></p>
<p id="ImageHeight" class="menuText"></p>
</div>
<p id="FunctionsDescription" class="menuText">
edit&nbsp;functions
</p>
</div>
<div id="CurrentAction">
<a id="CancelButton" href="#">
<div id="CancelIcon">
</div>
<p id="CancelText" class="menuText">
cancel
</p>
</a>
<a id="ApplyButton" href="#">
<div id="ApplyIcon">
</div>
<p id="ApplyText" class="menuText">
apply
</p>
</a>
<p id="CurrentActionDescription" class="menuText">
current&nbsp;action
</p>
</div> </div>
</div> </div>
<div id="TopRuler"></div>
<div id="LeftRuler"></div>
<div id="imageEditorContainer"> <div id="imageEditorContainer">
<div id="imageContainer"> <div id="imageContainer">
<div id="leftGreyBox" class="greyBox"></div> <div id="leftGreyBox" class="greyBox"></div>
@ -51,5 +116,14 @@
<div id="loadingIndicatorContainer2"> <div id="loadingIndicatorContainer2">
<img id="loadingIndicator2" alt="" src="cms/images/ImageEditor/indicator.gif"> <img id="loadingIndicator2" alt="" src="cms/images/ImageEditor/indicator.gif">
</div> </div>
<p id="statusMessage" style="visibility:hidden"></p>
<script type="text/javascript">
if(window.onload) old_onload = window.onload;
window.onload = function() {
Element.hide($('Loading'));
old_onload();
};
</script>
</body> </body>
</html> </html>