mirror of
https://github.com/silverstripe/silverstripe-reports
synced 2024-10-22 11:05:53 +02:00
269 lines
11 KiB
JavaScript
269 lines
11 KiB
JavaScript
/**
|
|
* 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.filesUploaed = 0;
|
|
this.processInProgress = false;
|
|
Event.observe(window,'load',this.onWindowLoad.bind(this));
|
|
},
|
|
|
|
buildUI: function() {
|
|
$('Form_EditorToolbarImageForm_FolderID').value = "";
|
|
|
|
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 = this.addElement('a','link',divAddFolder,{'id': 'FolderOk','href' : '#','innerHTML': 'ok'});
|
|
Element.hide(folderOk);
|
|
Element.addClassName(folderOk,'addFolder');
|
|
var folderCancel = this.addElement('a','link',divAddFolder,{'id': 'FolderCancel','href' : '#','innerHTML': 'cancel'});
|
|
Element.hide(folderCancel);
|
|
Element.addClassName(folderCancel,'addFolder');
|
|
|
|
var divUpload = this.addElement('div','group',$('FolderID'),{'id': 'UploadrGroup'});
|
|
var pipeSeparator = this.addElement('div','',divUpload,{'id' : 'PipeSeparator','innerHTML' : ' | '});
|
|
pipeSeparator.style.display = "inline";
|
|
var uploadFiles = this.addElement('a','link',divUpload,{'id' : 'UploadFiles','href' : '#','innerHTML' : 'upload'});
|
|
|
|
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();
|
|
},
|
|
|
|
/**
|
|
* Called when user clicks "ok" anchor/ adds folder with given name.
|
|
*/
|
|
|
|
onFolderOk: function(event) {
|
|
Event.stop(event);
|
|
var folderName = $('NewFolderName').value;
|
|
var options = {
|
|
method: 'post',
|
|
postBody: 'ParentID=' + this.getParentID() + '&ajax=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);
|
|
|
|
|
|
},
|
|
|
|
/**
|
|
* Method retrieves folder id and sends request which changes folder name.
|
|
*/
|
|
|
|
onFolderGetSuccess: function(transport) {
|
|
var t1 = transport.responseText.indexOf('TreeNode(');
|
|
var t2 = transport.responseText.indexOf(',');
|
|
var folderID = transport.responseText.substring(t1 + 9,t2);
|
|
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;
|
|
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/index/' + this.getParentID() + '?executeForm=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');
|
|
document.getElementsBySelector("div.TreeDropdownField.single")[2].itemTree = null;
|
|
$('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) {
|
|
Event.stop(event);
|
|
$('NewFolderName').value = '';
|
|
Element.show('AddFolder');
|
|
Element.hide('NewFolderName','FolderOk','FolderCancel');
|
|
this.removeIE6Hack();
|
|
},
|
|
|
|
/**
|
|
* Called on window.onload
|
|
*/
|
|
|
|
onWindowLoad: function() {
|
|
if($('FolderID') != null) {
|
|
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.processInProgress = true;
|
|
this.upload.setFolderID(this.getParentID());
|
|
$('UploadFiles').innerHTML = "Uploading ... 1/" + this.upload.getFilesToUpload();
|
|
},
|
|
|
|
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(),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(),this.insertImages.bind(this));
|
|
return;
|
|
}
|
|
//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.filesUploaded);
|
|
newImages.each(function(item) {
|
|
tinyMCEImageEnhancement.addToTinyMCE(item.childNodes[0]);
|
|
});
|
|
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'),$('PipeSeparator')];
|
|
$A(elements).each(function(element) {
|
|
element.style.position = "relative";
|
|
element.style.top = "-3px";
|
|
});
|
|
}
|
|
},
|
|
|
|
removeIE6Hack: function() {
|
|
if(BrowserDetect.browser == 'Explorer') {
|
|
elements = [$('FolderOk'),$('FolderCancel'),$('UploadFiles'),$('PipeSeparator')];
|
|
$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(); |