silverstripe-cms/javascript/TinyMCEImageEnhancement.js

271 lines
10 KiB
JavaScript
Raw Normal View History

/**
* 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' + ($('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;
var options = {
method: 'post',
postBody: 'Created=' + currentDate + '&Name=' + folderName + '&ClassName=Folder&ID=' + folderID + '&ajax=1&action_save=1' + ($('SecurityID') ? '&SecurityID=' + $('SecurityID').value : ''),
onSuccess: this.onFolderAddSuccess.bind(this),
onFailure: function(transport) {
errorMessage('Error: Folder not added', transport);
}
};
new Ajax.Request('admin/assets/EditForm', options);
},
/**
* When folder name has been changed we need to refresh folder list and return to initial state of UI.
*/
onFolderAddSuccess: function(transport) {
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();
},
/**
* 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
if(navigator.appVersion.indexOf("Mac") != -1 || navigator.appVersion.indexOf("X11") != -1 || navigator.appVersion.indexOf("Linux") != -1) {
pv = getFlashPlayerVersion();
if(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, null, null, destWidth, destHeight, null, null, cssClass);
},
/**
* Under IE6 when we click on "add folder" anchor, rest of anchors loose their correct position
*
*/
applyIE6Hack: function() {
if(BrowserDetect.browser == 'Explorer') {
elements = [$('FolderOk'),$('FolderCancel'),$('UploadFiles')];
$A(elements).each(function(element) {
element.style.position = "relative";
element.style.top = "-3px";
});
}
},
removeIE6Hack: function() {
if(BrowserDetect.browser == 'Explorer') {
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();