mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-06-18 10:41:39 +02:00
MINOR: Fixed newlines and set svn:eol-style to native
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@79474 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Sam Minnee
parent
d82ba048bf
commit
1dd80edb8a
|
|
@ -1,265 +1,265 @@
|
|||
<?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(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/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(THIRDPARTY_DIR . '/loader.js');
|
||||
Requirements::javascript(THIRDPARTY_DIR . '/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'],'?'));
|
||||
}
|
||||
}
|
||||
|
||||
<?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(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/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(THIRDPARTY_DIR . '/loader.js');
|
||||
Requirements::javascript(THIRDPARTY_DIR . '/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'],'?'));
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -1,525 +1,525 @@
|
|||
*
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a, a:visited
|
||||
{
|
||||
text-decoration: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.clickBox
|
||||
{
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-image: url(../../images/ImageEditor/clickBox.png);
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
.leftUpperClickBox
|
||||
{
|
||||
cursor: nw-resize;
|
||||
}
|
||||
|
||||
.leftMiddleClickBox
|
||||
{
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
.leftLowerClickBox
|
||||
{
|
||||
cursor: ne-resize;
|
||||
}
|
||||
|
||||
.rightUpperClickBox
|
||||
{
|
||||
cursor: ne-resize;
|
||||
}
|
||||
|
||||
.rightMiddleClickBox
|
||||
{
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
.rightLowerClickBox
|
||||
{
|
||||
cursor: nw-resize;
|
||||
}
|
||||
|
||||
.upperMiddleClickBox
|
||||
{
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.lowerMiddleClickBox
|
||||
{
|
||||
cursor: n-resize;
|
||||
}
|
||||
.inline
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
.displayNone
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#imageContainer
|
||||
{
|
||||
position: absolute;
|
||||
}
|
||||
#MenuBar
|
||||
{
|
||||
height: 132px;
|
||||
background-image: url(../../images/ImageEditor/topLeft.png);
|
||||
}
|
||||
#TopLeft {
|
||||
float: left;
|
||||
width: 584px;
|
||||
height: 132px;
|
||||
background-image: url(../../images/ImageEditor/topLeft.png);
|
||||
display: inline;
|
||||
}
|
||||
#TopRight {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 132px;
|
||||
background-image: url(../../images/ImageEditor/topRight.png);
|
||||
}
|
||||
|
||||
#image
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.floatLeft
|
||||
{
|
||||
float: left;
|
||||
}
|
||||
#loadingIndicatorContainer
|
||||
{
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
left: -1000px;
|
||||
}
|
||||
#loadingIndicatorContainer2
|
||||
{
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
left: -1000px;
|
||||
}
|
||||
|
||||
#fakeImg
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
#cropBox
|
||||
{
|
||||
position: absolute;
|
||||
display: inline;
|
||||
}
|
||||
.greyBox
|
||||
{
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
opacity: .5;
|
||||
filter: alpha(opacity=50);
|
||||
overflow:hidden;
|
||||
}
|
||||
body
|
||||
{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#Main
|
||||
{
|
||||
position: absolute;
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
height: 95%;
|
||||
width: 99%;
|
||||
background-color: white;
|
||||
}
|
||||
#imageEditorContainer
|
||||
{
|
||||
position: relative;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
overflow: auto;
|
||||
background-image: url(../../images/ImageEditor/back.png);
|
||||
}
|
||||
#Actions
|
||||
{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 38px;
|
||||
width: 211px;
|
||||
height: 73px;
|
||||
background-image: url(../../images/ImageEditor/c1.png);
|
||||
}
|
||||
#SaveText
|
||||
{
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 13px;
|
||||
}
|
||||
#SaveIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 33px;
|
||||
top: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url(../../images/ImageEditor/c1Save.png);
|
||||
cursor: hand;/* IE Hack, because <a> have 0 width/height.*/
|
||||
}
|
||||
#ExitText
|
||||
{
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 95px;
|
||||
}
|
||||
#ExitIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 97px;
|
||||
top: 15px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-image: url(../../images/ImageEditor/c1Exit.png);
|
||||
cursor: hand;/* IE Hack, because <a> have 0 width/height.*/
|
||||
}
|
||||
#UndoText
|
||||
{
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 175px;
|
||||
}
|
||||
#UndoIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 145px;
|
||||
top: 15px;
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
background-image: url(../../images/ImageEditor/c1Undo.png);
|
||||
background-repeat: no-repeat;/* IE hack */
|
||||
cursor: hand;/* IE Hack, because <a> have 0 width/height.*/
|
||||
}
|
||||
#RedoText
|
||||
{
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 175px;
|
||||
}
|
||||
#RedoIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 143px;
|
||||
top: 38px;
|
||||
width: 25px;
|
||||
height: 13px;
|
||||
background-image: url(../../images/ImageEditor/c1Redo.png);
|
||||
background-repeat: no-repeat;/* IE hack */
|
||||
cursor: hand;/* IE Hack, because <a> have width/height.*/
|
||||
}
|
||||
#ActionsDescription
|
||||
{
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 85px;
|
||||
}
|
||||
.menuText
|
||||
{
|
||||
color: #6C889E;
|
||||
font-family: sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
#Functions
|
||||
{
|
||||
position: absolute;
|
||||
left: 480px;
|
||||
top: 38px;
|
||||
height: 73px;
|
||||
width: 220px;
|
||||
background-image: url(../../images/ImageEditor/c2.png);
|
||||
}
|
||||
#RotateIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 17px;
|
||||
top: 11px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
background-image: url(../../images/ImageEditor/c2Rotate.png);
|
||||
cursor: hand;/* IE Hack, because <a> have width/height.*/
|
||||
}
|
||||
#RotateText
|
||||
{
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
left: 15px;
|
||||
}
|
||||
#CropIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 66px;
|
||||
top: 11px;
|
||||
height: 28px;
|
||||
width: 31px;
|
||||
background-image: url(../../images/ImageEditor/c2Crop.png);
|
||||
cursor: hand;/* IE Hack, because <a> have width/height.*/
|
||||
|
||||
}
|
||||
#CropText
|
||||
{
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 67px;
|
||||
}
|
||||
#ImageWidthLabel
|
||||
{
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 114px;
|
||||
}
|
||||
#ImageHeightLabel
|
||||
{
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
left: 114px;
|
||||
}
|
||||
#ImageWidth
|
||||
{
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 157px;
|
||||
color: #7A7D80;
|
||||
font-size: 9px;
|
||||
|
||||
}
|
||||
#ImageHeight
|
||||
{
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 157px;
|
||||
color: #7A7D80;
|
||||
font-size: 9px;
|
||||
}
|
||||
#FunctionsDescription
|
||||
{
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#TopRuler
|
||||
{
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 720px;
|
||||
width: 106px;
|
||||
height: 73px;
|
||||
background-image: url(../../images/ImageEditor/c3.png);
|
||||
}
|
||||
#LeftRuler
|
||||
{
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 100%;
|
||||
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;
|
||||
color: white;
|
||||
left: 20px;
|
||||
top: 7px;
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#CurrentAction
|
||||
{
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 479px;
|
||||
width: 106px;
|
||||
height: 73px;
|
||||
background-image: url(../../images/ImageEditor/c3.png);
|
||||
}
|
||||
#ApplyIcon
|
||||
{
|
||||
position: absolute;
|
||||
left:59px;
|
||||
top: 14px;
|
||||
width: 24px;
|
||||
height: 23px;
|
||||
background-image: url(../../images/ImageEditor/c3Apply.png);
|
||||
}
|
||||
#ApplyText
|
||||
{
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
left: 57px;
|
||||
}
|
||||
|
||||
#CancelIcon
|
||||
{
|
||||
position: absolute;
|
||||
left:18px;
|
||||
top: 13px;
|
||||
width: 26px;
|
||||
height: 25px;
|
||||
background-image: url(../../images/ImageEditor/c3Cancel.png);
|
||||
}
|
||||
#CancelText
|
||||
{
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
left: 12px;
|
||||
}
|
||||
#CurrentActionDescription
|
||||
{
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Status, Directly copied from cms_right.css
|
||||
*/
|
||||
|
||||
#statusMessage {
|
||||
position: absolute;
|
||||
z-index: 500;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
text-align: left;
|
||||
padding: 1px 1px 1px 40px;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
/* border: 1px solid #cc9; */
|
||||
color: #660;
|
||||
/* background-color: #F9F9E3; */
|
||||
margin: 2px;
|
||||
}
|
||||
#statusMessage.good {
|
||||
border-color: #9c9;
|
||||
color: #060;
|
||||
background: url(../../images/alert-good.gif) /*#E2F9E3*/ 7px no-repeat;
|
||||
}
|
||||
#statusMessage.bad {
|
||||
border-color: #c99;
|
||||
color: #c00;
|
||||
background: url(../../images/alert-bad.gif) #fff 7px no-repeat;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
*
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a, a:visited
|
||||
{
|
||||
text-decoration: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.clickBox
|
||||
{
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-image: url(../../images/ImageEditor/clickBox.png);
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
.leftUpperClickBox
|
||||
{
|
||||
cursor: nw-resize;
|
||||
}
|
||||
|
||||
.leftMiddleClickBox
|
||||
{
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
.leftLowerClickBox
|
||||
{
|
||||
cursor: ne-resize;
|
||||
}
|
||||
|
||||
.rightUpperClickBox
|
||||
{
|
||||
cursor: ne-resize;
|
||||
}
|
||||
|
||||
.rightMiddleClickBox
|
||||
{
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
.rightLowerClickBox
|
||||
{
|
||||
cursor: nw-resize;
|
||||
}
|
||||
|
||||
.upperMiddleClickBox
|
||||
{
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.lowerMiddleClickBox
|
||||
{
|
||||
cursor: n-resize;
|
||||
}
|
||||
.inline
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
.displayNone
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#imageContainer
|
||||
{
|
||||
position: absolute;
|
||||
}
|
||||
#MenuBar
|
||||
{
|
||||
height: 132px;
|
||||
background-image: url(../../images/ImageEditor/topLeft.png);
|
||||
}
|
||||
#TopLeft {
|
||||
float: left;
|
||||
width: 584px;
|
||||
height: 132px;
|
||||
background-image: url(../../images/ImageEditor/topLeft.png);
|
||||
display: inline;
|
||||
}
|
||||
#TopRight {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 132px;
|
||||
background-image: url(../../images/ImageEditor/topRight.png);
|
||||
}
|
||||
|
||||
#image
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.floatLeft
|
||||
{
|
||||
float: left;
|
||||
}
|
||||
#loadingIndicatorContainer
|
||||
{
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
left: -1000px;
|
||||
}
|
||||
#loadingIndicatorContainer2
|
||||
{
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
left: -1000px;
|
||||
}
|
||||
|
||||
#fakeImg
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
#cropBox
|
||||
{
|
||||
position: absolute;
|
||||
display: inline;
|
||||
}
|
||||
.greyBox
|
||||
{
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
opacity: .5;
|
||||
filter: alpha(opacity=50);
|
||||
overflow:hidden;
|
||||
}
|
||||
body
|
||||
{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#Main
|
||||
{
|
||||
position: absolute;
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
height: 95%;
|
||||
width: 99%;
|
||||
background-color: white;
|
||||
}
|
||||
#imageEditorContainer
|
||||
{
|
||||
position: relative;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
overflow: auto;
|
||||
background-image: url(../../images/ImageEditor/back.png);
|
||||
}
|
||||
#Actions
|
||||
{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 38px;
|
||||
width: 211px;
|
||||
height: 73px;
|
||||
background-image: url(../../images/ImageEditor/c1.png);
|
||||
}
|
||||
#SaveText
|
||||
{
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 13px;
|
||||
}
|
||||
#SaveIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 33px;
|
||||
top: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-image: url(../../images/ImageEditor/c1Save.png);
|
||||
cursor: hand;/* IE Hack, because <a> have 0 width/height.*/
|
||||
}
|
||||
#ExitText
|
||||
{
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 95px;
|
||||
}
|
||||
#ExitIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 97px;
|
||||
top: 15px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-image: url(../../images/ImageEditor/c1Exit.png);
|
||||
cursor: hand;/* IE Hack, because <a> have 0 width/height.*/
|
||||
}
|
||||
#UndoText
|
||||
{
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 175px;
|
||||
}
|
||||
#UndoIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 145px;
|
||||
top: 15px;
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
background-image: url(../../images/ImageEditor/c1Undo.png);
|
||||
background-repeat: no-repeat;/* IE hack */
|
||||
cursor: hand;/* IE Hack, because <a> have 0 width/height.*/
|
||||
}
|
||||
#RedoText
|
||||
{
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 175px;
|
||||
}
|
||||
#RedoIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 143px;
|
||||
top: 38px;
|
||||
width: 25px;
|
||||
height: 13px;
|
||||
background-image: url(../../images/ImageEditor/c1Redo.png);
|
||||
background-repeat: no-repeat;/* IE hack */
|
||||
cursor: hand;/* IE Hack, because <a> have width/height.*/
|
||||
}
|
||||
#ActionsDescription
|
||||
{
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 85px;
|
||||
}
|
||||
.menuText
|
||||
{
|
||||
color: #6C889E;
|
||||
font-family: sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
#Functions
|
||||
{
|
||||
position: absolute;
|
||||
left: 480px;
|
||||
top: 38px;
|
||||
height: 73px;
|
||||
width: 220px;
|
||||
background-image: url(../../images/ImageEditor/c2.png);
|
||||
}
|
||||
#RotateIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 17px;
|
||||
top: 11px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
background-image: url(../../images/ImageEditor/c2Rotate.png);
|
||||
cursor: hand;/* IE Hack, because <a> have width/height.*/
|
||||
}
|
||||
#RotateText
|
||||
{
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
left: 15px;
|
||||
}
|
||||
#CropIcon
|
||||
{
|
||||
position: absolute;
|
||||
left: 66px;
|
||||
top: 11px;
|
||||
height: 28px;
|
||||
width: 31px;
|
||||
background-image: url(../../images/ImageEditor/c2Crop.png);
|
||||
cursor: hand;/* IE Hack, because <a> have width/height.*/
|
||||
|
||||
}
|
||||
#CropText
|
||||
{
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 67px;
|
||||
}
|
||||
#ImageWidthLabel
|
||||
{
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 114px;
|
||||
}
|
||||
#ImageHeightLabel
|
||||
{
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
left: 114px;
|
||||
}
|
||||
#ImageWidth
|
||||
{
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 157px;
|
||||
color: #7A7D80;
|
||||
font-size: 9px;
|
||||
|
||||
}
|
||||
#ImageHeight
|
||||
{
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 157px;
|
||||
color: #7A7D80;
|
||||
font-size: 9px;
|
||||
}
|
||||
#FunctionsDescription
|
||||
{
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#TopRuler
|
||||
{
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 720px;
|
||||
width: 106px;
|
||||
height: 73px;
|
||||
background-image: url(../../images/ImageEditor/c3.png);
|
||||
}
|
||||
#LeftRuler
|
||||
{
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 100%;
|
||||
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;
|
||||
color: white;
|
||||
left: 20px;
|
||||
top: 7px;
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#CurrentAction
|
||||
{
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 479px;
|
||||
width: 106px;
|
||||
height: 73px;
|
||||
background-image: url(../../images/ImageEditor/c3.png);
|
||||
}
|
||||
#ApplyIcon
|
||||
{
|
||||
position: absolute;
|
||||
left:59px;
|
||||
top: 14px;
|
||||
width: 24px;
|
||||
height: 23px;
|
||||
background-image: url(../../images/ImageEditor/c3Apply.png);
|
||||
}
|
||||
#ApplyText
|
||||
{
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
left: 57px;
|
||||
}
|
||||
|
||||
#CancelIcon
|
||||
{
|
||||
position: absolute;
|
||||
left:18px;
|
||||
top: 13px;
|
||||
width: 26px;
|
||||
height: 25px;
|
||||
background-image: url(../../images/ImageEditor/c3Cancel.png);
|
||||
}
|
||||
#CancelText
|
||||
{
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
left: 12px;
|
||||
}
|
||||
#CurrentActionDescription
|
||||
{
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Status, Directly copied from cms_right.css
|
||||
*/
|
||||
|
||||
#statusMessage {
|
||||
position: absolute;
|
||||
z-index: 500;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
text-align: left;
|
||||
padding: 1px 1px 1px 40px;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
/* border: 1px solid #cc9; */
|
||||
color: #660;
|
||||
/* background-color: #F9F9E3; */
|
||||
margin: 2px;
|
||||
}
|
||||
#statusMessage.good {
|
||||
border-color: #9c9;
|
||||
color: #060;
|
||||
background: url(../../images/alert-good.gif) /*#E2F9E3*/ 7px no-repeat;
|
||||
}
|
||||
#statusMessage.bad {
|
||||
border-color: #c99;
|
||||
color: #c00;
|
||||
background: url(../../images/alert-bad.gif) #fff 7px no-repeat;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
.contentPanel .group {
|
||||
display: inline;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.contentPanel .middleColumn {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.contentPanel .link {
|
||||
text-decoration: none;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
|
||||
.contentPanel .tree_holder {
|
||||
display: inline;
|
||||
}
|
||||
.contentPanel #NewFolderName {
|
||||
width: 120px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.contentPanel .group {
|
||||
display: inline;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.contentPanel .middleColumn {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.contentPanel .link {
|
||||
text-decoration: none;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
|
||||
.contentPanel .tree_holder {
|
||||
display: inline;
|
||||
}
|
||||
.contentPanel #NewFolderName {
|
||||
width: 120px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
* {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
p, ul, td, th {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
line-height: 2;
|
||||
color: #333;
|
||||
}
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: inherit;
|
||||
color: #0074C6;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
a img {
|
||||
border-style: none;
|
||||
}
|
||||
* {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
p, ul, td, th {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
line-height: 2;
|
||||
color: #333;
|
||||
}
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: inherit;
|
||||
color: #0074C6;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
a img {
|
||||
border-style: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,43 @@
|
|||
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);
|
||||
}
|
||||
|
||||
ImageEditor = {};
|
||||
|
||||
ImageEditor.Activator = {
|
||||
initialize: function() {
|
||||
this.onOpen = ImageEditor.Activator.onOpen.bind(this);
|
||||
},
|
||||
|
||||
onOpen: function() {
|
||||
var windowWidth = Element.getDimensions(window.top.document.body).width;
|
||||
var windowHeight = Element.getDimensions(window.top.document.body).height;
|
||||
var iframe = window.top.document.getElementById('imageEditorIframe');
|
||||
if(iframe != null) {
|
||||
iframe.parentNode.removeChild(iframe);
|
||||
}
|
||||
iframe = window.top.document.createElement('iframe');
|
||||
var fileToEdit = $('ImageEditorActivator').firstChild.src;
|
||||
iframe.setAttribute("src","admin/ImageEditor?fileToEdit=" + fileToEdit);
|
||||
iframe.id = 'imageEditorIframe';
|
||||
iframe.style.width = windowWidth - 6 + 'px';
|
||||
iframe.style.height = windowHeight + 10 + 'px';
|
||||
iframe.style.zIndex = "1000";
|
||||
iframe.style.position = "absolute";
|
||||
iframe.style.top = "8px";
|
||||
iframe.style.left = "8px";
|
||||
window.top.document.body.appendChild(iframe);
|
||||
var divLeft = window.top.document.createElement('div');
|
||||
var divRight = window.top.document.createElement('div');
|
||||
divLeft.style.width = "8px";
|
||||
divLeft.style.height = "300%";
|
||||
divLeft.style.zIndex = "1000";
|
||||
divLeft.style.top = "0";
|
||||
divLeft.style.position = "absolute";
|
||||
divRight.style.width = "10px";
|
||||
divRight.style.height = "300%";
|
||||
divRight.style.zIndex = "1000";
|
||||
divRight.style.top = "0";
|
||||
divRight.style.position = "absolute";
|
||||
divRight.style.left = Element.getDimensions(divLeft).width + Element.getDimensions(iframe).width - 4 + 'px';
|
||||
window.top.document.body.appendChild(divLeft);
|
||||
window.top.document.body.appendChild(divRight);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
*/
|
||||
ImageEditor.Crop = {
|
||||
|
||||
initialize: function() {
|
||||
|
|
@ -95,7 +95,7 @@ ImageEditor.Crop = {
|
|||
this.cropBox.style.width = Element.getDimensions(this.imageContainer).width + "px";
|
||||
width = Element.getDimensions(this.imageContainer).width;
|
||||
}
|
||||
this.placeGreyBox(width,height);
|
||||
this.placeGreyBox(width,height);
|
||||
},
|
||||
|
||||
getMousePos: function(event) {
|
||||
|
|
@ -105,7 +105,7 @@ ImageEditor.Crop = {
|
|||
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};
|
||||
return {x: x,y: y};
|
||||
},
|
||||
|
||||
doCrop: function() {
|
||||
|
|
@ -123,7 +123,7 @@ ImageEditor.Crop = {
|
|||
this.disable();
|
||||
} else {
|
||||
ImageEditor.statusMessageWrapper.statusMessage("Crop area too small","bad");
|
||||
return false;
|
||||
return false;
|
||||
}
|
||||
$('image').style.visibility = 'visible';//hack for IE for not selecting image during crop
|
||||
return true;
|
||||
|
|
@ -199,5 +199,5 @@ ImageEditor.Crop = {
|
|||
onImageLoadCallback: function() {
|
||||
ImageEditor.crop.setVisible(false);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
*/
|
||||
ImageEditor.DocumentBody = {
|
||||
initialize: function() {
|
||||
this.placeUI = ImageEditor.DocumentBody.placeUI.bind(this);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
*/
|
||||
ImageEditor.Environment = {
|
||||
initialize: function (imageFile) {
|
||||
ImageEditor.imageBox = new ImageEditor.ImageBox.initialize();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
*/
|
||||
ImageEditor.ImageBox = {
|
||||
|
||||
initialize: function() {
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ ImageEditor.ImageHistory = {
|
|||
};
|
||||
/**
|
||||
* @author Mateusz
|
||||
*/
|
||||
*/
|
||||
ImageEditor.ImageHistory = {
|
||||
|
||||
initialize: function() {
|
||||
|
|
@ -164,14 +164,14 @@ ImageEditor.ImageHistory = {
|
|||
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;
|
||||
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() {
|
||||
|
|
@ -183,7 +183,7 @@ ImageEditor.ImageHistory = {
|
|||
this.image.src = this.history[this.historyPointer].fileUrl;
|
||||
} else {
|
||||
ImageEditor.statusMessageWrapper.statusMessage("No more redo","bad");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
add: function(operation,url) {
|
||||
|
|
@ -202,16 +202,16 @@ ImageEditor.ImageHistory = {
|
|||
|
||||
addListeners: function() {
|
||||
this.undoListener = Event.observe('UndoButton','click',this.undo);
|
||||
this.redoListener = Event.observe('RedoButton','click',this.redo);
|
||||
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 true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
return false;
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
|
|
@ -226,7 +226,7 @@ ImageEditor.ImageHistory = {
|
|||
Event.stopObserving($('UndoButton'),'click', this.undo);
|
||||
Event.stopObserving($('RedoButton'),'click', this.redo);
|
||||
this.isEnabled = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
|
|
|
|||
|
|
@ -284,7 +284,7 @@ ImageEditor.Resizeable = {
|
|||
this.rightLowerClickBox,
|
||||
this.upperMiddleClickBox,
|
||||
this.lowerMiddleClickBox);
|
||||
this.removeDraging();
|
||||
this.removeDraging();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -5,23 +5,23 @@ ImageEditor = {};
|
|||
ImageEditor.Point = {
|
||||
initialize: function(x,y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
this.y = y;
|
||||
}
|
||||
}
|
||||
|
||||
ImageEditor.EventStack = {
|
||||
lastEventElement: null,
|
||||
getLastEventElement: function(){
|
||||
return ImageEditor.EventStack.lastEventElement;
|
||||
return ImageEditor.EventStack.lastEventElement;
|
||||
},
|
||||
|
||||
addEvent: function(event) {
|
||||
ImageEditor.EventStack.lastEventElement = Event.element(event);
|
||||
ImageEditor.EventStack.lastEventElement = Event.element(event);
|
||||
},
|
||||
|
||||
clearStack: function() {
|
||||
this.lastEventElement = null;
|
||||
}
|
||||
this.lastEventElement = null;
|
||||
}
|
||||
}
|
||||
|
||||
ImageEditor.Positioning = {
|
||||
|
|
@ -39,24 +39,24 @@ ImageEditor.Positioning = {
|
|||
},
|
||||
|
||||
getTop: function() {
|
||||
return Position.positionedOffset(this.element)[1];
|
||||
return Position.positionedOffset(this.element)[1];
|
||||
},
|
||||
|
||||
getLeft: function() {
|
||||
return parseInt(this.element.style.left);
|
||||
return parseInt(this.element.style.left);
|
||||
},
|
||||
|
||||
getWidth: function() {
|
||||
return Element.getDimensions(this.element).width;
|
||||
return Element.getDimensions(this.element).width;
|
||||
},
|
||||
|
||||
getHeight: function() {
|
||||
return Element.getDimensions(this.element).height;
|
||||
return Element.getDimensions(this.element).height;
|
||||
},
|
||||
|
||||
getParentLeft: function() {
|
||||
var parentLeft = Position.cumulativeOffset(Position.offsetParent(this.element))[0];
|
||||
return parentLeft;
|
||||
return parentLeft;
|
||||
},
|
||||
|
||||
getParentTop: function() {
|
||||
|
|
@ -65,11 +65,11 @@ ImageEditor.Positioning = {
|
|||
},
|
||||
|
||||
getParentHeight: function() {
|
||||
return Element.getDimensions(Position.offsetParent(this.element)).height;
|
||||
return Element.getDimensions(Position.offsetParent(this.element)).height;
|
||||
},
|
||||
|
||||
getParentWidth: function() {
|
||||
return Element.getDimensions(Position.offsetParent(this.element)).width
|
||||
return Element.getDimensions(Position.offsetParent(this.element)).width
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,254 +1,254 @@
|
|||
/**
|
||||
* This class is used for upload in TinyMCE editor.
|
||||
* If one of methods is not commented look for comment in Upload.js.
|
||||
*/
|
||||
TinyMCEImageEnhancement = Class.create();
|
||||
TinyMCEImageEnhancement.prototype = {
|
||||
initialize: function() {
|
||||
this.filesUploaded = 0;
|
||||
this.processInProgress = false;
|
||||
Event.observe(window,'load',this.onWindowLoad.bind(this));
|
||||
},
|
||||
|
||||
addListeners: function() {
|
||||
$('Form_EditorToolbarImageForm_FolderID').value = "";
|
||||
Event.observe($('AddFolder'),'click',this.onAddFolder.bind(this));
|
||||
Event.observe($('FolderOk'),'click',this.onFolderOk.bind(this));
|
||||
Event.observe($('FolderCancel'),'click',this.onFolderCancel.bind(this));
|
||||
Event.observe($('UploadFiles'),'click',this.onUpload.bind(this));
|
||||
},
|
||||
|
||||
/**
|
||||
* Method creates HTML element, only reason for this method is DRY.
|
||||
*/
|
||||
|
||||
addElement: function(tag, className, parent, properties) {
|
||||
var e = document.createElement(tag);
|
||||
Element.addClassName(e,className);
|
||||
parent.appendChild(e);
|
||||
Object.extend(e,properties);
|
||||
return e;
|
||||
},
|
||||
|
||||
onUpload: function(event) {
|
||||
Event.stop(event);
|
||||
if(!this.processInProgress) {
|
||||
if(this.getParentID() != 'root') {
|
||||
this.upload.browse();
|
||||
} else {
|
||||
statusMessage("Please choose folder","bad");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when user clicks "add folder" anchor.
|
||||
*/
|
||||
|
||||
onAddFolder: function(event) {
|
||||
Event.stop(event);
|
||||
Element.hide('AddFolder');
|
||||
Element.show('NewFolderName','FolderOk','FolderCancel');
|
||||
this.applyIE6Hack();
|
||||
},
|
||||
|
||||
/**
|
||||
* The user clicks the "ok" anchor link, the click event calls up
|
||||
* this function which creates a new AJAX request to add a new folder
|
||||
* using the addfolder function in AssetAdmin.php (admin/assets/addfolder).
|
||||
*/
|
||||
onFolderOk: function(event) {
|
||||
Event.stop(event);
|
||||
var folderName = $('NewFolderName').value;
|
||||
var options = {
|
||||
method: 'post',
|
||||
postBody: 'ParentID=' + this.getParentID() + '&ajax=1&returnID=1&Name=' + folderName + ($('SecurityID') ? '&SecurityID=' + $('SecurityID').value : ''),
|
||||
onSuccess: this.onFolderGetSuccess.bind(this),
|
||||
onFailure: function(transport) {
|
||||
errorMessage('Error: Folder not added', transport);
|
||||
}
|
||||
};
|
||||
|
||||
new Ajax.Request('admin/assets/addfolder', options);
|
||||
},
|
||||
|
||||
/**
|
||||
* If the "addFolderOk" function does a successful AJAX post, call this
|
||||
* function. Take the folder ID that was created in "addFolderOk"
|
||||
* via ajax and send data to modify that folder record.
|
||||
*/
|
||||
onFolderGetSuccess: function(transport) {
|
||||
var folderID = transport.responseText;
|
||||
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() < 10 ? '0' + date.getMonth() : date.getMonth();
|
||||
var day = date.getDay() < 10 ? '0' + date.getDay() : date.getDay();
|
||||
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
|
||||
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
|
||||
var seconds = date.getSeconds() < 10 == 1 ? '0' + date.getSeconds() : date.getSeconds();
|
||||
var currentDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
||||
|
||||
var folderName = $('NewFolderName').value;
|
||||
|
||||
this.folderID = folderID;
|
||||
|
||||
statusMessage('Creating new folder');
|
||||
$('TreeDropdownField_Form_EditorToolbarImageForm_FolderID').itemTree = null;
|
||||
$('TreeDropdownField_Form_EditorToolbarImageForm_FolderID').setValue(this.folderID);
|
||||
$('NewFolderName').value = '';
|
||||
Element.show('AddFolder');
|
||||
Element.hide('NewFolderName','FolderOk','FolderCancel');
|
||||
this.removeIE6Hack();
|
||||
},
|
||||
|
||||
/**
|
||||
* If user doesn't want to add folder return to default UI.
|
||||
*/
|
||||
|
||||
onFolderCancel: function(event) {
|
||||
$('NewFolderName').value = '';
|
||||
Element.show('AddFolder');
|
||||
Element.hide('NewFolderName','FolderOk','FolderCancel');
|
||||
this.removeIE6Hack();
|
||||
Event.stop(event);
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Called on window.onload
|
||||
*/
|
||||
|
||||
onWindowLoad: function() {
|
||||
// Due to a bug in the flash plugin on Linux and Mac,
|
||||
//we need at least version 9.0.64 to use SWFUpload
|
||||
// see http://open.silverstripe.com/ticket/3023
|
||||
pv = getFlashPlayerVersion();
|
||||
if(pv.major < 9 || pv.major > 9 || (pv.major == 9 && pv.minor == 0 && pv.rev < 64)) {
|
||||
if($('AddFolderGroup')) $('AddFolderGroup').style.display = 'none';
|
||||
if($('PipeSeparator')) $('PipeSeparator').style.display = 'none';
|
||||
if($('UploadGroup')) $('UploadGroup').style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
if($('FolderID') != null) {
|
||||
if($('SecurityID')) var securityid=$('SecurityID').value;
|
||||
else var securityid=null;
|
||||
this.upload = new Upload(
|
||||
{
|
||||
fileTypes : '*.jpeg;*.jpg;*.jpe;*.png;*.gif;',
|
||||
fileTypesDescription : 'Image files',
|
||||
fileUploadLimit : '100',
|
||||
securityID : securityid,
|
||||
beginUploadOnQueue : true,
|
||||
buildUI : this.addListeners.bind(this),
|
||||
fileQueued : this.uploadFileQueuedCallback.bind(this),
|
||||
fileComplete : this.uploadFileCompleteCallback.bind(this),
|
||||
queueComplete : this.uploadQueueCompleteCallback.bind(this)
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
uploadFileQueuedCallback: function(file,queueLength) {
|
||||
this.processInProgress = true;
|
||||
this.upload.setFolderID(this.getParentID());
|
||||
$('UploadFiles').innerHTML = "Uploading ... 1/" + this.upload.getFilesToUpload();
|
||||
this.upload.startUpload();
|
||||
},
|
||||
|
||||
uploadFileCompleteCallback: function(file,serverData) {
|
||||
Element.addClassName($('UploadFiles'),'link');//Safari hack
|
||||
$('UploadFiles').innerHTML = 'Uploading ... ' + this.upload.getFilesUploaded() + "/" + this.upload.getFilesToUpload();
|
||||
},
|
||||
|
||||
uploadQueueCompleteCallback: function() {
|
||||
this.filesUploaded = this.upload.getFilesUploaded();
|
||||
$('UploadFiles').innerHTML = "upload";
|
||||
statusMessage('Uploaded ' + this.upload.getFilesUploaded() + ' files','good');
|
||||
if(this.getParentID() != 'root') {
|
||||
$('Image').ajaxGetFiles(this.getParentID(), null, this.insertImages.bind(this));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Iterates over all uploaded images and add them to TinyMCE editor
|
||||
*
|
||||
* @param transport object
|
||||
*/
|
||||
insertImages: function(transport) {
|
||||
//HACK FOR STRANGE ERROR OCCURING UNDER SAFARI
|
||||
if(transport.responseText == '') {
|
||||
$('Image').ajaxGetFiles(this.getParentID(), null, this.insertImages.bind(this));
|
||||
return;
|
||||
}
|
||||
//END OF HACK
|
||||
|
||||
$('Image').reapplyBehaviour();
|
||||
|
||||
this.addToTinyMCE = this.addToTinyMCE.bind(this);
|
||||
|
||||
this.processInProgress = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds particular image to TinyMCE. Most of code has been copied from tiny_mce_improvements.js / ImageThumbnail.onclick
|
||||
* Sorry for not following DRY, I didn't want to break smth in tiny_mce_improvements.
|
||||
*
|
||||
* @param target object
|
||||
*/
|
||||
|
||||
addToTinyMCE: function(target) {
|
||||
var formObj = $('Form_EditorToolbarImageForm');
|
||||
var altText = formObj.elements.AltText.value;
|
||||
var cssClass = formObj.elements.CSSClass.value;
|
||||
var baseURL = document.getElementsByTagName('base')[0].href;
|
||||
var relativeHref = target.href.substr(baseURL.length)
|
||||
if(!tinyMCE.selectedInstance) tinyMCE.selectedInstance = Toolbar.instance().editor;
|
||||
if(tinyMCE.selectedInstance.contentWindow.focus) tinyMCE.selectedInstance.contentWindow.focus();
|
||||
// Extract dest width and dest height from the class name
|
||||
var destWidth = null;
|
||||
var destHeight = null;
|
||||
try {
|
||||
var imgTag = target.getElementsByTagName('img')[0];
|
||||
destWidth = imgTag.className.match(/destwidth=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
|
||||
destHeight = imgTag.className.match(/destheight=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
|
||||
} catch(er) {
|
||||
}
|
||||
TinyMCE_AdvancedTheme._insertImage(relativeHref, altText, 0, '', '', destWidth, destHeight, '', '', cssClass);
|
||||
},
|
||||
|
||||
/**
|
||||
* Under IE6 when we click on "add folder" anchor, rest of anchors loose their correct position
|
||||
*
|
||||
*/
|
||||
|
||||
applyIE6Hack: function() {
|
||||
if(/msie/i.test(navigator.userAgent)) {
|
||||
elements = [$('FolderOk'),$('FolderCancel'),$('UploadFiles')];
|
||||
$A(elements).each(function(element) {
|
||||
element.style.position = "relative";
|
||||
element.style.top = "-3px";
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
removeIE6Hack: function() {
|
||||
if(/msie/i.test(navigator.userAgent)) {
|
||||
elements = [$('FolderOk'),$('FolderCancel'),$('UploadFiles')];
|
||||
$A(elements).each(function(element) {
|
||||
element.style.position = "";
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns id of upload folder.
|
||||
*
|
||||
*/
|
||||
|
||||
getParentID: function() {
|
||||
return $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value;
|
||||
}
|
||||
}
|
||||
tinyMCEImageEnhancement = new TinyMCEImageEnhancement();
|
||||
/**
|
||||
* This class is used for upload in TinyMCE editor.
|
||||
* If one of methods is not commented look for comment in Upload.js.
|
||||
*/
|
||||
TinyMCEImageEnhancement = Class.create();
|
||||
TinyMCEImageEnhancement.prototype = {
|
||||
initialize: function() {
|
||||
this.filesUploaded = 0;
|
||||
this.processInProgress = false;
|
||||
Event.observe(window,'load',this.onWindowLoad.bind(this));
|
||||
},
|
||||
|
||||
addListeners: function() {
|
||||
$('Form_EditorToolbarImageForm_FolderID').value = "";
|
||||
Event.observe($('AddFolder'),'click',this.onAddFolder.bind(this));
|
||||
Event.observe($('FolderOk'),'click',this.onFolderOk.bind(this));
|
||||
Event.observe($('FolderCancel'),'click',this.onFolderCancel.bind(this));
|
||||
Event.observe($('UploadFiles'),'click',this.onUpload.bind(this));
|
||||
},
|
||||
|
||||
/**
|
||||
* Method creates HTML element, only reason for this method is DRY.
|
||||
*/
|
||||
|
||||
addElement: function(tag, className, parent, properties) {
|
||||
var e = document.createElement(tag);
|
||||
Element.addClassName(e,className);
|
||||
parent.appendChild(e);
|
||||
Object.extend(e,properties);
|
||||
return e;
|
||||
},
|
||||
|
||||
onUpload: function(event) {
|
||||
Event.stop(event);
|
||||
if(!this.processInProgress) {
|
||||
if(this.getParentID() != 'root') {
|
||||
this.upload.browse();
|
||||
} else {
|
||||
statusMessage("Please choose folder","bad");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when user clicks "add folder" anchor.
|
||||
*/
|
||||
|
||||
onAddFolder: function(event) {
|
||||
Event.stop(event);
|
||||
Element.hide('AddFolder');
|
||||
Element.show('NewFolderName','FolderOk','FolderCancel');
|
||||
this.applyIE6Hack();
|
||||
},
|
||||
|
||||
/**
|
||||
* The user clicks the "ok" anchor link, the click event calls up
|
||||
* this function which creates a new AJAX request to add a new folder
|
||||
* using the addfolder function in AssetAdmin.php (admin/assets/addfolder).
|
||||
*/
|
||||
onFolderOk: function(event) {
|
||||
Event.stop(event);
|
||||
var folderName = $('NewFolderName').value;
|
||||
var options = {
|
||||
method: 'post',
|
||||
postBody: 'ParentID=' + this.getParentID() + '&ajax=1&returnID=1&Name=' + folderName + ($('SecurityID') ? '&SecurityID=' + $('SecurityID').value : ''),
|
||||
onSuccess: this.onFolderGetSuccess.bind(this),
|
||||
onFailure: function(transport) {
|
||||
errorMessage('Error: Folder not added', transport);
|
||||
}
|
||||
};
|
||||
|
||||
new Ajax.Request('admin/assets/addfolder', options);
|
||||
},
|
||||
|
||||
/**
|
||||
* If the "addFolderOk" function does a successful AJAX post, call this
|
||||
* function. Take the folder ID that was created in "addFolderOk"
|
||||
* via ajax and send data to modify that folder record.
|
||||
*/
|
||||
onFolderGetSuccess: function(transport) {
|
||||
var folderID = transport.responseText;
|
||||
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() < 10 ? '0' + date.getMonth() : date.getMonth();
|
||||
var day = date.getDay() < 10 ? '0' + date.getDay() : date.getDay();
|
||||
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
|
||||
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
|
||||
var seconds = date.getSeconds() < 10 == 1 ? '0' + date.getSeconds() : date.getSeconds();
|
||||
var currentDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
||||
|
||||
var folderName = $('NewFolderName').value;
|
||||
|
||||
this.folderID = folderID;
|
||||
|
||||
statusMessage('Creating new folder');
|
||||
$('TreeDropdownField_Form_EditorToolbarImageForm_FolderID').itemTree = null;
|
||||
$('TreeDropdownField_Form_EditorToolbarImageForm_FolderID').setValue(this.folderID);
|
||||
$('NewFolderName').value = '';
|
||||
Element.show('AddFolder');
|
||||
Element.hide('NewFolderName','FolderOk','FolderCancel');
|
||||
this.removeIE6Hack();
|
||||
},
|
||||
|
||||
/**
|
||||
* If user doesn't want to add folder return to default UI.
|
||||
*/
|
||||
|
||||
onFolderCancel: function(event) {
|
||||
$('NewFolderName').value = '';
|
||||
Element.show('AddFolder');
|
||||
Element.hide('NewFolderName','FolderOk','FolderCancel');
|
||||
this.removeIE6Hack();
|
||||
Event.stop(event);
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Called on window.onload
|
||||
*/
|
||||
|
||||
onWindowLoad: function() {
|
||||
// Due to a bug in the flash plugin on Linux and Mac,
|
||||
//we need at least version 9.0.64 to use SWFUpload
|
||||
// see http://open.silverstripe.com/ticket/3023
|
||||
pv = getFlashPlayerVersion();
|
||||
if(pv.major < 9 || pv.major > 9 || (pv.major == 9 && pv.minor == 0 && pv.rev < 64)) {
|
||||
if($('AddFolderGroup')) $('AddFolderGroup').style.display = 'none';
|
||||
if($('PipeSeparator')) $('PipeSeparator').style.display = 'none';
|
||||
if($('UploadGroup')) $('UploadGroup').style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
if($('FolderID') != null) {
|
||||
if($('SecurityID')) var securityid=$('SecurityID').value;
|
||||
else var securityid=null;
|
||||
this.upload = new Upload(
|
||||
{
|
||||
fileTypes : '*.jpeg;*.jpg;*.jpe;*.png;*.gif;',
|
||||
fileTypesDescription : 'Image files',
|
||||
fileUploadLimit : '100',
|
||||
securityID : securityid,
|
||||
beginUploadOnQueue : true,
|
||||
buildUI : this.addListeners.bind(this),
|
||||
fileQueued : this.uploadFileQueuedCallback.bind(this),
|
||||
fileComplete : this.uploadFileCompleteCallback.bind(this),
|
||||
queueComplete : this.uploadQueueCompleteCallback.bind(this)
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
uploadFileQueuedCallback: function(file,queueLength) {
|
||||
this.processInProgress = true;
|
||||
this.upload.setFolderID(this.getParentID());
|
||||
$('UploadFiles').innerHTML = "Uploading ... 1/" + this.upload.getFilesToUpload();
|
||||
this.upload.startUpload();
|
||||
},
|
||||
|
||||
uploadFileCompleteCallback: function(file,serverData) {
|
||||
Element.addClassName($('UploadFiles'),'link');//Safari hack
|
||||
$('UploadFiles').innerHTML = 'Uploading ... ' + this.upload.getFilesUploaded() + "/" + this.upload.getFilesToUpload();
|
||||
},
|
||||
|
||||
uploadQueueCompleteCallback: function() {
|
||||
this.filesUploaded = this.upload.getFilesUploaded();
|
||||
$('UploadFiles').innerHTML = "upload";
|
||||
statusMessage('Uploaded ' + this.upload.getFilesUploaded() + ' files','good');
|
||||
if(this.getParentID() != 'root') {
|
||||
$('Image').ajaxGetFiles(this.getParentID(), null, this.insertImages.bind(this));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Iterates over all uploaded images and add them to TinyMCE editor
|
||||
*
|
||||
* @param transport object
|
||||
*/
|
||||
insertImages: function(transport) {
|
||||
//HACK FOR STRANGE ERROR OCCURING UNDER SAFARI
|
||||
if(transport.responseText == '') {
|
||||
$('Image').ajaxGetFiles(this.getParentID(), null, this.insertImages.bind(this));
|
||||
return;
|
||||
}
|
||||
//END OF HACK
|
||||
|
||||
$('Image').reapplyBehaviour();
|
||||
|
||||
this.addToTinyMCE = this.addToTinyMCE.bind(this);
|
||||
|
||||
this.processInProgress = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds particular image to TinyMCE. Most of code has been copied from tiny_mce_improvements.js / ImageThumbnail.onclick
|
||||
* Sorry for not following DRY, I didn't want to break smth in tiny_mce_improvements.
|
||||
*
|
||||
* @param target object
|
||||
*/
|
||||
|
||||
addToTinyMCE: function(target) {
|
||||
var formObj = $('Form_EditorToolbarImageForm');
|
||||
var altText = formObj.elements.AltText.value;
|
||||
var cssClass = formObj.elements.CSSClass.value;
|
||||
var baseURL = document.getElementsByTagName('base')[0].href;
|
||||
var relativeHref = target.href.substr(baseURL.length)
|
||||
if(!tinyMCE.selectedInstance) tinyMCE.selectedInstance = Toolbar.instance().editor;
|
||||
if(tinyMCE.selectedInstance.contentWindow.focus) tinyMCE.selectedInstance.contentWindow.focus();
|
||||
// Extract dest width and dest height from the class name
|
||||
var destWidth = null;
|
||||
var destHeight = null;
|
||||
try {
|
||||
var imgTag = target.getElementsByTagName('img')[0];
|
||||
destWidth = imgTag.className.match(/destwidth=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
|
||||
destHeight = imgTag.className.match(/destheight=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
|
||||
} catch(er) {
|
||||
}
|
||||
TinyMCE_AdvancedTheme._insertImage(relativeHref, altText, 0, '', '', destWidth, destHeight, '', '', cssClass);
|
||||
},
|
||||
|
||||
/**
|
||||
* Under IE6 when we click on "add folder" anchor, rest of anchors loose their correct position
|
||||
*
|
||||
*/
|
||||
|
||||
applyIE6Hack: function() {
|
||||
if(/msie/i.test(navigator.userAgent)) {
|
||||
elements = [$('FolderOk'),$('FolderCancel'),$('UploadFiles')];
|
||||
$A(elements).each(function(element) {
|
||||
element.style.position = "relative";
|
||||
element.style.top = "-3px";
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
removeIE6Hack: function() {
|
||||
if(/msie/i.test(navigator.userAgent)) {
|
||||
elements = [$('FolderOk'),$('FolderCancel'),$('UploadFiles')];
|
||||
$A(elements).each(function(element) {
|
||||
element.style.position = "";
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns id of upload folder.
|
||||
*
|
||||
*/
|
||||
|
||||
getParentID: function() {
|
||||
return $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value;
|
||||
}
|
||||
}
|
||||
tinyMCEImageEnhancement = new TinyMCEImageEnhancement();
|
||||
|
|
|
|||
|
|
@ -1,256 +1,256 @@
|
|||
/*
|
||||
This class is wrapper for SWFUpload class.
|
||||
If you want use SWFUpload, please use this class becuase it will take care of configuration
|
||||
error handling and other things.
|
||||
|
||||
*/
|
||||
|
||||
Upload = Class.create();
|
||||
Upload.prototype = {
|
||||
|
||||
/**
|
||||
* Sets configuration data provided from user if smth is missing sets default value.
|
||||
*
|
||||
* @param params object contains all configuration data for upload.
|
||||
*/
|
||||
initialize: function(params) {
|
||||
this.filesUploaded = 0;
|
||||
this.filesToUpload = 0;
|
||||
this.folderID = 'root';
|
||||
this.uploadInProgress = false;
|
||||
this.uploadMessage = '';
|
||||
if(typeof params.fileSizeLimit != 'undefined') this.setFileSizeLimit = params.fileSizeLimit; else this.fileSizeLimit = '30720';
|
||||
if(typeof params.fileTypes != 'undefined') this.fileTypes = params.fileTypes; else this.fileTypes = '*.*';
|
||||
if(typeof params.fileTypesDescription != 'undefined') this.fileTypesDescription = params.fileTypesDescription; else this.fileTypesDescription = 'All Files';
|
||||
if(typeof params.fileUploadLimit != 'undefined') this.fileUploadLimit = params.fileUploadLimit; else this.fileUploadLimit = '6';
|
||||
if(typeof params.beginUploadOnQueue != 'undefined') this.beginUploadOnQueue = params.beginUploadOnQueue; else this.beginUploadOnQueue = false;
|
||||
if(typeof params.fileQueued != 'undefined') this.fileQueued = params.fileQueued;
|
||||
if(typeof params.fileProgress != 'undefined') this.fileProgress = params.fileProgress; else this.fileProgress = Prototype.emptyFunction;
|
||||
if(typeof params.fileCancelled != 'undefined') this.fileCancelled = params.fileCancelled;
|
||||
if(typeof params.fileComplete != 'undefined') this.fileComplete = params.fileComplete ;
|
||||
if(typeof params.queueComplete != 'undefined') this.queueComplete = params.queueComplete;
|
||||
if(typeof params.buildUI != 'undefined') this.customBuildUI = params.buildUI;
|
||||
if(typeof params.securityID != 'undefined') this.securityID = params.securityID;
|
||||
this.onLoad();
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates SWFUpload object for uploading files.
|
||||
*
|
||||
*/
|
||||
onLoad: function() {
|
||||
path = this.getBasePath();
|
||||
sessId = this.getSessionId();//Because flash doesn't send proper cookies, we need to set session id in URL.
|
||||
this.swfu = new SWFUpload({
|
||||
upload_url: path + 'admin/assets/UploadForm?SecurityID=' + this.securityID + '&PHPSESSID=' + sessId, // Relative to the SWF file
|
||||
file_post_name: 'Files',
|
||||
file_size_limit : this.fileSizeLimit,
|
||||
file_types : this.fileTypes,
|
||||
file_types_description : this.fileTypesDescription,
|
||||
file_upload_limit : this.fileUploadLimit,
|
||||
begin_upload_on_queue : this.beginUploadOnQueue,
|
||||
use_server_data_event : true,
|
||||
validate_files: false,
|
||||
|
||||
file_queued_handler : this.uploadFileQueuedCallback.bind(this),
|
||||
upload_success_handler : this.uploadFileCompleteCallback.bind(this),
|
||||
upload_progress_handler: this.uploadFileProgressCallback.bind(this),
|
||||
error_handler : this.uploadErrorCallback.bind(this),
|
||||
file_validation_handler : Prototype.emptyFunction,
|
||||
file_cancelled_handler: Prototype.emptyFunction,
|
||||
|
||||
flash_url : 'jsparty/SWFUpload/swfupload_f9.swf', // Relative to this file
|
||||
swfupload_loaded_handler: this.buildUI.bind(this),
|
||||
debug: false
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Retrieves base path from URL.
|
||||
* TODO: Use base tag.
|
||||
*/
|
||||
|
||||
getBasePath: function() {
|
||||
var path = 'http://' + window.location.host + window.location.pathname;
|
||||
|
||||
if(path.match(/^(.*\/)admin/i)) return RegExp.$1;
|
||||
else return path;
|
||||
},
|
||||
|
||||
/**
|
||||
* Retrieves sessionId from cookie.
|
||||
*
|
||||
*/
|
||||
|
||||
getSessionId: function() {
|
||||
var start = document.cookie.indexOf('PHPSESSID')+10;
|
||||
var end = document.cookie.indexOf(';',start);
|
||||
if(end == -1) end = document.cookie.length;
|
||||
return document.cookie.substring(start,end);
|
||||
},
|
||||
|
||||
/**
|
||||
* Calls method defined by user, method should create user interface.
|
||||
*
|
||||
*/
|
||||
|
||||
buildUI: function() {
|
||||
this.customBuildUI();
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when new file is added to the queue
|
||||
*
|
||||
* @param file object
|
||||
* @param queueLength int
|
||||
*/
|
||||
|
||||
uploadFileQueuedCallback: function(file,queueLength) {
|
||||
this.filesToUpload++;
|
||||
this.fileQueued(file, queueLength);
|
||||
this.addFileParam(file);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when uploading of particular file has finished
|
||||
*
|
||||
* @param file object
|
||||
* @param servedData string
|
||||
*/
|
||||
uploadFileCompleteCallback: function(file,serverData) {
|
||||
this.filesUploaded++;
|
||||
if(serverData) {
|
||||
var toEval = serverData.substr(serverData.indexOf('<script'));
|
||||
toEval = toEval.replace('<script type="text/javascript">','');
|
||||
toEval = toEval.replace('</script>','');
|
||||
this.uploadMessage = toEval;
|
||||
}
|
||||
|
||||
this.fileComplete(file, serverData);
|
||||
|
||||
// Run the next file in the queue, if there is one
|
||||
if(this.swfu.getStats().files_queued > 0) this.startUpload();
|
||||
// Otherwise indicate that the queue is finished
|
||||
else {
|
||||
this.queueComplete();
|
||||
this.uploadInProgress = false;
|
||||
this.filesUploaded = 0;
|
||||
this.filesToUpload = 0;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called during uploading file.
|
||||
*
|
||||
* @param file object
|
||||
* @param bytes_complete int
|
||||
*/
|
||||
|
||||
uploadFileProgressCallback: function(file, bytes_complete) {
|
||||
this.uploadInProgress = true;
|
||||
this.fileProgress(file, bytes_complete);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called on error.
|
||||
* @param error_code int
|
||||
* @param file object
|
||||
* @param message string
|
||||
*/
|
||||
|
||||
uploadErrorCallback: function(error_code, file, message) {
|
||||
this.swfu.cancelQueue();
|
||||
switch(error_code) {
|
||||
case SWFUpload.ERROR_CODE_HTTP_ERROR:
|
||||
alert('You have encountered an error. File hasn\'t been uploaded. Please hit the "Refresh" button in your web browser. Error Code: HTTP Error, File name: ' + file.name + ', Message: ' + msg);
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_IO_ERROR:
|
||||
alert('You have encountered an error. File hasn\'t been uploaded. Please hit the "Refresh" button in your web browser. Error Code: IO Error, File name: ' + file.name + ', Message: ' + msg);
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_SECURITY_ERROR:
|
||||
alert('You have encountered an error. File hasn\'t been uploaded. Please hit the "Refresh" button in your web browser. Error Code: Security Error, File name: ' + file.name + ', Message: ' + msg);
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_FILE_EXCEEDS_SIZE_LIMIT:
|
||||
alert('Files cannot be bigger than ' + this.fileSizeLimit/1024 + ' MB.');
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_ZERO_BYTE_FILE:
|
||||
alert('Files cannot be empty');
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_QUEUE_LIMIT_EXCEEDED:
|
||||
alert('You can only have six files in queue');
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_UPLOAD_FAILED:
|
||||
alert('You have encountered an error. File hasn\'t has been uploaded. Please hit the "Refresh" button in your web browser');
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_SPECIFIED_FILE_NOT_FOUND:
|
||||
alert('You have encountered an error. File hasn\'t has been uploaded. Please hit the "Refresh" button in your web browser');
|
||||
break;
|
||||
default:
|
||||
alert('You have encountered an error. File hasn\'t has been uploaded. Please hit the "Refresh" button in your web browser');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Because we are on top of standard upload we need to add some POST vars that
|
||||
* normally are being sent as part of form.
|
||||
*
|
||||
* @param file object
|
||||
*/
|
||||
|
||||
addFileParam: function(file) {
|
||||
this.swfu.addFileParam(file.id,'ID',this.folderID);
|
||||
this.swfu.addFileParam(file.id,'action_doUpload','1');
|
||||
this.swfu.addFileParam(file.id,'Files',file.name);
|
||||
this.swfu.addFileParam(file.id,'MAX_FILE_SIZE','31457280');
|
||||
},
|
||||
|
||||
/**
|
||||
* Starts file explorer.
|
||||
*
|
||||
*/
|
||||
|
||||
browse: function() {
|
||||
this.swfu.selectFiles();
|
||||
},
|
||||
|
||||
/**
|
||||
* Starts upload
|
||||
*
|
||||
*/
|
||||
|
||||
startUpload: function() {
|
||||
this.swfu.startUpload();
|
||||
},
|
||||
|
||||
/**
|
||||
* Cancels uploading of file.
|
||||
*/
|
||||
|
||||
cancelUpload: function(fileId) {
|
||||
this.filesToUpload--;
|
||||
this.swfu.cancelUpload(fileId);
|
||||
},
|
||||
|
||||
/*
|
||||
* Getters and setters.
|
||||
*/
|
||||
setFolderID: function(id) {
|
||||
this.folderID = id;
|
||||
},
|
||||
|
||||
getFilesUploaded: function() {
|
||||
return this.filesUploaded;
|
||||
},
|
||||
|
||||
getFilesToUpload: function() {
|
||||
return this.filesToUpload;
|
||||
},
|
||||
|
||||
getUploadMessage: function() {
|
||||
return this.uploadMessage;
|
||||
},
|
||||
|
||||
isUploadInProgress: function() {
|
||||
return this.uploadInProgress;
|
||||
}
|
||||
}
|
||||
/*
|
||||
This class is wrapper for SWFUpload class.
|
||||
If you want use SWFUpload, please use this class becuase it will take care of configuration
|
||||
error handling and other things.
|
||||
|
||||
*/
|
||||
|
||||
Upload = Class.create();
|
||||
Upload.prototype = {
|
||||
|
||||
/**
|
||||
* Sets configuration data provided from user if smth is missing sets default value.
|
||||
*
|
||||
* @param params object contains all configuration data for upload.
|
||||
*/
|
||||
initialize: function(params) {
|
||||
this.filesUploaded = 0;
|
||||
this.filesToUpload = 0;
|
||||
this.folderID = 'root';
|
||||
this.uploadInProgress = false;
|
||||
this.uploadMessage = '';
|
||||
if(typeof params.fileSizeLimit != 'undefined') this.setFileSizeLimit = params.fileSizeLimit; else this.fileSizeLimit = '30720';
|
||||
if(typeof params.fileTypes != 'undefined') this.fileTypes = params.fileTypes; else this.fileTypes = '*.*';
|
||||
if(typeof params.fileTypesDescription != 'undefined') this.fileTypesDescription = params.fileTypesDescription; else this.fileTypesDescription = 'All Files';
|
||||
if(typeof params.fileUploadLimit != 'undefined') this.fileUploadLimit = params.fileUploadLimit; else this.fileUploadLimit = '6';
|
||||
if(typeof params.beginUploadOnQueue != 'undefined') this.beginUploadOnQueue = params.beginUploadOnQueue; else this.beginUploadOnQueue = false;
|
||||
if(typeof params.fileQueued != 'undefined') this.fileQueued = params.fileQueued;
|
||||
if(typeof params.fileProgress != 'undefined') this.fileProgress = params.fileProgress; else this.fileProgress = Prototype.emptyFunction;
|
||||
if(typeof params.fileCancelled != 'undefined') this.fileCancelled = params.fileCancelled;
|
||||
if(typeof params.fileComplete != 'undefined') this.fileComplete = params.fileComplete ;
|
||||
if(typeof params.queueComplete != 'undefined') this.queueComplete = params.queueComplete;
|
||||
if(typeof params.buildUI != 'undefined') this.customBuildUI = params.buildUI;
|
||||
if(typeof params.securityID != 'undefined') this.securityID = params.securityID;
|
||||
this.onLoad();
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates SWFUpload object for uploading files.
|
||||
*
|
||||
*/
|
||||
onLoad: function() {
|
||||
path = this.getBasePath();
|
||||
sessId = this.getSessionId();//Because flash doesn't send proper cookies, we need to set session id in URL.
|
||||
this.swfu = new SWFUpload({
|
||||
upload_url: path + 'admin/assets/UploadForm?SecurityID=' + this.securityID + '&PHPSESSID=' + sessId, // Relative to the SWF file
|
||||
file_post_name: 'Files',
|
||||
file_size_limit : this.fileSizeLimit,
|
||||
file_types : this.fileTypes,
|
||||
file_types_description : this.fileTypesDescription,
|
||||
file_upload_limit : this.fileUploadLimit,
|
||||
begin_upload_on_queue : this.beginUploadOnQueue,
|
||||
use_server_data_event : true,
|
||||
validate_files: false,
|
||||
|
||||
file_queued_handler : this.uploadFileQueuedCallback.bind(this),
|
||||
upload_success_handler : this.uploadFileCompleteCallback.bind(this),
|
||||
upload_progress_handler: this.uploadFileProgressCallback.bind(this),
|
||||
error_handler : this.uploadErrorCallback.bind(this),
|
||||
file_validation_handler : Prototype.emptyFunction,
|
||||
file_cancelled_handler: Prototype.emptyFunction,
|
||||
|
||||
flash_url : 'jsparty/SWFUpload/swfupload_f9.swf', // Relative to this file
|
||||
swfupload_loaded_handler: this.buildUI.bind(this),
|
||||
debug: false
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Retrieves base path from URL.
|
||||
* TODO: Use base tag.
|
||||
*/
|
||||
|
||||
getBasePath: function() {
|
||||
var path = 'http://' + window.location.host + window.location.pathname;
|
||||
|
||||
if(path.match(/^(.*\/)admin/i)) return RegExp.$1;
|
||||
else return path;
|
||||
},
|
||||
|
||||
/**
|
||||
* Retrieves sessionId from cookie.
|
||||
*
|
||||
*/
|
||||
|
||||
getSessionId: function() {
|
||||
var start = document.cookie.indexOf('PHPSESSID')+10;
|
||||
var end = document.cookie.indexOf(';',start);
|
||||
if(end == -1) end = document.cookie.length;
|
||||
return document.cookie.substring(start,end);
|
||||
},
|
||||
|
||||
/**
|
||||
* Calls method defined by user, method should create user interface.
|
||||
*
|
||||
*/
|
||||
|
||||
buildUI: function() {
|
||||
this.customBuildUI();
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when new file is added to the queue
|
||||
*
|
||||
* @param file object
|
||||
* @param queueLength int
|
||||
*/
|
||||
|
||||
uploadFileQueuedCallback: function(file,queueLength) {
|
||||
this.filesToUpload++;
|
||||
this.fileQueued(file, queueLength);
|
||||
this.addFileParam(file);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when uploading of particular file has finished
|
||||
*
|
||||
* @param file object
|
||||
* @param servedData string
|
||||
*/
|
||||
uploadFileCompleteCallback: function(file,serverData) {
|
||||
this.filesUploaded++;
|
||||
if(serverData) {
|
||||
var toEval = serverData.substr(serverData.indexOf('<script'));
|
||||
toEval = toEval.replace('<script type="text/javascript">','');
|
||||
toEval = toEval.replace('</script>','');
|
||||
this.uploadMessage = toEval;
|
||||
}
|
||||
|
||||
this.fileComplete(file, serverData);
|
||||
|
||||
// Run the next file in the queue, if there is one
|
||||
if(this.swfu.getStats().files_queued > 0) this.startUpload();
|
||||
// Otherwise indicate that the queue is finished
|
||||
else {
|
||||
this.queueComplete();
|
||||
this.uploadInProgress = false;
|
||||
this.filesUploaded = 0;
|
||||
this.filesToUpload = 0;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called during uploading file.
|
||||
*
|
||||
* @param file object
|
||||
* @param bytes_complete int
|
||||
*/
|
||||
|
||||
uploadFileProgressCallback: function(file, bytes_complete) {
|
||||
this.uploadInProgress = true;
|
||||
this.fileProgress(file, bytes_complete);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called on error.
|
||||
* @param error_code int
|
||||
* @param file object
|
||||
* @param message string
|
||||
*/
|
||||
|
||||
uploadErrorCallback: function(error_code, file, message) {
|
||||
this.swfu.cancelQueue();
|
||||
switch(error_code) {
|
||||
case SWFUpload.ERROR_CODE_HTTP_ERROR:
|
||||
alert('You have encountered an error. File hasn\'t been uploaded. Please hit the "Refresh" button in your web browser. Error Code: HTTP Error, File name: ' + file.name + ', Message: ' + msg);
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_IO_ERROR:
|
||||
alert('You have encountered an error. File hasn\'t been uploaded. Please hit the "Refresh" button in your web browser. Error Code: IO Error, File name: ' + file.name + ', Message: ' + msg);
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_SECURITY_ERROR:
|
||||
alert('You have encountered an error. File hasn\'t been uploaded. Please hit the "Refresh" button in your web browser. Error Code: Security Error, File name: ' + file.name + ', Message: ' + msg);
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_FILE_EXCEEDS_SIZE_LIMIT:
|
||||
alert('Files cannot be bigger than ' + this.fileSizeLimit/1024 + ' MB.');
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_ZERO_BYTE_FILE:
|
||||
alert('Files cannot be empty');
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_QUEUE_LIMIT_EXCEEDED:
|
||||
alert('You can only have six files in queue');
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_UPLOAD_FAILED:
|
||||
alert('You have encountered an error. File hasn\'t has been uploaded. Please hit the "Refresh" button in your web browser');
|
||||
break;
|
||||
case SWFUpload.ERROR_CODE_SPECIFIED_FILE_NOT_FOUND:
|
||||
alert('You have encountered an error. File hasn\'t has been uploaded. Please hit the "Refresh" button in your web browser');
|
||||
break;
|
||||
default:
|
||||
alert('You have encountered an error. File hasn\'t has been uploaded. Please hit the "Refresh" button in your web browser');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Because we are on top of standard upload we need to add some POST vars that
|
||||
* normally are being sent as part of form.
|
||||
*
|
||||
* @param file object
|
||||
*/
|
||||
|
||||
addFileParam: function(file) {
|
||||
this.swfu.addFileParam(file.id,'ID',this.folderID);
|
||||
this.swfu.addFileParam(file.id,'action_doUpload','1');
|
||||
this.swfu.addFileParam(file.id,'Files',file.name);
|
||||
this.swfu.addFileParam(file.id,'MAX_FILE_SIZE','31457280');
|
||||
},
|
||||
|
||||
/**
|
||||
* Starts file explorer.
|
||||
*
|
||||
*/
|
||||
|
||||
browse: function() {
|
||||
this.swfu.selectFiles();
|
||||
},
|
||||
|
||||
/**
|
||||
* Starts upload
|
||||
*
|
||||
*/
|
||||
|
||||
startUpload: function() {
|
||||
this.swfu.startUpload();
|
||||
},
|
||||
|
||||
/**
|
||||
* Cancels uploading of file.
|
||||
*/
|
||||
|
||||
cancelUpload: function(fileId) {
|
||||
this.filesToUpload--;
|
||||
this.swfu.cancelUpload(fileId);
|
||||
},
|
||||
|
||||
/*
|
||||
* Getters and setters.
|
||||
*/
|
||||
setFolderID: function(id) {
|
||||
this.folderID = id;
|
||||
},
|
||||
|
||||
getFilesUploaded: function() {
|
||||
return this.filesUploaded;
|
||||
},
|
||||
|
||||
getFilesToUpload: function() {
|
||||
return this.filesToUpload;
|
||||
},
|
||||
|
||||
getUploadMessage: function() {
|
||||
return this.uploadMessage;
|
||||
},
|
||||
|
||||
isUploadInProgress: function() {
|
||||
return this.uploadInProgress;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user