Proposal for the usage of a new Aloha.registerPlugin function.

registerplugin-impl.js

/*
	Demo of proposed registerPlugin function
*/
(function(window,undefined){
	
	// Extract
	var	GENETICS = window.GENTICS,
		jQuery = window.jQuery;
	
	// Prototypes
	String.prototype.toInteger = String.prototype.toInteger || function(){
		return parseInt(String(this).replace(/px$/,'')||0,10);
	};
	String.prototype.toFloat = String.prototype.toInteger || function(){
		return parseFloat(String(this).replace(/px$/,'')||0,10);
	};
	Number.prototype.toInteger = Number.prototype.toInteger || String.prototype.toInteger;
	Number.prototype.toFloat = Number.prototype.toFloat || String.prototype.toFloat;
	
	// jQuery
	jQuery.fn.increase = jQuery.fn.increase || function(attr){
		var	obj = jQuery(this),
			value = obj.css(attr).toFloat(),
			newValue = Math.round((value||3)*1.2);
		// Apply
		obj.css(attr,newValue);
		// Chain
		return obj;
	}
	jQuery.fn.decrease = jQuery.fn.decrease || function(attr){
		var	obj = jQuery(this),
			value = obj.css(attr).toFloat(),
			newValue = Math.round((value||0)*0.8);
		// Apply
		obj.css(attr,newValue);
		// Chain
		return obj;
	}
	
	// Create
	GENTICS.Aloha.registerPlugin({
		name: 'com.bal.aloha.plugins.Image',
		assets: [
			['com.bal.aloha.plugins.Image', 'resources/style', 'css']
		],
		scope: 'image',
		languages: ['en', 'de'],
		buttons: function(){
			// Can either be a function, an object or an array.
			// I like to use a function as that way we can load in the buttons after the i18n has loaded in.
			// So that we can have translated text inside our buttons.
			return {
				alignLeft: new GENTICS.Aloha.ui.Button({
					iconClass: 'GENTICS_button BAL_button_align_left',
					size: 'small',
					onclick: function() {
						var image = GENTICS.Aloha.Image.getImage();
						// Apply
						jQuery(image).css('float', 'left');
					},
					tooltip: GENTICS.Aloha.i18n(GENTICS.Aloha.Image, 'align.left'),
					group: 1
				}),
				alignRight: new GENTICS.Aloha.ui.Button({
					iconClass: 'GENTICS_button BAL_button_align_right',
					size: 'small',
					onclick: function() {
						var image = GENTICS.Aloha.Image.getImage();
						// Apply
						jQuery(image).css('float', 'right');
					},
					tooltip: GENTICS.Aloha.i18n(GENTICS.Aloha.Image, 'align.right'),
					group: 1
				}),
		 		alignNone: new GENTICS.Aloha.ui.Button({
					iconClass: 'GENTICS_button BAL_button_align_none',
					size: 'small',
					onclick: function() {
						var image = GENTICS.Aloha.Image.getImage();
						// Apply
						jQuery(image).css('float', '');
					},
					tooltip: GENTICS.Aloha.i18n(GENTICS.Aloha.Image, 'align.none'),
					group: 1
				}),
				paddingIncrease: new GENTICS.Aloha.ui.Button({
					iconClass: 'GENTICS_button BAL_button_padding_increase',
					size: 'small',
					onclick: function() {
						var image = GENTICS.Aloha.Image.getImage(),
							Image = jQuery(image);
						// Apply
						Image.increase('padding');
					},
					tooltip: GENTICS.Aloha.i18n(GENTICS.Aloha.Image, 'padding.increase'),
					group: 2
				}),
				paddingDecrease: new GENTICS.Aloha.ui.Button({
					iconClass: 'GENTICS_button BAL_button_padding_decrease',
					size: 'small',
					onclick: function() {
						var image = GENTICS.Aloha.Image.getImage(),
							Image = jQuery(image);
						// Apply
						Image.decrease('padding');
					},
					tooltip: GENTICS.Aloha.i18n(GENTICS.Aloha.Image, 'padding.decrease'),
					group: 2
				}),
				sizeIncrease: new GENTICS.Aloha.ui.Button({
					iconClass: 'GENTICS_button BAL_button_size_increase',
					size: 'small',
					onclick: function() {
						var image = GENTICS.Aloha.Image.getImage(),
							Image = jQuery(image);
						// Apply
						Image.increase('height').increase('width');
					},
					tooltip: GENTICS.Aloha.i18n(GENTICS.Aloha.Image, 'size.increase'),
					group: 2
				}),
				sizeDecrease: new GENTICS.Aloha.ui.Button({
					iconClass: 'GENTICS_button BAL_button_size_decrease',
					size: 'small',
					onclick: function() {
						var image = GENTICS.Aloha.Image.getImage(),
							Image = jQuery(image);
						// Apply
						Image.decrease('height').decrease('width');
					},
					tooltip: GENTICS.Aloha.i18n(GENTICS.Aloha.Image, 'size.decrease'),
					group: 2
				}),
				srcLabel: new GENTICS.Aloha.ui.Button({
					iconClass: 'GENTICS_button BAL_button_src_label',
					size: 'small',
					label: GENTICS.Aloha.i18n(GENTICS.Aloha.Image, 'source.label'),
					tooltip: GENTICS.Aloha.i18n(GENTICS.Aloha.Image, 'source.tooltip'),
					group: 3,
					width: 50
				}),
				srcField: new GENTICS.Aloha.ui.AttributeField({
					iconClass: 'GENTICS_button BAL_button_src_field',
					size: 'small',
					group: 3,
					width: 137
				}),
				titleLabel: new GENTICS.Aloha.ui.Button({
					iconClass: 'GENTICS_button BAL_button_title_label',
					size: 'small',
					label: GENTICS.Aloha.i18n(GENTICS.Aloha.Image, 'title.label'),
					tooltip: GENTICS.Aloha.i18n(GENTICS.Aloha.Image, 'title.tooltip'),
					group: 4,
					width: 50
				}),
				titleField: new GENTICS.Aloha.ui.AttributeField({
					iconClass: 'GENTICS_button BAL_button_title_field',
					size: 'small',
					group: 4,
					width: 137
				})
			}
		},
		events: function(){
			return {
				// Image Selected
				selectionChanged: function(event, rangeObject) {
            		var	image = GENTICS.Aloha.Image.getImage();
            		if ( image ) {
						// A image is selected, so tell Aloha that we are within our plugins scope
                		GENTICS.Aloha.FloatingMenu.setScope('image');
						// And Adjust our Toolbar
						GENTICS.Aloha.Image.getButton('srcField').setTargetObject(image, 'src');
						GENTICS.Aloha.Image.getButton('titleField').setTargetObject(image, 'title');
					}
					GENTICS.Aloha.FloatingMenu.doLayout();
					return true;
				},
			
				// Image Dropped
				editableCreated: function(event, editable) {
					// Bind Drop Event
					jQuery(editable.obj).bind('drop',function(event){
						var	e = event.originalEvent,
							Files = e.dataTransfer.files;
						
						// if no files where dropped, use default handler
						if ( files.length < 1) {
							return true;
						}
						
						// Cycle
						jQuery.each(Files,function(i,File){
							var Reader = new FileReader();
							Reader.onloadend = function(readEvent) {
								var Image = jQuery('<img/>', {
									src: readEvent.target.result,
									alt: readEvent.target.result.replace(/^.+?\/([^\/]+)$/,'$1')
								});
								GENTICS.Utils.Dom.insertIntoDOM(
									Image,
									GENTICS.Aloha.Selection.getRangeObject(),
									jQuery(GENTICS.Aloha.activeEditable.obj)
								);
							};
							Reader.readAsDataURL(File);
						});
						
						// Return false
						return false;
					});
					
					// Return true
					return true;
				}
			});
		},
		getImage: function() {
			// Anything unrecognised by registerPlugin will be added to the new plugin object upon creation.
			var range = GENTICS.Aloha.Selection.getRangeObject();
			var rangeTree = range.getRangeTree();
			for (var i = 0 ; i < rangeTree.length ; i++) {
				if (rangeTree[i].type == 'full' && rangeTree[i].domobj.nodeName.toLowerCase() == 'img') {
					return rangeTree[i].domobj;
				}
			}
			return undefined;
		},
		init: function(){
			/* By the time we reach here, the following should have been completed by Aloha:
			 * i18n files loaded
			 * assets/resources loaded
			 * createScope call fired
			 * Buttons added
			 * Events added
			 * 
			 * Leaving this init function just for custom stuff
			 */
			
			return true;
		}
	});
	
})(window);