mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-07-02 01:19:22 +02:00
c3988b53f2
(merged from branches/gsocmujma: BUGIX: From now should work properly on servers with low bandwidth . (merged from branches/gsoc)) git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41930 467b73ca-7a2a-4603-9d3b-597d59a354a9
71 lines
2.6 KiB
JavaScript
71 lines
2.6 KiB
JavaScript
/**
|
|
* @author Mateusz
|
|
*/
|
|
var ImageToResize = {
|
|
initialize: function(imageFile) {
|
|
Element.hide($('image'));
|
|
this.image = $('image');
|
|
this.image.src = imageFile;
|
|
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(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) {
|
|
if(this.image.width != 0 && this.image.height != 0) {
|
|
this.reportSize();
|
|
$('imageContainer').style.width = this.image.width + 'px';
|
|
$('imageContainer').style.height = this.image.height + 'px';
|
|
imageBox.hideIndicator();
|
|
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 - 100;
|
|
imageWidth = Element.getDimensions(this.image).width;
|
|
imageHeight= Element.getDimensions(this.image).height;
|
|
if(imageWidth > windowWidth - 120 || imageHeight > windowHeight - 120) {
|
|
ratio = imageWidth / imageHeight;
|
|
while(imageWidth > windowWidth - 120 || imageHeight > windowHeight - 120) {
|
|
imageWidth--;
|
|
imageHeight = imageWidth * (1/ratio);
|
|
}
|
|
this.reportSize(0,0);
|
|
imageHistory.clear();
|
|
imageBox.showIndicator();
|
|
resize.imageContainerResize.setVisible(false);
|
|
imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this));
|
|
} else {
|
|
if(imageWidth != 0 && imageHeight != 0) Element.show($('image'));
|
|
}
|
|
},
|
|
|
|
resizeOnFirstLoadCallBack: function() {
|
|
imageBox.center();
|
|
Element.show($('image'));
|
|
resize.imageContainerResize.setVisible(true);
|
|
imageBox.hideIndicator();
|
|
}
|
|
};
|