mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-10-22 08:05:56 +02:00
API CHANGE Removed obsolete/broken ImageEditor functionality
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92575 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer
parent
45931203df
commit
edb8a0d1a1
@ -1,43 +0,0 @@
|
||||
ImageEditor = {};
|
||||
|
||||
ImageEditor.Activator = {
|
||||
initialize: function() {
|
||||
this.onOpen = ImageEditor.Activator.onOpen.bind(this);
|
||||
},
|
||||
|
||||
onOpen: function() {
|
||||
var windowWidth = Element.getDimensions(window.top.document.body).width;
|
||||
var windowHeight = Element.getDimensions(window.top.document.body).height;
|
||||
var iframe = window.top.document.getElementById('imageEditorIframe');
|
||||
if(iframe != null) {
|
||||
iframe.parentNode.removeChild(iframe);
|
||||
}
|
||||
iframe = window.top.document.createElement('iframe');
|
||||
var fileToEdit = $('ImageEditorActivator').firstChild.src;
|
||||
iframe.setAttribute("src","admin/ImageEditor?fileToEdit=" + fileToEdit);
|
||||
iframe.id = 'imageEditorIframe';
|
||||
iframe.style.width = windowWidth - 6 + 'px';
|
||||
iframe.style.height = windowHeight + 10 + 'px';
|
||||
iframe.style.zIndex = "1000";
|
||||
iframe.style.position = "absolute";
|
||||
iframe.style.top = "8px";
|
||||
iframe.style.left = "8px";
|
||||
window.top.document.body.appendChild(iframe);
|
||||
var divLeft = window.top.document.createElement('div');
|
||||
var divRight = window.top.document.createElement('div');
|
||||
divLeft.style.width = "8px";
|
||||
divLeft.style.height = "300%";
|
||||
divLeft.style.zIndex = "1000";
|
||||
divLeft.style.top = "0";
|
||||
divLeft.style.position = "absolute";
|
||||
divRight.style.width = "10px";
|
||||
divRight.style.height = "300%";
|
||||
divRight.style.zIndex = "1000";
|
||||
divRight.style.top = "0";
|
||||
divRight.style.position = "absolute";
|
||||
divRight.style.left = Element.getDimensions(divLeft).width + Element.getDimensions(iframe).width - 4 + 'px';
|
||||
window.top.document.body.appendChild(divLeft);
|
||||
window.top.document.body.appendChild(divRight);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
ImageEditor.Adjust = {
|
||||
initialize: function() {
|
||||
this.perform = ImageEditor.Adjust.perform.bind(this);
|
||||
this.setListener = ImageEditor.Adjust.setListener.bind(this);
|
||||
this.setListener();
|
||||
},
|
||||
|
||||
setListener: function() {
|
||||
Element.toggle($('AdjustMenu'));
|
||||
Event.observe('AdjustButton','click',this.perform);
|
||||
},
|
||||
|
||||
perform: function() {
|
||||
Element.toggle($('AdjustMenu'));
|
||||
}
|
||||
}
|
||||
@ -1,203 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.Crop = {
|
||||
|
||||
initialize: function() {
|
||||
this.cropBox = $('cropBox');
|
||||
new ImageEditor.Positioning.addBehaviour(this.cropBox);
|
||||
this.imageContainer = $('imageContainer');
|
||||
this.leftGreyBox = $('leftGreyBox');
|
||||
this.rightGreyBox = $('rightGreyBox');
|
||||
this.upperGreyBox = $('upperGreyBox');
|
||||
this.lowerGreyBox = $('lowerGreyBox');
|
||||
this.centerCropBox = ImageEditor.Crop.centerCropBox.bind(this);
|
||||
this.placeGreyBox = ImageEditor.Crop.placeGreyBox.bind(this);
|
||||
this.setListeners = ImageEditor.Crop.setListeners.bind(this);
|
||||
this.onCropStart = ImageEditor.Crop.onCropStart.bind(this);
|
||||
this.onCropOk = ImageEditor.Crop.onCropOk.bind(this);
|
||||
this.onCropCancel = ImageEditor.Crop.onCropCancel.bind(this);
|
||||
this.doCrop = ImageEditor.Crop.doCrop.bind(this);
|
||||
this.setVisible = ImageEditor.Crop.setVisible.bind(this);
|
||||
this.enable = ImageEditor.Crop.enable.bind(this);
|
||||
this.disable = ImageEditor.Crop.disable.bind(this);
|
||||
this.onImageLoadCallback = ImageEditor.Crop.onImageLoadCallback.bind(this);
|
||||
Event.observe('image','load',this.centerCropBox);
|
||||
var options = {
|
||||
resizeStop: ImageEditor.Crop.resizeStop.bind(this),
|
||||
onDrag: ImageEditor.Crop.onDrag.bind(this),
|
||||
onResize: ImageEditor.Crop.onResize.bind(this),
|
||||
getMousePos: ImageEditor.Crop.getMousePos.bind(this)
|
||||
};
|
||||
this.resizeCropBox = new ImageEditor.Resizeable.initialize(this.cropBox,options);
|
||||
Event.observe(this.cropBox,'dblclick',this.onCropOk.bind(this));
|
||||
this.setListeners();
|
||||
this.isVisible = false;
|
||||
this.setVisible(this.isVisible);
|
||||
this.isEnabled = true;
|
||||
this.lastCrop = {};
|
||||
},
|
||||
|
||||
resizeStop: function(event) {
|
||||
if(this.isVisible) {
|
||||
ImageEditor.EventStack.clearStack();
|
||||
this.resizeCropBox.originalHeight = this.cropBox.getHeight();
|
||||
this.resizeCropBox.originalWidth = this.cropBox.getWidth();
|
||||
}
|
||||
},
|
||||
|
||||
onDrag: function(event) {
|
||||
if(this.cropBox.getLeft() <= 0 ) this.cropBox.style.left = '0px';
|
||||
if(this.cropBox.getTop() <= 0 ) this.cropBox.style.top = '0px';
|
||||
if(this.cropBox.getLeft() + this.cropBox.getWidth() > this.cropBox.getParentWidth()) this.cropBox.style.left = this.cropBox.getParentWidth()- this.cropBox.getWidth() + 'px';
|
||||
if(this.cropBox.getTop() + this.cropBox.getHeight() > this.cropBox.getParentHeight()) this.cropBox.style.top = this.cropBox.getParentHeight() - this.cropBox.getHeight() + 'px';
|
||||
this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight());
|
||||
},
|
||||
|
||||
centerCropBox: function() {
|
||||
this.cropBox.style.width = this.cropBox.getParentWidth()/2 + 'px';
|
||||
this.cropBox.style.height = this.cropBox.getParentHeight()/2 + 'px';
|
||||
this.cropBox.style.left = (this.cropBox.getParentWidth() - this.cropBox.getWidth())/2 + "px";
|
||||
this.cropBox.style.top = (this.cropBox.getParentHeight() - this.cropBox.getHeight())/2 + "px";
|
||||
this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight());
|
||||
this.leftBoxConstraint = this.cropBox.getParentLeft();
|
||||
this.topBoxConstraint = this.cropBox.getParentTop();
|
||||
this.rightBoxConstraint = this.cropBox.getParentLeft() + this.cropBox.getParentWidth();
|
||||
this.bottomBoxConstraint = this.cropBox.getParentTop() + this.cropBox.getParentHeight()-1;//hack without 1 doesn't work;
|
||||
},
|
||||
|
||||
placeGreyBox: function(width,height) {
|
||||
if(this.isVisible) {
|
||||
this.lowerGreyBox.style.left = this.cropBox.getLeft() + 'px';
|
||||
this.lowerGreyBox.style.width = width + 'px';
|
||||
this.lowerGreyBox.style.height = this.cropBox.getParentHeight() - this.cropBox.getTop() - height + "px";
|
||||
this.lowerGreyBox.style.top = this.cropBox.getTop() + height + "px";
|
||||
this.leftGreyBox.style.width = this.cropBox.getLeft() + "px";
|
||||
this.leftGreyBox.style.height = $('imageContainer').getHeight() + 'px';
|
||||
this.rightGreyBox.style.width = this.cropBox.getParentWidth() - this.cropBox.getLeft() - width + "px";
|
||||
this.rightGreyBox.style.height = $('imageContainer').getHeight() + 'px';
|
||||
this.rightGreyBox.style.left = this.cropBox.getLeft() + width + "px";
|
||||
this.upperGreyBox.style.width = width + 'px';
|
||||
this.upperGreyBox.style.left = this.cropBox.getLeft() + 'px';
|
||||
this.upperGreyBox.style.height = this.cropBox.getTop() + 'px';
|
||||
this.resizeCropBox.placeClickBox();
|
||||
}
|
||||
},
|
||||
|
||||
onResize: function(width,height) {
|
||||
if(width + parseInt(this.cropBox.style.left) > Element.getDimensions(this.imageContainer).width) {
|
||||
this.cropBox.style.left = parseInt(this.cropBox.style.left) - Math.abs(Element.getDimensions(this.imageContainer).width - (width + parseInt(this.cropBox.style.left))) + "px";
|
||||
}
|
||||
if(parseInt(this.cropBox.style.left) < 0) {
|
||||
this.cropBox.style.left = "0px";
|
||||
}
|
||||
if(width > Element.getDimensions(this.imageContainer).width) {
|
||||
this.cropBox.style.width = Element.getDimensions(this.imageContainer).width + "px";
|
||||
width = Element.getDimensions(this.imageContainer).width;
|
||||
}
|
||||
this.placeGreyBox(width,height);
|
||||
},
|
||||
|
||||
getMousePos: function(event) {
|
||||
var x = Event.pointerX(event) + $('imageEditorContainer').scrollLeft;
|
||||
var 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;
|
||||
if(y >= this.bottomBoxConstraint) y = this.bottomBoxConstraint;
|
||||
return {x: x,y: y};
|
||||
},
|
||||
|
||||
doCrop: function() {
|
||||
if(this.isEnabled) {
|
||||
var newWidth = this.cropBox.getWidth()
|
||||
var newHeight = this.cropBox.getHeight() ;
|
||||
var startTop = this.cropBox.getTop() ;
|
||||
var startLeft = this.cropBox.getLeft() ;
|
||||
if(newWidth > 35 && newHeight > 35) {
|
||||
this.lastCrop.top = startTop;
|
||||
this.lastCrop.left = startLeft;
|
||||
this.lastCrop.newWidth = newWidth;
|
||||
this.lastCrop.newHeight = newHeight;
|
||||
ImageEditor.transformation.crop(startTop,startLeft,newWidth,newHeight,ImageEditor.Crop.cropCallback.bind(this));
|
||||
this.disable();
|
||||
} else {
|
||||
ImageEditor.statusMessageWrapper.statusMessage("Crop area too small","bad");
|
||||
return false;
|
||||
}
|
||||
$('image').style.visibility = 'visible';//hack for IE for not selecting image during crop
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
cropCallback: function() {
|
||||
ImageEditor.history.addCrop($('image').src,
|
||||
this.lastCrop.top,
|
||||
this.lastCrop.left,
|
||||
this.lastCrop.newWidth,
|
||||
this.lastCrop.newHeight
|
||||
);
|
||||
ImageEditor.resize.imageContainerResize.placeClickBox();
|
||||
ImageEditor.resize.imageContainerResize.setVisible(true);
|
||||
Element.show($('CropText'));
|
||||
Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('CurrentAction'));
|
||||
},
|
||||
|
||||
setListeners: function() {
|
||||
Event.observe('CropButton','click',this.onCropStart);
|
||||
Event.observe('CancelButton','click',this.onCropCancel);
|
||||
Event.observe('ApplyButton','click',this.onCropOk);
|
||||
},
|
||||
onCropStart: function() {
|
||||
if(this.isEnabled) {
|
||||
$('image').style.visibility = "hidden";//hack for IE for not selecting image during crop
|
||||
this.setVisible(true);
|
||||
Element.show($('CurrentAction'));
|
||||
ImageEditor.Main.disableFunctionality();
|
||||
this.enable();
|
||||
}
|
||||
},
|
||||
|
||||
onCropOk: function() {
|
||||
if(this.isEnabled) {
|
||||
if(this.doCrop()) Element.hide($('CurrentAction'));
|
||||
}
|
||||
},
|
||||
|
||||
onCropCancel: function(event) {
|
||||
if(this.isEnabled) {
|
||||
Element.hide($('CurrentAction'));
|
||||
Element.show($('CropText'));
|
||||
this.setVisible(false);
|
||||
ImageEditor.Main.enableFunctionality();
|
||||
this.enable();
|
||||
}
|
||||
$('image').style.visibility = 'visible';//hack for IE for not selecting image during crop
|
||||
},
|
||||
|
||||
setVisible: function(setVisible) {
|
||||
this.isVisible = setVisible;
|
||||
if(setVisible) {
|
||||
Element.show(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox);
|
||||
this.centerCropBox();
|
||||
this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight());
|
||||
} else {
|
||||
Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('CurrentAction'));
|
||||
}
|
||||
ImageEditor.resize.imageContainerResize.setVisible(!setVisible);
|
||||
this.resizeCropBox.setVisible(setVisible);
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
this.isEnabled = true;
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
this.isEnabled = false;
|
||||
},
|
||||
|
||||
onImageLoadCallback: function() {
|
||||
ImageEditor.crop.setVisible(false);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.DocumentBody = {
|
||||
initialize: function() {
|
||||
this.placeUI = ImageEditor.DocumentBody.placeUI.bind(this);
|
||||
this.placeUI();
|
||||
Event.observe(window.top,'resize',ImageEditor.DocumentBody.resizeIframe.bind(this));
|
||||
},
|
||||
|
||||
resizeIframe: function(event) {
|
||||
var windowWidth = Element.getDimensions(window.top.document.body).width;
|
||||
var windowHeight = Element.getDimensions(window.top.document.body).height;
|
||||
var iframe = window.top.document.getElementById('imageEditorIframe');
|
||||
iframe.style.width = windowWidth - 6 + 'px';
|
||||
iframe.style.height = windowHeight + 10 + 'px';
|
||||
this.placeUI();
|
||||
},
|
||||
|
||||
placeUI: function() {
|
||||
var iframe = window.top.document.getElementById('imageEditorIframe');
|
||||
$('imageEditorContainer').style.height = Element.getDimensions(iframe).height - Element.getDimensions($('TopRuler')).height - Element.getDimensions($('MenuBar')).height - 32 + 'px';
|
||||
$('imageEditorContainer').style.width = Element.getDimensions(iframe).width - Element.getDimensions($('LeftRuler')).width - 14 + 'px';
|
||||
$('LeftRuler').style.height = $('imageEditorContainer').style.height;
|
||||
$('TopLeft').style.width = Element.getDimensions($('MenuBar')).width -
|
||||
Element.getDimensions($('TopRight')).width + 'px';
|
||||
$('TopRight').style.left = Element.getDimensions($('TopLeft')).width + 'px';
|
||||
|
||||
},
|
||||
|
||||
onImageEditorScroll: function() {
|
||||
ImageEditor.imageBox.reCenterIndicator();
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.Effects.Main = {
|
||||
initialize: function() {
|
||||
this.enable = ImageEditor.Effects.Main.enable.bind(this);
|
||||
this.disable = ImageEditor.Effects.Main.disable.bind(this);
|
||||
this.effects = Array();
|
||||
this.effects['rotate'] = new ImageEditor.Effects.Base.initialize('rotate');
|
||||
this.effects['greyscale'] = new ImageEditor.Effects.Base.initialize('greyscale');
|
||||
this.effects['sepia'] = new ImageEditor.Effects.Base.initialize('sepia');
|
||||
this.effects['blur'] = new ImageEditor.Effects.Base.initialize('blur');
|
||||
this.effects['adjust-contrast'] = new ImageEditor.Effects.AdjustBase.initialize('adjust-contrast',$R(-100, 100),0.1,62);
|
||||
this.effects['adjust-brightness'] = new ImageEditor.Effects.AdjustBase.initialize('adjust-brightness',$R(-255, 255),0.1,160);
|
||||
this.effects['adjust-gamma'] = new ImageEditor.Effects.AdjustBase.initialize('adjust-gamma',$R(0, 5),1.2,4);
|
||||
this.getEffect = ImageEditor.Effects.Main.getEffect.bind(this);
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
for (var name in this.effects) {
|
||||
if(this.effects.hasOwnProperty(name)) this.effects[name].enable();
|
||||
}
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
for (var name in this.effects) {
|
||||
if(this.effects.hasOwnProperty(name)) this.effects[name].disable();
|
||||
}
|
||||
},
|
||||
|
||||
getEffect: function(name) {
|
||||
return this.effects[name];
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,120 +0,0 @@
|
||||
ImageEditor.Effects.AdjustBase = {
|
||||
initialize: function(name,minMax,firstValue,maxValue) {
|
||||
this.name = name;
|
||||
this.minMax = minMax;
|
||||
this.firstValue = firstValue;
|
||||
this.maxValue = maxValue;
|
||||
this.setListener = ImageEditor.Effects.AdjustBase.setListener.bind(this);
|
||||
this.callback = ImageEditor.Effects.AdjustBase.callback.bind(this);
|
||||
this.setValue = ImageEditor.Effects.AdjustBase.setValue.bind(this);
|
||||
this.getDefaultValue = ImageEditor.Effects.AdjustBase.getDefaultValue.bind(this);
|
||||
this.setListener();
|
||||
this.lastValue = this.firstValue;
|
||||
this.stopListenining = false;
|
||||
},
|
||||
|
||||
setListener: function() {
|
||||
var upperCaseName = this.name.substring(7,8).toUpperCase() + this.name.substring(8,this.name.length);
|
||||
this.slider = new Control.Slider('AdjustMenu' + upperCaseName + 'SliderTrackHandler','AdjustMenu' + upperCaseName + 'SliderTrack', {
|
||||
range: this.minMax,
|
||||
sliderValue: this.firstValue,
|
||||
onChange: ImageEditor.Effects.AdjustBase.onChange.bind(this),
|
||||
onSlide: ImageEditor.Effects.AdjustBase.onSlide.bind(this)
|
||||
});
|
||||
},
|
||||
|
||||
onSlide: function(v) {
|
||||
if(this.disabled || this.stopListenining) return;
|
||||
if(v > this.maxValue) this.setValue(this.maxValue);
|
||||
},
|
||||
|
||||
onChange: function(v) {
|
||||
if(this.disabled || this.stopListenining) return;
|
||||
this.lastValue = v;
|
||||
file = $('image').src;
|
||||
if(ImageEditor.history.hasOperation(this.name)) {
|
||||
var history = ImageEditor.history.getOptimizedHistory(this.name);
|
||||
if(history[1] != undefined) {
|
||||
file = ImageEditor.transformation.applyHistory(history);
|
||||
} else {
|
||||
file = history[0].fileUrl;
|
||||
}
|
||||
}
|
||||
ImageEditor.transformation.customRequest(this.name,this.callback,file,this.lastValue,true);
|
||||
},
|
||||
|
||||
callback: function() {
|
||||
ImageEditor.history.addAdjust(this.name,this.lastValue,$('image').src);
|
||||
},
|
||||
|
||||
setValue: function(value) {
|
||||
this.stopListenining = true;
|
||||
this.slider.setValue(value);
|
||||
this.stopListenining = false;
|
||||
},
|
||||
|
||||
getDefaultValue: function() {
|
||||
return this.firstValue;
|
||||
}
|
||||
}
|
||||
ImageEditor.Effects.AdjustBase.initialize.prototype = new ImageEditor.Effects.Base.initialize("adjustbase");
|
||||
ImageEditor.Effects.AdjustBase = {
|
||||
initialize: function(name,minMax,firstValue,maxValue) {
|
||||
this.name = name;
|
||||
this.minMax = minMax;
|
||||
this.firstValue = firstValue;
|
||||
this.maxValue = maxValue;
|
||||
this.setListener = ImageEditor.Effects.AdjustBase.setListener.bind(this);
|
||||
this.callback = ImageEditor.Effects.AdjustBase.callback.bind(this);
|
||||
this.setValue = ImageEditor.Effects.AdjustBase.setValue.bind(this);
|
||||
this.getDefaultValue = ImageEditor.Effects.AdjustBase.getDefaultValue.bind(this);
|
||||
this.setListener();
|
||||
this.lastValue = this.firstValue;
|
||||
this.stopListenining = false;
|
||||
},
|
||||
|
||||
setListener: function() {
|
||||
var upperCaseName = this.name.substring(7,8).toUpperCase() + this.name.substring(8,this.name.length);
|
||||
this.slider = new Control.Slider('AdjustMenu' + upperCaseName + 'SliderTrackHandler','AdjustMenu' + upperCaseName + 'SliderTrack', {
|
||||
range: this.minMax,
|
||||
sliderValue: this.firstValue,
|
||||
onChange: ImageEditor.Effects.AdjustBase.onChange.bind(this),
|
||||
onSlide: ImageEditor.Effects.AdjustBase.onSlide.bind(this)
|
||||
});
|
||||
},
|
||||
|
||||
onSlide: function(v) {
|
||||
if(this.disabled || this.stopListenining) return;
|
||||
if(v > this.maxValue) this.setValue(this.maxValue);
|
||||
},
|
||||
|
||||
onChange: function(v) {
|
||||
if(this.disabled || this.stopListenining) return;
|
||||
this.lastValue = v;
|
||||
file = $('image').src;
|
||||
if(ImageEditor.history.hasOperation(this.name)) {
|
||||
var history = ImageEditor.history.getOptimizedHistory(this.name);
|
||||
if(history[1] != undefined) {
|
||||
file = ImageEditor.transformation.applyHistory(history);
|
||||
} else {
|
||||
file = history[0].fileUrl;
|
||||
}
|
||||
}
|
||||
ImageEditor.transformation.customRequest(this.name,this.callback,file,this.lastValue,true);
|
||||
},
|
||||
|
||||
callback: function() {
|
||||
ImageEditor.history.addAdjust(this.name,this.lastValue,$('image').src);
|
||||
},
|
||||
|
||||
setValue: function(value) {
|
||||
this.stopListenining = true;
|
||||
this.slider.setValue(value);
|
||||
this.stopListenining = false;
|
||||
},
|
||||
|
||||
getDefaultValue: function() {
|
||||
return this.firstValue;
|
||||
}
|
||||
}
|
||||
ImageEditor.Effects.AdjustBase.initialize.prototype = new ImageEditor.Effects.Base.initialize("adjustbase");
|
||||
@ -1,76 +0,0 @@
|
||||
ImageEditor.Effects = {};
|
||||
ImageEditor.Effects.Base = {
|
||||
initialize: function(effectName) {
|
||||
this.disabled = false;
|
||||
this.perform = ImageEditor.Effects.Base.perform.bind(this);
|
||||
this.setListener = ImageEditor.Effects.Base.setListener.bind(this);
|
||||
this.enable = ImageEditor.Effects.Base.enable.bind(this);
|
||||
this.disable = ImageEditor.Effects.Base.disable.bind(this);
|
||||
this.callback = ImageEditor.Effects.Base.callback.bind(this);
|
||||
this.effectName = effectName;
|
||||
this.setListener();
|
||||
},
|
||||
|
||||
perform: function() {
|
||||
if(!this.disabled) {
|
||||
ImageEditor.transformation.customRequest(this.effectName,this.callback,undefined,undefined,true);
|
||||
}
|
||||
},
|
||||
|
||||
callback: function() {
|
||||
ImageEditor.history.addEffect($('image').src,this.effectName);
|
||||
},
|
||||
|
||||
setListener: function(eventHandler) {
|
||||
var effectName = this.effectName.substring(0,1).toUpperCase() + this.effectName.substring(1,this.effectName.length);
|
||||
if($(effectName + 'Button')) {
|
||||
Event.observe(effectName + 'Button','click',this.perform);
|
||||
}
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
this.disabled = true;
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
this.disabled = false;
|
||||
}
|
||||
}
|
||||
ImageEditor.Effects = {};
|
||||
ImageEditor.Effects.Base = {
|
||||
initialize: function(effectName) {
|
||||
this.disabled = false;
|
||||
this.perform = ImageEditor.Effects.Base.perform.bind(this);
|
||||
this.setListener = ImageEditor.Effects.Base.setListener.bind(this);
|
||||
this.enable = ImageEditor.Effects.Base.enable.bind(this);
|
||||
this.disable = ImageEditor.Effects.Base.disable.bind(this);
|
||||
this.callback = ImageEditor.Effects.Base.callback.bind(this);
|
||||
this.effectName = effectName;
|
||||
this.setListener();
|
||||
},
|
||||
|
||||
perform: function() {
|
||||
if(!this.disabled) {
|
||||
ImageEditor.transformation.customRequest(this.effectName,this.callback,undefined,undefined,true);
|
||||
}
|
||||
},
|
||||
|
||||
callback: function() {
|
||||
ImageEditor.history.addEffect($('image').src,this.effectName);
|
||||
},
|
||||
|
||||
setListener: function(eventHandler) {
|
||||
var effectName = this.effectName.substring(0,1).toUpperCase() + this.effectName.substring(1,this.effectName.length);
|
||||
if($(effectName + 'Button')) {
|
||||
Event.observe(effectName + 'Button','click',this.perform);
|
||||
}
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
this.disabled = true;
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
this.disabled = false;
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.Environment = {
|
||||
initialize: function (imageFile) {
|
||||
ImageEditor.imageBox = new ImageEditor.ImageBox.initialize();
|
||||
ImageEditor.imageToResize = new ImageEditor.ImageToResize.initialize(imageFile);
|
||||
}
|
||||
}
|
||||
@ -1,362 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.History = {
|
||||
|
||||
initialize: function() {
|
||||
this.history = new Array();
|
||||
this.historyPointer = -1;
|
||||
this.isEnabled = true;
|
||||
this.image = ImageEditor.Positioning.addBehaviour($('image'));
|
||||
this.size = new Array();
|
||||
this.fakeImage = $('fakeImg');
|
||||
this.image = $('image');
|
||||
this.adjust = new Array();
|
||||
this.undo = ImageEditor.History.undo.bind(this);
|
||||
this.redo = ImageEditor.History.redo.bind(this);
|
||||
this.add = ImageEditor.History.add.bind(this);
|
||||
this.addListeners = ImageEditor.History.addListeners.bind(this);
|
||||
this.hasOperation = ImageEditor.History.hasOperation.bind(this);
|
||||
this.isInHistory = ImageEditor.History.isInHistory.bind(this);
|
||||
this.onImageLoad = ImageEditor.History.onImageLoad.bind(this);
|
||||
this.removeLastOperation = ImageEditor.History.removeLastOperation.bind(this);
|
||||
this.getOptimizedHistory = ImageEditor.History.getOptimizedHistory.bind(this);
|
||||
this.addCrop = ImageEditor.History.addCrop.bind(this);
|
||||
this.addResize = ImageEditor.History.addResize.bind(this);
|
||||
this.addEffect = ImageEditor.History.addEffect.bind(this);
|
||||
this.addAdjust = ImageEditor.History.addAdjust.bind(this);
|
||||
this.enable = ImageEditor.History.enable.bind(this);
|
||||
this.disable = ImageEditor.History.disable.bind(this);
|
||||
this.clear = ImageEditor.History.clear.bind(this);
|
||||
this.onlyResized = ImageEditor.History.onlyResized.bind(this);
|
||||
this.optimizeOtherEffects = ImageEditor.History.optimizeOtherEffects.bind(this);
|
||||
this.optimizeCrop = ImageEditor.History.optimizeCrop.bind(this);
|
||||
this.optimizeResize = ImageEditor.History.optimizeResize.bind(this);
|
||||
this.optimizeRotate = ImageEditor.History.optimizeRotate.bind(this);
|
||||
this.checkSpecialOperation = ImageEditor.History.checkSpecialOperation.bind(this);
|
||||
this.addListeners();
|
||||
},
|
||||
|
||||
undo: function() {
|
||||
if(this.isEnabled) {
|
||||
if(this.historyPointer >= 1) {
|
||||
var operation = this.history[this.historyPointer].operation;
|
||||
this.checkSpecialOperation('undo',this.history[this.historyPointer]);
|
||||
Event.observe('image','load',this.onImageLoad);
|
||||
this.historyPointer = this.historyPointer - 1;
|
||||
this.image.src = this.history[this.historyPointer].fileUrl;
|
||||
} else {
|
||||
ImageEditor.statusMessageWrapper.statusMessage("No more undo","bad");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
redo: function() {
|
||||
if(this.isEnabled) {
|
||||
if(this.historyPointer < this.history.length-1) {
|
||||
var operation = this.history[this.historyPointer+1].operation;
|
||||
this.checkSpecialOperation('redo',this.history[this.historyPointer+1]);
|
||||
Event.observe('image','load',this.onImageLoad);
|
||||
this.historyPointer = this.historyPointer + 1;
|
||||
this.image.src = this.history[this.historyPointer].fileUrl;
|
||||
} else {
|
||||
ImageEditor.statusMessageWrapper.statusMessage("No more redo","bad");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
add: function(operation,url,additionalInfo) {
|
||||
var imageWidth = isNaN(parseInt($('image').style.width)) ? Element.getDimensions($('image')).width : parseInt($('image').style.width);//IE hack
|
||||
var imageHeight = isNaN(parseInt($('image').style.height)) ? Element.getDimensions($('image')).height : parseInt($('image').style.height);//IE hack
|
||||
//code above should be moved to Positioning.addBehaviour
|
||||
if(!this.isInHistory(operation,url)) {
|
||||
this.historyPointer++;
|
||||
this.size[this.historyPointer] = {'width': imageWidth,'height': imageHeight};
|
||||
this.history[this.historyPointer] = {'operation': operation,'fileUrl' : url,'additionalInfo': additionalInfo};
|
||||
this.size = this.size.slice(0,this.historyPointer+1);
|
||||
this.history = this.history.slice(0,this.historyPointer+1);
|
||||
}
|
||||
},
|
||||
|
||||
addCrop: function(url,top,left,width,height) {
|
||||
this.add('crop',url,{
|
||||
'top':top,
|
||||
'left': left,
|
||||
'width': width,
|
||||
'height': height
|
||||
});
|
||||
},
|
||||
|
||||
addResize: function(url,width,height) {
|
||||
this.add('resize',url,{
|
||||
'width': width,
|
||||
'height': height
|
||||
});
|
||||
},
|
||||
|
||||
addEffect: function(url,name) {
|
||||
this.add(name,url);
|
||||
},
|
||||
|
||||
addAdjust: function(name,value,url) {
|
||||
this.add(name,url,{'value': value});
|
||||
if(this.adjust[name] == undefined) {
|
||||
this.adjust[name] = {'pointer': 0,'values': Array()}
|
||||
this.adjust[name].values[0] = ImageEditor.effects.getEffect(name).getDefaultValue();
|
||||
}
|
||||
this.adjust[name].values[this.adjust[name].values.length] = value;
|
||||
this.adjust[name].pointer++;
|
||||
},
|
||||
|
||||
addListeners: function() {
|
||||
this.undoListener = Event.observe('UndoButton','click',this.undo);
|
||||
this.redoListener = Event.observe('RedoButton','click',this.redo);
|
||||
},
|
||||
|
||||
hasOperation: function(operation,historyPointer) {
|
||||
if(historyPointer == undefined) historyPointer = this.history.length-1;
|
||||
for(i=historyPointer;i>=0;i--) {
|
||||
if(this.history[i].operation == operation) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
getOptimizedHistory: function(without) {
|
||||
var history = this.history.slice(0,this.historyPointer+1);
|
||||
var result = {};
|
||||
var historyPointer = 1;
|
||||
result[0] = {fileUrl : history[0].fileUrl};
|
||||
var resize = this.optimizeResize(history,this.size);
|
||||
var rotate = this.optimizeRotate(history);
|
||||
var crop = this.optimizeCrop(history,this.size);
|
||||
var other = this.optimizeOtherEffects(history,without);
|
||||
if(rotate != undefined) {
|
||||
for(var i =0;i<rotate.length;i++) {
|
||||
result[historyPointer] = rotate[i];
|
||||
historyPointer++;
|
||||
}
|
||||
}
|
||||
if(resize != undefined){
|
||||
result[historyPointer] = resize;
|
||||
historyPointer++;
|
||||
}
|
||||
if(crop != undefined) {
|
||||
result[historyPointer] = crop;
|
||||
historyPointer++;
|
||||
}
|
||||
if(other != undefined) {
|
||||
for(var i =0;i<other.length;i++) {
|
||||
result[historyPointer] = other[i];
|
||||
historyPointer++;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
this.isEnabled = true;
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
this.isEnabled = false;
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
this.history = new Array();
|
||||
this.historyPointer = -1;
|
||||
this.size = new Array();
|
||||
},
|
||||
|
||||
removeLastOperation: function() {
|
||||
this.history.pop();
|
||||
this.size.pop();
|
||||
this.historyPointer--;
|
||||
},
|
||||
|
||||
isInHistory: function(operation,url) {
|
||||
if(operation == 'initialize' && this.historyPointer != -1) return true;
|
||||
for(var k=0;k<this.history.length;k++) {
|
||||
if(this.history[k].operation == operation && this.history[k].fileUrl == url) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
onImageLoad: function(event) {
|
||||
Event.stopObserving($('image'),'load',this.onImageLoad);
|
||||
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';
|
||||
$('imageContainer').style.height = this.size[this.historyPointer].height + 'px';
|
||||
ImageEditor.resize.imageContainerResize.originalWidth = this.size[this.historyPointer].width;
|
||||
ImageEditor.resize.imageContainerResize.originalHeight = this.size[this.historyPointer].height;
|
||||
ImageEditor.imageToResize.onImageLoad();
|
||||
},
|
||||
|
||||
onlyResized: function() {
|
||||
for(i=this.historyPointer;i>=0;i--) {
|
||||
if(this.history[i].operation != 'resize') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
optimizeResize: function(history,size) {
|
||||
var scallingXFactor = 1;var scallingYFactor = 1;
|
||||
var initWidth = size[0].width;var initHeight = size[0].height;
|
||||
for(var i=0;i<history.length && i < (this.historyPointer+1);i++) {
|
||||
switch(history[i].operation) {
|
||||
case 'resize':
|
||||
if(i == 0) {
|
||||
var previousWidth = 0;
|
||||
var previousHeight = 0;
|
||||
} else {
|
||||
previousWidth = size[i-1].width;
|
||||
previousHeight = size[i-1].height;
|
||||
}
|
||||
if(i != 0) {
|
||||
scallingXFactor *= history[i].additionalInfo.width/previousWidth
|
||||
scallingYFactor *= history[i].additionalInfo.height/previousHeight;
|
||||
}
|
||||
break;
|
||||
case 'rotate':
|
||||
var tempX = scallingXFactor;
|
||||
scallingXFactor = scallingYFactor;
|
||||
scallingYFactor = tempX;
|
||||
|
||||
var tempW = initWidth;
|
||||
initWidth = initHeight;
|
||||
initHeight = tempW;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(scallingXFactor != 1 || scallingYFactor != 1) return {'operation': 'resize','additionalInfo': {'width': initWidth*scallingXFactor,'height': initHeight*scallingYFactor}};
|
||||
},
|
||||
|
||||
optimizeCrop: function(history,size) {
|
||||
var imageWidth = size[0].width;var imageHeight = size[0].height;
|
||||
var topCrop = 0;var leftCrop = 0;
|
||||
var scallingXFactor = 1;var scallingYFactor = 1;
|
||||
var crops = new Array();var cropNumber = 0;var resizeNumber = 0;
|
||||
var lastResizeNumber = 0;
|
||||
for(var i=0;i<history.length && i < (this.historyPointer+1);i++) {
|
||||
switch(history[i].operation) {
|
||||
case 'crop':
|
||||
crops[cropNumber] = {
|
||||
'width': history[i].additionalInfo.width, 'height': history[i].additionalInfo.height,
|
||||
'top': history[i].additionalInfo.top, 'left': history[i].additionalInfo.left,
|
||||
'parent': {'width': size[i-1].width,'height': size[i-1].height}
|
||||
};
|
||||
imageWidth = crops[cropNumber].width;
|
||||
imageHeight = crops[cropNumber].height;
|
||||
cropNumber++;
|
||||
scallingXFactor = 1;scallingYFactor = 1;
|
||||
break;
|
||||
case 'resize':
|
||||
if(crops.length != 0) {
|
||||
resizeNumber++;
|
||||
if(i == 0) {
|
||||
var previousWidth = 0;
|
||||
var previousHeight = 0;
|
||||
} else {
|
||||
previousWidth = size[i-1].width;
|
||||
previousHeight = size[i-1].height;
|
||||
}
|
||||
if(i != 0) {
|
||||
scallingXFactor = history[i].additionalInfo.width/previousWidth
|
||||
scallingYFactor = history[i].additionalInfo.height/previousHeight;
|
||||
}
|
||||
for(var k=0;k<crops.length;k++) {
|
||||
crops[k].top *= scallingYFactor;
|
||||
crops[k].left *= scallingXFactor;
|
||||
crops[k].parent.width *= scallingXFactor;
|
||||
crops[k].parent.height *= scallingYFactor;
|
||||
crops[k].width *= scallingXFactor;
|
||||
crops[k].height *= scallingYFactor;
|
||||
}
|
||||
crops[cropNumber-1].width = history[i].additionalInfo.width;
|
||||
crops[cropNumber-1].height = history[i].additionalInfo.height;
|
||||
}
|
||||
break;
|
||||
case 'rotate':
|
||||
if(crops.length != 0) {
|
||||
for(var k = 0;k<crops.length;k++) {
|
||||
var tempTop = crops[k].top;
|
||||
crops[k].top = crops[k].parent.width - crops[k].width - crops[k].left;
|
||||
crops[k].left = tempTop;
|
||||
|
||||
tempWidth = crops[k].parent.width;
|
||||
crops[k].parent.width = crops[k].parent.height;
|
||||
crops[k].parent.height = tempWidth;
|
||||
|
||||
var tempWidth = crops[k].width;
|
||||
crops[k].width = crops[k].height;
|
||||
crops[k].height = tempWidth;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
for(var l=0;l<crops.length;l++) {
|
||||
topCrop += crops[l].top;
|
||||
leftCrop += crops[l].left;
|
||||
}
|
||||
if(cropNumber == 0) return;
|
||||
if((topCrop + leftCrop + crops[cropNumber-1].width + crops[cropNumber-1].height) == 0) return;
|
||||
return {'operation': 'crop','additionalInfo': {'top': topCrop,'left': leftCrop,'width': crops[cropNumber-1].width,'height': crops[cropNumber-1].height}};
|
||||
},
|
||||
|
||||
optimizeOtherEffects: function(history,without) {
|
||||
var result = Array();var effectsNumber = 0;var isInResult = false;
|
||||
for(var i=0;i<history.length;i++) {
|
||||
if(history[i].operation == 'resize' || history[i].operation == 'crop' || history[i].operation == 'rotate' || history[i].operation == without) continue;
|
||||
if(history[i].operation.indexOf('adjust') != -1) {
|
||||
isInResult = false;
|
||||
for(var k=0;k<result.length;k++) {
|
||||
if(result[k].operation == history[i].operation) {
|
||||
result[k] = history[i];
|
||||
isInResult = true;
|
||||
}
|
||||
}
|
||||
if(!isInResult) {
|
||||
result[effectsNumber] = history[i];
|
||||
effectsNumber++;
|
||||
}
|
||||
} else {
|
||||
result[effectsNumber] = history[i];
|
||||
effectsNumber++;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
optimizeRotate: function(history) {
|
||||
var result = Array();var rotateNumber = 0;var rotate;
|
||||
for(var i=0;i<history.length;i++) {
|
||||
if(history[i].operation.indexOf('rotate') != -1) {
|
||||
rotateNumber++;
|
||||
rotate = history[i];
|
||||
}
|
||||
}
|
||||
rotateNumber = rotateNumber % 4;
|
||||
for(var i=0;i<rotateNumber;i++) {
|
||||
result[result.length] = rotate;
|
||||
}
|
||||
return result.length == 0 ? undefined : result;
|
||||
},
|
||||
|
||||
checkSpecialOperation: function(operationType,historyEntry) {
|
||||
if(this.adjust[historyEntry.operation] != undefined) {
|
||||
if(operationType == 'undo') {
|
||||
if(this.adjust[historyEntry.operation].pointer > 0) this.adjust[historyEntry.operation].pointer--;
|
||||
} else {
|
||||
this.adjust[historyEntry.operation].pointer++;
|
||||
}
|
||||
ImageEditor.effects.getEffect(historyEntry.operation).setValue(this.adjust[historyEntry.operation].values[this.adjust[historyEntry.operation].pointer]);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1,74 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.ImageToResize = {
|
||||
initialize: function(imageFile) {
|
||||
Element.hide($('image'));
|
||||
this.imageToResize = $('image');
|
||||
this.imageToResize.src = imageFile;
|
||||
this.reportSize = ImageEditor.ImageToResize.reportSize.bind(this);
|
||||
this.onImageLoad = ImageEditor.ImageToResize.onImageLoad.bind(this);
|
||||
this.resizeOnFirstLoad = ImageEditor.ImageToResize.resizeOnFirstLoad.bind(this);
|
||||
Event.observe(this.imageToResize,'load',this.onImageLoad);
|
||||
this.firstResize = {};
|
||||
},
|
||||
|
||||
reportSize: function(width,height) {
|
||||
if(width != null && height != null) {
|
||||
$('ImageWidth').innerHTML = width + "px";
|
||||
$('ImageHeight').innerHTML = height + "px";
|
||||
} else {
|
||||
$('ImageWidth').innerHTML = this.imageToResize.width + "px";
|
||||
$('ImageHeight').innerHTML = this.imageToResize.height + "px";
|
||||
}
|
||||
},
|
||||
|
||||
onImageLoad: function(event) {
|
||||
if(this.imageToResize.width != 0 && this.imageToResize.height != 0) {
|
||||
$('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")';
|
||||
ImageEditor.imageBox.hideIndicator();
|
||||
Element.show($('imageContainer'),$('image'));
|
||||
if(ImageEditor.resize.imageContainerResize.originalHeight == 0 && ImageEditor.resize.imageContainerResize.originalWidth == 0) {
|
||||
ImageEditor.history.add('initialize',$('image').src);
|
||||
this.resizeOnFirstLoad();
|
||||
ImageEditor.imageBox.center();
|
||||
}
|
||||
ImageEditor.resize.imageContainerResize.originalWidth = this.imageToResize.width;
|
||||
ImageEditor.resize.imageContainerResize.originalHeight = this.imageToResize.height;
|
||||
ImageEditor.resize.imageContainerResize.placeClickBox();
|
||||
ImageEditor.crop.onImageLoadCallback();
|
||||
}
|
||||
this.reportSize();
|
||||
},
|
||||
|
||||
resizeOnFirstLoad: function() {
|
||||
var windowWidth = Element.getDimensions($('Main')).width;
|
||||
var windowHeight = Element.getDimensions($('Main')).height - 100;
|
||||
var imageWidth = Element.getDimensions($('image')).width;
|
||||
var imageHeight = Element.getDimensions($('image')).height;
|
||||
if(imageWidth > windowWidth - 40 || imageHeight > windowHeight - 40) {
|
||||
ImageEditor.history.clear();
|
||||
Element.hide($('imageContainer'),$('image'));
|
||||
var ratio = imageWidth / imageHeight;
|
||||
$('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);
|
||||
}
|
||||
this.reportSize(0,0);
|
||||
ImageEditor.resize.imageContainerResize.setVisible(false);
|
||||
ImageEditor.transformation.resize(imageWidth,imageHeight,ImageEditor.ImageToResize.resizeOnFirstLoadCallBack.bind(this),false);
|
||||
this.firstResize.width = imageWidth;
|
||||
this.firstResize.height = imageHeight;
|
||||
}
|
||||
},
|
||||
|
||||
resizeOnFirstLoadCallBack: function() {
|
||||
ImageEditor.history.addResize($('image').src,this.firstResize.width,this.firstResize.height);
|
||||
Element.hide($('loadingIndicatorContainer2'));
|
||||
ImageEditor.resize.imageContainerResize.setVisible(true);
|
||||
ImageEditor.resize.imageContainerResize.placeClickBox();
|
||||
ImageEditor.imageBox.center();
|
||||
}
|
||||
};
|
||||
@ -1,52 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.ImageBox = {
|
||||
|
||||
initialize: function() {
|
||||
this.indicatorWidth = 32;
|
||||
this.indicatorHeight = 32;
|
||||
this.showIndicator = ImageEditor.ImageBox.showIndicator.bind(this);
|
||||
this.hideIndicator = ImageEditor.ImageBox.hideIndicator.bind(this);
|
||||
this.reCenterIndicator = ImageEditor.ImageBox.reCenterIndicator.bind(this);
|
||||
this.centerIndicator = ImageEditor.ImageBox.centerIndicator.bind(this);
|
||||
this.center = ImageEditor.ImageBox.center.bind(this);
|
||||
this.imageContainer = ImageEditor.Positioning.addBehaviour($('imageContainer'));
|
||||
Element.hide(this.imageContainer);
|
||||
this.indicator = ImageEditor.Positioning.addBehaviour($('loadingIndicatorContainer'));
|
||||
this.indicatorImage = ImageEditor.Positioning.addBehaviour($('loadingIndicator'));
|
||||
ImageEditor.Positioning.addBehaviour($('Main'));
|
||||
},
|
||||
|
||||
showIndicator: function(container) {
|
||||
Element.show(this.indicator,this.indicatorImage);
|
||||
if(container == null) container = this.imageContainer;
|
||||
this.centerIndicator(container);
|
||||
},
|
||||
|
||||
hideIndicator: function() {
|
||||
Element.hide(this.indicator,this.indicatorImage);
|
||||
},
|
||||
|
||||
centerIndicator: function(container) {
|
||||
var top = container.getTop();
|
||||
var left = container.getLeft();
|
||||
var width = container.getWidth();
|
||||
var height = container.getHeight();
|
||||
var parentTop = container.getParentTop();
|
||||
var parentLeft = container.getParentLeft();
|
||||
this.indicator.style.left = width/2 - this.indicatorWidth/2 + "px";
|
||||
this.indicator.style.top = height/2 - this.indicatorHeight/2 + "px";
|
||||
},
|
||||
|
||||
reCenterIndicator: function() {
|
||||
if(Element.visible(this.indicator)) {
|
||||
this.centerIndicator(this.imageContainer);
|
||||
}
|
||||
},
|
||||
|
||||
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';
|
||||
}
|
||||
};
|
||||
@ -1,57 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.Main = {
|
||||
initialize: function(imageFile) {
|
||||
imageFile += '1234';
|
||||
ImageEditor.crop = null;
|
||||
ImageEditor.history = new ImageEditor.History.initialize();
|
||||
ImageEditor.environment = new ImageEditor.Environment.initialize(imageFile);
|
||||
ImageEditor.transformation = new ImageEditor.Transformation.initialize();
|
||||
ImageEditor.resize = new ImageEditor.Resize.initialize($('imageContainer'));
|
||||
ImageEditor.effects = new ImageEditor.Effects.Main.initialize();
|
||||
ImageEditor.crop = new ImageEditor.Crop.initialize();
|
||||
ImageEditor.documentBody = new ImageEditor.DocumentBody.initialize();
|
||||
ImageEditor.adjust = new ImageEditor.Adjust.initialize();
|
||||
this.originalImageFile = imageFile;
|
||||
this.tottalyOriginalImageFile = imageFile;
|
||||
this.onSaveClick = ImageEditor.Main.onSaveClick.bind(this);
|
||||
this.onCloseClick = ImageEditor.Main.onCloseClick.bind(this);
|
||||
this.enableFunctionality = ImageEditor.Main.enableFunctionality.bind(this);
|
||||
this.disableFunctionality = ImageEditor.Main.disableFunctionality.bind(this);
|
||||
Event.observe($('SaveButton'),'click',this.onSaveClick);
|
||||
Event.observe($('ExitButton'),'click',this.onCloseClick);
|
||||
Element.hide($('CurrentAction'));
|
||||
},
|
||||
|
||||
onSaveClick: function() {
|
||||
if(this.tottalyOriginalImageFile != $('image').src) {
|
||||
ImageEditor.transformation.save(this.tottalyOriginalImageFile,$('image').src,this.onCloseClick);
|
||||
} else {
|
||||
this.onCloseClick();
|
||||
}
|
||||
},
|
||||
|
||||
onCloseClick: function() {
|
||||
window.parent.imageEditorClosed();
|
||||
ImageEditor.transformation.close(ImageEditor.Main.onCloseCallback.bind(this));
|
||||
},
|
||||
|
||||
onCloseCallback: function() {
|
||||
Element.hide(window.frameElement);
|
||||
},
|
||||
|
||||
enableFunctionality: function() {
|
||||
ImageEditor.effects.enable();
|
||||
ImageEditor.crop.enable();
|
||||
ImageEditor.resize.enable();
|
||||
ImageEditor.history.enable();
|
||||
},
|
||||
|
||||
disableFunctionality: function() {
|
||||
ImageEditor.effects.disable();
|
||||
ImageEditor.crop.disable();
|
||||
ImageEditor.resize.disable();
|
||||
ImageEditor.history.disable();
|
||||
}
|
||||
}
|
||||
@ -1,264 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.ImageHistory = {
|
||||
|
||||
initialize: function() {
|
||||
this.history = new Array();
|
||||
this.historyPointer = -1;
|
||||
this.modifiedOriginalImage = false;
|
||||
this.isEnabled = true;
|
||||
this.image = ImageEditor.Positioning.addBehaviour($('image'));
|
||||
this.size = new Array();
|
||||
this.fakeImage = $('fakeImg');
|
||||
this.image = $('image');
|
||||
this.undo = ImageEditor.ImageHistory.undo.bind(this);
|
||||
this.redo = ImageEditor.ImageHistory.redo.bind(this);
|
||||
this.add = ImageEditor.ImageHistory.add.bind(this);
|
||||
this.addListeners = ImageEditor.ImageHistory.addListeners.bind(this);
|
||||
this.operationMade = ImageEditor.ImageHistory.operationMade.bind(this);
|
||||
this.isInHistory = ImageEditor.ImageHistory.isInHistory.bind(this);
|
||||
this.onImageLoad = ImageEditor.ImageHistory.onImageLoad.bind(this);
|
||||
this.removeLastOperation = ImageEditor.ImageHistory.removeLastOperation.bind(this);
|
||||
|
||||
this.enable = ImageEditor.ImageHistory.enable.bind(this);
|
||||
this.disable = ImageEditor.ImageHistory.disable.bind(this);
|
||||
this.clear = ImageEditor.ImageHistory.clear.bind(this);
|
||||
this.addListeners();
|
||||
},
|
||||
|
||||
undo: function() {
|
||||
if(this.historyPointer >= 1) {
|
||||
var operation = this.history[this.historyPointer].operation;
|
||||
if(operation == 'rotate' || operation == 'crop') {
|
||||
if(this.operationMade(this.historyPointer-1,'rotate') || this.operationMade(this.historyPointer-1,'crop'))
|
||||
this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false;
|
||||
}
|
||||
Event.observe('image','load',this.onImageLoad);
|
||||
this.historyPointer = this.historyPointer - 1;
|
||||
this.image.src = this.history[this.historyPointer].fileUrl;
|
||||
} else {
|
||||
ImageEditor.statusMessageWrapper.statusMessage("No more undo","bad");
|
||||
}
|
||||
},
|
||||
|
||||
redo: function() {
|
||||
if(this.historyPointer < this.history.length-1) {
|
||||
var operation = this.history[this.historyPointer+1].operation;
|
||||
if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
|
||||
Event.observe('image','load',this.onImageLoad);
|
||||
this.historyPointer = this.historyPointer + 1;
|
||||
this.image.src = this.history[this.historyPointer].fileUrl;
|
||||
} else {
|
||||
ImageEditor.statusMessageWrapper.statusMessage("No more redo","bad");
|
||||
}
|
||||
},
|
||||
|
||||
add: function(operation,url) {
|
||||
var imageWidth = isNaN(parseInt($('image').style.width)) ? Element.getDimensions($('image')).width : parseInt($('image').style.width);//IE hack
|
||||
var imageHeight = isNaN(parseInt($('image').style.height)) ? Element.getDimensions($('image')).height : parseInt($('image').style.height);//IE hack
|
||||
//code above should be moved to Positioning.addBehaviour
|
||||
if(!this.isInHistory(operation,url)) {
|
||||
this.historyPointer++;
|
||||
this.size[this.historyPointer] = {'width': imageWidth,'height': imageHeight};
|
||||
this.history[this.historyPointer] = {'operation': operation,'fileUrl' : url};
|
||||
this.size = this.size.slice(0,this.historyPointer+1);
|
||||
this.history = this.history.slice(0,this.historyPointer+1);
|
||||
if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
|
||||
}
|
||||
},
|
||||
|
||||
addListeners: function() {
|
||||
this.undoListener = Event.observe('UndoButton','click',this.undo);
|
||||
this.redoListener = Event.observe('RedoButton','click',this.redo);
|
||||
},
|
||||
|
||||
operationMade: function(historyPointer,operation) {
|
||||
for(i=historyPointer;i>=0;i--) {
|
||||
if(this.history[i].operation == operation) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
if(!this.isEnabled) {
|
||||
this.addListeners();
|
||||
this.isEnabled = true;
|
||||
}
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
if(this.isEnabled) {
|
||||
Event.stopObserving($('UndoButton'),'click', this.undo);
|
||||
Event.stopObserving($('RedoButton'),'click', this.redo);
|
||||
this.isEnabled = false;
|
||||
}
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
this.history = new Array();
|
||||
this.historyPointer = -1;
|
||||
this.size = new Array();
|
||||
},
|
||||
|
||||
removeLastOperation: function() {
|
||||
this.history.pop();
|
||||
this.size.pop();
|
||||
this.historyPointer--;
|
||||
},
|
||||
|
||||
isInHistory: function(operation,url) {
|
||||
if(operation == 'initialize' && this.historyPointer != -1) return true;
|
||||
for(var k=0;k<this.history.length;k++) {
|
||||
if(this.history[k].operation == operation && this.history[k].fileUrl == url) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
onImageLoad: function(event) {
|
||||
Event.stopObserving($('image'),'load',this.onImageLoad);
|
||||
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';
|
||||
$('imageContainer').style.height = this.size[this.historyPointer].height + 'px';
|
||||
ImageEditor.resize.imageContainerResize.originalWidth = this.size[this.historyPointer].width;
|
||||
ImageEditor.resize.imageContainerResize.originalHeight = this.size[this.historyPointer].height;
|
||||
ImageEditor.imageToResize.onImageLoad();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.ImageHistory = {
|
||||
|
||||
initialize: function() {
|
||||
this.history = new Array();
|
||||
this.historyPointer = -1;
|
||||
this.modifiedOriginalImage = false;
|
||||
this.isEnabled = true;
|
||||
this.image = ImageEditor.Positioning.addBehaviour($('image'));
|
||||
this.size = new Array();
|
||||
this.fakeImage = $('fakeImg');
|
||||
this.image = $('image');
|
||||
this.undo = ImageEditor.ImageHistory.undo.bind(this);
|
||||
this.redo = ImageEditor.ImageHistory.redo.bind(this);
|
||||
this.add = ImageEditor.ImageHistory.add.bind(this);
|
||||
this.addListeners = ImageEditor.ImageHistory.addListeners.bind(this);
|
||||
this.operationMade = ImageEditor.ImageHistory.operationMade.bind(this);
|
||||
this.isInHistory = ImageEditor.ImageHistory.isInHistory.bind(this);
|
||||
this.onImageLoad = ImageEditor.ImageHistory.onImageLoad.bind(this);
|
||||
this.removeLastOperation = ImageEditor.ImageHistory.removeLastOperation.bind(this);
|
||||
|
||||
this.enable = ImageEditor.ImageHistory.enable.bind(this);
|
||||
this.disable = ImageEditor.ImageHistory.disable.bind(this);
|
||||
this.clear = ImageEditor.ImageHistory.clear.bind(this);
|
||||
this.addListeners();
|
||||
},
|
||||
|
||||
undo: function() {
|
||||
if(this.historyPointer >= 1) {
|
||||
var operation = this.history[this.historyPointer].operation;
|
||||
if(operation == 'rotate' || operation == 'crop') {
|
||||
if(this.operationMade(this.historyPointer-1,'rotate') || this.operationMade(this.historyPointer-1,'crop'))
|
||||
this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false;
|
||||
}
|
||||
Event.observe('image','load',this.onImageLoad);
|
||||
this.historyPointer = this.historyPointer - 1;
|
||||
this.image.src = this.history[this.historyPointer].fileUrl;
|
||||
} else {
|
||||
ImageEditor.statusMessageWrapper.statusMessage("No more undo","bad");
|
||||
}
|
||||
},
|
||||
|
||||
redo: function() {
|
||||
if(this.historyPointer < this.history.length-1) {
|
||||
var operation = this.history[this.historyPointer+1].operation;
|
||||
if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
|
||||
Event.observe('image','load',this.onImageLoad);
|
||||
this.historyPointer = this.historyPointer + 1;
|
||||
this.image.src = this.history[this.historyPointer].fileUrl;
|
||||
} else {
|
||||
ImageEditor.statusMessageWrapper.statusMessage("No more redo","bad");
|
||||
}
|
||||
},
|
||||
|
||||
add: function(operation,url) {
|
||||
var imageWidth = isNaN(parseInt($('image').style.width)) ? Element.getDimensions($('image')).width : parseInt($('image').style.width);//IE hack
|
||||
var imageHeight = isNaN(parseInt($('image').style.height)) ? Element.getDimensions($('image')).height : parseInt($('image').style.height);//IE hack
|
||||
//code above should be moved to Positioning.addBehaviour
|
||||
if(!this.isInHistory(operation,url)) {
|
||||
this.historyPointer++;
|
||||
this.size[this.historyPointer] = {'width': imageWidth,'height': imageHeight};
|
||||
this.history[this.historyPointer] = {'operation': operation,'fileUrl' : url};
|
||||
this.size = this.size.slice(0,this.historyPointer+1);
|
||||
this.history = this.history.slice(0,this.historyPointer+1);
|
||||
if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
|
||||
}
|
||||
},
|
||||
|
||||
addListeners: function() {
|
||||
this.undoListener = Event.observe('UndoButton','click',this.undo);
|
||||
this.redoListener = Event.observe('RedoButton','click',this.redo);
|
||||
},
|
||||
|
||||
operationMade: function(historyPointer,operation) {
|
||||
for(i=historyPointer;i>=0;i--) {
|
||||
if(this.history[i].operation == operation) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
if(!this.isEnabled) {
|
||||
this.addListeners();
|
||||
this.isEnabled = true;
|
||||
}
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
if(this.isEnabled) {
|
||||
Event.stopObserving($('UndoButton'),'click', this.undo);
|
||||
Event.stopObserving($('RedoButton'),'click', this.redo);
|
||||
this.isEnabled = false;
|
||||
}
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
this.history = new Array();
|
||||
this.historyPointer = -1;
|
||||
this.size = new Array();
|
||||
},
|
||||
|
||||
removeLastOperation: function() {
|
||||
this.history.pop();
|
||||
this.size.pop();
|
||||
this.historyPointer--;
|
||||
},
|
||||
|
||||
isInHistory: function(operation,url) {
|
||||
if(operation == 'initialize' && this.historyPointer != -1) return true;
|
||||
for(var k=0;k<this.history.length;k++) {
|
||||
if(this.history[k].operation == operation && this.history[k].fileUrl == url) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
onImageLoad: function(event) {
|
||||
Event.stopObserving($('image'),'load',this.onImageLoad);
|
||||
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';
|
||||
$('imageContainer').style.height = this.size[this.historyPointer].height + 'px';
|
||||
ImageEditor.resize.imageContainerResize.originalWidth = this.size[this.historyPointer].width;
|
||||
ImageEditor.resize.imageContainerResize.originalHeight = this.size[this.historyPointer].height;
|
||||
ImageEditor.imageToResize.onImageLoad();
|
||||
}
|
||||
};
|
||||
@ -1,77 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.Resize = {
|
||||
|
||||
initialize: function(element) {
|
||||
this.element = element;
|
||||
this.leftBoxConstraint = 1;
|
||||
this.topBoxConstraint = 0;
|
||||
this.getRelativeMousePos = ImageEditor.Resize.getRelativeMousePos.bind(this);
|
||||
this.enable = ImageEditor.Resize.enable.bind(this);
|
||||
this.disable = ImageEditor.Resize.disable.bind(this);
|
||||
var options = {
|
||||
resizeStop: ImageEditor.Resize.resizeStop.bind(this),
|
||||
onDrag: ImageEditor.Resize.onDrag.bind(this),
|
||||
onResize: ImageEditor.Resize.onResize.bind(this),
|
||||
getMousePos: ImageEditor.Resize.getMousePos.bind(this)
|
||||
};
|
||||
new ImageEditor.Positioning.addBehaviour(this.element);
|
||||
this.imageContainerResize = new ImageEditor.Resizeable.initialize(element,options);
|
||||
this.imageContainerResize.setVisible(false);
|
||||
this.lastResize = {};
|
||||
},
|
||||
|
||||
resizeStop: function(event) {
|
||||
if(ImageEditor.EventStack.getLastEventElement() != null) {
|
||||
var imageElement = $('image');
|
||||
ImageEditor.EventStack.clearStack();
|
||||
if(this.imageContainerResize.isEnabled) {
|
||||
if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) {
|
||||
$('imageContainer').style.backgroundImage = 'url("")';
|
||||
this.lastResize.width = imageElement.width;
|
||||
this.lastResize.height = imageElement.height;
|
||||
ImageEditor.transformation.resize(imageElement.width,imageElement.height,ImageEditor.Resize.resizeCallback.bind(this));
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
resizeCallback: function() {
|
||||
$('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")';
|
||||
ImageEditor.history.addResize($('image').src,this.lastResize.width,this.lastResize.height);
|
||||
},
|
||||
|
||||
onDrag: function()
|
||||
{
|
||||
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";
|
||||
ImageEditor.imageBox.reCenterIndicator();
|
||||
},
|
||||
|
||||
onResize: function(width,height) {
|
||||
$('image').style.width = width + "px";
|
||||
$('image').style.height = height + "px";
|
||||
},
|
||||
getMousePos: function(event) {
|
||||
var relativeMouseX = this.getRelativeMousePos(event).x;
|
||||
var 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();
|
||||
return {x: x,y: y};
|
||||
},
|
||||
|
||||
getRelativeMousePos: function(event) {
|
||||
var relativeMouseX = Event.pointerX(event) + $('imageEditorContainer').scrollLeft - this.element.getParentLeft();
|
||||
var relativeMouseY = Event.pointerY(event) + $('imageEditorContainer').scrollTop - this.element.getParentTop();
|
||||
return {x: relativeMouseX,y: relativeMouseY};
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
this.imageContainerResize.enable();
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
this.imageContainerResize.disable();
|
||||
}
|
||||
}
|
||||
@ -1,298 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.Resizeable = {
|
||||
|
||||
initialize: function(element,options) {
|
||||
this.resizeStop = options.resizeStop.bind(this);
|
||||
this.onDrag = options.onDrag.bind(this);
|
||||
this.customOnResize = options.onResize.bind(this);
|
||||
this.getMousePos = options.getMousePos.bind(this);
|
||||
this.bindAll = ImageEditor.Resizeable.bindAll.bind(this);
|
||||
this.bindAll();
|
||||
this.element = element;
|
||||
this.createClickBoxes();
|
||||
this.setListeners();
|
||||
this.originalHeight = 0;
|
||||
this.originalWidth = 0;
|
||||
this.isEnabled = true;
|
||||
},
|
||||
|
||||
resizeStart: function(event) {
|
||||
if(Element.hasClassName(Event.element(event),'clickBox')) {
|
||||
ImageEditor.EventStack.addEvent(event);
|
||||
Event.stop(event);
|
||||
}
|
||||
},
|
||||
|
||||
leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
|
||||
var newHeight = top - relativeMouseY + height;
|
||||
var newWidth = Math.round(newHeight / ratio);
|
||||
if(this.resize(newWidth,newHeight)) {
|
||||
this.element.style.top = top - (newHeight - height) + "px";
|
||||
this.element.style.left = left - (newWidth - width) + "px";
|
||||
if(parseInt(this.element.style.left) < 0) this.element.style.left = "1px";
|
||||
}
|
||||
},
|
||||
|
||||
leftMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
|
||||
var newWidth = left - relativeMouseX + width;
|
||||
if(this.resize(newWidth,-1000)) this.element.style.left = left - (left - relativeMouseX) + "px";
|
||||
},
|
||||
|
||||
leftLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
|
||||
var newHeight = relativeMouseY - (top + height) + height;
|
||||
var newWidth = Math.round(newHeight / ratio);
|
||||
if(this.resize(newWidth,newHeight)) {
|
||||
this.element.style.left = left - (newWidth - width) + "px";
|
||||
if(parseInt(this.element.style.left) < 0) this.element.style.left = "1px";
|
||||
}
|
||||
},
|
||||
|
||||
rightUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
|
||||
var newHeight = top - relativeMouseY + height;
|
||||
var newWidth = Math.round(newHeight / ratio);
|
||||
if(this.resize(newWidth,newHeight)) this.element.style.top = (top - (newHeight - height) ) + 'px';
|
||||
},
|
||||
|
||||
rightMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
|
||||
var newWidth = relativeMouseX - left;
|
||||
this.resize(newWidth,-1000);
|
||||
},
|
||||
|
||||
rightLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY,ratio) {
|
||||
var newHeight = relativeMouseY - top;
|
||||
var newWidth = Math.round(newHeight / ratio);
|
||||
this.resize(newWidth,newHeight);
|
||||
},
|
||||
|
||||
upperMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
|
||||
var newHeight = top - relativeMouseY + height;
|
||||
if(this.resize(-1000,newHeight)) {
|
||||
this.element.style.top = (top - (newHeight - height)) + 'px';
|
||||
}
|
||||
},
|
||||
|
||||
lowerMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
|
||||
var newHeight = relativeMouseY - (top + height) + height;
|
||||
this.resize(-1000,newHeight);
|
||||
},
|
||||
|
||||
onResize: function(event) {
|
||||
if(ImageEditor.EventStack.getLastEventElement() != null && this.isVisible && this.isEnabled) {
|
||||
var lastEventElement = ImageEditor.EventStack.getLastEventElement();
|
||||
var relativeMouseX = this.getMousePos(event).x - this.element.getParentLeft();
|
||||
var relativeMouseY = this.getMousePos(event).y - this.element.getParentTop();
|
||||
if(Element.hasClassName(lastEventElement,'leftUpperClickBox')) {
|
||||
this.leftUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth);
|
||||
}
|
||||
if(Element.hasClassName(lastEventElement,'leftMiddleClickBox')) {
|
||||
this.leftMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);
|
||||
}
|
||||
if(Element.hasClassName(lastEventElement,'leftLowerClickBox')) {
|
||||
this.leftLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth);
|
||||
}
|
||||
if(Element.hasClassName(lastEventElement,'rightUpperClickBox')) {
|
||||
this.rightUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth);
|
||||
}
|
||||
if(Element.hasClassName(lastEventElement,'rightMiddleClickBox')) {
|
||||
this.rightMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);
|
||||
}
|
||||
if(Element.hasClassName(lastEventElement,'rightLowerClickBox')) {
|
||||
this.rightLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY,this.originalHeight/this.originalWidth);
|
||||
}
|
||||
if(Element.hasClassName(lastEventElement,'upperMiddleClickBox')) {
|
||||
this.upperMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);
|
||||
}
|
||||
if(Element.hasClassName(lastEventElement,'lowerMiddleClickBox')) {
|
||||
this.lowerMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);
|
||||
}
|
||||
this.placeClickBox();
|
||||
this.customOnResize(this.element.getWidth(),this.element.getHeight());
|
||||
ImageEditor.imageBox.reCenterIndicator();
|
||||
Event.stop(event);
|
||||
}
|
||||
},
|
||||
|
||||
resize: function(width,height) {
|
||||
if(width < 35 && height == -1000) {
|
||||
return false;
|
||||
}
|
||||
if(height < 35 && width == -1000) {
|
||||
return false;
|
||||
}
|
||||
if((width < 35 || height < 35) && (width != -1000 && height != -1000)) {
|
||||
return false;
|
||||
}
|
||||
if(width == -1000) {
|
||||
width = this.originalWidth;
|
||||
}
|
||||
if(height == -1000) {
|
||||
height = this.originalHeight;
|
||||
}
|
||||
if(!ImageEditor.crop.isVisible) {
|
||||
$('image').style.width = width + 'px';
|
||||
$('image').style.height = height + 'px';
|
||||
}
|
||||
this.element.style.width = width + "px";
|
||||
this.element.style.height = height + "px";
|
||||
return true;
|
||||
},
|
||||
|
||||
placeClickBox: function(event) {
|
||||
if(event != null) {
|
||||
this.originalHeight = Element.getDimensions(this.element).height;
|
||||
this.originalWidth = Element.getDimensions(this.element).width;
|
||||
}
|
||||
var width = Element.getDimensions(this.element).width;
|
||||
var height = Element.getDimensions(this.element).height;
|
||||
var clickBoxHalfWidth = Math.floor(Element.getDimensions(this.leftUpperClickBox2).width/2)+1;
|
||||
|
||||
var leftUpper = new ImageEditor.Point.initialize(-clickBoxHalfWidth,-clickBoxHalfWidth);
|
||||
var leftMiddle = new ImageEditor.Point.initialize(-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
|
||||
var leftLower = new ImageEditor.Point.initialize(-clickBoxHalfWidth,height-clickBoxHalfWidth);
|
||||
var rightUpper = new ImageEditor.Point.initialize(width-clickBoxHalfWidth,-clickBoxHalfWidth);
|
||||
var rightMiddle = new ImageEditor.Point.initialize(width-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
|
||||
var rightLower = new ImageEditor.Point.initialize(width-clickBoxHalfWidth,height-clickBoxHalfWidth);
|
||||
var upperMiddle = new ImageEditor.Point.initialize(width/2-clickBoxHalfWidth,-clickBoxHalfWidth);
|
||||
var lowerMiddle = new ImageEditor.Point.initialize(width/2-clickBoxHalfWidth,height-clickBoxHalfWidth);
|
||||
|
||||
this.leftUpperClickBox.style.left = leftUpper.x + 'px';
|
||||
this.leftUpperClickBox.style.top = leftUpper.y + 'px';
|
||||
this.leftUpperClickBox2.style.left = leftUpper.x + 'px';
|
||||
this.leftUpperClickBox2.style.top = leftUpper.y + 'px';
|
||||
this.leftMiddleClickBox.style.left = leftMiddle.x + 'px';
|
||||
this.leftMiddleClickBox.style.top = leftMiddle.y + 'px';
|
||||
this.leftLowerClickBox.style.left = leftLower.x + 'px';
|
||||
this.leftLowerClickBox.style.top = leftLower.y + 'px';
|
||||
|
||||
this.rightUpperClickBox.style.left = rightUpper.x + 'px';
|
||||
this.rightUpperClickBox.style.top = rightUpper.y + 'px';
|
||||
this.rightMiddleClickBox.style.left = rightMiddle.x + 'px';
|
||||
this.rightMiddleClickBox.style.top = rightMiddle.y + 'px';
|
||||
this.rightLowerClickBox.style.left = rightLower.x + 'px';
|
||||
this.rightLowerClickBox.style.top = rightLower.y + 'px';
|
||||
|
||||
this.upperMiddleClickBox.style.left = upperMiddle.x + 'px';
|
||||
this.upperMiddleClickBox.style.top = upperMiddle.y + 'px';
|
||||
this.lowerMiddleClickBox.style.left = lowerMiddle.x + 'px';
|
||||
this.lowerMiddleClickBox.style.top = lowerMiddle.y + 'px';
|
||||
|
||||
},
|
||||
|
||||
createClickBoxes: function() {
|
||||
this.leftUpperClickBox = this.createElement('div',ImageEditor.Random.string(5),["leftUpperClickBox","clickBox"]);
|
||||
this.leftMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["leftMiddleClickBox","clickBox"]);
|
||||
this.leftLowerClickBox = this.createElement('div',ImageEditor.Random.string(5),["leftLowerClickBox","clickBox"]);
|
||||
this.rightUpperClickBox = this.createElement('div',ImageEditor.Random.string(5),["rightUpperClickBox","clickBox"]);
|
||||
this.rightMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["rightMiddleClickBox","clickBox"]);
|
||||
this.rightLowerClickBox = this.createElement('div',ImageEditor.Random.string(5),["rightLowerClickBox","clickBox"]);
|
||||
this.upperMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["upperMiddleClickBox","clickBox"]);
|
||||
this.lowerMiddleClickBox = this.createElement('div',ImageEditor.Random.string(5),["lowerMiddleClickBox","clickBox"]);
|
||||
this.leftUpperClickBox2 = this.createElement('div',ImageEditor.Random.string(5),["leftUpperClickBox","clickBox"]);
|
||||
//Safarai requires creating another clickbox because leftUppperClickBox is hidden (hack)
|
||||
|
||||
},
|
||||
|
||||
createElement: function(tag,id,classes) {
|
||||
var newElement = document.createElement(tag);
|
||||
newElement.id = id;
|
||||
classes.each(function(item) {
|
||||
Element.addClassName(newElement,item);
|
||||
}
|
||||
);
|
||||
this.addListener(newElement);
|
||||
this.element.appendChild(newElement);
|
||||
return newElement;
|
||||
},
|
||||
|
||||
bindAll: function() {
|
||||
this.setListeners = ImageEditor.Resizeable.setListeners.bind(this);
|
||||
this.placeClickBox = ImageEditor.Resizeable.placeClickBox.bind(this);
|
||||
this.resizeStart = ImageEditor.Resizeable.resizeStart.bind(this);
|
||||
this.onResize = ImageEditor.Resizeable.onResize.bind(this);
|
||||
this.resize = ImageEditor.Resizeable.resize.bind(this);
|
||||
this.createClickBoxes = ImageEditor.Resizeable.createClickBoxes.bind(this);
|
||||
this.createElement = ImageEditor.Resizeable.createElement.bind(this);
|
||||
this.addListener = ImageEditor.Resizeable.addListener.bind(this);
|
||||
this.addDraging = ImageEditor.Resizeable.addDraging.bind(this);
|
||||
this.setVisible = ImageEditor.Resizeable.setVisible.bind(this);
|
||||
this.removeDraging = ImageEditor.Resizeable.removeDraging.bind(this);
|
||||
this.disable = ImageEditor.Resizeable.disable.bind(this);
|
||||
this.enable = ImageEditor.Resizeable.enable.bind(this);
|
||||
|
||||
this.leftUpperDrag = ImageEditor.Resizeable.leftUpperDrag.bind(this);
|
||||
this.leftMiddleDrag = ImageEditor.Resizeable.leftMiddleDrag.bind(this);
|
||||
this.leftLowerDrag = ImageEditor.Resizeable.leftLowerDrag.bind(this);
|
||||
this.rightUpperDrag = ImageEditor.Resizeable.rightUpperDrag.bind(this);
|
||||
this.rightMiddleDrag = ImageEditor.Resizeable.rightMiddleDrag.bind(this);
|
||||
this.rightLowerDrag = ImageEditor.Resizeable.rightLowerDrag.bind(this);
|
||||
this.upperMiddleDrag = ImageEditor.Resizeable.upperMiddleDrag.bind(this);
|
||||
this.lowerMiddleDrag = ImageEditor.Resizeable.lowerMiddleDrag.bind(this);
|
||||
},
|
||||
|
||||
setListeners: function() {
|
||||
Event.observe('Main','mousemove',this.onResize);
|
||||
Event.observe('Main','mouseup',this.resizeStop);
|
||||
},
|
||||
|
||||
addListener: function(element) {
|
||||
Event.observe(element,'mousedown',this.resizeStart);
|
||||
Event.observe(element,'mousemove',this.onResize);
|
||||
|
||||
},
|
||||
|
||||
addDraging: function() {
|
||||
if(this.draggableImage) this.removeDraging();
|
||||
var options = {
|
||||
starteffect: function() {},
|
||||
endeffect: function() {},
|
||||
change: this.onDrag
|
||||
};
|
||||
this.draggableImage = new Draggable(this.element,options);
|
||||
},
|
||||
|
||||
removeDraging: function() {
|
||||
if(this.draggableImage) {
|
||||
this.draggableImage.destroy();
|
||||
this.draggableImage = null;
|
||||
}
|
||||
},
|
||||
|
||||
setVisible: function(setVisible) {
|
||||
this.isVisible = setVisible;
|
||||
if(setVisible) {
|
||||
Element.show(
|
||||
this.leftUpperClickBox,
|
||||
this.leftUpperClickBox2,
|
||||
this.leftMiddleClickBox,
|
||||
this.leftLowerClickBox,
|
||||
this.rightUpperClickBox,
|
||||
this.rightMiddleClickBox,
|
||||
this.rightLowerClickBox,
|
||||
this.upperMiddleClickBox,
|
||||
this.lowerMiddleClickBox);
|
||||
this.addDraging();
|
||||
} else {
|
||||
Element.hide(
|
||||
this.leftUpperClickBox,
|
||||
this.leftUpperClickBox2,
|
||||
this.leftMiddleClickBox,
|
||||
this.leftLowerClickBox,
|
||||
this.rightUpperClickBox,
|
||||
this.rightMiddleClickBox,
|
||||
this.rightLowerClickBox,
|
||||
this.upperMiddleClickBox,
|
||||
this.lowerMiddleClickBox);
|
||||
this.removeDraging();
|
||||
}
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
this.isEnabled = false;
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
this.isEnabled = true;
|
||||
}
|
||||
}
|
||||
@ -1,156 +0,0 @@
|
||||
ImageEditor.Transformation = {
|
||||
initialize: function() {
|
||||
this.currentOperation = "";
|
||||
this.currentResponse = new Array();
|
||||
this.currentCallback = null;
|
||||
this.queue = new Array();
|
||||
this.resize = ImageEditor.Transformation.resize.bind(this);
|
||||
this.customRequest = ImageEditor.Transformation.customRequest.bind(this);
|
||||
this.crop = ImageEditor.Transformation.crop.bind(this);
|
||||
this.save = ImageEditor.Transformation.save.bind(this);
|
||||
this.close = ImageEditor.Transformation.close.bind(this);
|
||||
this.onSuccess = ImageEditor.Transformation.onSuccess.bind(this);
|
||||
this.onImageLoad = ImageEditor.Transformation.onImageLoad.bind(this);
|
||||
this.getOptions = ImageEditor.Transformation.getOptions.bind(this);
|
||||
this.applyHistory = ImageEditor.Transformation.applyHistory.bind(this);
|
||||
this.processLastOperationFromQueue = ImageEditor.Transformation.processLastOperationFromQueue.bind(this);
|
||||
this.addToQueueBeginning = ImageEditor.Transformation.addToQueueBeginning.bind(this);
|
||||
this.removeLastElementFromQueue = ImageEditor.Transformation.removeLastElementFromQueue.bind(this);
|
||||
},
|
||||
|
||||
resize: function(width,height,callback,imageAlreadyChangedSize,file) {
|
||||
this.currentOperation = "resize";
|
||||
this.currentCallback = callback;
|
||||
if(ImageEditor.history.onlyResized()) {
|
||||
var fileToResize = ImageEditor.imageEditor.originalImageFile;
|
||||
} else {
|
||||
var fileToResize = $('image').src;
|
||||
}
|
||||
options = this.getOptions('command=resize&file=' + (file != undefined ? file : fileToResize) + '&newImageWidth=' + width + '&newImageHeight=' + height)
|
||||
if(imageAlreadyChangedSize == false) {
|
||||
ImageEditor.imageBox.showIndicator($('Main'));
|
||||
} else {
|
||||
ImageEditor.imageBox.showIndicator();
|
||||
}
|
||||
ImageEditor.Main.disableFunctionality();
|
||||
return new Ajax.Request('admin/ImageEditor/manipulate', options);
|
||||
},
|
||||
|
||||
customRequest: function(name,callback,file,value,addToQueue) {
|
||||
if(this.queue.length > 0 && addToQueue) {
|
||||
this.addToQueueBeginning({'operation' : name,'callback' : callback,'additionalInfo': {'value' : value}});
|
||||
} else {
|
||||
this.currentOperation = name;
|
||||
this.currentCallback = callback;
|
||||
var options = this.getOptions( 'command=' + name +
|
||||
'&file=' + (file != undefined ? file : $('image').src) +
|
||||
(value != undefined ? ('&value=' + value) : '')
|
||||
);
|
||||
ImageEditor.imageBox.showIndicator();
|
||||
ImageEditor.Main.disableFunctionality();
|
||||
return new Ajax.Request('admin/ImageEditor/manipulate', options);
|
||||
}
|
||||
},
|
||||
|
||||
crop: function(top,left,width,height,callback,file) {
|
||||
this.currentOperation = "crop";
|
||||
this.currentCallback = callback;
|
||||
var options = this.getOptions('command=crop&file=' + (file != undefined ? file : $('image').src) + '&top=' + top + '&left=' + left + '&width=' + width + '&height=' + height);
|
||||
ImageEditor.imageBox.showIndicator();
|
||||
ImageEditor.Main.disableFunctionality();
|
||||
return new Ajax.Request('admin/ImageEditor/manipulate', options);
|
||||
},
|
||||
save: function(originalFile,editedFile,callback) {
|
||||
var options = this.getOptions('command=save&editedFile=' + editedFile + '&originalFile=' + originalFile);
|
||||
options.onSuccess = function(transport) {
|
||||
eval(transport.responseText);
|
||||
callback();
|
||||
}
|
||||
new Ajax.Request('admin/ImageEditor/save', options);
|
||||
},
|
||||
|
||||
close: function(callback) {
|
||||
var options = this.getOptions('');
|
||||
options.onSuccess = function(transport) {
|
||||
eval(transport.responseText);
|
||||
callback();
|
||||
}
|
||||
new Ajax.Request('admin/ImageEditor/close', options);
|
||||
},
|
||||
|
||||
onSuccess: function(transport) {
|
||||
this.currentResponse = eval('(' + transport.responseText + ')');
|
||||
if(this.queue.length > 0) this.removeLastElementFromQueue();
|
||||
if(this.queue.length > 0) {
|
||||
this.processLastOperationFromQueue('http://' + location.host + '/' + this.currentResponse.fileName);
|
||||
} else {
|
||||
$('fakeImg').src = this.currentResponse.fileName;
|
||||
Event.observe('fakeImg','load',this.onImageLoad);
|
||||
}
|
||||
},
|
||||
|
||||
onImageLoad: function(event) {
|
||||
Event.stopObserving('fakeImg','load', this.onImageLoad);
|
||||
$('image').src = this.currentResponse.fileName;
|
||||
ImageEditor.imageBox.hideIndicator();
|
||||
ImageEditor.resize.imageContainerResize.originalWidth = this.currentResponse.width;
|
||||
ImageEditor.resize.imageContainerResize.originalHeight = this.currentResponse.height;
|
||||
$('imageContainer').style.height = this.currentResponse.height + 'px';
|
||||
$('imageContainer').style.width = this.currentResponse.width + 'px';
|
||||
$('image').style.height = this.currentResponse.height + 'px';
|
||||
$('image').style.width = this.currentResponse.width + 'px';
|
||||
ImageEditor.resize.imageContainerResize.placeClickBox();
|
||||
if(this.queue.length == 0) ImageEditor.Main.enableFunctionality();
|
||||
if(this.currentCallback != null) this.currentCallback();
|
||||
},
|
||||
|
||||
getOptions: function(postBodyContent) {
|
||||
return options = {
|
||||
asynchronous: true,
|
||||
method: 'post',
|
||||
postBody: postBodyContent,
|
||||
onSuccess: this.onSuccess
|
||||
};
|
||||
},
|
||||
|
||||
applyHistory: function(history) {
|
||||
for(var i=1;history[i] != undefined;i++) {
|
||||
this.addToQueueBeginning(history[i]);
|
||||
}
|
||||
this.processLastOperationFromQueue(history[0].fileUrl);
|
||||
},
|
||||
|
||||
addToQueueBeginning: function(historyEntry) {
|
||||
if(this.queue.length == 0) {
|
||||
this.queue[0] = historyEntry;
|
||||
} else {
|
||||
for(var i=this.queue.length-1;i>=0;i--) {
|
||||
this.queue[i+1] = this.queue[i];
|
||||
}
|
||||
this.queue[0] = historyEntry;
|
||||
}
|
||||
},
|
||||
|
||||
processLastOperationFromQueue: function(file) {
|
||||
o = this.queue[this.queue.length-1];
|
||||
switch(o.operation) {
|
||||
case 'resize':
|
||||
ImageEditor.transformation.resize(o.additionalInfo.width,o.additionalInfo.height,function() {},true,file);
|
||||
break;
|
||||
case 'crop':
|
||||
ImageEditor.transformation.crop(o.additionalInfo.top,o.additionalInfo.left,o.additionalInfo.width,o.additionalInfo.height,function() {},file);
|
||||
break;
|
||||
default:
|
||||
var value = '';
|
||||
var callback = function() {};
|
||||
if(o.additionalInfo != undefined && o.additionalInfo.value != undefined) value = o.additionalInfo.value;
|
||||
if(o.callback != undefined) callback = o.callback;
|
||||
ImageEditor.transformation.customRequest(o.operation,callback,file,value,false);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
removeLastElementFromQueue: function() {
|
||||
this.queue = this.queue.slice(0,this.queue.length-1);
|
||||
}
|
||||
}
|
||||
@ -1,106 +0,0 @@
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor = {};
|
||||
ImageEditor.Point = {
|
||||
initialize: function(x,y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
}
|
||||
|
||||
ImageEditor.EventStack = {
|
||||
lastEventElement: null,
|
||||
getLastEventElement: function(){
|
||||
return ImageEditor.EventStack.lastEventElement;
|
||||
},
|
||||
|
||||
addEvent: function(event) {
|
||||
ImageEditor.EventStack.lastEventElement = Event.element(event);
|
||||
},
|
||||
|
||||
clearStack: function() {
|
||||
this.lastEventElement = null;
|
||||
}
|
||||
}
|
||||
|
||||
ImageEditor.Positioning = {
|
||||
addBehaviour: function(element) {
|
||||
this.element = element;
|
||||
this.element.getTop = ImageEditor.Positioning.getTop.bind(this);
|
||||
this.element.getLeft = ImageEditor.Positioning.getLeft.bind(this);
|
||||
this.element.getWidth = ImageEditor.Positioning.getWidth.bind(this);
|
||||
this.element.getHeight = ImageEditor.Positioning.getHeight.bind(this);
|
||||
this.element.getParentLeft = ImageEditor.Positioning.getParentLeft.bind(this);
|
||||
this.element.getParentTop = ImageEditor.Positioning.getParentTop.bind(this);
|
||||
this.element.getParentHeight = ImageEditor.Positioning.getParentHeight.bind(this);
|
||||
this.element.getParentWidth = ImageEditor.Positioning.getParentWidth.bind(this);
|
||||
return this.element;
|
||||
},
|
||||
|
||||
getTop: function() {
|
||||
return Position.positionedOffset(this.element)[1];
|
||||
},
|
||||
|
||||
getLeft: function() {
|
||||
return parseInt(this.element.style.left);
|
||||
},
|
||||
|
||||
getWidth: function() {
|
||||
return Element.getDimensions(this.element).width;
|
||||
},
|
||||
|
||||
getHeight: function() {
|
||||
return Element.getDimensions(this.element).height;
|
||||
},
|
||||
|
||||
getParentLeft: function() {
|
||||
var parentLeft = Position.cumulativeOffset(Position.offsetParent(this.element))[0];
|
||||
return parentLeft;
|
||||
},
|
||||
|
||||
getParentTop: function() {
|
||||
var parentTop = Position.cumulativeOffset(Position.offsetParent(this.element))[1];
|
||||
return parentTop;
|
||||
},
|
||||
|
||||
getParentHeight: function() {
|
||||
return Element.getDimensions(Position.offsetParent(this.element)).height;
|
||||
},
|
||||
|
||||
getParentWidth: function() {
|
||||
return Element.getDimensions(Position.offsetParent(this.element)).width
|
||||
}
|
||||
}
|
||||
|
||||
ImageEditor.Random = {
|
||||
string: function(length) {
|
||||
var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
var string = "";
|
||||
var i = 0;
|
||||
for(x=0;x<length;x++) {
|
||||
i = Math.floor(Math.random() * 57);
|
||||
string += chars.charAt(i);
|
||||
}
|
||||
return string;
|
||||
}
|
||||
}
|
||||
|
||||
ImageEditor.StatusMessage = {
|
||||
initialize: function() {
|
||||
this.statusMessage = ImageEditor.StatusMessage.statusMessage.bind(this);
|
||||
window.frameElement.statusMessage = window.top.statusMessage;
|
||||
var s1 = $('statusMessage');
|
||||
var s2 = window.top.document.getElementById('statusMessage');
|
||||
s1.showMessage = s2.showMessage;
|
||||
s1.clearMessage = s2.clearMessage;
|
||||
s1.fade = s2.fade;
|
||||
s1.afterFade = s2.afterFade;
|
||||
this.statusMessageContainer = s1;
|
||||
},
|
||||
|
||||
statusMessage: function(msg, type, clearManually) {
|
||||
window.frameElement.statusMessage(msg, type, clearManually,this.statusMessageContainer);
|
||||
}
|
||||
}
|
||||
Event.observe(window,'load',function(e) {ImageEditor.statusMessageWrapper = new ImageEditor.StatusMessage.initialize();});
|
||||
Loading…
Reference in New Issue
Block a user