Skip to content

Instantly share code, notes, and snippets.

@balupton

balupton/README.md

Last active September 25, 2015 01:08
Download ZIP

Revisions

  1. balupton renamed this gist Jun 14, 2013. 1 changed file with 0 additions and 0 deletions.
    0 gistfile2.txt → README.md
    View file
    File renamed without changes.
  2. balupton revised this gist Feb 26, 2011. 1 changed file with 164 additions and 140 deletions.
    304 changes: 164 additions & 140 deletions aloha-ui-abstraction.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,140 +1,164 @@
    (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);
    // http://svn.ckeditor.com/CKEditor/trunk/_source/plugins/basicstyles/plugin.js

    Aloha.ui.store = function(ID,properties){
    Aloha.ui.objects[ID] = {
    config: config,
    element: $button
    };
    }

    Aloha.ui.createButton = function( ID, config ){
    var $button = $( "<button>"
    + Aloha.API.translate( config.text || ID )
    + "</button>" ).button();

    Aloha.ui.store(ID, {
    config: config,
    element: $button
    });

    return $button;
    };

    // jQuery UI Implementation - included in jQuery UI Adapter

    Aloha.ui.addWrapButton = function( ID, config ){
    var $button = Aloha.ui.createButton(ID, config);
    var $selection = Aloha.API.getSelection();

    // Apply Style
    if ( config.style ) {
    $selection.css( options.style );
    }

    // Wrap
    if ( config.element ) {
    $selection.wrap( options.element );
    }
    });

    Aloha.ui.addInsertButton = function ( id, config ) {
    var $button = Aloha.ui.createButton ( ID, config );

    var
    onClick /*alias*/
    = Aloha.ui.events[id].click // makes overrides possible
    = function(){
    var $selection = Aloha.getSelection();
    $(config.element).after($selection);
    }
    ;

    $button.click(onClick);
    };

    Aloha.ui.addCustomButton( "Increase Image Size", {
    context: "img",
    click: function(event){
    var $img = Aloha.API.getSelection().find( "img" );
    $img = $img.height( $img.height() * 1.5 );
    }
    });


    Aloha.ui.addInsertButton( "Image", {
    element: "img"
    });



    Aloha.cron.addTask(function() {
    // ...
    });
    Aloha.cron.addTransform( "b", "strong" );

    Aloha.ui.addStyleButton( "Bold", {
    element: "strong",
    });

    Aloha.ui.addStyleButton( "Red", {
    // enabled when, and applies
    element: "p",
    style: {
    color: "red",
    fontSize: "30px"
    }
    });


    $( element ).aloha({
    toolbar: Aloha.toolbars.full
    });


    // Defined in Implementors Configuration
    $( element ).aloha({
    toolbar: {
    Format: [
    ["Bold", "Italic", "Underline", "Formatting"],

    "headers", // regard as widget

    {
    type: "multiSplitArea",
    items: // ...
    },

    // Putting plugin code in configuration - not good
    new Aloha.ui.multiSplitArea({
    items: [
    new Aloha.ui.imageButton( "h1", {
    image: "h1".gif"
    });
    ]
    });

    ],
    "Image Styles": [ "Bold", "Save" ]
    },
    headers: [ "h1", "h2", "h3", "normal", "blockquote" ]
    });
    // ^ triggers aloha.configured


    Aloha.listen("aloha.configured", function(editor){
    // ^ required for access to editor.config

    /// Defined in Image Plugin
    Aloha.ui.addImageButton( "h1", {
    image: "h1.gif"
    });

    Aloha.ui.addMultiSplitArea( "headers", { // 52
    items: editor.config.headers // [ "headers.h1" ] // 76
    });
    });


    // Events
    aloha.configured
    aloha.toolbar.ready





    $( element ).aloha({
    toolbar: [
    {
    label: "Format",
    controls: [ "Bold", "Italic", "Underline" ]
    }
    ]
    });



    $( element ).aloha({
    toolbar: {
    Format: [
    [ "Bold", "Italic", "Underline", "Formatting" ],
    [ "H1", "H2", "H3" ]
    ]
    }
    });
  3. balupton revised this gist Feb 22, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion aloha-ui-abstraction.js
    View file
    Original file line number Diff line number Diff line change
    @@ -101,7 +101,7 @@
    where: {
    // tab -> group
    image: 'image',
    insert: 'insert
    insert: 'insert'
    }
    })
    }
  4. balupton revised this gist Feb 22, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion aloha-ui-abstraction.js
    View file
    Original file line number Diff line number Diff line change
    @@ -78,7 +78,7 @@
    },
    tooltip: 'insert.element',
    where: {
    insert: 'insert
    insert: 'insert'
    }
    }),

  5. balupton created this gist Feb 22, 2011.
    140 changes: 140 additions & 0 deletions aloha-ui-abstraction.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,140 @@
    (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);
    8 changes: 8 additions & 0 deletions gistfile2.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    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