mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-06-18 10:41:39 +02:00
FEATURE: merged back patch for image editor. Currently completely broken on trunk this patch does nothing to fix it sadly. I think its a prototype thing
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@65351 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Will Rossiter
parent
85daead336
commit
0ef452c524
|
|
@ -21,9 +21,9 @@ class ImageEditor extends Controller {
|
|||
Requirements::javascript(THIRDPARTY_DIR . '/prototype.js');
|
||||
Requirements::javascript(THIRDPARTY_DIR . '/scriptaculous/scriptaculous.js');
|
||||
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/Utils.js');
|
||||
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/ImageHistory.js');
|
||||
//Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/ImageHistory.js');
|
||||
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/Image.js');
|
||||
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/ImageTransformation.js');
|
||||
//Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/ImageTransformation.js');
|
||||
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/Resizeable.js');
|
||||
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/Effects.js');
|
||||
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/Environment.js');
|
||||
|
|
@ -64,8 +64,7 @@ class ImageEditor extends Controller {
|
|||
$gd = new GD($this->url2File($fileName));
|
||||
switch($command) {
|
||||
case 'rotate':
|
||||
$angle = $_POST['angle'];
|
||||
$gd = $gd->rotate($angle);
|
||||
$gd = $gd->rotate(90);
|
||||
break;
|
||||
case 'resize':
|
||||
$imageNewWidth = $_POST['newImageWidth'];
|
||||
|
|
@ -79,6 +78,27 @@ class ImageEditor extends Controller {
|
|||
$height = $_POST['height'];
|
||||
$gd = $gd->crop($top,$left,$width,$height);
|
||||
break;
|
||||
case 'greyscale':
|
||||
$gd = $gd->greyscale();
|
||||
break;
|
||||
case 'sepia':
|
||||
$gd = $gd->sepia();
|
||||
break;
|
||||
case 'blur':
|
||||
$gd = $gd->blur();
|
||||
break;
|
||||
case 'adjust-contrast':
|
||||
$value = intval($_POST['value']);
|
||||
$gd = $gd->contrast($value);
|
||||
break;
|
||||
case 'adjust-brightness':
|
||||
$value = intval($_POST['value']);
|
||||
$gd = $gd->brightness($value);
|
||||
break;
|
||||
case 'adjust-gamma':
|
||||
$value = floatval($_POST['value']);
|
||||
$gd = $gd->gamma($value);
|
||||
break;
|
||||
}
|
||||
$rand = md5(rand(1,100000));
|
||||
$gd->writeTo(ASSETS_PATH . '/_tmp/' . $rand . '.' . $fileInfo['extension']);
|
||||
|
|
|
|||
|
|
@ -240,7 +240,7 @@ body
|
|||
#Functions
|
||||
{
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
left: 480px;
|
||||
top: 38px;
|
||||
height: 73px;
|
||||
width: 220px;
|
||||
|
|
@ -317,11 +317,12 @@ body
|
|||
|
||||
#TopRuler
|
||||
{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
background-image: url(../../images/ImageEditor/topRuler.png);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 720px;
|
||||
width: 106px;
|
||||
height: 73px;
|
||||
background-image: url(../../images/ImageEditor/c3.png);
|
||||
}
|
||||
#LeftRuler
|
||||
{
|
||||
|
|
@ -331,6 +332,108 @@ body
|
|||
top: 147px;
|
||||
background-image: url(../../images/ImageEditor/leftRuler.png);
|
||||
}
|
||||
#Effects
|
||||
{
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
top: 38px;
|
||||
height: 73px;
|
||||
width: 220px;
|
||||
z-index: 1234;
|
||||
background-image: url(../../images/ImageEditor/c4.png);
|
||||
}
|
||||
#GreyscaleText
|
||||
{
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 7px;
|
||||
}
|
||||
#SepiaText
|
||||
{
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 70px;
|
||||
}
|
||||
#BlurText
|
||||
{
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 125px;
|
||||
}
|
||||
#AdjustText
|
||||
{
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 173px;
|
||||
}
|
||||
#AdjustMenu
|
||||
{
|
||||
position: absolute;
|
||||
width: 211px;
|
||||
height: 74px;
|
||||
background-color: rgb(201, 229, 232);
|
||||
top: 60px;
|
||||
left: 5px;
|
||||
z-index: 1234;
|
||||
background-image: url(../../images/ImageEditor/c1.png);
|
||||
}
|
||||
#AdjustMenuDescription
|
||||
{
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 85px;
|
||||
}
|
||||
.sliderTrack
|
||||
{
|
||||
width: 86px;
|
||||
height: 6px;
|
||||
left: 95px;
|
||||
position: absolute;
|
||||
background-image: url(../../images/ImageEditor/slider2.png);
|
||||
}
|
||||
.sliderTrackHandler
|
||||
{
|
||||
width: 13px;
|
||||
height: 11px;
|
||||
top: -2px;
|
||||
cursor:move;
|
||||
background-image: url(../../images/ImageEditor/slider.png);
|
||||
}
|
||||
#AdjustMenuContrastSliderTrack
|
||||
{
|
||||
top: 8px;
|
||||
}
|
||||
.effectDescription
|
||||
{
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
}
|
||||
#AdjustMenuConstrastDescription
|
||||
{
|
||||
top: 2px;
|
||||
}
|
||||
#AdjustMenuBrightnessSliderTrack
|
||||
{
|
||||
top: 25px;
|
||||
}
|
||||
#AdjustMenuBrightnessDescription
|
||||
{
|
||||
top: 22px;
|
||||
}
|
||||
#AdjustMenuGammaSliderTrack
|
||||
{
|
||||
top: 42px;
|
||||
}
|
||||
#AdjustMenuGammaDescription
|
||||
{
|
||||
top: 42px;
|
||||
}
|
||||
#EffectsDescription
|
||||
{
|
||||
position: absolute;
|
||||
top: 58px;
|
||||
left: 90px;
|
||||
}
|
||||
#Filename p
|
||||
{
|
||||
position: absolute;
|
||||
|
|
|
|||
16
javascript/ImageEditor/Adjust.js
Normal file
16
javascript/ImageEditor/Adjust.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
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'));
|
||||
}
|
||||
}
|
||||
|
|
@ -35,6 +35,7 @@ ImageEditor.Crop = {
|
|||
this.isVisible = false;
|
||||
this.setVisible(this.isVisible);
|
||||
this.isEnabled = true;
|
||||
this.lastCrop = {};
|
||||
},
|
||||
|
||||
resizeStop: function(event) {
|
||||
|
|
@ -114,7 +115,11 @@ ImageEditor.Crop = {
|
|||
var startTop = this.cropBox.getTop() ;
|
||||
var startLeft = this.cropBox.getLeft() ;
|
||||
if(newWidth > 35 && newHeight > 35) {
|
||||
ImageEditor.imageTransformation.crop(startTop,startLeft,newWidth,newHeight,ImageEditor.Crop.cropCallback.bind(this));
|
||||
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");
|
||||
|
|
@ -126,6 +131,12 @@ ImageEditor.Crop = {
|
|||
},
|
||||
|
||||
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'));
|
||||
|
|
@ -142,8 +153,7 @@ ImageEditor.Crop = {
|
|||
$('image').style.visibility = "hidden";//hack for IE for not selecting image during crop
|
||||
this.setVisible(true);
|
||||
Element.show($('CurrentAction'));
|
||||
ImageEditor.imageHistory.disable();
|
||||
ImageEditor.effects.disableRotate();
|
||||
ImageEditor.Main.disableFunctionality();
|
||||
this.enable();
|
||||
}
|
||||
},
|
||||
|
|
@ -159,8 +169,7 @@ ImageEditor.Crop = {
|
|||
Element.hide($('CurrentAction'));
|
||||
Element.show($('CropText'));
|
||||
this.setVisible(false);
|
||||
ImageEditor.imageHistory.enable();
|
||||
ImageEditor.effects.enableRotate();
|
||||
ImageEditor.Main.enableFunctionality();
|
||||
this.enable();
|
||||
}
|
||||
$('image').style.visibility = 'visible';//hack for IE for not selecting image during crop
|
||||
|
|
|
|||
|
|
@ -1,41 +1,35 @@
|
|||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.Effects = {
|
||||
*/
|
||||
ImageEditor.Effects.Main = {
|
||||
initialize: function() {
|
||||
this.setListeners = ImageEditor.Effects.setListeners.bind(this);
|
||||
this.rotate = ImageEditor.Effects.rotate.bind(this);
|
||||
this.setListeners();
|
||||
this.isRotateEnabled = true;
|
||||
this.enableRotate = ImageEditor.Effects.enableRotate.bind(this);
|
||||
this.disableRotate = ImageEditor.Effects.disableRotate.bind(this);
|
||||
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);
|
||||
},
|
||||
|
||||
rotate: function() {
|
||||
if(this.isRotateEnabled) {
|
||||
ImageEditor.resize.imageContainerResize.disable();
|
||||
ImageEditor.crop.disable();
|
||||
ImageEditor.imageHistory.disable();
|
||||
ImageEditor.imageTransformation.rotate(90,ImageEditor.Effects.rotateCallback.bind(this));
|
||||
this.isRotateEnabled = false;
|
||||
}
|
||||
},
|
||||
|
||||
rotateCallback: function() {
|
||||
ImageEditor.resize.imageContainerResize.placeClickBox();
|
||||
this.isRotateEnabled = true;
|
||||
},
|
||||
|
||||
setListeners: function() {
|
||||
Event.observe('RotateButton','click',this.rotate);
|
||||
},
|
||||
|
||||
disableRotate: function() {
|
||||
this.isRotateEnabled = false;
|
||||
},
|
||||
|
||||
enableRotate: function() {
|
||||
this.isRotateEnabled = true;
|
||||
}
|
||||
|
||||
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];
|
||||
}
|
||||
|
||||
}
|
||||
120
javascript/ImageEditor/Effects/AdjustBase.js
Normal file
120
javascript/ImageEditor/Effects/AdjustBase.js
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
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");
|
||||
76
javascript/ImageEditor/Effects/Base.js
Normal file
76
javascript/ImageEditor/Effects/Base.js
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
362
javascript/ImageEditor/History.js
Normal file
362
javascript/ImageEditor/History.js
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
/**
|
||||
* @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]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -10,6 +10,7 @@ ImageEditor.ImageToResize = {
|
|||
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) {
|
||||
|
|
@ -27,12 +28,8 @@ ImageEditor.ImageToResize = {
|
|||
$('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")';
|
||||
ImageEditor.imageBox.hideIndicator();
|
||||
Element.show($('imageContainer'),$('image'));
|
||||
ImageEditor.crop.enable();
|
||||
ImageEditor.resize.imageContainerResize.enable();
|
||||
ImageEditor.effects.enableRotate();
|
||||
ImageEditor.imageHistory.enable();
|
||||
if(ImageEditor.resize.imageContainerResize.originalHeight == 0 && ImageEditor.resize.imageContainerResize.originalWidth == 0) {
|
||||
ImageEditor.imageHistory.add('initialize',$('image').src);
|
||||
ImageEditor.history.add('initialize',$('image').src);
|
||||
this.resizeOnFirstLoad();
|
||||
ImageEditor.imageBox.center();
|
||||
}
|
||||
|
|
@ -50,7 +47,7 @@ ImageEditor.ImageToResize = {
|
|||
var imageWidth = Element.getDimensions($('image')).width;
|
||||
var imageHeight = Element.getDimensions($('image')).height;
|
||||
if(imageWidth > windowWidth - 40 || imageHeight > windowHeight - 40) {
|
||||
ImageEditor.imageHistory.clear();
|
||||
ImageEditor.history.clear();
|
||||
Element.hide($('imageContainer'),$('image'));
|
||||
var ratio = imageWidth / imageHeight;
|
||||
$('loadingIndicatorContainer2').style.left = windowWidth/2 + 'px';
|
||||
|
|
@ -61,15 +58,14 @@ ImageEditor.ImageToResize = {
|
|||
}
|
||||
this.reportSize(0,0);
|
||||
ImageEditor.resize.imageContainerResize.setVisible(false);
|
||||
ImageEditor.crop.disable();
|
||||
ImageEditor.resize.imageContainerResize.disable();
|
||||
ImageEditor.effects.disableRotate();
|
||||
ImageEditor.imageHistory.disable();
|
||||
ImageEditor.imageTransformation.resize(imageWidth,imageHeight,ImageEditor.ImageToResize.resizeOnFirstLoadCallBack.bind(this),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();
|
||||
|
|
|
|||
|
|
@ -5,17 +5,20 @@ ImageEditor.Main = {
|
|||
initialize: function(imageFile) {
|
||||
imageFile += '1234';
|
||||
ImageEditor.crop = null;
|
||||
ImageEditor.imageHistory = new ImageEditor.ImageHistory.initialize();
|
||||
ImageEditor.history = new ImageEditor.History.initialize();
|
||||
ImageEditor.environment = new ImageEditor.Environment.initialize(imageFile);
|
||||
ImageEditor.imageTransformation = new ImageEditor.ImageTransformation.initialize();
|
||||
ImageEditor.transformation = new ImageEditor.Transformation.initialize();
|
||||
ImageEditor.resize = new ImageEditor.Resize.initialize($('imageContainer'));
|
||||
ImageEditor.effects = new ImageEditor.Effects.initialize();
|
||||
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'));
|
||||
|
|
@ -23,7 +26,7 @@ ImageEditor.Main = {
|
|||
|
||||
onSaveClick: function() {
|
||||
if(this.tottalyOriginalImageFile != $('image').src) {
|
||||
ImageEditor.imageTransformation.save(this.tottalyOriginalImageFile,$('image').src,this.onCloseClick);
|
||||
ImageEditor.transformation.save(this.tottalyOriginalImageFile,$('image').src,this.onCloseClick);
|
||||
} else {
|
||||
this.onCloseClick();
|
||||
}
|
||||
|
|
@ -31,12 +34,24 @@ ImageEditor.Main = {
|
|||
|
||||
onCloseClick: function() {
|
||||
window.parent.imageEditorClosed();
|
||||
ImageEditor.imageTransformation.close(ImageEditor.Main.onCloseCallback.bind(this));
|
||||
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,3 +1,135 @@
|
|||
/**
|
||||
* @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
|
||||
*/
|
||||
|
|
|
|||
132
javascript/ImageEditor/ImageHistory.js.orig
Normal file
132
javascript/ImageEditor/ImageHistory.js.orig
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
/**
|
||||
* @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,108 +0,0 @@
|
|||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
ImageEditor.ImageTransformation = {
|
||||
initialize: function() {
|
||||
this.currentOperation = "";
|
||||
this.currentResponse = new Array();
|
||||
this.currentCallback = null;
|
||||
this.resize = ImageEditor.ImageTransformation.resize.bind(this);
|
||||
this.rotate = ImageEditor.ImageTransformation.rotate.bind(this);
|
||||
this.crop = ImageEditor.ImageTransformation.crop.bind(this);
|
||||
this.save = ImageEditor.ImageTransformation.save.bind(this);
|
||||
this.close = ImageEditor.ImageTransformation.close.bind(this);
|
||||
this.onSuccess = ImageEditor.ImageTransformation.onSuccess.bind(this);
|
||||
this.onImageLoad = ImageEditor.ImageTransformation.onImageLoad.bind(this);
|
||||
},
|
||||
|
||||
resize: function(width,height,callback,imageAlreadyChangedSize) {
|
||||
this.currentOperation = "resize";
|
||||
this.currentCallback = callback;
|
||||
if(ImageEditor.imageHistory.modifiedOriginalImage) {
|
||||
var fileToResize = $('image').src;
|
||||
} else {
|
||||
var fileToResize = ImageEditor.imageEditor.originalImageFile;
|
||||
}
|
||||
var options = {
|
||||
method: 'post',
|
||||
postBody: 'command=resize&file=' + fileToResize + '&newImageWidth=' + width + '&newImageHeight=' + height,
|
||||
onSuccess: this.onSuccess
|
||||
};
|
||||
|
||||
if(imageAlreadyChangedSize == false) {
|
||||
ImageEditor.imageBox.showIndicator($('Main'));
|
||||
} else {
|
||||
ImageEditor.imageBox.showIndicator();
|
||||
}
|
||||
new Ajax.Request('admin/ImageEditor/manipulate', options);
|
||||
},
|
||||
|
||||
rotate: function(angle,callback) {
|
||||
this.currentOperation = "rotate";
|
||||
this.currentCallback = callback;
|
||||
var options = {
|
||||
method: 'post',
|
||||
postBody: 'command=rotate&file=' + $('image').src + '&angle=' + angle ,
|
||||
onSuccess: this.onSuccess
|
||||
};
|
||||
ImageEditor.imageBox.showIndicator();
|
||||
new Ajax.Request('admin/ImageEditor/manipulate', options);
|
||||
},
|
||||
|
||||
crop: function(top,left,width,height,callback) {
|
||||
this.currentOperation = "crop";
|
||||
this.currentCallback = callback;
|
||||
var options = {
|
||||
method: 'post',
|
||||
postBody: 'command=crop&file=' + $('image').src + '&top=' + top + '&left=' + left + '&width=' + width + '&height=' + height,
|
||||
onSuccess: this.onSuccess
|
||||
};
|
||||
ImageEditor.imageBox.showIndicator();
|
||||
new Ajax.Request('admin/ImageEditor/manipulate', options);
|
||||
},
|
||||
|
||||
save: function(originalFile,editedFile,callback) {
|
||||
var options = {
|
||||
method: 'post',
|
||||
postBody: 'command=save&editedFile=' + editedFile + '&originalFile=' + originalFile,
|
||||
onSuccess: function(transport) {
|
||||
eval(transport.responseText);
|
||||
callback();
|
||||
}
|
||||
};
|
||||
new Ajax.Request('admin/ImageEditor/save', options);
|
||||
},
|
||||
|
||||
close: function(callback) {
|
||||
var options = {
|
||||
method: 'post',
|
||||
postBody: '',
|
||||
onSuccess: function(transport) {
|
||||
eval(transport.responseText);
|
||||
callback();
|
||||
}
|
||||
};
|
||||
new Ajax.Request('admin/ImageEditor/close', options);
|
||||
},
|
||||
|
||||
onSuccess: function(transport) {
|
||||
this.currentResponse = eval('(' + transport.responseText + ')');
|
||||
$('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.imageHistory.add(this.currentOperation,$('image').src);
|
||||
if(this.currentCallback != null) this.currentCallback();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -8,6 +8,8 @@ ImageEditor.Resize = {
|
|||
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),
|
||||
|
|
@ -17,6 +19,7 @@ ImageEditor.Resize = {
|
|||
new ImageEditor.Positioning.addBehaviour(this.element);
|
||||
this.imageContainerResize = new ImageEditor.Resizeable.initialize(element,options);
|
||||
this.imageContainerResize.setVisible(false);
|
||||
this.lastResize = {};
|
||||
},
|
||||
|
||||
resizeStop: function(event) {
|
||||
|
|
@ -26,11 +29,9 @@ ImageEditor.Resize = {
|
|||
if(this.imageContainerResize.isEnabled) {
|
||||
if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) {
|
||||
$('imageContainer').style.backgroundImage = 'url("")';
|
||||
ImageEditor.imageTransformation.resize(imageElement.width,imageElement.height,ImageEditor.Resize.resizeCallback.bind(this));
|
||||
ImageEditor.effects.disableRotate();
|
||||
ImageEditor.crop.disable();
|
||||
this.imageContainerResize.disable();
|
||||
ImageEditor.imageHistory.disable();
|
||||
this.lastResize.width = imageElement.width;
|
||||
this.lastResize.height = imageElement.height;
|
||||
ImageEditor.transformation.resize(imageElement.width,imageElement.height,ImageEditor.Resize.resizeCallback.bind(this));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -38,6 +39,7 @@ ImageEditor.Resize = {
|
|||
|
||||
resizeCallback: function() {
|
||||
$('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")';
|
||||
ImageEditor.history.addResize($('image').src,this.lastResize.width,this.lastResize.height);
|
||||
},
|
||||
|
||||
onDrag: function()
|
||||
|
|
@ -63,5 +65,13 @@ ImageEditor.Resize = {
|
|||
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();
|
||||
}
|
||||
}
|
||||
156
javascript/ImageEditor/Transformation.js
Normal file
156
javascript/ImageEditor/Transformation.js
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
|
@ -22,6 +22,6 @@ if(typeof(ss) == 'undefined' || typeof(ss.i18n) == 'undefined') {
|
|||
'ModelAdmin.SAVED': "Saved",
|
||||
'ModelAdmin.REALLYDELETE': "Do you really want to delete?",
|
||||
'ModelAdmin.DELETED': "Deleted",
|
||||
'LeftAndMain.PAGEWASDELETED': "This page was deleted. To edit a page, select it from the left."
|
||||
'LeftAndMain.PAGEWASDELETED': "This page was deleted. To edit a page, select it from the left.",
|
||||
});
|
||||
}
|
||||
|
|
@ -50,6 +50,67 @@
|
|||
<% _t('ACTIONS', 'actions') %>
|
||||
</p>
|
||||
</div>
|
||||
<div id="Effects">
|
||||
<a id="GreyscaleButton" href="#a">
|
||||
<div id="GreyscaleIcon"></div>
|
||||
<p id="GreyscaleText" class="menuText">
|
||||
<% _t('GREYSCALE','greyscale') %>
|
||||
</p>
|
||||
</a>
|
||||
<a id="SepiaButton" href="#a">
|
||||
<div id="SepiaIcon"></div>
|
||||
<p id="SepiaText" class="menuText">
|
||||
<% _t('SEPIA','sepia') %>
|
||||
</p>
|
||||
</a>
|
||||
<a id="BlurButton" href="#a">
|
||||
<div id="BlurIcon"></div>
|
||||
<p id="BlurText" class="menuText">
|
||||
<% _t('BLUR','blur') %>
|
||||
</p>
|
||||
</a>
|
||||
<a id="AdjustButton" href="#a">
|
||||
<div id="AdjustIcon"></div>
|
||||
<p id="AdjustText" class="menuText">
|
||||
<% _t('ADJUST','adjust') %>
|
||||
</p>
|
||||
</a>
|
||||
<div id="AdjustMenu">
|
||||
<div id="AdjustMenuContrastSlider">
|
||||
<div id="AdjustMenuContrastSliderTrack" class="sliderTrack">
|
||||
<div id="AdjustMenuContrastSliderTrackHandler" class="sliderTrackHandler">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p id="AdjustMenuConstrastDescription" class="menuText effectDescription">
|
||||
<% _t('CONTRAST','contrast') %>
|
||||
</p>
|
||||
<div id="AdjustMenuBrightnessSlider">
|
||||
<div id="AdjustMenuBrightnessSliderTrack" class="sliderTrack">
|
||||
<div id="AdjustMenuBrightnessSliderTrackHandler" class="sliderTrackHandler">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p id="AdjustMenuBrightnessDescription" class="menuText effectDescription">
|
||||
<% _t('BRIGHTNESS','brightness') %>
|
||||
</p>
|
||||
<div id="AdjustMenuGammaSlider">
|
||||
<div id="AdjustMenuGammaSliderTrack" class="sliderTrack">
|
||||
<div id="AdjustMenuGammaSliderTrackHandler" class="sliderTrackHandler">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p id="AdjustMenuGammaDescription" class="menuText effectDescription">
|
||||
<% _t('GAMMA','gamma') %>
|
||||
</p>
|
||||
<p id="AdjustMenuDescription" class="menuText">
|
||||
<% _t('ADJUST','adjust') %>
|
||||
</p>
|
||||
</div>
|
||||
<p id="EffectsDescription" class="menuText">
|
||||
<% _t('EFFECTS','effects') %>
|
||||
</p>
|
||||
</div>
|
||||
<div id="Functions">
|
||||
<a id="RotateButton" href="#a">
|
||||
<div id="RotateIcon">
|
||||
|
|
@ -74,6 +135,7 @@
|
|||
<% _t('EDITFUNCTIONS', 'edit functions') %>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="CurrentAction">
|
||||
<a id="CancelButton" href="#a">
|
||||
<div id="CancelIcon">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user