diff --git a/code/ImageEditor.php b/code/ImageEditor.php
index a9a9f8c7..aa6f8105 100644
--- a/code/ImageEditor.php
+++ b/code/ImageEditor.php
@@ -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');
diff --git a/css/ImageEditor/ImageEditor.css b/css/ImageEditor/ImageEditor.css
index f068e69b..9741f2f4 100644
--- a/css/ImageEditor/ImageEditor.css
+++ b/css/ImageEditor/ImageEditor.css
@@ -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;
}
\ No newline at end of file
diff --git a/javascript/ImageEditor/Activator.js b/javascript/ImageEditor/Activator.js
index dfda517b..846a5e0a 100644
--- a/javascript/ImageEditor/Activator.js
+++ b/javascript/ImageEditor/Activator.js
@@ -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%";
diff --git a/javascript/ImageEditor/Crop.js b/javascript/ImageEditor/Crop.js
index fedb4f48..80cc6be2 100644
--- a/javascript/ImageEditor/Crop.js
+++ b/javascript/ImageEditor/Crop.js
@@ -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;
diff --git a/javascript/ImageEditor/DocumentBody.js b/javascript/ImageEditor/DocumentBody.js
new file mode 100644
index 00000000..f6b69615
--- /dev/null
+++ b/javascript/ImageEditor/DocumentBody.js
@@ -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();
+ }
+}
diff --git a/javascript/ImageEditor/Effects.js b/javascript/ImageEditor/Effects.js
index e62fd9fc..dcfdbbfc 100644
--- a/javascript/ImageEditor/Effects.js
+++ b/javascript/ImageEditor/Effects.js
@@ -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;
}
},
diff --git a/javascript/ImageEditor/Image.js b/javascript/ImageEditor/Image.js
index de628596..ebcbcef8 100644
--- a/javascript/ImageEditor/Image.js
+++ b/javascript/ImageEditor/Image.js
@@ -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();
}
diff --git a/javascript/ImageEditor/ImageBox.js b/javascript/ImageEditor/ImageBox.js
index 97b6a116..07408a3b 100644
--- a/javascript/ImageEditor/ImageBox.js
+++ b/javascript/ImageEditor/ImageBox.js
@@ -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';
- }
}
};
diff --git a/javascript/ImageEditor/ImageEditor.js b/javascript/ImageEditor/ImageEditor.js
index 575bb862..d3af6844 100644
--- a/javascript/ImageEditor/ImageEditor.js
+++ b/javascript/ImageEditor/ImageEditor.js
@@ -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) {
diff --git a/javascript/ImageEditor/ImageHistory.js b/javascript/ImageEditor/ImageHistory.js
index f8a94600..49f098c9 100644
--- a/javascript/ImageEditor/ImageHistory.js
+++ b/javascript/ImageEditor/ImageHistory.js
@@ -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';
diff --git a/javascript/ImageEditor/Resize.js b/javascript/ImageEditor/Resize.js
index ced6b493..f3aa0c21 100644
--- a/javascript/ImageEditor/Resize.js
+++ b/javascript/ImageEditor/Resize.js
@@ -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};
}
}
\ No newline at end of file
diff --git a/javascript/ImageEditor/Utils.js b/javascript/ImageEditor/Utils.js
index 8387415d..34168337 100644
--- a/javascript/ImageEditor/Utils.js
+++ b/javascript/ImageEditor/Utils.js
@@ -42,7 +42,7 @@ Positioning = {
},
getLeft: function() {
- return Position.positionedOffset(this.element)[0];
+ return parseInt(this.element.style.left);
},
getWidth: function() {
diff --git a/templates/ImageEditor.ss b/templates/ImageEditor.ss
index 39a370c7..76d0d5fb 100644
--- a/templates/ImageEditor.ss
+++ b/templates/ImageEditor.ss
@@ -6,7 +6,7 @@
Untitled Document
-
+
+
+
+
+
-
-
+
+
-