tonyair
/
silverstripe-reports
mirror of https://github.com/silverstripe/silverstripe-reports
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

mujma: ENHANCEMENTS: Now image is placed in scrolled container so operation that results in image larger than screen are no longer problem. 

(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@42008 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-16 01:30:43 +00:00
parent 1daba65357
commit a42fd1d2d2
13 changed files with 79 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
code/ImageEditor.php
View File

@ -29,6 +29,7 @@
Requirements::javascript('cms/javascript/ImageEditor/Resize.js');
Requirements::javascript('cms/javascript/ImageEditor/ImageBox.js');
Requirements::javascript('cms/javascript/ImageEditor/ImageEditor.js');
Requirements::javascript('cms/javascript/ImageEditor/DocumentBody.js');
Requirements::javascript('jsparty/loader.js');
Requirements::javascript('jsparty/behaviour.js');

20
css/ImageEditor/ImageEditor.css
View File

@ -79,10 +79,17 @@
}
#loadingIndicatorContainer
{
display: none;
position: absolute;
z-index: 1000;
position: absolute;
top: -1000px;
left: -1000px;
}
#loadingIndicatorContainer2
{
position: absolute;
top: -1000px;
left: -1000px;
}
#fakeImg
{
display: none;
@ -110,9 +117,14 @@ body
position: absolute;
border-color: black;
border-style: solid;
height: 40%;
height: 97%;
width: 98%;
left: 1%;
top: 1%;
background-color: white;
}
#imageEditorContainer
{
position: relative;
overflow: auto;
}

6
javascript/ImageEditor/Activator.js
View File

@ -4,6 +4,8 @@ var ImageEditorActivator = {
},
onOpen: function() {
var windowWidth = Element.getDimensions(window.top.document.body).width;
var windowHeight = Element.getDimensions(window.top.document.body).height;
iframe = window.top.document.getElementById('imageEditorIframe');
if(iframe != null) {
iframe.parentNode.removeChild(iframe);
@ -12,8 +14,8 @@ var ImageEditorActivator = {
fileToEdit = $('ImageEditorActivator').firstChild.src;
iframe.setAttribute("src","admin/ImageEditor?fileToEdit=" + fileToEdit);
iframe.id = 'imageEditorIframe';
iframe.style.width = "97%";
iframe.style.height = "300%";
iframe.style.width = windowWidth - 30 + 'px';
iframe.style.height = windowHeight + 10 + 'px';
iframe.style.zIndex = "1000";
iframe.style.position = "absolute";
iframe.style.top = "-2%";

4
javascript/ImageEditor/Crop.js
View File

@ -87,8 +87,8 @@ var Crop = {
this.placeGreyBox(width,height);
},
getMousePos: function(event) {
x = Event.pointerX(event);
y = Event.pointerY(event);
x = Event.pointerX(event) + $('imageEditorContainer').scrollLeft;
y = Event.pointerY(event) + $('imageEditorContainer').scrollTop;
if(x <= this.leftBoxConstraint) x = this.leftBoxConstraint;
if(y <= this.topBoxConstraint) y = this.topBoxConstraint;
if(x >= this.rightBoxConstraint) x = this.rightBoxConstraint;

24
javascript/ImageEditor/DocumentBody.js Normal file
View File

@ -0,0 +1,24 @@
/**
* @author Mateusz
*/
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';
},
onWindowResize: function() {
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.height = windowHeight + 10 + 'px';
$('imageEditorContainer').style.height = windowHeight - 105 + 'px';
},
onImageEditorScroll: function() {
imageBox.reCenterIndicator();
}
}

18
javascript/ImageEditor/Effects.js
View File

@ -13,19 +13,11 @@ var Effects = {
rotate: function() {
if(this.isRotateEnabled) {
var windowWidth = Element.getDimensions($('mainContainer')).width;
var windowHeight = Element.getDimensions($('mainContainer')).height - 100;
var imageWidth = Element.getDimensions($('image')).height;
var imageHeight = Element.getDimensions($('image')).width;
if(imageWidth > windowWidth - 30 || imageHeight > windowHeight - 30) {
alert('Image to big to rotate');
} else {
resize.imageContainerResize.disable();
crop.disable();
imageHistory.disable();
imageTransformation.rotate(90,Effects.rotateCallback.bind(this));
this.isRotateEnabled = false;
}
resize.imageContainerResize.disable();
crop.disable();
imageHistory.disable();
imageTransformation.rotate(90,Effects.rotateCallback.bind(this));
this.isRotateEnabled = false;
}
},

10
javascript/ImageEditor/Image.js
View File

@ -35,7 +35,6 @@ var ImageToResize = {
resize.imageContainerResize.originalWidth = this.imageToResize.width;
resize.imageContainerResize.originalHeight = this.imageToResize.height;
resize.imageContainerResize.placeClickBox();
imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight());
crop.enable();
resize.imageContainerResize.enable();
effects.enableRotate();
@ -50,11 +49,13 @@ var ImageToResize = {
var windowHeight = Element.getDimensions($('mainContainer')).height - 100;
var imageWidth = Element.getDimensions($('image')).width;
var imageHeight = Element.getDimensions($('image')).height;
if(imageWidth > windowWidth - 120 || imageHeight > windowHeight - 120) {
if(imageWidth > windowWidth - 40 || imageHeight > windowHeight - 40) {
imageHistory.clear();
Element.hide($('imageContainer'),$('image'));
ratio = imageWidth / imageHeight;
while(imageWidth > windowWidth - 120 || imageHeight > windowHeight - 120) {
$('loadingIndicatorContainer2').style.left = windowWidth/2 + 'px';
$('loadingIndicatorContainer2').style.top = windowHeight/2 + 100 + 'px';
while(imageWidth > windowWidth - 40 || imageHeight > windowHeight - 40) {
imageWidth--;
imageHeight = imageWidth * (1/ratio);
}
@ -65,7 +66,8 @@ var ImageToResize = {
},
resizeOnFirstLoadCallBack: function() {
resize.imageContainerResize.setVisible(true);
Element.hide($('loadingIndicatorContainer2'));
resize.imageContainerResize.setVisible(true);
resize.imageContainerResize.placeClickBox();
imageBox.center();
}

23
javascript/ImageEditor/ImageBox.js
View File

@ -10,7 +10,6 @@ var ImageBox = {
this.hideIndicator = ImageBox.hideIndicator.bind(this);
this.reCenterIndicator = ImageBox.reCenterIndicator.bind(this);
this.centerIndicator = ImageBox.centerIndicator.bind(this);
this.checkOutOfDrawingArea = ImageBox.checkOutOfDrawingArea.bind(this);
this.center = ImageBox.center.bind(this);
this.imageContainer = Positioning.addBehaviour($('imageContainer'));
Element.hide(this.imageContainer);
@ -23,7 +22,6 @@ var ImageBox = {
Element.show(this.indicator,this.indicatorImage);
if(container == null) container = this.imageContainer;
this.centerIndicator(container);
this.indicator.style.display = 'inline';
},
hideIndicator: function() {
@ -37,12 +35,12 @@ var ImageBox = {
var height = container.getHeight();
var parentTop = container.getParentTop();
var parentLeft = container.getParentLeft();
this.indicator.style.left = parentLeft + left + width/2 - this.indicatorWidth/2 + "px";
this.indicator.style.top = parentTop + top + height/2 - this.indicatorHeight/2 + "px";
this.indicator.style.left = width/2 - this.indicatorWidth/2 + "px";
this.indicator.style.top = height/2 - this.indicatorHeight/2 + "px";
},
reCenterIndicator: function() {
if(this.indicator.style.display == 'inline') {
if(Element.visible(this.indicator)) {
this.centerIndicator(this.imageContainer);
}
},
@ -50,20 +48,5 @@ var ImageBox = {
center: function() {
this.imageContainer.style.left = this.imageContainer.getParentWidth()/2 - this.imageContainer.getWidth()/2 + 'px';
this.imageContainer.style.top = this.imageContainer.getParentHeight()/2 - this.imageContainer.getHeight()/2 + 'px';
},
checkOutOfDrawingArea: function(width,height) {
var left = this.imageContainer.getLeft();
var top = this.imageContainer.getTop();
var parentLeft = this.imageContainer.getParentLeft();
var parentTop = this.imageContainer.getParentTop();
var parentWidth = this.imageContainer.getParentWidth();
var parentHeight = this.imageContainer.getParentHeight();
if(left + width > parentWidth) {
this.imageContainer.style.left = left - (left + width - parentWidth) - 3+ 'px';
}
if(top + height > parentHeight) {
this.imageContainer.style.top = top - (top + height - parentHeight) - 3 + 'px';
}
}
};

3
javascript/ImageEditor/ImageEditor.js
View File

@ -12,12 +12,13 @@ var ImageEditor = {
resize = new Resize.initialize($('imageContainer'));
effects = new Effects.initialize();
crop = new Crop.initialize();
documentBody = new DocumentBody.initialize();
this.originalImageFile = imageFile;
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($('closeButton'),'click',this.onCloseClick);
},
onSaveClick: function() {
if(this.tottalyOriginalImageFile != $('image').src) {

1
javascript/ImageEditor/ImageHistory.js
View File

@ -121,7 +121,6 @@ ImageHistory = {
onImageLoad: function(event) {
Event.stopObserving($('image'),'load',this.onImageLoad);
imageBox.checkOutOfDrawingArea(this.size[this.historyPointer].width,this.size[this.historyPointer].height);
this.image.style.width = this.size[this.historyPointer].width + 'px';
this.image.style.height = this.size[this.historyPointer].height + 'px';
$('imageContainer').style.width = this.size[this.historyPointer].width + 'px';

18
javascript/ImageEditor/Resize.js
View File

@ -1,12 +1,12 @@
/**
* @author Mateusz
*/
*/
var Resize = {
initialize: function(element) {
this.element = element;
this.leftBoxConstraint = 20;
this.topBoxConstraint = 100;
this.leftBoxConstraint = 4;
this.topBoxConstraint = 4;
this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this);
options = {
resizeStop: Resize.resizeStop.bind(this),
@ -44,8 +44,6 @@ var Resize = {
{
if(this.element.getTop() < this.topBoxConstraint) this.element.style.top = this.topBoxConstraint + "px";
if(this.element.getLeft() < this.leftBoxConstraint) this.element.style.left = this.leftBoxConstraint + "px";
if(this.element.getLeft() + this.element.getWidth() > this.element.getParentWidth()) this.element.style.left = this.element.getParentWidth() - this.element.getWidth() - 3 + 'px';
if(this.element.getTop() + this.element.getHeight() >= this.element.getParentHeight()) this.element.style.top = this.element.getParentHeight() - this.element.getHeight() - 3 + 'px';
imageBox.reCenterIndicator();
},
@ -58,16 +56,12 @@ var Resize = {
relativeMouseY = this.getRelativeMousePos(event).y;
if(relativeMouseX <= this.leftBoxConstraint) x = this.leftBoxConstraint + this.element.getParentLeft(); else x = relativeMouseX + this.element.getParentLeft();
if(relativeMouseY <= this.topBoxConstraint) y = this.topBoxConstraint + this.element.getParentTop(); else y = relativeMouseY + this.element.getParentTop();
if(relativeMouseX >= this.element.getParentWidth()) {
x = this.element.getParentLeft() + this.element.getParentWidth();
}
if(relativeMouseY >= this.element.getParentHeight()) y = this.element.getParentTop() + this.element.getParentHeight();
return {x: x,y: y};
},
getRelativeMousePos: function(event) {
relativeMouseX = Event.pointerX(event) - this.element.getParentLeft();
relativeMouseY = Event.pointerY(event) - this.element.getParentTop();
return {x: relativeMouseX,y: relativeMouseY};
relativeMouseX = Event.pointerX(event) + $('imageEditorContainer').scrollLeft - this.element.getParentLeft();
relativeMouseY = Event.pointerY(event) + $('imageEditorContainer').scrollTop - this.element.getParentTop();
return {x: relativeMouseX,y: relativeMouseY};
}
}

2
javascript/ImageEditor/Utils.js
View File

@ -42,7 +42,7 @@ Positioning = {
},
getLeft: function() {
return Position.positionedOffset(this.element)[0];
return parseInt(this.element.style.left);
},
getWidth: function() {

15
templates/ImageEditor.ss
View File

@ -6,7 +6,7 @@
<title>Untitled Document</title>
<meta http-equiv="imagetoolbar" content="no">
</head>
<body id="body" onload="setTimeout(function() { imageEditor = new ImageEditor.initialize('$fileToEdit'); }, 0);">
<body id="body" onload="imageEditor = new ImageEditor.initialize('$fileToEdit');">
<div id="mainContainer">
<div id="menuBarContainer">
<div id="photoInfoContainer" class="floatRight">
@ -39,14 +39,17 @@
<div id="lowerGreyBox" class="greyBox"></div>
<img id="image" src="#" alt=""/>
<div id="cropBox"></div>
</div>
</div>
<div id="loadingIndicatorContainer">
<img id="loadingIndicator" alt="" src="cms/images/ImageEditor/indicator.gif">
</div>
</div>
</div>
</div>
<div id="fakeImgContainer">
<img id="fakeImg" src="#" alt=""/>
</div>
<div id="loadingIndicatorContainer">
<img id="loadingIndicator" alt="" src="cms/images/ImageEditor/indicator.gif">
</div>
<div id="loadingIndicatorContainer2">
<img id="loadingIndicator2" alt="" src="cms/images/ImageEditor/indicator.gif">
</div>
</body>
</html>