silverstripe-cms/javascript/TinyMCEImageEnhancement.js

/**
 * 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($('AddFolder'),'click',this.onAddFolder.bind(this));
        Event.observe($('FolderOk'),'click',this.onFolderOk.bind(this));
        Event.observe($('FolderCancel'),'click',this.onFolderCancel.bind(this));

		this.onLoad();
    },   
	
	onLoad: function() {
		this.upload = new Upload({
			fileUploadLimit : '6',
			button_image_url : 'cms/images/swf-upload-button-small.jpg',
			button_width : 59,
			button_height: 18,
			fileQueued: this.uploadFileQueuedCallback.bind(this),
			fileComplete: this.uploadFileCompleteCallback.bind(this),
			queueComplete: this.uploadQueueCompleteCallback.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;
    },
        
    /**
     * 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;
    },
    
	uploadFileQueuedCallback: function(file,queueLength) {
		if(this.getParentID() == "root") {
			statusMessage("Please choose folder","bad");	
		}
		else {
			this.processInProgress = true;
			this.upload.swfu.addPostParam('FolderID', this.getParentID());
			this.upload.swfu.addFileParam(file.id,'ID',this.folderID);
			this.upload.swfu.addFileParam(file.id,'Files',file.name);
			$('UploadFiles').innerHTML = "Uploading Files...("+ this.filesUploaded +")";	
			this.upload.swfu.startUpload(file.id);		
		}
	},
	
	uploadFileCompleteCallback: function(file,serverData) {
		this.filesUploaded++;
		$('UploadFiles').innerHTML = 'Uploading Files..... ('+ this.filesUploaded +")";
	},
	
	uploadQueueCompleteCallback: function(serverData) {
		this.filesUploaded = this.upload.getFilesUploaded();
		$('UploadFiles').innerHTML = "";
		statusMessage('Uploaded Files Successfully','good');
		
		$('FolderImages').ajaxGetFiles(this.getParentID(), null);	
	},
	
	/**
	 * 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();