hone-sidebar

Sidebar

This is a sidebar that controls differnt sidebar views. So you can have a sidebar that looks like a mobile app.

Important Changes: So we are moving to browserify, and removing component support. Also along with this change we will no longer be importing any CSS, If you would still like to the use the default css please import it into you project manually. The example CSS can be found at /examples/style.css.

Install

$ npm install hone-sidebar

Usage

First you will need an element for the sidebar to attach to. Do this by adding an attribute to a element.

<div data-sidebar></div>

Then after add this javascript.

var Sidebar = require( 'hone-sidebar' ),
    sidebar = new Sidebar(); // make a new instance

sidebar.init(); // init looks for element. [data-sidebar]
sidebar.open(); // open sidebar up default is closed

You will see a blank bar open up into view. To make views for the sidebar all you need to do is call addView.

var html = '<p>This is html</p>',
    view1 = sidebar.addView( html, {   //options
        title: 'My First View',        // title in the navigation bar
        menuBehaviors: [{              // buttons on navigation
            label: 'close'             // label of button
            behavior: 'sidebar.close', // data-emit to trigger event
            position: 'right'          // position of button eg. left / right
        }],
        home: true                     // set this as default view
    });
// first view auto opens
sidebar.open();

Add another view

var html2 = '<p>This more html</p>',
    view2 = sidebar.addView( html, { 
        title: 'My Second View', 
        menuBehaviors: [{ 
            label: 'back' 
            behavior: 'sidebar.back', 
            position: 'right'
        }],
        parent: view1 // the parent view
    });


view2.open();

Talking to and from sidebar

We use a library called emit to talk to the buttons in the nav you will see attribute like data-emit="sidebar.back". This will make the sidebar go back if there is a parent view of the current view.

Lets say you want a nav button to go to another view. Just create a view like this.

var view1 = sidebar.addView( html, { 
    title: 'My First View', 
    menuBehaviors: [{ 
        label: 'back' 
        behavior: 'sidebar.back', 
        position: 'right'
    },{ 
        label: 'next' 
        behavior: 'open.view2', 
        position: 'left'
    }]
});
// now use emit to bind to the `open.view2` event.
emit.on('open.view2', function(){
    // were in the event handler
    view2.open();
});

You can use those types of event inside and outside of the sidebar.

Api

coming soon

Development

The development process is a little rought right now, but essentially you will need component & less.

Download Files

$ git clone https://github.com/honeinc/sidebar.git
$ cd sidebar

Next if your making a css change and have less.

$ lessc style.less > style.css

Then you need to test you can do this by using the example directory but you will need to symlink the directory into you components to see the changes. Some of this info may differ due to component version and os.

$ cd example
$ component install
$ rm -r components/honeinc-sidebar 
$ ln -s ~/path-to/sidebar ~/path-to/sidebar/example/components/honeinc-sidebar
$ component build
$ open index.html

Now to see changes all you need to do is rebuild

$ component build

and refresh!

Testing

To run the test you will need to install all dependecies, you will need nodejs as well as npm. Then in the root of the directory run.

$ npm install

Next you will need a built version to run in the runner.html to do this run.

$ component install
$ component build

This should install everything and then open up the runner file. This command may differ from system to system.

$ open tests/runner.html

Once you change the files you will need to run component build again to see the changes in the test.

Have a issue? report it in the issues tab.