tonyair
/
silverstripe-cms
mirror of https://github.com/silverstripe/silverstripe-cms
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

API CHANGE Removed ImageEditor functionality, please use thirdparty modules, e.g. "silverstripe-pixlr" (http://github.com/nyeholt/silverstripe-pixlr) 

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/branches/2.4@104987 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2010-05-17 03:04:26 +00:00 committed by Sam Minnee
parent 8c40e6f4a3
commit fc19125698
22 changed files with 0 additions and 2462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_config.php
View File

@ -9,7 +9,6 @@ Director::addRules(50, array(
'processes//$Action/$ID/$Batch' => 'BatchProcess_Controller',
'admin/help//$Action/$ID' => 'CMSHelp',
'admin/bulkload//$Action/$ID/$OtherID' => 'BulkLoaderAdmin',
'admin//ImageEditor/$Action' => 'ImageEditor',
'admin/cms//$Action/$ID/$OtherID' => 'CMSMain',
'PageComment//$Action/$ID' => 'PageComment_Controller',
'dev/buildcache/$Action' => 'RebuildStaticCacheTask',

1
code/AssetTableField.php
View File

@ -72,7 +72,6 @@ class AssetTableField extends ComplexTableField {
$ret = parent::FieldHolder();
Requirements::javascript(CMS_DIR . '/javascript/AssetTableField.js');
Requirements::javascript('cms/javascript/ImageEditor/Activator.js');
return $ret;
}

265
code/ImageEditor.php
View File

@ -1,265 +0,0 @@
<?php
/**
* This Controller handles all operation needed for ImageEditor to work(expect for GD operations).
* @package cms
* @subpackage assets
*/
class ImageEditor extends Controller {
static $allowed_actions = array(
'*' => 'CMS_ACCESS_CMSMain'
);
public $fileToEdit = "";
public $fileToEditOnlyName = "";
/**
* Includes all JS required for ImageEditor. This method requires setting
* a fileToEdit URL in POST.
*
* @return String
*/
public function index() {
Requirements::clear();
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/prototype/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/Image.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');
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/Crop.js');
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/Resize.js');
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/ImageBox.js');
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/ImageEditor.js');
Requirements::javascript(CMS_DIR . '/javascript/ImageEditor/DocumentBody.js');
Requirements::javascript(SAPPHIRE_DIR . '/javascript/loader.js');
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/behaviour/behaviour.js');
Requirements::javascript(CMS_DIR . '/javascript/LeftAndMain.js');
Requirements::css(CMS_DIR . 'css/ImageEditor/ImageEditor.css');
if(!isset($this->requestParams['fileToEdit'])) $this->raiseError();
$fileWithPath = $this->requestParams['fileToEdit'];
$this->fileToEdit = $this->file2Origin($fileWithPath);
$this->fileToEditOnlyName = $this->urlToFilename($this->fileToEdit);
return $this->renderWith(__CLASS__);
}
/**
* Method is used for manipulating photos.
* Method requires two params set in POST
* file - file on which operation will be performed
* command - name of operation(crop|rotate|resize)
*
* Each operation requires additional parameters.
*
* @return String - JSON array with image properties (width,height,url).
*/
public function manipulate() {
$fileName = $this->requestParams['file'];
if(strpos($fileName,'?') !== false) $fileName = substr($fileName,0,strpos($fileName,'?'));
$command = $this->requestParams['command'];
$this->checkFileExists($fileName);
$fileInfo = pathinfo($fileName);
$gd = new GD($this->url2File($fileName));
switch($command) {
case 'rotate':
$gd = $gd->rotate(90);
break;
case 'resize':
$imageNewWidth = $_POST['newImageWidth'];
$imageNewHeight = $_POST['newImageHeight'];
$gd = $gd->resize($imageNewWidth,$imageNewHeight);
break;
case 'crop':
$top = $_POST['top'];
$left = $_POST['left'];
$width = $_POST['width'];
$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']);
return $this->getImageInfoInJSON($gd,ASSETS_PATH . '/_tmp/' . $rand . '.' . $fileInfo['extension']);
}
/**
* Method is used for saving photos.
* Method requires two params set in POST
* originalFile - this file will be replaced by second file
* editedFile - this file will replace first file.
*
* After replacing original file all thumbnails created from it are removed.
*
* @return String - Message that everything went ok.
*/
public function save() {
if(isset($this->requestParams['originalFile']) && isset($this->requestParams['editedFile'])) {
$originalFile = $this->requestParams['originalFile'];
$editedFile = $this->requestParams['editedFile'];
if(strpos($originalFile,'?') !== false) $originalFile = substr($originalFile,0,strpos($originalFile,'?'));
if($this->checkFileExists($originalFile) && $this->checkFileExists($editedFile)) {
if($editedFile != $originalFile && copy($this->url2File($editedFile),$this->url2File($originalFile))) {
$image = DataObject::get_one('File','"Filename" = \'' . substr($this->url2File($originalFile),3) . '\'');
$image->deleteFormattedImages();
$image->generateFormattedImage('AssetLibraryPreview');
} else {
$this->raiseError();
}
} else {
$this->raiseError();
}
} else {
$this->raiseError();
}
return 'parent.parent.parent.statusMessage(\'Image saved\',\'good\',false);';
}
/**
* Method is invoked when ImageEditor is closed whether image is saved or not.
*
* /assets/tmp is folder where we store temporary images created during editing so
* after closing they are no necessity to keep them.
*
* @return null
*/
public function close() {
$tmpDir = ASSETS_PATH . '/_tmp';
if(file_exists($tmpDir)) {
Filesystem::removeFolder($tmpDir);
mkdir($tmpDir, Filesystem::$folder_create_mask);
}
}
/**
* Method return JSON array containing info about image.
*
* @param gd - GD object used for retrieving info about image
* @param file
*
* @return string JSON array explained in manipulate method comment
*/
private function getImageInfoInJSON(GD $gd,$file) {
return '{"fileName":"' . $file . '","width":' . $gd->getWidth() . ',"height":' . $gd->getHeight() . '}';
}
/**
* Method converts thumbnail file name to file name of it's "parent"
*
* @param file - name of thumbnail file
*
* @return string name of parent file.
*/
private function file2Origin($file) {
$file = str_replace('_resampled/','',$file);
$file = str_replace('_resampled/','',$file);
$file = str_replace('AssetLibraryPreview-','',$file);
$this->checkFileExists($file);
return $file;
}
/**
* Method converts URL of file to file path in file system.
*
* @param url - url of file
*
* @return string path of file in file system
*/
private function url2File($url) {
return '..' . substr($url,strpos($url,'/assets'));
}
/**
* Method checks if file exists and have proper name and extension.
*
* If any of constraints aren't fulfilled method will generate error.
*
* @param url - url of file
*
* @return boolean
*/
private function checkFileExists($url) {
if(strpos($url,'?') !== false) $url = substr($url,0,strpos($url,'?'));
$pathInfo = pathinfo($url);
if(count($pathInfo) < 3) $this->raiseError();
if(!in_array($pathInfo['extension'],array('jpeg','jpg','jpe','png','gif','JPEG','JPG','JPE','PNG','GIF'))) $this->raiseError();
$path = explode('/',$pathInfo['dirname']);
if(count($path) > 1) {
$assetId = array_search('assets',$path);
if($assetId > 0) {
$realPath = '../' . implode('/',array_slice($path,$assetId,count($path) - $assetId));
if(strpos($pathInfo['basename'],'AssetLibraryPreview') !== false) {
$realPath .= '/' . substr($pathInfo['basename'],strpos($pathInfo['basename'],'-'));
} else {
$realPath .= '/' . $pathInfo['basename'];
}
} else {
$this->raiseError();
}
if(file_exists($realPath)) {
return true;
} else {
$this->raiseError();
}
} else {
$this->raiseError();
}
}
/**
* Method raiser error. Error is showed using statusMessage function.
*
* @param message - error message
*
*/
private function raiseError($message = "") {
echo "parent.parent.parent.statusMessage('Error: " . $message . "','bad',false);";
exit();
}
/**
* Method converts retrieves filename from url
*
* @param url
*
*/
private function urlToFilename($url) {
$path = pathinfo($url);
return $path['filename'] . "." . substr($path['extension'],0,strpos($path['extension'],'?'));
}
}
?>

43
javascript/ImageEditor/Activator.js
View File

@ -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);
}
}

16
javascript/ImageEditor/Adjust.js
View File

@ -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'));
}
}

203
javascript/ImageEditor/Crop.js
View File

@ -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);
}
}

34
javascript/ImageEditor/DocumentBody.js
View File

@ -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();
}
}

35
javascript/ImageEditor/Effects.js
View File

@ -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];
}
}

120
javascript/ImageEditor/Effects/AdjustBase.js
View File

@ -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");

76
javascript/ImageEditor/Effects/Base.js
View File

@ -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;
}
}

9
javascript/ImageEditor/Environment.js
View File

@ -1,9 +0,0 @@
/**
* @author Mateusz
*/
ImageEditor.Environment = {
initialize: function (imageFile) {
ImageEditor.imageBox = new ImageEditor.ImageBox.initialize();
ImageEditor.imageToResize = new ImageEditor.ImageToResize.initialize(imageFile);
}
}

362
javascript/ImageEditor/History.js
View File

@ -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]);
}
}
};

74
javascript/ImageEditor/Image.js
View File

@ -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();
}
};

52
javascript/ImageEditor/ImageBox.js
View File

@ -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';
}
};

57
javascript/ImageEditor/ImageEditor.js
View File

@ -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();
}
}

264
javascript/ImageEditor/ImageHistory.js
View File

@ -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();
}
};

77
javascript/ImageEditor/Resize.js
View File

@ -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();
}
}

298
javascript/ImageEditor/Resizeable.js
View File

@ -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;
}
}

156
javascript/ImageEditor/Transformation.js
View File

@ -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);
}
}

106
javascript/ImageEditor/Utils.js
View File

@ -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();});

22
lang/en_US.php
View File

@ -270,28 +270,6 @@ $lang['en_US']['GroupImportForm']['Help2'] = '<div class="advanced">
$lang['en_US']['GroupImportForm']['ResultCreated'] = 'Created %d groups';
$lang['en_US']['GroupImportForm']['ResultDeleted'] = 'Deleted %d groups';
$lang['en_US']['GroupImportForm']['ResultUpdated'] = 'Updated %d groups';
$lang['en_US']['ImageEditor.ss']['ACTIONS'] = 'actions';
$lang['en_US']['ImageEditor.ss']['ADJUST'] = 'adjust';
$lang['en_US']['ImageEditor.ss']['APPLY'] = 'apply';
$lang['en_US']['ImageEditor.ss']['BLUR'] = 'blur';
$lang['en_US']['ImageEditor.ss']['BRIGHTNESS'] = 'brightness';
$lang['en_US']['ImageEditor.ss']['CANCEL'] = 'cancel';
$lang['en_US']['ImageEditor.ss']['CONTRAST'] = 'contrast';
$lang['en_US']['ImageEditor.ss']['CROP'] = 'crop';
$lang['en_US']['ImageEditor.ss']['CURRENTACTION'] = 'current&nbsp;action';
$lang['en_US']['ImageEditor.ss']['EDITFUNCTIONS'] = 'edit&nbsp;functions';
$lang['en_US']['ImageEditor.ss']['EFFECTS'] = 'effects';
$lang['en_US']['ImageEditor.ss']['EXIT'] = 'exit';
$lang['en_US']['ImageEditor.ss']['GAMMA'] = 'gamma';
$lang['en_US']['ImageEditor.ss']['GREYSCALE'] = 'greyscale';
$lang['en_US']['ImageEditor.ss']['HEIGHT'] = 'height';
$lang['en_US']['ImageEditor.ss']['REDO'] = 'redo';
$lang['en_US']['ImageEditor.ss']['ROT'] = 'rotate';
$lang['en_US']['ImageEditor.ss']['SAVE'] = 'save&nbsp;image';
$lang['en_US']['ImageEditor.ss']['SEPIA'] = 'sepia';
$lang['en_US']['ImageEditor.ss']['UNDO'] = 'undo';
$lang['en_US']['ImageEditor.ss']['UNTITLED'] = 'Untitled Document';
$lang['en_US']['ImageEditor.ss']['WIDTH'] = 'width';
$lang['en_US']['LeftAndMain']['CANT_REORGANISE'] = 'You do not have permission to rearange the site tree. Your change was not saved.';
$lang['en_US']['LeftAndMain']['CHANGEDURL'] = ' Changed URL to \'%s\'';
$lang['en_US']['LeftAndMain']['HELP'] = array(

191
templates/ImageEditor.ss
View File

@ -1,191 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" debug=true>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<% base_tag %>
<title><% _t('UNTITLED','Untitled Document') %></title>
<meta http-equiv="imagetoolbar" content="no">
</head>
<body id="body" class="$CSSClasses" onload="ImageEditor.imageEditor = new ImageEditor.Main.initialize('$fileToEdit');">
<div id="Loading" style="background: #FFF url(cms/images/loading.gif) 50% 50% no-repeat; position: absolute;z-index: 100000;height: 100%;width: 100%;margin: 0;padding: 0;z-index: 100000;position: absolute;">Loading...</div>
<div id="Main">
<script type="text/javascript">
</script>
<div id="MenuBar">
<div id="TopLeft"></div>
<div id="TopRight"></div>
<div id="Filename">
<p>$fileToEditOnlyName</p>
</div>
<div id="Actions">
<a id="SaveButton" href="#a">
<div id="SaveIcon">
</div>
<p id="SaveText" class="menuText">
<% _t('SAVE','save&nbsp;image') %>
</p>
</a>
<a id="ExitButton" href="#a">
<div id="ExitIcon">
</div>
<p id="ExitText" class="menuText">
<% _t('EXIT', 'exit') %>
</p>
</a>
<a id="UndoButton" href="#a">
<div id="UndoIcon">
</div>
<p id="UndoText" class="menuText">
<% _t('UNDO','undo') %>
</p>
</a>
<a id="RedoButton" href="#a">
<div id="RedoIcon">
</div>
<p id="RedoText" class="menuText">
<% _t('REDO','redo') %>
</p>
</a>
<p id="ActionsDescription" class="menuText">
<% _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">
</div>
<p id="RotateText" class="menuText">
<% _t('ROT','rotate') %>
</p>
</a>
<a id="CropButton" href="#a">
<div id="CropIcon"></div>
<p id="CropText" class="menuText">
<% _t('CROP','crop') %>
</p>
</a>
<div id="ImageSize">
<p id="ImageWidthLabel" class="menuText"><% _t('WIDTH','width') %></p>
<p id="ImageHeightLabel" class="menuText"><% _t('HEIGHT','height') %></p>
<p id="ImageWidth" class="menuText"></p>
<p id="ImageHeight" class="menuText"></p>
</div>
<p id="FunctionsDescription" class="menuText">
<% _t('EDITFUNCTIONS', 'edit&nbsp;functions') %>
</p>
</div>
<div id="CurrentAction">
<a id="CancelButton" href="#a">
<div id="CancelIcon">
</div>
<p id="CancelText" class="menuText">
<% _t('CANCEL','cancel') %>
</p>
</a>
<a id="ApplyButton" href="#a">
<div id="ApplyIcon">
</div>
<p id="ApplyText" class="menuText">
<% _t('APPLY', 'apply') %>
</p>
</a>
<p id="CurrentActionDescription" class="menuText">
<% _t('CURRENTACTION', 'current&nbsp;action') %>
</p>
</div>
</div>
<div id="TopRuler"></div>
<div id="LeftRuler"></div>
<div id="imageEditorContainer">
<div id="imageContainer">
<div id="leftGreyBox" class="greyBox"></div>
<div id="rightGreyBox" class="greyBox"></div>
<div id="upperGreyBox" class="greyBox"></div>
<div id="lowerGreyBox" class="greyBox"></div>
<img id="image" src="#" alt=""/>
<div id="cropBox"></div>
<div id="loadingIndicatorContainer">
<img id="loadingIndicator" alt="" src="cms/images/ImageEditor/indicator.gif">
</div>
</div>
</div>
</div>
<div id="fakeImgContainer">
<img id="fakeImg" src="#" alt=""/>
</div>
<div id="loadingIndicatorContainer2">
<img id="loadingIndicator2" alt="" src="cms/images/ImageEditor/indicator.gif">
</div>
<p id="statusMessage" style="visibility:hidden"></p>
<script type="text/javascript">
if(window.onload) old_onload = window.onload;
window.onload = function() {
Element.hide($('Loading'));
old_onload();
};
</script>
</body>
</html>