Aloha UI Abstraction

README.md

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

aloha-ui-abstraction.js

// 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" ]
        ]
    }
});