diff --git a/code/ImageEditor.php b/code/ImageEditor.php index 0c339341..b0cdd2ed 100644 --- a/code/ImageEditor.php +++ b/code/ImageEditor.php @@ -1,265 +1,265 @@ - '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'],'?')); - } -} - + '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'],'?')); + } +} + ?> \ No newline at end of file diff --git a/css/ImageEditor/ImageEditor.css b/css/ImageEditor/ImageEditor.css index ba0b3033..d46ebb88 100644 --- a/css/ImageEditor/ImageEditor.css +++ b/css/ImageEditor/ImageEditor.css @@ -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 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 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 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 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 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 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 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 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 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 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 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 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; } \ No newline at end of file diff --git a/css/TinyMCEImageEnhancement.css b/css/TinyMCEImageEnhancement.css index 18acead9..aafadef7 100644 --- a/css/TinyMCEImageEnhancement.css +++ b/css/TinyMCEImageEnhancement.css @@ -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; +} diff --git a/css/typography.css b/css/typography.css index 304a1f5c..f4937ade 100644 --- a/css/typography.css +++ b/css/typography.css @@ -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; +} diff --git a/javascript/ImageEditor/Activator.js b/javascript/ImageEditor/Activator.js index cb5fb52d..c52323e9 100644 --- a/javascript/ImageEditor/Activator.js +++ b/javascript/ImageEditor/Activator.js @@ -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); + } + } \ No newline at end of file diff --git a/javascript/ImageEditor/Crop.js b/javascript/ImageEditor/Crop.js index 846c8891..7dc2de76 100644 --- a/javascript/ImageEditor/Crop.js +++ b/javascript/ImageEditor/Crop.js @@ -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); } - + } \ No newline at end of file diff --git a/javascript/ImageEditor/DocumentBody.js b/javascript/ImageEditor/DocumentBody.js index 2ab37c9a..bcac0e09 100644 --- a/javascript/ImageEditor/DocumentBody.js +++ b/javascript/ImageEditor/DocumentBody.js @@ -1,6 +1,6 @@ /** * @author Mateusz - */ + */ ImageEditor.DocumentBody = { initialize: function() { this.placeUI = ImageEditor.DocumentBody.placeUI.bind(this); diff --git a/javascript/ImageEditor/Environment.js b/javascript/ImageEditor/Environment.js index fe45b751..75748188 100644 --- a/javascript/ImageEditor/Environment.js +++ b/javascript/ImageEditor/Environment.js @@ -1,6 +1,6 @@ /** * @author Mateusz - */ + */ ImageEditor.Environment = { initialize: function (imageFile) { ImageEditor.imageBox = new ImageEditor.ImageBox.initialize(); diff --git a/javascript/ImageEditor/ImageBox.js b/javascript/ImageEditor/ImageBox.js index 639be0ea..b9e421dc 100644 --- a/javascript/ImageEditor/ImageBox.js +++ b/javascript/ImageEditor/ImageBox.js @@ -1,6 +1,6 @@ /** * @author Mateusz - */ + */ ImageEditor.ImageBox = { initialize: function() { diff --git a/javascript/ImageEditor/ImageHistory.js b/javascript/ImageEditor/ImageHistory.js index cbe9b9e0..430d9270 100644 --- a/javascript/ImageEditor/ImageHistory.js +++ b/javascript/ImageEditor/ImageHistory.js @@ -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() { diff --git a/javascript/ImageEditor/Resizeable.js b/javascript/ImageEditor/Resizeable.js index 433a5d7d..875ca9df 100644 --- a/javascript/ImageEditor/Resizeable.js +++ b/javascript/ImageEditor/Resizeable.js @@ -284,7 +284,7 @@ ImageEditor.Resizeable = { this.rightLowerClickBox, this.upperMiddleClickBox, this.lowerMiddleClickBox); - this.removeDraging(); + this.removeDraging(); } }, diff --git a/javascript/ImageEditor/Utils.js b/javascript/ImageEditor/Utils.js index 2db412e0..7879a01d 100644 --- a/javascript/ImageEditor/Utils.js +++ b/javascript/ImageEditor/Utils.js @@ -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 } } diff --git a/javascript/TinyMCEImageEnhancement.js b/javascript/TinyMCEImageEnhancement.js index b1d1b470..ea6dc96f 100644 --- a/javascript/TinyMCEImageEnhancement.js +++ b/javascript/TinyMCEImageEnhancement.js @@ -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(); diff --git a/javascript/Upload.js b/javascript/Upload.js index 2b48eaa4..75300928 100644 --- a/javascript/Upload.js +++ b/javascript/Upload.js @@ -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('',''); - toEval = toEval.replace('',''); - 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('',''); + toEval = toEval.replace('',''); + 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; + } +}