mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-10-22 08:05:56 +02:00
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
parent
09ef2f0963
commit
030b55d750
@ -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'],'?'));
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 <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;
|
||||
}
|
||||
BIN
images/ImageEditor/back.png
Normal file
BIN
images/ImageEditor/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 711 B |
BIN
images/ImageEditor/c1.png
Normal file
BIN
images/ImageEditor/c1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 787 B |
BIN
images/ImageEditor/c1Exit.png
Normal file
BIN
images/ImageEditor/c1Exit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
images/ImageEditor/c1Redo.png
Normal file
BIN
images/ImageEditor/c1Redo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 829 B |
BIN
images/ImageEditor/c1Save.png
Normal file
BIN
images/ImageEditor/c1Save.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
images/ImageEditor/c1Undo.png
Normal file
BIN
images/ImageEditor/c1Undo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 835 B |
BIN
images/ImageEditor/c2.png
Normal file
BIN
images/ImageEditor/c2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 451 B |
BIN
images/ImageEditor/c2Crop.png
Normal file
BIN
images/ImageEditor/c2Crop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
images/ImageEditor/c2Rotate.png
Normal file
BIN
images/ImageEditor/c2Rotate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
images/ImageEditor/c3.png
Normal file
BIN
images/ImageEditor/c3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 414 B |
BIN
images/ImageEditor/c3Apply.png
Normal file
BIN
images/ImageEditor/c3Apply.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
images/ImageEditor/c3Cancel.png
Normal file
BIN
images/ImageEditor/c3Cancel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 633 B |
BIN
images/ImageEditor/clickBox.png
Normal file
BIN
images/ImageEditor/clickBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 244 B |
BIN
images/ImageEditor/leftRuler.png
Normal file
BIN
images/ImageEditor/leftRuler.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
images/ImageEditor/topLeft.png
Normal file
BIN
images/ImageEditor/topLeft.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 320 B |
BIN
images/ImageEditor/topRight.png
Normal file
BIN
images/ImageEditor/topRight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
images/ImageEditor/topRuler.png
Normal file
BIN
images/ImageEditor/topRuler.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -27,7 +27,7 @@ var Effects = {
|
||||
},
|
||||
|
||||
setListeners: function() {
|
||||
Event.observe('rotateButton','click',this.rotate);
|
||||
Event.observe('RotateButton','click',this.rotate);
|
||||
},
|
||||
|
||||
disableRotate: function() {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
},
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
},
|
||||
|
||||
@ -30,7 +30,7 @@ var ImageTransformation = {
|
||||
};
|
||||
|
||||
if(imageAlreadyChangedSize == false) {
|
||||
imageBox.showIndicator($('mainContainer'));
|
||||
imageBox.showIndicator($('Main'));
|
||||
} else {
|
||||
imageBox.showIndicator();
|
||||
}
|
||||
|
||||
@ -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),
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,33 +4,98 @@
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||
<% base_tag %>
|
||||
<title>Untitled Document</title>
|
||||
<meta http-equiv="imagetoolbar" content="no">
|
||||
<meta http-equiv="imagetoolbar" content="no">
|
||||
</head>
|
||||
<body id="body" onload="imageEditor = new ImageEditor.initialize('$fileToEdit');">
|
||||
<div id="mainContainer">
|
||||
<div id="menuBarContainer">
|
||||
<div id="photoInfoContainer" class="floatRight">
|
||||
<p>Size</p>
|
||||
<p class="inline">Width:</p><p id="imageWidth" class="inline">0px</p>
|
||||
<p class="inline">Height:</p><p id="imageHeight" class="inline">0px</p>
|
||||
<div id="Loading" style="background: #FFF url(cms/images/loading.gif) 50% 50% no-repeat; position: absolute;z-index: 100000;height: 100%;width: 100%;margin: 0;padding: 0;z-index: 100000;position: absolute;">Loading...</div>
|
||||
<div id="Main">
|
||||
<script type="text/javascript">
|
||||
</script>
|
||||
<div id="MenuBar">
|
||||
<div id="TopLeft"></div>
|
||||
<div id="TopRight"></div>
|
||||
<div id="Filename">
|
||||
<p>$fileToEditOnlyName</p>
|
||||
</div>
|
||||
<div id="historyContainer" class="floatRight">
|
||||
<p><a id="undoButton" href="#">Undo</a></p>
|
||||
<p><a id="redoButton" href="#">Redo</a></p>
|
||||
</div>
|
||||
<div id="effectsContainer" class="floatRight">
|
||||
<p><a id="rotateButton" href="#">Rotate</a></p>
|
||||
<div id="Actions">
|
||||
<a id="SaveButton" href="#">
|
||||
<div id="SaveIcon">
|
||||
</div>
|
||||
<p id="SaveText" class="menuText">
|
||||
save image
|
||||
</p>
|
||||
</a>
|
||||
<a id="ExitButton" href="#">
|
||||
<div id="ExitIcon">
|
||||
</div>
|
||||
<p id="ExitText" class="menuText">
|
||||
exit
|
||||
</p>
|
||||
</a>
|
||||
<a id="UndoButton" href="#">
|
||||
<div id="UndoIcon">
|
||||
</div>
|
||||
<p id="UndoText" class="menuText">
|
||||
undo
|
||||
</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="cropContainer" class="floatRight">
|
||||
<p><a id="cropStart" href="#">Crop start</a></p>
|
||||
<p><a id="cropOk" href="#" class="hidden">Ok</a></p>
|
||||
<p><a id="cropCancel" href="#" class="hidden">Cancel</a></p>
|
||||
</div>
|
||||
<div id="operationContainer" class="floatRight">
|
||||
<p><a id="saveButton" href="#">Save</a></p>
|
||||
<p><a id="closeButton" href="#">Cancel</a></p>
|
||||
<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 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 action
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="TopRuler"></div>
|
||||
<div id="LeftRuler"></div>
|
||||
<div id="imageEditorContainer">
|
||||
<div id="imageContainer">
|
||||
<div id="leftGreyBox" class="greyBox"></div>
|
||||
@ -51,5 +116,14 @@
|
||||
<div id="loadingIndicatorContainer2">
|
||||
<img id="loadingIndicator2" alt="" src="cms/images/ImageEditor/indicator.gif">
|
||||
</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>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user