# 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:

- 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

### 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:
  1. `close`
  2. `toggle`
  3. `hide`
  4. `show`
  5. `reload`
  6. `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':''})
          }
       });