Check out my personal resume at http://zuse.me

Lobipanel

LobiPanel is jquery plugin for bootstrap panels. It extends panels with several common and useful functions which does not come by default.

9769 Download View on Github

Features

Sort, drag, expand, resize, minimize bootstrap panels
Specify url and load content in panel from this url
Change the name of the panel
Customize action icons and action tooltips
Works for nested panels
HTML5 localStorage support:
- Save panel state: (pinned, unpinned, collapsed, fullscreen, minimized) and apply it on page load
- Save panel position among siblings and apply on next time

Installation and dependecies.

LobiPanel is depended on jQuery, jQuery ui and bootstrap.

1. Include necessary css/js files

<!DOCTYPE html>
<html>
   <head>
      <!--Include this css file in the <head> tag -->
      <link rel="stylesheet" href="lib/jquery-ui.min.css"/>
      <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"/>
      <link rel="stylesheet" href="dist/css/lobipanel.min.css"/>
   </head>

   <body>
      ...
      <!--Include these script files in the <head> or <body> tag-->
      <script src="lib/jquery.1.11.min.js"></script>
      <script src="lib/jquery-ui.min.js"></script>
      <script src="bootstrap/dist/js/bootstrap.min.js"></script>
      <script src="dist/js/lobipanel.min.js"></script>
   </body>
</html>

2. Initialize plugin

Basic usage

LobiPanel initialization is simple. Just create correct markup of bootstrap panel and call plugin

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            <h4>Panel title</h4>
        </div>
    </div>
    <div class="panel-body">
        Lorem ipsum...
    </div>
</div>
<script>
   $(function(){
        $('.panel').lobiPanel({
            //Options go here
            ...
        });
    });
</script>

And you will get the following result.

Panel title

Lorem ipsum...

Using the buttons on the right side of the panel heading you can perform several actions.

This button removes the panel from document.
Warning!!!. This operation can not be undone.
This button expands the panel on full screen.
This button loads content in .panel-body from specified URL.
This button takes out the panel from its position in DOM hierarchy and makes it floating.
Anytime you like (with the same button) you can put the panel in its position.
This button has two functions.
1. It collapses and expands the panel.
2. It minimizes the panel at the bottom of the page when panel is taken out from DOM hierarchy.

On small screen panel controls are hidden and dropdown toggle button is shown.

Options

Options can be set via data-* attributes also. Just used dashed version instead of camelCase. For example: connectWith option via data-* attributes will be data-connect-with.

You can also use objects via data-* attributes. Example: data-close="{tooltip: 'Something'}"

Name

Type

Default

Description

draggable [Boolean]

Boolean

Default true

Makes unpinned panel draggable. Warning!!! This requires jQuery ui draggable widget to be included.

sortable [Boolean]

Boolean

Default false

Makes pinned panels sortable. Warning!!! This requires jQuery ui sortable widget to be included.

connectWith [String]

String

Default ".ui-sortable"

jQuery ui sortable plugin option. To avoid any problems this option must be same for all panels of the same parent.

resize [String]

String

Default "both"

Set unpin panel resize direction Possible values: "both", "vertical", "horizontal", "none".

minWidth [Integer]

Integer

Default 200

Minimum width unpin, resizable panel can have.

minHeight [Integer]

Integer

Default 100

Minimum height unpin, resizable panel can have.

maxWidth [Integer]

Integer

Default 1200

Maximum width unpin, resizable panel can have.

maxHeight [Integer]

Integer

Default 700

Maximum height unpin, resizable panel can have.

loadUrl [String]

String

Default ""

The url which will be used to load content. If not provided reload button will do nothing.

tooltips [Boolean]

Boolean

Default true

This will enable tooltips on panel controls.

toggleIcon [String]

String

Default "glyphicon glyphicon-cog"

Dropdown toggle icon.

expandAnimation [Integer]

Integer

Default 100

Expand to full screen animation duration

collapseAnimation [Integer]

Integer

Default 100

Collapse from full screen animation duration

state new [String]

String

Default "pinned"

Initial state of the panel. Available options: pinned, unpinned, collapsed, minimized, fullscreen

initialIndex new [Integer]

Integer

Default null

Initial index of the panel among its siblings

stateful new [Integer]

Integer

Default 100

If you set this to true you must specify data-inner-id. Plugin will save (in localStorage) it's states such as pinned, unpinned, collapsed, minimized, fullscreen, position among it's siblings and apply them when you reload the browser

unpin [Object]

Object

Default

{
    icon : 'glyphicon glyphicon-move',
    tooltip : 'Unpin'
}

By icon property you can change the Unpin button icon. The tooltip property changes the tooltip of the button.

reload [Object]

Object

Default

{
    icon : 'glyphicon glyphicon-refresh',
    tooltip : 'Reload'
}

By icon property you can change the Reload button icon. The tooltip property changes the tooltip of the button.

minimize [Object]

Object

Default

{
    icon : 'glyphicon glyphicon-minus',
    icon2 : 'glyphicon glyphicon-plus',
    tooltip : 'Minimize'
}

By icon property you can change the Minimize button icon. By icon2 property you can change the Minimize button icon. The tooltip property changes the tooltip of the button.

expand [Object]

Object

Default

{
    icon : 'glyphicon glyphicon-resize-full',
    icon2 : 'glyphicon glyphicon-resize-small',
    tooltip : 'Fullscreen'
}

By icon property you can change the Fullscreen button icon. By icon2 property you can change the Fullscreen button icon. The tooltip property changes the tooltip of the button.

close [Object]

Object

Default

{
    icon : 'glyphicon glyphicon-remove',
    tooltip : 'Close'
}

By icon property you can change the Close button icon. The tooltip property changes the tooltip of the button.

editTitle [Object]

Object

Default

{
    icon: 'glyphicon glyphicon-pencil',
    icon2: 'glyphicon glyphicon-floppy-disk',
    tooltip: 'Edit title'
}

...

-->

Methods

Methods can be called in two ways.

1. You can get the LobiPanel - instance and call the method

//get the LobiPanel instance
var instance = $('.lobipanel').data('lobiPanel');
//call the methods
instance.unpin();
instance.setPosition(400, 360);
instance.setLoadUrl("htpp://www.example.com");
var position = instance.getPosition();
//method chaining is also available
instance.setSize(400, 400)
.setPosition(400, 360)
.setLoadUrl("htpp://www.example.com")
.load();

2. Or you can call the method directly

$('.lobipanel').lobiPanel('startLoading');
$('.lobipanel').lobiPanel("setPosition", 400, 360);
var position = $('.lobipanel').lobiPanel("getPosition");

Name

Parameters

Return type

Description

isPanelInit - Return Boolean

Parameters none

Boolean

Checks if panel is initialized. Panel is initialized if it has .lobipanel class and data-inner-id attribute

isPinned - Return Boolean

Parameters none

Boolean

Checks if panel is pinned

pin - Return LobiPanel - instance

Parameters none

LobiPanel - instance

Pin the panel

unpin - Return LobiPanel - instance

Parameters none

LobiPanel - instance

Unpin the panel

togglePin - Return LobiPanel - instance

Parameters none

LobiPanel - instance

Toggles (pin or unpin) the panel

isMinimized - Return LobiPanel - instance

Parameters none

LobiPanel - instance

Checks if panel is minimized or not. It does not matter if panel is pinned or not

minimize - Return LobiPanel - instance

Parameters none

LobiPanel - instance

Minimizes the panel. If panel is pinned it is minimized on its place, if panel is unpinned it is minimized at the bottom of the page

If pinned panel is minimized and buttons will not work

maximize - Return LobiPanel - instance

Parameters none

LobiPanel - instance

Maximize the panel. This method works for minimized panel. If panel is pinned it's maximized on its place. If panel is unpinned it's maximized on position from which it was minimized.

toggleMinimize - Return LobiPanel - instance

Parameters none

LobiPanel - instance

Toggles (minimize or maximize) the panel state

isOnFullScreen - Return Boolean

Parameters none

Boolean

Checks if panel is expanded on full screen

toFullScreen - Return LobiPanel - instance

Parameters none

LobiPanel - instance

Expands the panel to full screen size

toSmallSize - Return LobiPanel - instance

Parameters none

LobiPanel - instance

Collapse the panel to small size

toggleSize - Return LobiPanel - instance

Parameters none

LobiPanel - instance

Toggles (changes to full screen size or to small size) the panel size

close - Return LobiPanel - instance

Parameters none

LobiPanel - instance

Closes the panel (Removes it from document)

setWidth(width) - Return LobiPanel - instance

Parameters:

width - Integer, REQUIRED new width of the panel

LobiPanel - instance

Change the width of the panel. If given width is out of range of minWidth and maxWidth it is reduced to maxWidth size or increased to minWidth size.

setHeight(height) - Return LobiPanel - instance

Parameters:

height - Integer, REQUIRED new height of the panel

LobiPanel - instance

Change the height of the panel. If given height is out of range of minHeight and maxHeight it is reduced to maxHeight size or increased to minHeight size.

setSize(width, height) - Return LobiPanel - instance

Parameters:

width - Integer, REQUIRED new width of the panel

height - Integer, REQUIRED new height of the panel

LobiPanel - instance

Set size (width and height) of the panel.

If given width is out of range of minWidth and maxWidth it is reduced to maxWidth size or increased to minWidth size.

If given height is out of range of minHeight and maxHeight it is reduced to maxHeight size or increased to minHeight size.

getPosition

- Return Object

{
    x: 'left coordinate',
    y: 'top coordinate'
}

Parameters: none

{
    x: 'left coordinate',
    y: 'top coordinate'
}

Get the current position of the panel

getWidth - Return Integer width of the panel

Parameters: none

Integer width of the panel

Get width of the panel

getHeight - Return Integer height of the panel

Parameters: none

Integer height of the panel

Get height of the panel

bringToFront - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

If panel is overlapped by another panel this metho will show overlapped panel on front. This is automatically done when you click panel which is on back

enableDrag - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

Enable dragging of panel. This is automatically called when panel is unpinned

disableDrag - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

Disable dragging of the panel. This is automatically called when panel is pinned, or minimized on footer, or maximized on full screen.

enableResize - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

Enable resize of the panel

disableResize - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

Disable resize of the panel

startLoading - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

Start spinner of the panel loading

stopLoading - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

Stop spinner of the panel loading

setLoadUrl(url) - Return LobiPanel - instance

Parameters:

url - String , REQUIRED. Url to load content

LobiPanel - instance

Set loadUrl property.

load(params) - Return LobiPanel - instance

Parameters:

params - Mixed, OPTIONAL This parameter may be String (which will be used as url to load content) or Object of the following format.

{
    url: 'String', //OPTIONAL load url
    data: 'PlainObject or String', //OPTIONAL: A plain object or string of parameters which is sent to the server with the request.
    callback: 'function' //OPTIONAL:  callback function which is called when load is finished
}

LobiPanel - instance

Loads content by ajax into .panel-body. If parameter was not provided, loadUrl property will be used as URL.

destroy - Return jQuery element

Parameters: none

jQuery element

Destroy the LobiPanel instance

startTitleEditing - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

Creates input field to edit panel title

isTitleEditing - Return Boolean

Parameters: none

Boolean

Check if panel title is being edited (if it is in edit process)

cancelTitleEditing - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

Cancel the panel new title and return to previous title when it is changed but not saved

finishTitleEditing - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

Finish the panel title editing process and save new title

enableTooltips - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

Enable tooltips on panel controls

disableTooltips - Return LobiPanel - instance

Parameters: none

LobiPanel - instance

Disable tooltips on panel controls

-->

Events

Using event

$('.lobipanel').on('init.lobiPanel', function(ev, lobiPanel){
    window.console.log("init event called");
});
$('.lobipanel').on('beforeUnpin.lobiPanel', function(ev, lobiPanel){
    window.console.log("Before unpin", lobiPanel);
});
$('.lobipanel').on('onSmallSize.lobiPanel', function(ev, lobiPanel){
    window.console.log("On small size", ev, lobiPanel);
});
$('.lobipanel').on('loaded.lobiPanel', function(ev, lobiPanel, result, status, xhr){
    window.console.log("Loaded", ev, lobiPanel, result, status, xhr);
});

Name

Parameters

Description

init.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

When panel is initialized

beforeUnpin.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

Before panel is unpinned

onUnpin.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

When panel is unpinned

beforeClose.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

Before panel is closed

onClose.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

When panel is removed

beforeToFront.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

Before panel (which is overlapped by another panel) is shown with high z-index

onToFront.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

When panel (which is overlapped by another panel) is clicked and it is shown with high z-index

beforePin.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

Before panel is pinned

onPin.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

When panel is pinned

beforeMinimize.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

Before panel is minimized

onMinimize.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

When panel is minimized

beforeMaximize.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

Before panel is maximized

onMaximize.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

When panel is maximized

beforeFullScreen.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

Before panel is expanded on full screen

onFullScreen.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

When panel is expanded on full screen

beforeSmallSize.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

Before panel is collapsed from full screen to small size

onSmallSize.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

When panel is collapsed from full screen to small size

beforeLoad.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

Before panel content is loaded

startLoading.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

When panel starts loading content by ajax

loaded.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

result - result of ajax call

status - status of ajax call

xhr - XMLHttpRequest object

When panel content is loaded

resizeStart.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

This event is triggered at the start of a resize operation.

onResize.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

This event is triggered during the resize

resizeStop.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

This event is triggered at the end of the unpin panel resize operation.

dragged.lobiPanel

Parameters:

event - jQuery event

LobiPanel - instance of plugin

This event is triggered when sorting is stopped and the DOM position has changed.

Basic example

Panel title

Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.

$('selector').lobiPanel();

Disable control buttons

Panel title

$('selector').lobiPanel({
    reload: false,
    close: false,
    editTitle: false
});

Use font awesome icons

Panel title

$('selector').lobiPanel({
    reload: {
        icon: 'fa fa-refresh'
    },
    editTitle: {
        icon: 'fa fa-edit',
        icon2: 'fa fa-save'
    },
    unpin: {
        icon: 'fa fa-arrows'
    },
    minimize: {
        icon: 'fa fa-chevron-up',
        icon2: 'fa fa-chevron-down'
    },
    close: {
        icon: 'fa fa-times-circle'
    },
    expand: {
        icon: 'fa fa-expand',
        icon2: 'fa fa-compress'
    }
});

Constrain panel size

Unpin the panel and try to resize it.

Panel title

$('selector').lobiPanel({
    minWidth: 300,
    minHeight: 300,
    maxWidth: 600,
    maxHeight: 480
});

Load content from url

Load content from specified url and apply highlight code

Content from url

$('selector').on('loaded.lobiPanel', function(ev, lobiPanel){
    var $body = lobiPanel.$el.find('.panel-body');
    $body.html('<div class="highlight"><pre><code>' + $body.html() + '</code></pre></div>');
    hljs.highlightBlock($body.find('code')[0]);
});
$('selector').lobiPanel({
    loadUrl: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css',
    bodyHeight: 400
});

Multiple panels with drag & drop

Drag panels by clicking on the headers

Panel title

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Panel title

Media heading

Panel title

Media heading

Panel title

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Panel title

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

$('.panel').lobiPanel({
    sortable: true
});

Initialize with `data-*` attributes

This is panel title

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div class="panel panel-default lobipanel" data-inner-id="lobipanel-data-attributes" data-body-height="300" data-tooltips="false" data-min-width="400" data-resize="horizontal" data-close="{tooltip: 'custom'}">
   <div class="panel-heading">
       <div class="panel-title">
           This is panel title
       </div>
   </div>
   <div class="panel-body">
        content
   </div>
</div>

Nested LobiPanel example

LobiPanel title

Nested LobiPanel title

Panel 1

Panel title

Panel 2

Panel title

Panel 3

Panel title

Panel 4

Panel title

Panel 5

-->

<div class="panel panel-info lobipanel">
    <div class="panel-heading">
        <div class="panel-title">
            <h4>LobiPanel title</h4>
        </div>
    </div>
    <div class="panel-body">
        <div class="panel panel-warning lobipanel">
            <div class="panel-heading">
                <div class="panel-title">
                    <h4>Nested LobiPanel title</h4>
                </div>
            </div>
            <div class="panel-body">
                Panel 1
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="panel panel-default lobipanel" data-sortable="true">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                        Panel 2
                    </div>
                </div>
                <div class="panel panel-default lobipanel" data-sortable="true">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                        Panel 3
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="panel panel-default lobipanel" data-sortable="true">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                        Panel 4
                    </div>
                </div>
                <div class="panel panel-default lobipanel" data-sortable="true">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                        Panel 5
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

-->

Lobipanel

Features

Installation and dependecies.

1. Include necessary css/js files

2. Initialize plugin

Basic usage

Panel title

Using the buttons on the right side of the panel heading you can perform several actions.

Options

Methods

Events

Using event

Basic example

Disable control buttons

Use font awesome icons

Constrain panel size

Load content from url

Content from url

Multiple panels with drag & drop

Panel title

Media heading

Panel title

Media heading

Panel title

Media heading

Panel title

Panel title

Initialize with `data-*` attributes

Nested LobiPanel example

LobiPanel title

Nested LobiPanel title

Panel title

Panel title

Panel title

Panel title

VPS servers from 5$.

Easily deploy an SSD cloud server on @DigitalOcean in 55 seconds. Sign up using the following link and receive $10 in credit

Lobipanel

Features

Installation and dependecies.

1. Include necessary css/js files

2. Initialize plugin

Basic usage

Panel title

Using the buttons on the right side of the panel heading you can perform several actions.

Options

Methods

Events

Using event

Basic example

Disable control buttons

Use font awesome icons

Constrain panel size

Load content from url

Content from url

Multiple panels with drag & drop

Panel title

Media heading

Panel title

Media heading

Panel title

Media heading

Panel title

Panel title

Initialize with data-* attributes

Nested LobiPanel example

LobiPanel title

Nested LobiPanel title

Panel title

Panel title

Panel title

Panel title

VPS servers from 5$.

Easily deploy an SSD cloud server on @DigitalOcean in 55 seconds. Sign up using the following link and receive $10 in credit

Initialize with `data-*` attributes