Create a gist now

Instantly share code, notes, and snippets.

@balupton /README.md
Last active Sep 25, 2015

Aloha UI Abstraction
(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);
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment