Widget Box

1. Widget Box

Please note that widget box title should now have .widget-title class.
Also widget color options are now applied to the box, not header.
For example .widget-header.header-color-blue becomes .widget-box.widget-color-blue
Widget box consists of header and body.
```
 
   
   
 
```

2. Widget Box Options

You can use following classes for a different widget box color:
1. .widget-color-blue
2. .widget-color-blue2
3. .widget-color-blue3
4. .widget-color-green
5. .widget-color-green2
6. .widget-color-green3
7. .widget-color-red
8. .widget-color-red2
9. .widget-color-red3
10. .widget-color-yellow
11. .widget-color-purple
12. .widget-color-pink
13. .widget-color-dark
14. .widget-color-grey
```
 
  ...
 
```
Add .transparent for transparent widget box:
```
 
  ...
 
```
Add .light-border for light widget body border:
```
 
  ...
 
```
Add .collapsed for widget box to be collapsed by default:
```
 
  ...
 
```

3. Widget Header

Header consists of title and toolbar(optional action buttons):
```
 
   title!
   
 
```
Widget Header
1. .widget-header-small makes .widget-header smaller
2. .widget-header-large makes .widget-header larger
3. .widget-header-flat disables gradient background on .widget-header
Widget toolbar consists of buttons with custom icons and elements.
```
 
   
   
   
   
   
 
```
Current action buttons that trigger an event and perform an action are:
1. settings
2. reload
3. fullscreen
4. collapse
5. close
Please refer to widget events section for more info.
For data-action="collapse" button, you can change collapsed/expanded icons by specifying icon's data-icon-show & data-icon-hide attributes:
```
  
    
  
```
Also, if you specify any icon with -up or -down in its name, it will be automatically flipped.
You can also add .collapsed class to .widget-box to become collapsed by default.
You can have multiple toolbars in widget header:
```
 

 
 
```
.no-border class on a .widget-toolbar hides its border.

To have a dropdown menu inside widget toolbar, you should wrap the action button and menu inside a .widget-menu element:

 

    

    
      
      
         Option#1
         Option#2

To have tabs in widgets, you should put the ul.nav-tabs element inside .widget-toolbar and .tab-content should be inside widget body's .widget-main:

 
   Tabbed
   
      
         Home
         Profile
         Info

4. Widget Body

Widget box consists of header and body.
```
 
   
   
 
```
.widget-body consists of .widget-main and optional toolboxes .widget-toolbox
```
   ... 

   ... 

   ... 
```
.widget-main and .widget-toolbox can have the following padding classes:
- .no-padding
- .padding-2
- .padding-4
- ...
- .padding-30
- .padding-32
For example when putting a table inside widget box you may want to use .no-padding
```
  
  
    
      
      
	  
      
      
    
	
  
```

.widget-toolbox can be before or after .widget-main


 
  ...
 



 ...

Add .toolbox-vertical to .widget-toolbox for vertical toolbox

5. Functions & Events

The following functions are available for widgets:

close
toggle
hide
show
reload
fullscreen

 
  ....

 $('#my-widget').widget_box('toggle');
 $('#my-widget').widget_box('show');
 $('#my-widget').widget_box('close');
 $('#my-widget').widget_box('reload');

The following events are triggered when using widgets:
Before Events:
1. show.ace.widget triggered before a widget box is shown
2. hide.ace.widget triggered before a widget box is hidden
3. close.ace.widget triggered before a widget box is closed
4. reload.ace.widget triggered before a widget box is reloaded
5. fullscreen.ace.widget triggered before a widget box is fullscreen
6. setting.ace.widget triggered before a widget box is fullscreen
After Events:
1. shown.ace.widget triggered after a widget box is shown
2. hidden.ace.widget triggered after a widget box is hidden
3. closed.ace.widget triggered after a widget box is closed
4. reloaded.ace.widget triggered after a widget box is reloaded
5. fullscreened.ace.widget triggered after a widget box is fullscreened

With "before events" you can cancel an action.
For example when you are waiting for remote content to arrive, you can cancel "close" events:

 $('#my-widget').on('close.ace.widget reload.ace.widget', function(event) {
    if(waitingForContent) {
       event.preventDefault();//action will be cancelled, widget box won't close
    }
 });

With "after events" you can do some action after its finished:

 $('#my-widget').on('shown.ace.widget', function(event) {
    //$(this).doSomething();
 });

reload.ace.widget can be used to load remote content.
When data is ready, you can trigger reloaded.ace.widget:

 $('#my-widget').on('reload.ace.widget', function(ev) {
   $.ajax({url: 'remote-data.php'}).done(function(content) {
     //use content
     //when ready ...
     $('#my-widget').trigger('reloaded.ace.widget');
   });
 });

setting.ace.widget event does not have an "after" event.
You can use it to be notified when "settings" button is clicked and show a dialog:
```
 $('#my-widget').on('setting.ace.widget', function(ev) {
   //launch a modal (settings box) or other appropriate action
 });
```

7. Widget Drag & Drop

Using jQuery UI, you can add drag & drop functionality to widget boxes or any other set of elements:

 $('.widget-container-col').sortable({
    connectWith: '.widget-container-col',
    items: '> .widget-box',
    opacity: 0.8,
    revert: true,
    forceHelperSize: true,
    placeholder: 'widget-placeholder',
    forcePlaceholderSize: true,
    tolerance: 'pointer',
    start: function(event, ui){
        //when an element is moved, its parent (.widget-container-col) becomes empty with almost zero height
        //we set a "min-height" for it to be large enough so that later we can easily drop elements back onto it
        ui.item.parent().css({'min-height': ui.item.height()})
    },
    update: function(event, ui) {
        //the previously set "min-height" is not needed anymore
        //now the parent (.widget-container-col) should take the height of its child (.wiget-box)
        ui.item.parent({'min-height':''})
    }
 });

8. Saveing/Restore Widget Order and State

Using localStorage or server storage you can save position and state of widgets (or any element).
There is an example included in Ace's examples section for that.

In that example each .widget-container-col and each .widget-box has a unique ID:



 
   
   ...
   
 

 >
   >
   ...

When using jQuery UI Sortable feature we determine all widgets inside each container and save it in localStorage or send it to server for saving:

$('.widget-container-col').sortable({
  //... other options
  update: function(event, ui) {
    var widget_order = {}

    //loop through containers
    $('.widget-container-col').each(function() {
        var container_id = $(this).attr('id');//get each container's ID
        widget_order[container_id] = [];

        //find widget boxes inside that container
        $(this).find('> .widget-box').each(function() {
            var widget_id = $(this).attr('id');
            widget_order[container_id].push(widget_id);//and add widget's ID to container's widget list
            //now we know each container contains which widgets
        });
    });

    ace.data.set('demo', 'widget-order', widget_order, null, true);
  }
});

Later when we load the page we use the saved info to restore widget order and position:

var container_list = ace.data.get('demo', 'widget-order', true);
if(container_list) {
   for(var container_id in container_list) if(container_list.hasOwnProperty(container_id)) {
      var widgets_inside_container = container_list[container_id];
      if(widgets_inside_container.length == 0) continue;

      for(var i = 0; i < widgets_inside_container.length; i++) {
        var widget = widgets_inside_container[i];
        $('#'+widget).appendTo('#'+container_id);//append the widget box to its container
      }
   }
}

Saving/Restore widget states (such as collpased/expanded) state is similar and you can review the provided example for more info.