silverstripe-cms/javascript/ImageEditor/Image.js

68 lines
2.4 KiB
JavaScript
Raw Normal View History

/**
* @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) {
this.reportSize();
$('imageContainer').style.width = this.image.width + 'px';
$('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 - 100;
imageWidth = Element.getDimensions(this.image).width;
imageHeight= Element.getDimensions(this.image).height;
if(imageWidth > windowWidth - 120 || imageHeight > windowHeight - 120) {
ratio = imageWidth / imageHeight;
if(imageWidth > imageHeight) {
newWidth = windowWidth - 120;
newHeight = newWidth * (1/ratio);
} else {
newHeight = windowHeight - 120;
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);
}
};