Automizy-Sidebar ($AS)

The Automizy-Sidebar puts a vertical bar on the right side of your website (or element). In this box you can create tabs, content blocks and groups.

Table of Contents

1. Installation
2. Usage
3. Options
4. Example

Installation

Download or fork Automizy-Sidebar at GitHub.

git clone https://github.com/Automizy/Automizy-Sidebar

or install with Bower:

bower install Automizy-Sidebar

Usage

First, load jQuery (v2.2.4 or greater), Automizy-Project-Initializer, and the plugin:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="vendor/automizy-project-initializer/automizy-project-initializer.js" type="text/javascript"></script>
<script src="vendor/automizy-sidebar/automizy-sidebar.min.js" type="text/javascript"></script>
<link href="vendor/automizy-sidebar/automizy-sidebar.min.css" rel="stylesheet" type="text/css">

Now, init the module and create a new sidebar:

<script type="text/javascript">
    $AS.init().ready(function(){
        var sidebar = $AS.newSidebar().drawTo('body');
    });
</script>

Options

New Sidebar

Init parameters

var sidebar = $AS.newSidebar({
    name:'my-sidebar',
    target:'body',
    tabs:[ /*list of tabs*/ ],
    inners:[ /*list of inners*/ ],
    groups:[ /*list of groups*/ ]
})

Dynamic functions

var sidebar = $AS.newSidebar();
sidebar.name('my-sidebar');
sidebar.drawTo('body');
sidebar.hide();
sidebar.show();
sidebar.tabBox();
sidebar.innerBox();
sidebar.tabs([ /*list of tabs*/ ]);
sidebar.addTab(module|object);
sidebar.getTabByName('my-tab');
sidebar.getAllTab();
sidebar.hideAllTab();
sidebar.inners([ /*list of inners*/ ]);
sidebar.addInner(module|object);
sidebar.getInnerByName('my-inner');
sidebar.getAllInner();
sidebar.groups([ /*list of groups*/ ]);
sidebar.addGroup(module|object);
sidebar.getGroupByName('my-group');
sidebar.getAllGroup();
var $widget = sidebar.widget();

New Tab

Init parameters

var tab = $AS.newTab({
    name:'my-tab',
    text:'Tab text',
    target:sidebarModule,
    inner:innerModule,
    sidebar:sidebarModule,
    tabCategory:'category1'
})

Dynamic functions

var tab  = $AS.newTab();
tab.name('ma-tab');             //get|set name
tab.text('Tab text');           //get|set text
tab.hide();
tab.show();
tab.showSiblings();
tab.drawTo(sidebarModule);
tab.inner(innerModule);         //get|set innerModule
tab.sidebar(sidebarModule);     //get|set sidebarModule
tab.activate();
tab.tabCategory('category1');   //get|set tab category
var $widget = tab.widget();

New Inner

Init parameters

var inner = $AS.newInner({
    name:'my-inner',
    target:sidebarModule,
    tab:tabModule,
    sidebar:sidebarModule,
    activate:function(){
        console.log(this.name());   //my-inner
    },
    groups:[ /*list of groups*/ ]
})

Dynamic functions

var inner  = $AS.newInner();
inner.name('my-inner');                 //get|set name
inner.hide();
inner.show();
inner.drawTo(sidebarModule);
inner.tab(tabModule);                   //get|set innerModule
inner.groups([ /*list of groups*/ ]);
inner.addGroup(module|object);
inner.sidebar(sidebarModule);           //get|set sidebarModule
inner.activate(func);                   //activate the innerModule OR set a function that call after activate the innerModule
var $widget = inner.widget();

New Group

Init parameters

var group = $AS.newGroup({
    name:'my-group',
    title:'Group title',
    content:content,
    sidebar:sidebarModule
})

Dynamic functions

var group  = $AS.newGroup();
group.name('my-group');             //get|set name
group.hide();
group.show();
group.drawTo(sidebarModule);
group.sidebar(sidebarModule);       //get|set sidebarModule
group.title('Group titpe');         //get|set title
group.content(content);             //get|set content
var $widget = group.widget();

Example

$AS.init().ready(function () {
    
    window.sidebar = $AS.newSidebar({
        name: 'Sidebar name',
        target: 'body',
        tabs: [
            {
                name: 'fields',
                text: 'Fields'
            }, {
                name: 'style',
                text: 'Style'
            }, {
                name: 'form-actions',
                text: 'Form Actions'
            }
        ],
        inners: [
            {
                name: 'fields',
                tab: 'fields',
                groups: [
                    'layout',
                    'form-style',
                    'custom-css'
                ]
            }, {
                name: 'style',
                groups: [
                    'form-style',
                    'custom-css'
                ],
                tab: 'style'
            }, {
                name: 'form-actions',
                groups: [
                    'layout',
                    'custom-css'
                ],
                tab: 'form-actions'
            }
        ],
        groups: [
            {
                name: 'layout',
                title: 'Layout',
                content: 'Text content'
            }, {
                name: 'form-style',
                title: 'Form Style',
                content: $('<b>jQuery element</b>')
            }, {
                name: 'custom-css',
                title: 'Custom CSS',
                content: $A.newButton().text('Automizy element')
            }
        ]
    })
    
})

License

Copyright (c) 2017 Automizy.

Automizy-Sidebar is released under the MIT license.