diff --git a/code/AssetAdmin.php b/code/AssetAdmin.php index ed5ac894..fe2095bd 100755 --- a/code/AssetAdmin.php +++ b/code/AssetAdmin.php @@ -42,7 +42,7 @@ class AssetAdmin extends LeftAndMain { Requirements::javascript("cms/javascript/AssetAdmin_left.js"); Requirements::javascript("cms/javascript/AssetAdmin_right.js"); - Requirements::javascript("cms/javascript/Upload.js"); + Requirements::javascript("cms/javascript/CMSMain_upload.js"); Requirements::javascript("sapphire/javascript/Security_login.js"); Requirements::javascript("jsparty/SWFUpload/SWFUpload.js"); diff --git a/code/LeftAndMain.php b/code/LeftAndMain.php index 469d82fe..b8fb5fb2 100644 --- a/code/LeftAndMain.php +++ b/code/LeftAndMain.php @@ -80,6 +80,7 @@ abstract class LeftAndMain extends Controller { Requirements::css('cms/css/TinyMCEImageEnhancement.css'); Requirements::javascript("jsparty/SWFUpload/SWFUpload.js"); + Requirements::javascript("cms/javascript/Upload.js"); Requirements::javascript("sapphire/javascript/Security_login.js"); Requirements::javascript('cms/javascript/TinyMCEImageEnhancement.js'); diff --git a/javascript/CMSMain_upload.js b/javascript/CMSMain_upload.js new file mode 100644 index 00000000..57c8aabf --- /dev/null +++ b/javascript/CMSMain_upload.js @@ -0,0 +1,230 @@ +var Upload = { + initialize: function() { + iframe = window.top.document.getElementById('AssetAdmin_upload'); + Upload.fileUploaded = 0; + Upload.uploadMessage = ''; + Upload.onLoad(); + }, + + onLoad: function() { + path = 'http://' + window.location.host + window.location.pathname; + if(path[path.length-1] == '/') path = path.substring(0,path.length-1); + var start = document.cookie.indexOf('PHPSESSID')+10; + var end = document.cookie.indexOf(';',start); + if(end == -1) end = document.cookie.length; + sessId = document.cookie.substring(start,end); + swfu = new SWFUpload({ + upload_target_url: path + '/index/root?executeForm=UploadForm&PHPSESSID=' + sessId, // Relative to the SWF file + file_post_name: 'Files', + // Flash file settings + file_size_limit : '1024000', // 10 MB + file_types : '*.*', // or you could use something like: '*.doc;*.wpd;*.pdf', + file_types_description : 'All Files', + file_upload_limit : '6', + //file_queue_limit : '1', // this isn't needed because the upload_limit will automatically place a queue limit + begin_upload_on_queue : false, + use_server_data_event : true, + validate_files: false, + // Event handler settings + file_queued_handler : Upload.uploadFileQueuedCallback, + file_validation_handler : Prototype.emptyFunction, + file_progress_handler : Upload.uploadProgressCallback, + file_cancelled_handler : Upload.uploadFileCancelCallback, + file_complete_handler : Upload.uploadFileCompleteCallback, + queue_complete_handler : Upload.uploadQueueCompleteCallback, + error_handler : Upload.uploadErrorCallback, + // Flash Settings + flash_url : 'jsparty/SWFUpload/SWFUpload.swf', // Relative to this file + // UI settings + ui_function: Upload.extendForm, + ui_container_id : 'Form_EditForm', + degraded_container_id : 'Form_EditForm', + // Debug settings + debug: false + }); + }, + + extendForm: function() { + if(iframe.contentDocument == undefined) iframe.contentDocument = document.frames[0].document;//IE HACK + element = iframe.contentDocument.getElementById('Form_UploadForm'); + inputFile = iframe.contentDocument.getElementById('Form_UploadForm_Files-0'); + inputFileParent = inputFile.parentNode; + inputFileParent.removeChild(inputFile); + inputFile = iframe.contentDocument.createElement('input'); + inputFile.type = 'text'; + inputFile.id = 'Form_UploadForm_Files-0'; + inputFileParent.appendChild(inputFile); + inputButton = iframe.contentDocument.getElementById('Form_UploadForm_Files-1'); + if(inputButton != null) inputButton.parentNode.removeChild(inputButton); + inputButton = iframe.contentDocument.createElement('input'); + inputButton.type = 'button'; + inputButton.id = 'Form_UploadForm_Files-1'; + inputButton.value = ' Browse...'; + inputButton.style.width = '66px'; + inputButton.style.height = '19px'; + inputButton.style.position = 'relative'; + inputButton.style.top = '1px'; + inputButton.style.fontFamily = 'Arial'; + inputButton.style.fontSize = '1.06em'; + inputFileParent.appendChild(inputButton); + Event.observe(inputButton,'click',function() {swfu.browse();}); + Event.observe(iframe.contentDocument.getElementById('Form_UploadForm_action_upload'),'click',function(event) { + swfu.startUpload(); + Event.stop(event); + }); + }, + + uploadFileQueuedCallback: function(file,queueLength) { + iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false; + Upload.addFileParam(file); + var fileContainer = iframe.contentDocument.getElementById('Form_UploadForm_FilesList'); + if(fileContainer == null) { + fileContainer = iframe.contentDocument.createElement('div'); + fileContainer.id = 'Form_UploadForm_FilesList'; + iframe.contentDocument.getElementById('Form_UploadForm').appendChild(fileContainer); + } + + var fileToUpload = iframe.contentDocument.createElement('div'); + fileToUpload.id = 'Form_UploadForm_FilesList_' + file.id; + fileToUpload.style.marginBottom = '3px'; + fileContainer.appendChild(fileToUpload); + + var fileName = iframe.contentDocument.createElement('div'); + fileName.id = 'Form_UploadForm_FilesList_Name_' + file.id; + fileName.style.position = 'relative'; + fileName.style.top = '-4px'; + fileName.style.display = 'inline'; + fileName.style.padding = '2px'; + fileName.innerHTML = file.name; + fileName.style.height = Element.getDimensions(fileName).height + 1 + 'px';//IE hack + fileToUpload.appendChild(fileName); + + var fileProgress = iframe.contentDocument.createElement('div'); + fileProgress.id = 'Form_UploadForm_FilesList_Progress_' + file.id; + Position.clone(fileName,fileProgress); + fileProgress.style.backgroundColor = 'black'; + fileProgress.style.display = 'inline'; + fileProgress.style.position = 'absolute'; + fileProgress.style.left = '5px'; + fileProgress.style.width = '0px'; + fileProgress.finished = false; + switch(BrowserDetect.browser) { + case 'Explorer': + fileProgress.style.top = parseInt(fileProgress.style.top) + 6 + 'px'; + break; + case 'Safari': + fileProgress.style.top = parseInt(fileProgress.style.top) + 4 + 'px'; + break; + case 'Firefox': + fileProgress.style.top = parseInt(fileProgress.style.top) + 8 + 'px'; + break; + } + fileProgress.style.height = Element.getDimensions(fileName).height + 1 + 'px'; + fileToUpload.appendChild(fileProgress); + + var fileDelete = iframe.contentDocument.createElement('input'); + fileDelete.id = file.id; + fileDelete.type = 'button'; + fileDelete.value = 'Delete'; + Element.addClassName(fileDelete,'delete'); + fileToUpload.appendChild(fileDelete); + Event.observe(fileDelete,'click',Upload.uploadFileCancelCallback); + }, + + uploadProgressCallback: function(file,bytesLoaded) { + fileName = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Name_' + file.id); + fileName.style.border = 'solid 1px black'; + fileProgress = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id); + fileProgress.style.opacity = 0.3; + fileProgress.style.filter = 'alpha(opacity=30)'; + if(!fileProgress.cloned) { + Position.clone(fileName,fileProgress); + fileProgress.style.width = '0px'; + fileProgress.cloned = true; + } + fileProgress.style.width = (bytesLoaded / file.size) * Element.getDimensions(fileName).width - 1 + 'px'; + }, + + uploadFileCompleteCallback: function(file,serverData) { + Upload.fileUploaded++; + toEval = serverData.substr(serverData.indexOf('',''); + toEval = toEval.replace('',''); + Upload.uploadMessage = toEval; + iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id).finished = true; + }, + + uploadFileCancelCallback: function(event) { + element = Event.element(event); + fileId = element.id; + swfu.cancelUpload(fileId); + fileContainer = iframe.contentDocument.getElementById('Form_UploadForm_FilesList'); + elementToDelete = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_' + fileId); + elementToDelete.parentNode.removeChild(elementToDelete); + filesToUpload = fileContainer.childNodes.length; + if(filesToUpload > 0) { + iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false; + } else { + iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = true; + } + $A(fileContainer.childNodes).each( + function(item) { + $A(item.childNodes).each( + function(item) { + if(item.id.indexOf('Name') != -1) { + fileName = item; + } + if(item.id.indexOf('Progress') != -1) { + fileProgress = item; + } + }); + Position.clone(fileName,fileProgress); + if(fileProgress.finished == false) fileProgress.style.width = '0px'; + } + ); + }, + + uploadQueueCompleteCallback: function() { + eval(Upload.uploadMessage.replace('1',Upload.fileUploaded)); + }, + + uploadErrorCallback: function(error_code, file, message) { + 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'); + 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'); + 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'); + break; + case SWFUpload.ERROR_CODE_FILE_EXCEEDS_SIZE_LIMIT: + alert('Files cannot be bigger than 10MB.'); + 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'); + } + }, + + addFileParam: function(file) { + swfu.addFileParam(file.id,'ID',iframe.contentDocument.getElementById('Form_UploadForm_ID').value); + swfu.addFileParam(file.id,'action_doUpload','1'); + swfu.addFileParam(file.id,'Files',file.name); + swfu.addFileParam(file.id,'MAX_FILE_SIZE','1073741824'); + } +} +window.top.document.Upload = Upload; \ No newline at end of file diff --git a/javascript/TinyMCEImageEnhancement.js b/javascript/TinyMCEImageEnhancement.js index 54fd1a70..cd7c921c 100644 --- a/javascript/TinyMCEImageEnhancement.js +++ b/javascript/TinyMCEImageEnhancement.js @@ -1,92 +1,55 @@ TinyMCEImageEnhancement = Class.create(); TinyMCEImageEnhancement.prototype = { initialize: function() { - this.fileUploaded = 0; - this.filesToUpload = 0; + this.filesUploaed = 0; + this.processInProgress = false; Event.observe(window,'load',this.onWindowLoad.bind(this)); }, buildUI: function() { $('Form_EditorToolbarImageForm_FolderID').value = ""; - var divAddFolder = document.createElement('div'); - divAddFolder.id = "AddFolderGroup"; - Element.addClassName(divAddFolder,'group'); - - - var addFolder = document.createElement('a'); - addFolder.id = 'AddFolder'; - addFolder.href = '#'; - addFolder.innerHTML = 'add folder'; - Element.addClassName(addFolder,'link'); - divAddFolder.appendChild(addFolder); - - var newFolderName = document.createElement('input'); - newFolderName.id = 'NewFolderName'; - newFolderName.type = 'text'; - Element.addClassName(newFolderName,'addFolder'); - divAddFolder.appendChild(newFolderName); + divAddFolder = this.addElement('div','group',$('FolderID'),{'id': 'AddFolderGroup'}); + addFolder = this.addElement('a','link',divAddFolder,{'id': 'AddFolder','href' : '#','innerHTML': 'add folder'}); + newFolderName = this.addElement('input', 'addFolder',divAddFolder,{'id': 'NewFolderName','type' : 'text'}); Element.hide(newFolderName); - - var folderOk = document.createElement('a'); - folderOk.id = 'FolderOk'; - folderOk.href= '#'; - folderOk.innerHTML = 'ok'; - Element.addClassName(folderOk,'addFolder'); - Element.addClassName(folderOk,'link'); - divAddFolder.appendChild(folderOk); + var folderOk = this.addElement('a','link',divAddFolder,{'id': 'FolderOk','href' : '#','innerHTML': 'ok'}); Element.hide(folderOk); - - var folderCancel = document.createElement('a'); - folderCancel.id = 'FolderCancel'; - folderCancel.href = '#'; - folderCancel.innerHTML = 'cancel'; - Element.addClassName(folderCancel,'addFolder'); - Element.addClassName(folderCancel,'link'); - divAddFolder.appendChild(folderCancel); + Element.addClassName(folderOk,'addFolder'); + var folderCancel = this.addElement('a','link',divAddFolder,{'id': 'FolderCancel','href' : '#','innerHTML': 'cancel'}); Element.hide(folderCancel); + Element.addClassName(folderCancel,'addFolder'); - $('FolderID').appendChild(divAddFolder); - - var divUpload = document.createElement('div'); - divUpload.id = "UploadGroup"; - Element.addClassName(divUpload,'group'); - - var pipeSeparator = document.createElement('div'); - pipeSeparator.id = "PipeSeparator"; - pipeSeparator.innerHTML = " | "; + var divUpload = this.addElement('div','group',$('FolderID'),{'id': 'UploadrGroup'}); + var pipeSeparator = this.addElement('div','',divUpload,{'id' : 'PipeSeparator','innerHTML' : ' | '}); pipeSeparator.style.display = "inline"; - divUpload.appendChild(pipeSeparator); + var uploadFiles = this.addElement('a','link',divUpload,{'id' : 'UploadFiles','href' : '#','innerHTML' : 'upload'}); - var uploadFiles = document.createElement('a'); - uploadFiles.id = 'UploadFiles'; - uploadFiles.href = '#'; - uploadFiles.innerHTML = 'upload'; - Element.addClassName(uploadFiles,'link'); - divUpload.appendChild(uploadFiles); - - $('FolderID').appendChild(divUpload); - Event.observe(addFolder,'click',this.onAddFolder.bind(this)); Event.observe(folderOk,'click',this.onFolderOk.bind(this)); Event.observe(folderCancel,'click',this.onFolderCancel.bind(this)); - this.onUpload = this.onUpload.bind(this); - Event.observe($('UploadFiles'),'click',this.onUpload); - - + Event.observe($('UploadFiles'),'click',this.onUpload.bind(this)); }, + 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.uploadInProgress) { - var parentID = $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value; - if(parentID != 'root') { - swfu.browse(); - this.uploadInProgress = true; + + + if(!this.processInProgress) { + if(this.getParentID() != 'root') { + this.upload.browse(); } else { statusMessage("Please choose folder","bad"); } - } + } }, onAddFolder: function(event) { @@ -98,11 +61,10 @@ TinyMCEImageEnhancement.prototype = { onFolderOk: function(event) { Event.stop(event); - var parentID = $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value; var folderName = $('NewFolderName').value; var options = { method: 'post', - postBody: 'ParentID=' + parentID + '&ajax=1' , + postBody: 'ParentID=' + this.getParentID() + '&ajax=1' , onSuccess: this.onFolderGetSuccess.bind(this), onFailure: function(transport) { errorMessage('Error: Folder not added', transport); @@ -125,7 +87,6 @@ TinyMCEImageEnhancement.prototype = { 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 parentID = $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value; var folderName = $('NewFolderName').value; var options = { method: 'post', @@ -135,7 +96,7 @@ TinyMCEImageEnhancement.prototype = { errorMessage('Error: Folder not added', transport); } }; - new Ajax.Request('admin/assets/index/' + parentID + '?executeForm=EditForm', options); + new Ajax.Request('admin/assets/index/' + this.getParentID() + '?executeForm=EditForm', options); }, onFolderAddSuccess: function(transport) { @@ -159,134 +120,56 @@ TinyMCEImageEnhancement.prototype = { onWindowLoad: function() { if($('FolderID') != null) { - path = this.getBasePath(); - sessId = this.getSessionId(); - swfu = new SWFUpload({ - upload_target_url: path + '/assets/index/root?executeForm=UploadForm&PHPSESSID=' + sessId, // Relative to the SWF file - file_post_name: 'Files', - // Flash file settings - file_size_limit : '1024000', // 10 MB - file_types : '*.jpeg;*.jpg;*.jpe;*.png;*.gif;', // or you could use something like: '*.doc;*.wpd;*.pdf', - file_types_description : 'Image files', - file_upload_limit : '100', - //file_queue_limit : '1', // this isn't needed because the upload_limit will automatically place a queue limit - begin_upload_on_queue : true, - use_server_data_event : true, - validate_files: false, - // Event handler settings - file_queued_handler : this.uploadFileQueuedCallback.bind(this), - file_validation_handler : Prototype.emptyFunction, - file_progress_handler : this.uploadProgressCallback.bind(this), - file_cancelled_handler : Prototype.emptyFunction.bind(this), - file_complete_handler : this.uploadFileCompleteCallback.bind(this), - queue_complete_handler : this.uploadQueueCompleteCallback.bind(this), - error_handler : this.uploadErrorCallback.bind(this), - dialog_cancelled_handler: this.dialogCancelCallback.bind(this), - // Flash Settings - flash_url : 'jsparty/SWFUpload/SWFUpload.swf', // Relative to this file - // UI settings - ui_function: this.buildUI.bind(this), - ui_container_id : '', - degraded_container_id : '', - // Debug settings - debug: false - }); - } - }, - - dialogCancelCallback: function() { - this.uploadInProgress = false; - }, - - getBasePath: function() { - var path = 'http://' + window.location.host + window.location.pathname; - if(path[path.length-1] == '/') path = path.substring(0,path.length-1); - return path; - }, - - 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); + this.upload = new Upload( + { + 'fileTypes': '*.jpeg;*.jpg;*.jpe;*.png;*.gif;', + 'fileTypesDescription' : 'Image files', + 'fileUploadLimit' : '100', + 'beginUploadOnQueue' : true, + 'buildUI' : this.buildUI.bind(this), + 'fileQueued' : this.uploadFileQueuedCallback.bind(this), + 'fileComplete' : this.uploadFileCompleteCallback.bind(this), + 'queueComplete' : this.uploadQueueCompleteCallback.bind(this) + } + ); + } }, uploadFileQueuedCallback: function(file,queueLength) { - this.filesToUpload++; - this.addFileParam(file); - $('UploadFiles').innerHTML = "Uploading ... 1/" + this.filesToUpload; - }, - - uploadProgressCallback: function(file,bytesLoaded) { + this.processInProgress = true; + this.upload.setFolderID(this.getParentID()); + $('UploadFiles').innerHTML = "Uploading ... 1/" + this.upload.getFilesToUpload(); }, uploadFileCompleteCallback: function(file,serverData) { - this.fileUploaded++; - Element.addClassName($('UploadFiles'),'link'); - $('UploadFiles').innerHTML = 'Uploading ... ' + this.fileUploaded + "/" + this.filesToUpload; + 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.fileUploaded + ' files','good'); - var parentID = $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value; - if(parentID != 'root') { - $('Image').ajaxGetFiles(parentID,this.insertImages.bind(this)); + statusMessage('Uploaded ' + this.upload.getFilesUploaded() + ' files','good'); + if(this.getParentID() != 'root') { + $('Image').ajaxGetFiles(this.getParentID(),this.insertImages.bind(this)); } }, - uploadErrorCallback: function(error_code, file, message) { - 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'); - 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'); - 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'); - break; - case SWFUpload.ERROR_CODE_FILE_EXCEEDS_SIZE_LIMIT: - alert('Files cannot be bigger than 10MB.'); - 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'); + insertImages: function(transport) { + //HACK FOR STRANGE ERROR OCCURING UNDER SAFARI + if(transport.responseText == '') { + $('Image').ajaxGetFiles(this.getParentID(),this.insertImages.bind(this)); + return; } - }, - - addFileParam: function(file) { - var parentID = $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value; - swfu.addFileParam(file.id,'ID',parentID); - swfu.addFileParam(file.id,'action_doUpload','1'); - swfu.addFileParam(file.id,'Files',file.name); - swfu.addFileParam(file.id,'MAX_FILE_SIZE','1073741824'); - }, - - insertImages: function() { - this.uploadInProgress = false; + //END OF HACK $('Image').reapplyBehaviour(); this.addToTinyMCE = this.addToTinyMCE.bind(this); var childNodes = $('Image').childNodes[0].childNodes; - var newImages = $A(childNodes).slice(childNodes.length - this.fileUploaded); + var newImages = $A(childNodes).slice(childNodes.length - this.filesUploaded); newImages.each(function(item) { tinyMCEImageEnhancement.addToTinyMCE(item.childNodes[0]); }); - this.fileUploaded = 0; - this.filesToUpload = 0; - + this.processInProgress = false; }, addToTinyMCE: function(target) { @@ -326,6 +209,10 @@ TinyMCEImageEnhancement.prototype = { element.style.position = ""; }); } + }, + + getParentID: function() { + return $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value; } } tinyMCEImageEnhancement = new TinyMCEImageEnhancement(); \ No newline at end of file diff --git a/javascript/Upload.js b/javascript/Upload.js index 213f6bb0..c7ea5d24 100644 --- a/javascript/Upload.js +++ b/javascript/Upload.js @@ -1,195 +1,104 @@ -var Upload = { - initialize: function() { - iframe = window.top.document.getElementById('AssetAdmin_upload'); - Upload.fileUploaded = 0; - Upload.uploadMessage = ''; - Upload.onLoad(); +Upload = Class.create(); +Upload.prototype = { + 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 params.fileTypes = '*.*'; + if(typeof params.fileTypesDescription != 'underfined') 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; + this.onLoad(); }, onLoad: function() { - path = 'http://' + window.location.host + window.location.pathname; - if(path[path.length-1] == '/') path = path.substring(0,path.length-1); - var start = document.cookie.indexOf('PHPSESSID')+10; - var end = document.cookie.indexOf(';',start); - if(end == -1) end = document.cookie.length; - sessId = document.cookie.substring(start,end); - swfu = new SWFUpload({ - upload_target_url: path + '/index/root?executeForm=UploadForm&PHPSESSID=' + sessId, // Relative to the SWF file + path = this.getBasePath(); + sessId = this.getSessionId(); + this.swfu = new SWFUpload({ + upload_target_url: path + '/assets/index/root?executeForm=UploadForm&PHPSESSID=' + sessId, // Relative to the SWF file file_post_name: 'Files', - // Flash file settings - file_size_limit : '1024000', // 10 MB - file_types : '*.*', // or you could use something like: '*.doc;*.wpd;*.pdf', - file_types_description : 'All Files', - file_upload_limit : '6', - //file_queue_limit : '1', // this isn't needed because the upload_limit will automatically place a queue limit - begin_upload_on_queue : false, + file_size_limit : this.fileSizeLimit, // 30 MB + file_types : this.fileTypes, // or you could use something like: '*.doc;*.wpd;*.pdf', + file_types_description : this.fileTypeDescription, + file_upload_limit : this.fileUploadLimit, + begin_upload_on_queue : this.beginUploadOnQueue, use_server_data_event : true, validate_files: false, - // Event handler settings - file_queued_handler : Upload.uploadFileQueuedCallback, + + file_queued_handler : this.uploadFileQueuedCallback.bind(this), + file_complete_handler : this.uploadFileCompleteCallback.bind(this), + file_progress_handler: this.uploadFileProgressCallback.bind(this), + queue_complete_handler : this.uploadQueueCompleteCallback.bind(this), + error_handler : this.uploadErrorCallback.bind(this), file_validation_handler : Prototype.emptyFunction, - file_progress_handler : Upload.uploadProgressCallback, - file_cancelled_handler : Upload.uploadFileCancelCallback, - file_complete_handler : Upload.uploadFileCompleteCallback, - queue_complete_handler : Upload.uploadQueueCompleteCallback, - error_handler : Upload.uploadErrorCallback, - // Flash Settings + file_cancelled_handler: Prototype.emptyFunction, + + ui_container_id: 'abc1', + degraded_container_id: 'abc2', + + + flash_url : 'jsparty/SWFUpload/SWFUpload.swf', // Relative to this file - // UI settings - ui_function: Upload.extendForm, - ui_container_id : 'Form_EditForm', - degraded_container_id : 'Form_EditForm', - // Debug settings + ui_function: this.buildUI.bind(this), debug: false }); }, - extendForm: function() { - if(iframe.contentDocument == undefined) iframe.contentDocument = document.frames[0].document;//IE HACK - element = iframe.contentDocument.getElementById('Form_UploadForm'); - inputFile = iframe.contentDocument.getElementById('Form_UploadForm_Files-0'); - inputFileParent = inputFile.parentNode; - inputFileParent.removeChild(inputFile); - inputFile = iframe.contentDocument.createElement('input'); - inputFile.type = 'text'; - inputFile.id = 'Form_UploadForm_Files-0'; - inputFileParent.appendChild(inputFile); - inputButton = iframe.contentDocument.getElementById('Form_UploadForm_Files-1'); - if(inputButton != null) inputButton.parentNode.removeChild(inputButton); - inputButton = iframe.contentDocument.createElement('input'); - inputButton.type = 'button'; - inputButton.id = 'Form_UploadForm_Files-1'; - inputButton.value = ' Browse...'; - inputButton.style.width = '66px'; - inputButton.style.height = '19px'; - inputButton.style.position = 'relative'; - inputButton.style.top = '1px'; - inputButton.style.fontFamily = 'Arial'; - inputButton.style.fontSize = '1.06em'; - inputFileParent.appendChild(inputButton); - Event.observe(inputButton,'click',function() {swfu.browse();}); - Event.observe(iframe.contentDocument.getElementById('Form_UploadForm_action_upload'),'click',function(event) { - swfu.startUpload(); - Event.stop(event); - }); + getBasePath: function() { + var path = 'http://' + window.location.host + window.location.pathname; + if(path[path.length-1] == '/') path = path.substring(0,path.length-1); + return path; + }, + + 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); + }, + + buildUI: function() { + this.customBuildUI(); }, uploadFileQueuedCallback: function(file,queueLength) { - iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false; - Upload.addFileParam(file); - var fileContainer = iframe.contentDocument.getElementById('Form_UploadForm_FilesList'); - if(fileContainer == null) { - fileContainer = iframe.contentDocument.createElement('div'); - fileContainer.id = 'Form_UploadForm_FilesList'; - iframe.contentDocument.getElementById('Form_UploadForm').appendChild(fileContainer); - } - - var fileToUpload = iframe.contentDocument.createElement('div'); - fileToUpload.id = 'Form_UploadForm_FilesList_' + file.id; - fileToUpload.style.marginBottom = '3px'; - fileContainer.appendChild(fileToUpload); - - var fileName = iframe.contentDocument.createElement('div'); - fileName.id = 'Form_UploadForm_FilesList_Name_' + file.id; - fileName.style.position = 'relative'; - fileName.style.top = '-4px'; - fileName.style.display = 'inline'; - fileName.style.padding = '2px'; - fileName.innerHTML = file.name; - fileName.style.height = Element.getDimensions(fileName).height + 1 + 'px';//IE hack - fileToUpload.appendChild(fileName); - - var fileProgress = iframe.contentDocument.createElement('div'); - fileProgress.id = 'Form_UploadForm_FilesList_Progress_' + file.id; - Position.clone(fileName,fileProgress); - fileProgress.style.backgroundColor = 'black'; - fileProgress.style.display = 'inline'; - fileProgress.style.position = 'absolute'; - fileProgress.style.left = '5px'; - fileProgress.style.width = '0px'; - fileProgress.finished = false; - switch(BrowserDetect.browser) { - case 'Explorer': - fileProgress.style.top = parseInt(fileProgress.style.top) + 6 + 'px'; - break; - case 'Safari': - fileProgress.style.top = parseInt(fileProgress.style.top) + 4 + 'px'; - break; - case 'Firefox': - fileProgress.style.top = parseInt(fileProgress.style.top) + 8 + 'px'; - break; - } - fileProgress.style.height = Element.getDimensions(fileName).height + 1 + 'px'; - fileToUpload.appendChild(fileProgress); - - var fileDelete = iframe.contentDocument.createElement('input'); - fileDelete.id = file.id; - fileDelete.type = 'button'; - fileDelete.value = 'Delete'; - Element.addClassName(fileDelete,'delete'); - fileToUpload.appendChild(fileDelete); - Event.observe(fileDelete,'click',Upload.uploadFileCancelCallback); - }, - - uploadProgressCallback: function(file,bytesLoaded) { - fileName = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Name_' + file.id); - fileName.style.border = 'solid 1px black'; - fileProgress = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id); - fileProgress.style.opacity = 0.3; - fileProgress.style.filter = 'alpha(opacity=30)'; - if(!fileProgress.cloned) { - Position.clone(fileName,fileProgress); - fileProgress.style.width = '0px'; - fileProgress.cloned = true; - } - fileProgress.style.width = (bytesLoaded / file.size) * Element.getDimensions(fileName).width - 1 + 'px'; + this.filesToUpload++; + this.fileQueued(file, queueLength); + this.addFileParam(file); }, uploadFileCompleteCallback: function(file,serverData) { - Upload.fileUploaded++; - toEval = serverData.substr(serverData.indexOf('',''); toEval = toEval.replace('',''); - Upload.uploadMessage = toEval; - iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id).finished = true; + this.uploadMessage = toEval; + this.fileComplete(file, serverData); }, - uploadFileCancelCallback: function(event) { - element = Event.element(event); - fileId = element.id; - swfu.cancelUpload(fileId); - fileContainer = iframe.contentDocument.getElementById('Form_UploadForm_FilesList'); - elementToDelete = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_' + fileId); - elementToDelete.parentNode.removeChild(elementToDelete); - filesToUpload = fileContainer.childNodes.length; - if(filesToUpload > 0) { - iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false; - } else { - iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = true; - } - $A(fileContainer.childNodes).each( - function(item) { - $A(item.childNodes).each( - function(item) { - if(item.id.indexOf('Name') != -1) { - fileName = item; - } - if(item.id.indexOf('Progress') != -1) { - fileProgress = item; - } - }); - Position.clone(fileName,fileProgress); - if(fileProgress.finished == false) fileProgress.style.width = '0px'; - } - ); + uploadFileProgressCallback: function(file, bytes_complete) { + this.uploadInProgress = true; + this.fileProgress(file, bytes_complete); }, uploadQueueCompleteCallback: function() { - eval(Upload.uploadMessage.replace('1',Upload.fileUploaded)); + this.queueComplete(); + this.uploadInProgress = false; + this.filesUploaded = 0; + this.filesToUpload = 0; }, uploadErrorCallback: function(error_code, file, message) { - swfu.cancelQueue(); + 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'); @@ -201,7 +110,7 @@ var Upload = { alert('You have encountered an error. File hasn\'t been uploaded. Please hit the "Refresh" button in your web browser'); break; case SWFUpload.ERROR_CODE_FILE_EXCEEDS_SIZE_LIMIT: - alert('Files cannot be bigger than 10MB.'); + alert('Files cannot be bigger than ' + this.fileSizeLimit/1024 + ' MB.'); break; case SWFUpload.ERROR_CODE_ZERO_BYTE_FILE: alert('Files cannot be empty'); @@ -221,10 +130,29 @@ var Upload = { }, addFileParam: function(file) { - swfu.addFileParam(file.id,'ID',iframe.contentDocument.getElementById('Form_UploadForm_ID').value); - swfu.addFileParam(file.id,'action_doUpload','1'); - swfu.addFileParam(file.id,'Files',file.name); - swfu.addFileParam(file.id,'MAX_FILE_SIZE','1073741824'); + 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'); + }, + + browse: function() { + this.swfu.browse(); + }, + + setFolderID: function(id) { + this.folderID = id; + }, + + getFilesUploaded: function() { + return this.filesUploaded; + }, + + getFilesToUpload: function() { + return this.filesToUpload; + }, + + isUploadInProgress: function() { + return this.uploadInProgress; } -} -window.top.document.Upload = Upload; \ No newline at end of file +} \ No newline at end of file