Aloha UI Abstraction

aloha-ui-abstraction.js

(function(window,undefined){
	var
		Aloha = window.GENTICS.Aloha,
		$ = window.jQuery;
	
	Aloha.useLanguge('de');
	
	
	// ALOHA UI API
	Aloha.registerPlugin = function(id, Plugin){
		// Normalise ID
		Plugin.id = Plugin.id||id;
		
		// Normalise Events
		if ( typeof plugin.events === 'function' ) {
			Plugin.Events = plugin.events();
		}
		else {
			Plugin.Events = plugin.events;
		}
		
		// Normalise Buttons
		if ( typeof plugin.buttons === 'function' ) {
			Plugin.Buttons = plugin.buttons();
		}
		else {
			Plugin.Buttons = plugin.buttons;
		}
	
		// Add the Buttons
		$.each(Plugin.Buttons,function(id,Button){
			Button.id = Button.id||id;
			$.each(Button.where||{},function(tab,group){
				Aloha.Toolbar.addButton(
					Button,
					tab,
					group
				);
			});
		});
		
		// Return the Normalised Plugin
		return Plugin;
	};
	
	// IMAGE PLUGIN
	var ImagePlugin = Aloha.registerPlugin('Image', {
		assets: [
			'style.css'
		],
		layouts: ['floating','fixed'],
		context: ['image'],
		buttons: function(){
			return {
				// Align Left
				alignLeft: new Aloha.ui.Button({
					css: 'BAL_button_align_left',
					size: 'small',
					onclick: function(){
						var image = ImagePlugin.getImage();
						jQuery(image).css('float', 'left');
					},
					tooltip: 'align.left',
					where {
						format: 'align'
					}
				}),
				
				// Insert Element
				insertElement: new Aloha.ui.Button({
					css: 'BAL_button_insert_element',
					size: 'small',
					hotkey: 'i',
					onclick: function(){
						var element = prompt('Which element would you like to insert? (we support zen coding)');
						// zen code transform the input
						// insert the element
					},
					tooltip: 'insert.element',
					where: {
						insert: 'insert'
					}
				}),
				
				// Insert Image
				insertImage: new Aloha.ui.Button({
					css: 'BAL_button_insert_image', // optional
					size: 'small', // optional
					hotkey: 'I', // optional
					onclick: function(){ // required if you are a button
						// insert the image
					},
					tooltip: 'insert.image',
					
					image: '...',
					text: 'insert.image',
					
					attr: {
						placeholder: 'for text inputs'
					},
					where: {
						// tab -> group
						image: 'image',
						insert: 'insert
					}
				})
			}
		},
		events: function(){
			return {
				// ...
			}
		},
		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);

gistfile2.txt

Related to Wiki Article:
http://aloha-editor.org/wiki/Migration_to_jQuery_UI

And Aloha Editor DevCon Talk:
http://www.livestream.com/alohaeditor/video?clipId=pla_7219285e-1723-430b-84ae-5190e3d3004f&utm_source=lslibrary&utm_medium=ui-thumb

Copyright Aloha Editor Team.
Romain and Benjamin