mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-10-22 08:05:56 +02:00
mujma: Added support for large images (larger than browser window).
(merged from branches/gsoc) git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41894 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
parent
9b9b297fdb
commit
f436292174
@ -38,7 +38,6 @@
|
||||
if(!isset($this->requestParams['fileToEdit'])) $this->raiseError();
|
||||
$fileWithPath = $this->requestParams['fileToEdit'];
|
||||
$this->fileToEdit = $this->file2Origin($fileWithPath);
|
||||
|
||||
return $this->renderWith(__CLASS__);
|
||||
}
|
||||
|
||||
@ -78,7 +77,7 @@
|
||||
}
|
||||
$rand = md5(rand(1,100000));
|
||||
$gd->writeTo('../assets/tmp/' . $rand . '.jpg');
|
||||
return $this->getImageInfoInJSON($gd,'../assets/tmp/' . $rand . '.jpg');
|
||||
return $this->getImageInfoInJSON($gd,'assets/tmp/' . $rand . '.jpg');
|
||||
}
|
||||
|
||||
/**
|
||||
@ -181,7 +180,7 @@
|
||||
if(strpos($url,'?') !== false) $url = substr($url,0,strpos($url,'?'));
|
||||
$pathInfo = pathinfo($url);
|
||||
if(count($pathInfo) < 3) $this->raiseError();
|
||||
if(!in_array($pathInfo['extension'],array('jpeg','jpg','jpe','png','gif'))) $this->raiseError();
|
||||
if(!in_array($pathInfo['extension'],array('jpeg','jpg','jpe','png','gif','JPEG','JPG','JPE','PNG','GIF'))) $this->raiseError();
|
||||
$path = explode('/',$pathInfo['dirname']);
|
||||
if(count($path) > 1) {
|
||||
$assetId = array_search('assets',$path);
|
||||
@ -195,7 +194,8 @@
|
||||
} else {
|
||||
$this->raiseError();
|
||||
}
|
||||
if(file_exists($realPath)) {
return true;
|
||||
if(file_exists($realPath)) {
|
||||
return true;
|
||||
} else {
|
||||
$this->raiseError();
|
||||
}
|
||||
|
@ -1,11 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<projectDescription>
|
||||
<name>ImageEditor-SS</name>
|
||||
<comment></comment>
|
||||
<projects>
|
||||
</projects>
|
||||
<buildSpec>
|
||||
</buildSpec>
|
||||
<natures>
|
||||
</natures>
|
||||
</projectDescription>
|
@ -4,6 +4,6 @@
|
||||
var Environment = {
|
||||
initialize: function (imageFile) {
|
||||
imageBox = new ImageBox.initialize();
|
||||
imageToResize = new Image.initialize(imageFile);
|
||||
imageToResize = new ImageToResize.initialize(imageFile);
|
||||
}
|
||||
}
|
@ -1,19 +1,27 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
var Image = {
|
||||
var ImageToResize = {
|
||||
initialize: function(imageFile) {
|
||||
Element.hide($('image'));
|
||||
this.image = $('image');
|
||||
this.image.src = imageFile;
|
||||
this.reportSize = Image.reportSize.bind(this);
|
||||
this.onImageLoad = Image.onImageLoad.bind(this);
|
||||
this.reportSize = ImageToResize.reportSize.bind(this);
|
||||
this.onImageLoad = ImageToResize.onImageLoad.bind(this);
|
||||
this.resizeOnFirstLoad = ImageToResize.resizeOnFirstLoad.bind(this);
|
||||
Event.observe(this.image,'load',this.onImageLoad);
|
||||
imageHistory.add('initialize',this.image.src);
|
||||
|
||||
},
|
||||
|
||||
reportSize: function() {
|
||||
$('imageWidth').innerHTML = this.image.width + "px";
|
||||
$('imageHeight').innerHTML = this.image.height + "px";
|
||||
reportSize: function(width,height) {
|
||||
if(width != null && height != null) {
|
||||
$('imageWidth').innerHTML = width + "px";
|
||||
$('imageHeight').innerHTML = height + "px";
|
||||
} else {
|
||||
$('imageWidth').innerHTML = this.image.width + "px";
|
||||
$('imageHeight').innerHTML = this.image.height + "px";
|
||||
}
|
||||
},
|
||||
|
||||
onImageLoad: function(event) {
|
||||
@ -22,9 +30,38 @@ var Image = {
|
||||
$('imageContainer').style.height = this.image.height + 'px';
|
||||
if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) {
|
||||
imageBox.center();
|
||||
this.resizeOnFirstLoad();
|
||||
}
|
||||
resize.imageContainerResize.originalWidth = this.image.width;
|
||||
resize.imageContainerResize.originalHeight = this.image.height;
|
||||
imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight());
|
||||
}
|
||||
},
|
||||
|
||||
resizeOnFirstLoad: function() {
|
||||
windowWidth = Element.getDimensions($('mainContainer')).width;
|
||||
windowHeight = Element.getDimensions($('mainContainer')).height;
|
||||
imageWidth = Element.getDimensions(this.image).width;
|
||||
imageHeight= Element.getDimensions(this.image).height;
|
||||
if(imageWidth > windowWidth || imageHeight > windowHeight) {
|
||||
ratio = imageWidth / imageHeight;
|
||||
if(imageWidth > imageHeight) {
|
||||
newWidth = windowWidth - windowWidth/1.75;
|
||||
newHeight = newWidth * (1/ratio);
|
||||
} else {
|
||||
newHeight = windowHeight - windowHeight/1.75;
|
||||
newWidth = newHeight * ratio;
|
||||
}
|
||||
this.reportSize(0,0);
|
||||
imageHistory.clear();
|
||||
imageTransformation.resize(newWidth,newHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this));
|
||||
} else {
|
||||
if(imageWidth != 0 && imageHeight != 0) Element.show($('image'));
|
||||
}
|
||||
},
|
||||
|
||||
resizeOnFirstLoadCallBack: function() {
|
||||
imageBox.center();
|
||||
Element.show($('image'));
|
||||
resize.imageContainerResize.setVisible(true);
|
||||
}
|
||||
};
|
||||
|
@ -16,6 +16,7 @@ ImageHistory = {
|
||||
this.onFakeImageLoad = ImageHistory.onFakeImageLoad.bind(this);
|
||||
this.enable = ImageHistory.enable.bind(this);
|
||||
this.disable = ImageHistory.disable.bind(this);
|
||||
this.clear = ImageHistory.clear.bind(this);
|
||||
},
|
||||
|
||||
undo: function() {
|
||||
@ -88,5 +89,10 @@ ImageHistory = {
|
||||
disable: function() {
|
||||
Event.stopObserving($('undoButton'),'click', this.undo);
|
||||
Event.stopObserving($('redoButton'),'click', this.redo);
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
this.history = new Array();
|
||||
this.historyPointer = -1;
|
||||
}
|
||||
};
|
@ -10,7 +10,7 @@ var ImageTransformation = {
|
||||
this.close = ImageTransformation.close.bind(this);
|
||||
},
|
||||
|
||||
resize: function(width,height) {
|
||||
resize: function(width,height,callback) {
|
||||
if(imageHistory.modifiedOriginalImage) {
|
||||
fileToResize = $('image').src;
|
||||
} else {
|
||||
@ -23,7 +23,14 @@ var ImageTransformation = {
|
||||
imageBox.hideIndicator();
|
||||
response = eval('(' + transport.responseText + ')');
|
||||
$('image').src = response.fileName;
|
||||
$('image').style.width = response.width + 'px';
|
||||
$('image').style.height = response.height + 'px';
|
||||
$('imageContainer').style.width = response.width + 'px';
|
||||
$('imageContainer').style.height = response.height + 'px';
|
||||
imageHistory.add('resize',$('image').src);
|
||||
if(callback != null) {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
};
|
||||
imageBox.showIndicator();
|
||||
@ -69,7 +76,7 @@ var ImageTransformation = {
|
||||
}
|
||||
};
|
||||
imageBox.showIndicator();
|
||||
new Ajax.Request('/admin/ImageEditor/manipulate', options);
|
||||
new Ajax.Request('admin/ImageEditor/manipulate', options);
|
||||
},
|
||||
|
||||
save: function(originalFile,editedFile) {
|
||||
|
@ -16,7 +16,7 @@ var Resize = {
|
||||
};
|
||||
new Positioning.addBehaviour(this.element);
|
||||
this.imageContainerResize = new Resizeable.initialize(element,options);
|
||||
this.imageContainerResize.setVisible(true);
|
||||
this.imageContainerResize.setVisible(false);
|
||||
},
|
||||
|
||||
resizeStop: function(event) {
|
||||
|
Loading…
Reference in New Issue
Block a user