Individual or complied

As with all havok modules, widgets are all comply with the AMD specification. They may be loaded individually, built into your own compiled layer with the dojo build tool (or another build tool), or used from the compiled havok.js distributable.

Declataive use

All widgets can be defined declatively as valid HTML and then instantated with the dojo parser.

To define declartively, use the `data-dojo-type` attribute, and parse the html when the dom is ready:

<script type="text/javascript">
    require(['dojo/parser', 'havok/widget/Alert','dojo/domReady!'], function(parser){parser.parse()})
</script>
<div data-dojo-type="havok/widget/Alert" data-dojo-props="hidden: false">
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Programatic use

To define programatically, first create an instance, then add to the dom, and call `startup`:

<script type="text/javascript">
    require(['havok/widget/Alert', 'dojo/domReady!'], function(Alert){
        var alert = new Alert({
            innerHTML: "<strong>Warning!</strong> Best check yo self, you're not looking too good.",
            hidden: false
        });
        dom.byId('alert').appendChild(alert.domNode);
        alert.startup();
    })
</script>
<div id="alert"></alert>

Leveraging the power of dojo

Widgets are built on dojo's dijit framework, and so use the standard dijit lifecycle, templating, etc.

Many of the havok widgets use the havok/widget/_StoreMixin to manage lists of items. Stores allow great flexibility. Items may be fetched via ajax, filtered, sorted, and reused throughout your application.

Properties

This mixin adds four properties to any widget using it:

Examples

Declative store

Store data may be passed in using the data-dojo-props attribute

<ul data-dojo-type="havok/widget/Dropdown"
    data-dojo-props="store: {
        data: [
            {id: 0, text: 'Action'},
            {id: 1, text: 'Another Action'},
            {id: 2, text: 'Something else here'},
            {id: 3, type: 'divider'},
            {id: 4, href: '#dropdowns', text: 'Dropdowns'}
        ]
    }"
></ul>

Programatic store

A store can be created progamatically and passed to the widget. Eg:

<div id="dropdown2"></div>
<script type="text/javascript">
  require(
      ['dojo/dom', 'havok/widget/Dropdown', 'dojo/store/Memory', 'dojo/domReady!'],
      function(dom, Dropdown, Memory){
          var dropdown = new Dropdown({ //create a new instance of the Dropdown widget
              store: new Memory({ //create a new instance of a Memory store for the dropdown widget to consume
                  data: [
                      {id: 0, text: 'Action'},
                      {id: 1, text: 'Another Action'},
                      {id: 2, text: 'Something else here'},
                      {id: 3, type: 'divider'},
                      {id: 4, href: '#dropdowns', text: 'Dropdowns'}
                  ]
              })
          });
          dom.byId('dropdown2').appendChild(dropdown.domNode); //add the dropdown to the dom
          dropdown.startup(); //call startup on the dropdown
      }
  )
</script>

Store from the Store Manager

The store manager allows data store to be easily interchanged and injected into store consumers. To use a store from the manager, set the store property to the name used to register that store with the manager. Eg:

<ul data-dojo-type="havok/widget/Dropdown"
    data-dojo-props="store: 'dropdownStore'"
></ul>
<script type="text/javascript">
    require([
        'havok/get!havok/store/manager', //get the store manager instance from the havok dependency injection container
        'dojo/store/Memory'
    ],
        function(storeManager, Memory){
            storeManager.stores.push( //add a new store to the store manager
                new Memory({
                    name: 'dropdownStore', //give the store a name so it can be fetched with that name
                    data: [
                        {id: 0, text: 'Action'},
                        {id: 1, text: 'Another Action'},
                        {id: 2, text: 'Something else here'},
                        {id: 3, type: 'divider'},
                        {id: 4, href: '#dropdowns', text: 'Dropdowns'}
                    ]
                })
            );
        }
    )
</script>

Implicit store

If no store is set by one of the above methods, a store is created implicitly from the markup. For example, in the Dropdown widget each li becomes an item in the store.

Store queries

Any store can be filtered by setting a query on the store.

Basic example

This query will filter so only items with A in the text will display:

<ul data-dojo-type="havok/widget/Dropdown"
    data-dojo-props="
      query: {text: /^.*A.*$/},
      store: {
          data: [
              {id: 0, text: 'Action'},
              {id: 1, text: 'Another Action'},
              {id: 2, text: 'Something else here'},
              {id: 3, type: 'divider'},
              {id: 4, text: 'Separated Link'}
          ]
      }
    "
>
</ul>

Queries on an implicit store

Implicitly created stores can also be queried. Eg:

<ul data-dojo-type="havok/widget/Dropdown"
  data-dojo-props="
      query: {text:  /^.*A.*$/}
  "
>
  <li><a href="">Action</a></li>
  <li><a href="">Another action</a></li>
  <li><a href="">Something else here</a></li>
  <br />
  <li><a href="">Separated link</a></li>
</ul>

Store query options

Query options can be set to control start count and sort. Eg:

<ul data-dojo-type="havok/widget/Dropdown"
    data-dojo-props="
      queryOptions: {
          start: 1,
          count: 3,
          sort: [{attribute: 'text', descending: true}]
      },
      store: {
          data: [
              {id: 0, text: '0'},
              {id: 1, text: '1'},
              {id: 2, text: '2'},
              {id: 3, text: '3'},
              {id: 4, text: '4'},
              {id: 5, text: '5'},
              {id: 6, text: '6'}
          ]
      }
    "
>
</ul>

DropdownContainer

The havok/widget/DropdownContainer widget. An empty dropdown that can be filled with whatever content you choose.

Example

Toggleable, contextual menu for displaying anything.

Declarative Example

<div data-dojo-type="havok/widget/DropdownContainer">
    <div>
      <h5>Stuff here</h5>
      <p>This is stuff inside a dropdown</p>
    </div>
</div>

Dropdown

The havok/widget/Dropdown widget. Inherits from havok/widget/_DropdownBase. Shows a list of links.

Properties

Events

Example

Toggleable, contextual menu for displaying lists of links.

Declarative Example

<ul data-dojo-type="havok/widget/Dropdown">
  <li><a href="">Action</a></li>
  <li><a href="">Another action</a></li>
  <li><a href="">Something else here</a></li>
  <hr />
  <li><a href="">Separated link</a></li>
</ul>

Programatic Example

<div id="dropdown1"></div>
<script type="text/javascript">
    require(['dojo/dom', 'havok/widget/Dropdown', 'dojo/domReady!'], function(dom, Dropdown){
        var dropdown = new Dropdown({
            innerHTML: [
                '<li><a tabindex="-1" href="">Action</a></li>',
                '<li><a tabindex="-1" href="">Another action</a></li>',
                '<li><a tabindex="-1" href="">Something else here</a></li>',
                '<hr />',
                '<li><a tabindex="-1" href="">Separated link</a></li>'
            ].join('')
        });
        dom.byId('dropdown1').appendChild(dropdown.domNode);
        dropdown.startup();
    })
</script>

Click events

If the href attribute is an empty string, the active property will be changed. If the href attribute is not empty, the link will be followed. Eg:

<ul data-dojo-type="havok/widget/Dropdown">
  <li><a href="">item 1</a></li>
  <li><a href="">item 2</a></li>
  <li><a href="">item 3</a></li>
  <li><a href="#dropdowns">#dropdowns anchor</a></li>
  <li><a href="http://github.com">github.com</a></li>
</ul>

To listen to click events, use the .on('item-click', callback) method. Eg:

<ul id="dropdownClick1" data-dojo-type="havok/widget/Dropdown">
    ...
</ul>
<script type="text/javascript">
    require(['dijit/registry', 'havok/parseComplete!'], function(registry){
        registry.byId('dropdownClick1').on('item-click', function(item){
            alert('Just clicked item: ' + item.id)
        })
    })
</script>

Options

Disabled menu options

Add .disabled to a <li> in the dropdown to disable the link, or set 'type': 'disabled' on the store item. Disabled links are not clickable.

<ul data-dojo-type="havok/widget/Dropdown">
  <li><a href="">Regular link</a></li>
  <li class="disabled"><a href="">Disabled link</a></li>
  <li><a href="">Another link</a></li>
</ul>

Sub menus on dropdowns

To add an extra level of dropdown menus, wrap the submenu in havok/widget/DropdownSubmenu

Heads up! havok/widget/DropdownSubmenu inherits from havok/widget/DropdownToggle, and so exposes all the same methods.

Example

<ul data-dojo-type="havok/widget/Dropdown">
  <li><a href="">Action</a></li>
  <li><a href="">Another action</a></li>
  <li><a href="">Something else here</a></li>
  <hr />
  <li data-dojo-type="havok/widget/DropdownSubmenu">
    <a href="">More options</a>
    <ul data-dojo-type="havok/widget/Dropdown">
      <li><a href="">Second level link</a></li>
      <li><a href="">Second level link</a></li>
      <li><a href="">Second level link</a></li>
      <li><a href="">Second level link</a></li>
      <li><a href="">Second level link</a></li>
    </ul>
  </li>
</ul>

Example with a store

Use the type: 'dropdown' to mark parent items. Use parent: id property to specify child items in the store. Now that's nice syntax!

<ul data-dojo-type="havok/widget/Dropdown"
    data-dojo-props="
        store: {
            data: [
                {id: 0, text: 'Action'},
                {id: 1, text: 'Another Action'},
                {id: 2, text: 'Something else here'},
                {id: 3, type: 'divider'},
                {id: 4, type: 'dropdown', text: 'More options'},
                {id: 5, parent: 4, text: 'Second level link'},
                {id: 6, parent: 4, text: 'Second level link'},
                {id: 7, parent: 4, text: 'Second level link'},
                {id: 8, parent: 4, text: 'Second level link'}
            ]
        }
    "
>
</ul>

Date Dropdown

<div data-dojo-type="havok/widget/DateDropdown">
</div>

Markup

To use a dropdown menu, you would normally place it inside a havok/widget/DropdownToggle.

Use havok/widget/DropdownToggle to make a havok/widget/Dropdown show and hide.

Properties

Methods

Events

Examples

Within a navbar

<li data-dojo-type="havok/widget/DropdownToggle">
  <a href="">Dropdown <b class="caret"></b></a>
  <ul data-dojo-type="havok/widget/Dropdown" aria-labelledby="drop1">
    <li><a href="http://google.com">Action</a></li>
    <li><a href="anotherAction">Another action</a></li>
    <li><a href="">Something else here</a></li>
    <hr />
    <li><a href="">Separated link</a></li>
  </ul>
</li>
...

Within pills

Within overflow hidden element

The Dropdown dom nodes is moved to the end of the document, removing any clipping problems, or display issues with dropdowns in modals.

Usage

Declarative

The first child element inside a havok/widget/DropdownToggle is the `button` which will toggle the dropdown. The first havok/widget/Dropdown child widget inside a havok/widget/DropdownToggle will be toggled.

<div data-dojo-type="havok/widget/DropdownToggle">
  <button>Show dropdown</button> <!--this node will show/hide the dropdown-->
  <ul data-dojo-type="havok/widget/Dropdown" data-dojo-props="store: mystore"> <!--this is the dropdown which will be shown/hidden-->
  </ul>
</div>

Programatic

To create a havok/widget/DropdownToggle programatically, pass an instance of havok/widget/Dropdown to the dropdown property, and the markup to create the button to the innerHTML property.

<div id="dropdownButton1">
    <script type="text/javascript">
        require([
            'dojo/dom',
            'havok/widget/Dropdown',
            'havok/widget/DropdownToggle',
            'dojo/domReady!'
        ],
        function(
            dom,
            Dropdown,
            DropdownToggle
        ){
            var dropdownToggle = new DropdownToggle({
                innerHTML: '<button class="btn">Click me</button>',
                dropdown:  new Dropdown({store: {
                    data: [
                        {id: 0, text: 'Action'},
                        {id: 1, text: 'Another Action'},
                        {id: 2, text: 'Something else here'},
                        {id: 3, type: 'divider'},
                        {id: 4, text: 'Separated Link'}
                    ]
                }})
            });

            dom.byId('dropdownButton1').appendChild(dropdownToggle.domNode);

            dropdownToggle.startup();
        })
    </script>
</div>

Fine grained control

Use attach points to control exactly which element in the markup will respond to a click.

<div data-dojo-type="havok/widget/DropdownToggle" class="well">
  <p>Extra text</p>
  <button data-dojo-attach-point="button" class="btn">Show Dropdown</button>
  <ul data-dojo-type="havok/widget/Dropdown">
      ...
  </ul>
</div>

Keyboard handling buttons

Use havok/widget/Button to add a button that can also respond to keypress events. The button widget can be used in place of any button tag.

Note: be careful, the keypress listeners on buttons may override normal browser controls. The keyTarget property controls the node that keypress events are listened to. By default it is set to 'window'. To turn off keyboard event listening, set keyTarget to false.

<button data-dojo-type="havok/widget/Button" data-dojo-props="keys: 'm'">press 'm'</button>
<button data-dojo-type="havok/widget/Button" data-dojo-props="keys: {ctrl: true, char: 'm'}">press 'ctrl m'</button>
<button data-dojo-type="havok/widget/Button" data-dojo-props="keys: {ctrl: true, shift: true, char: 'm'}">press 'ctrl shift m'</button>
<button data-dojo-type="havok/widget/Button" data-dojo-props="keys: {ctrl: true, shift: true, alt: true, char: 'm'}">press 'ctrl shift alt m'</button>

Button Groups

Wrap a series of buttons with havok/widget/ButtonGroup to create a group.

<div data-dojo-type="havok/widget/ButtonGroup" >
  <button>Left</button>
  <button>Middle</button>
  <button>Right</button>
</div>

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

<div data-dojo-type="havok/widget/ButtonGroup" class="btn-group-vertical">
    ...
</div>

Properties

Events

Single toggle

Use havok/widget/ToggleButton to create a single toggle button.

<button data-dojo-type="havok/widget/ToggleButton" class="btn-primary">Single Toggle</button>

Properties

Methods

Events

Checkbox

Use havok/widget/CheckboxGroup for checkbox style toggling on btn-group.

<div class="havok/widget/CheckboxGroup">
  <button type="button" class="btn-primary">Left</button>
  <button type="button" class="btn-primary">Middle</button>
  <button type="button" class="btn-primary">Right</button>
</div>

Properties

Events

Radio

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

<div data-dojo-type="havok/widget/RadioGroup">
  <button type="button" class="btn-primary">Left</button>
  <button type="button" class="btn-primary">Middle</button>
  <button type="button" class="btn-primary">Right</button>
</div>

Properties

Events

Button Dropdowns

Overview and examples

havok/widget/DropdownToggle with a btn-group class can be used to create button dropdown menus.

<button class="btn" data-dojo-type="havok/widget/DropdownToggle">
  Action <span class="caret"></span>
  <ul class="hidden" data-dojo-type="havok/widget/Dropdown">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
    <hr />
    <li><a>Separated link</a></li>
  </ul>
</button>

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

<div class="btn-group" data-dojo-type="havok/widget/DropdownToggle">
  <button class="btn">Inverse</button>
  <button data-dojo-attach-point="button" class="btn btn-inverse"><span class="caret"></span></button>
  <ul data-dojo-type="havok/widget/Dropdown">
      ...
  </ul>
</div>

Sizes

Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

Dropup menus

<div class="btn-group dropup"
     data-dojo-type="havok/widget/DropdownToggle"
     data-dojo-props="placement: {toggle: 'top-left', dropdown: 'bottom-left'}"
>
  <button class="btn">Dropup</button>
  <button data-dojo-attach-point="button" class="btn"><span class="dropup caret"></span></button>
  <ul data-dojo-type="havok/widget/Dropdown">
      ...

  </ul>
</div>

Right Dropup

<div class="btn-group dropup"
     data-dojo-type="havok/widget/DropdownToggle"
     data-dojo-props="placement: {toggle: 'top-right', dropdown: 'bottom-right'}"
>
  <button class="btn">Right Dropup</button>
  <button data-dojo-attach-point="button" class="btn"><span class="dropup caret"></span></button>
  <ul data-dojo-type="havok/widget/Dropdown">
      ...
  </ul>
</div>

Basic tabs

Use havok/widget/NavTab:

<ul data-dojo-type="havok/widget/NavTab">
  <li class="active"><a href="">Home</a></li>
  <li><a href="">Profile</a></li>
  <li><a href="">Messages</a></li>
</ul>

Basic pills

Use havok/widget/NavPill:

<ul data-dojo-type="havok/widget/NavPill">
  <li class="active"><a href="">Home</a></li>
  <li><a href="">Profile</a></li>
  <li><a href="">Messages</a></li>
</ul>

Click events

If the href attribute is an empty string, the active nav item will be changed. If the href attribute is not empty, the link will be followed. Eg:

<ul data-dojo-type="havok/widget/NavTab">
  <li class="active"><a href="">Home</a></li>
  <li><a href="">tab 1</a></li>
  <li><a href="">tab 2</a></li>
  <li><a href="#navs">#navs anchor</a></li>
  <li><a href="http://github.com">github.com</a></li>
</ul>

To listen to click events, use the .on('item-click', callback) method. Eg:

<ul id="navTabs1" data-dojo-type="havok/widget/NavTab">
  <li class="active"><a href="">tab 0</a></li>
  <li><a href="">tab 1</a></li>
  <li><a href="">tab 2</a></li>
</ul>
<script type="text/javascript">
    require(['dijit/registry', 'havok/parseComplete!'], function(registry){
        registry.byId('navTabs1').on('item-click', function(item){
            alert('Just clicked item: ' + item.id)
        })
    })
</script>

Watching active item

To watch the active item in code, use the .watch('active', callback) method. Note, this is different to .on('item-click', callback), as it will only fire when the active item is changed, not on every click. Eg:

<ul id="navTabs1" data-dojo-type="havok/widget/NavTab" >
  <li class="active"><a href="">tab 0</a></li>
  <li><a href="">tab 1</a></li>
  <li><a href="">tab 2</a></li>
</ul>
<script type="text/javascript">
    require(['dijit/registry', 'havok/parseComplete!'], function(registry){
        registry.byId('navTabs1').watch('active', function(property, oldValue, newValue){
            alert('Previously active tab: ' + oldValue.id + '. Currently active tab: ' + newValue.id)
        })
    })
</script>

Component alignment

To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

Programatic example

<div id="nav1"></div>
<script type="text/javascript">
    require(['dojo/dom', 'havok/widget/NavPill', 'dojo/domReady!'], function(dom, NavPill){
        var nav = new NavPill({
            innerHTML: [
                '<li class="active"><a href="">Home</a></li>',
                '<li><a href="">Profile</a></li>',
                '<li><a href="">Messages</a></li>'
            ].join('')
        });
        dom.byId('nav1').appendChild(nav.domNode);
        nav.startup();
    })
</script>

Disabled state

For any nav component (tabs, pills, or list), add .disabled to the li or set 'type': 'disabled' on the store item for gray links and no hover effects. Links will not be clickable.

<ul data-dojo-type="havok/widget/NavPill">
  ...
  <li class="disabled"><a href="">Home</a></li>
  ...
</ul>

Data Store

Nav uses a havok/widget/_StoreMixin for the nav items.

Example

The active nav item can be set using the data-dojo-props: active attribute

<ul data-dojo-type="havok/widget/NavPill"
    data-dojo-props="
        active: 'home',
        store: {
            idProperty: 'text',
            data: [
                {text: 'home'},
                {href: '#navs', text: '#navs anchor'},
                {type: 'disabled', text: 'distabled'}
            ]
        }"
></ul>

Stackable

As tabs and pills are horizontal by default, just add a class, .nav-stacked, to make them appear vertically stacked.

Stacked tabs

<ul data-dojo-type="havok/widget/NavTab" class="nav-stacked">
  ...
</ul>

Stacked pills

<ul data-dojo-type="havok/widget/NavPill" class="nav-stacked">
  ...
</ul>

Dropdowns

Add dropdown menus with the havok/widget/DropdownToggle widget.

Tabs with dropdowns

<ul data-dojo-type="havok/widget/NavTab" >
  <li class="active"><a href="">Home</a></li>
  <li><a href="">Help</a></li>
  <li data-dojo-type="havok/widget/DropdownToggle">
    <a href="">Dropdown <b class="caret"></b></a>
    <ul data-dojo-type="havok/widget/Dropdown">
      <li><a href="">Action</a></li>
      <li><a href="">Another action</a></li>
      <li><a href="">Something else here</a></li>
      <hr />
      <li><a href="">Separated link</a></li>
    </ul>
  </li>
</ul>

Pills with dropdowns

<ul data-dojo-type="havok/widget/NavPill" >
   <li class="active"><a href="">Home</a></li>
   <li><a href="">Help</a></li>
   <li data-dojo-type="havok/widget/DropdownToggle">
     <a href="">Dropdown <b class="caret"></b></a>
     <ul data-dojo-type="havok/widget/Dropdown">
       <li><a href="">Action</a></li>
       <li><a href="">Another action</a></li>
       <li><a href="">Something else here</a></li>
       <hr />
       <li><a href="">Separated link</a></li>
     </ul>
   </li>
 </ul>

Nav dropdowns created from a store

Using a store, add dropdown menus with the type: 'dropdown' property.

<ul data-dojo-type="havok/widget/NavPill"
    data-dojo-props="
      active: 'home',
      store: {
          idProperty: 'text',
          data: [
              {text: 'home'},
              {type: 'dropdown', text: 'help'},
              {text: 'action', parent: 'Help'},
              {text: 'another action', parent: 'help'},
              {text: 'something else here', parent: 'help'},
              {type: 'divider', parent: 'help'},
              {type: 'dropdown', text: 'deeper submenu', parent: 'help'},
              {text: 'Deep menu 1', parent: 'deeper submenu'},
              {text: 'Deep menu 2', parent: 'deeper submenu'},
          ]
      }"
>
</ul>

Nav lists

A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

Take a list of links and use havok/widget/NavList.

Markup nav list Example

If using markup, add class="nav-header" to create headers:

<ul data-dojo-type="havok/widget/NavList">
  <li class="nav-header">List header</li>
  <li class="active"><a href="">Home</a></li>
  <li><a href="">Library</a></li>
  <li><a href="">Applications</a></li>
  <li class="nav-header">Another list header</li>
  <li><a href="">Profile</a></li>
  <li><a href="">Settings</a></li>
  <hr />
  <li><a href="">Help</a></li>
</ul>

Store nav list Example

If using a store, set type: 'nav-header' to create headers:

<ul data-dojo-type="havok/widget/NavList"
    data-dojo-props="
      activeId: 'Home',
      store: {
          idProperty: 'text',
          data: [
              {type: 'nav-header', text: 'List Header'},
              {text: 'Home'},
              {text: 'Library'},
              {text: 'Applications'},
              {type: 'nav-header', text: 'Another List Header'},
              {text: 'Profile'},
              {text: 'Settings'},
              {type: 'divider', text: 'divider1'},
              {text: 'Help'}
          ]
      }"
>
</ul>

Bring your tabs to life with havok/widget/TabContainer.

Tabbable example

The title attribute will be used to create an instance of havok/widget/NavTab.

<div data-dojo-type="havok/widget/TabContainer" style="margin-bottom: 18px;">
    <div title="Section 1" class="active">
      <p>I'm in Section 1.</p>
    </div>
    <div title="Section 2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
    <div title="Section 3">
      <p>What up girl, this is Section 3.</p>
    </div>
</div>

Tabbable in any direction

Use the placement property of havok/widget/TabContainer to alter where the tabs appear.

Tabs on the bottom

<div id="tabContainer1" data-dojo-type="havok/widget/TabContainer"
    data-dojo-props="placement: 'bottom'">
    ...
</div>
<div id="buttonGroup1" data-dojo-type="havok/widget/RadioGroup"
     data-dojo-props="active: 'bottom', store: {idProperty: 'text', data: [
          {type: 'button', text: 'top'},
          {type: 'button', text: 'left'},
          {type: 'button', text: 'right'},
          {type: 'button', text: 'bottom'}
     ]}"
>
</div>
<script type="text/javascript">
    require(['dijit/registry', 'havok/parseComplete!'], function(registry){
        var tabContainer = registry.byId('tabContainer1'),
            buttonGroup = registry.byId('buttonGroup1');

        buttonGroup.on('item-click', function(item){
            tabContainer.set('placement', item.text);
        });
    })
</script>

Basic navbar

To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.

<div data-dojo-type="havok/widget/NavBar">
    <a class="brand">Title</a>
    <ul data-dojo-type="havok/widget/NavBarLinks">
      <li class="active"><a>Home</a></li>
      <li><a>Link</a></li>
      <li><a>Link</a></li>
    </ul>
</div>

Navbar components

Brand

A simple link to show your brand or project name only requires an anchor tag.

<a class="brand" href="#">Project name</a>

Nav links

Nav items are simple to add via havok/widget/NavBarLinks widget.

<ul data-dojo-type="havok/widget/NavBarLinks">
  <li class="active"><a>Home</a></li>
  <li><a>Link</a></li>
  <li><a>Link</a></li>
</ul>

You can easily add dividers to your nav links with an empty list item and a simple class. Just use the hr tag.

<ul class="nav">
    ...
    <hr />
    ...
</ul>

Forms

To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.

<form class="navbar-form pull-left">
    <input type="text" class="span2">
    <button type="submit" class="btn">Submit</button>
</form>

Search form

For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.

<form class="navbar-search pull-left">
    <input type="text" class="search-query" placeholder="Search">
</form>

Component alignment

Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

Using dropdowns

Use havok/widget/DropdownToggle and havok/widget/Dropdown inside a links list.

<div data-dojo-type="havok/widget/NavBar">
    <ul data-dojo-type="havok/widget/NavBarLinks">
      <li class="active"><a>Home</a></li>
      <li data-dojo-type="havok/widget/DropdownToggle">
          <a>Dropdown</a>
          <ul data-dojo-type="havok/widget/Dropdown">
              <li><a>Item 1</a></li>
              <li><a>Item 2</a></li>
          </ul>
      </li>
    </ul>
</div>

Dropdown example using a store.

<div data-dojo-type="havok/widget/NavBar">
    <ul data-dojo-type="havok/widget/NavBarLinks"
        data-dojo-props="store: {
          idProperty: 'text',
          data: [
              {text: 'Home'},
              {type: 'dropdown', text: 'Dropdown'},
              {text: 'Item 1', parent: 'Dropdown'},
              {text: 'Item 2', parent: 'Dropdown'},
          ]
        }"
    >
    </ul>
</div>

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

Optional display variations

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

Fixed to top

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

<div data-dojo-type="havok/widget/NavBar" class="navbar-fixed-top">
...
</div>

Fixed to bottom

Add .navbar-fixed-bottom instead.

<div data-dojo-type="havok/widget/NavBar" class="navbar-fixed-bottom">
...
</div>

Static top navbar

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.

<div data-dojo-type="havok/widget/NavBar" class="navbar-static-top">
...
</div>

Responsive navbar

To implement a collapsing responsive navbar, wrap your navbar content in a containing div, and use data-dojo-attach-point="toggleNode" with data-dojo-attach-point="toggleTarget"

<div data-dojo-type="havok/widget/NavBar">
    <div class="container">
      <a data-dojo-attach-point="toggleNode">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Title</a>
      <div data-dojo-attach-point="toggleTarget">
        <ul data-dojo-type="havok/widget/NavBarLinks"
            data-dojo-props="
              active: 'Home',
              store: {
                  idProperty: 'text',
                  data: [
                      {text: 'Home'},
                      {text: 'Link 1'},
                      {text: 'Link 2'},
                      {type: 'dropdown', text: 'Dropdown'},
                      {text: 'Action', parent: 'Dropdown'},
                      {text: 'Another action', parent: 'Dropdown'},
                      {text: 'Something else here', parent: 'Dropdown'},
                      {type: 'divider', text: 'divider1', parent: 'Dropdown'},
                      {type: 'nav-header', text: 'Nav header', parent: 'Dropdown'},
                      {text: 'Separated link', parent: 'Dropdown'},
                      {text: 'One more separated link', parent: 'Dropdown'}
                  ]
              }
            "
        ></ul>
        <form class="navbar-search pull-left" action="">
          <input type="text" class="search-query span2" placeholder="Search">
        </form>
        <ul class="pull-right"
            data-dojo-type="havok/widget/NavBarLinks"
            data-dojo-props="
              active: 'Home',
              store: {
                  idProperty: 'text',
                  data: [
                      {text: 'Link'},
                      {type: 'divider', text: 'divider1'},
                      {type: 'dropdown', text: 'Dropdown'},
                      {text: 'Action', parent: 'Dropdown'},
                      {text: 'Another action', parent: 'Dropdown'},
                      {text: 'Something else here', parent: 'Dropdown'},
                      {type: 'divider', text: 'divider1', parent: 'Dropdown'},
                      {text: 'Separated link', parent: 'Dropdown'}
                  ]
              }
            "
        ></ul>
      </div>
    </div>
</div>

Inverted variation

Modify the look of the navbar by adding .navbar-inverse.

<div data-dojo-type="havok/widget/NavBar" class="navbar-inverse">
...
</div>

havok/dnd/_SortableMixin makes list type elements sortable by drag n drop.

Example

<ul class="nav-stacked"
    data-dojo-type="havok/widget/NavTab"
    data-dojo-mixins="havok/widget/_SortableMixin"
    data-dojo-props="store: {
        idProperty: 'text',
        data: [
            {text: 'ACT'},
            {text: 'NSW'},
            {text: 'Vic'},
            {text: 'Qld'},
            {text: 'SA'},
            {text: 'NT'},
            {text: 'WA'},
            {text: 'Tas'}
        ]
    }"
>
</ul>

Sort between lists

Use the dropTargets property to allow sorting between lists.

<ul class="span6 nav-stacked"
    id="leftSortable"
    data-dojo-type="havok/widget/NavTab"
    data-dojo-mixins="havok/widget/_SortableMixin"
    data-dojo-props="dropTargets: ['this', 'rightSortable']"
>
    <li><a>Harry</a></li>
    <li><a>Max</a></li>
    <li><a>Phillip</a></li>
    <li><a>James</a></li>
</ul>
<ul class="span6 nav-stacked"
    id="rightSortable"
    data-dojo-type="havok/widget/NavTab"
    data-dojo-mixins="havok/widget/_SortableMixin"
    data-dojo-props="dropTargets: ['this', 'leftSortable']"
>
    <li><a>Michael</a></li>
    <li><a>Tim</a></li>
    <li><a>Shaun</a></li>
    <li><a>Robert</a></li>
</ul>

Horizontal example

Tabs example

Tabs in a havok/widget/TabContainer are sortable by default.

The content of an Affix widget will stay visible in the viewport when it's target element is also visible. By default, Affix will target the parent element.

Example

Fix a widget to always be visible. The nav to the left is an example.

Stand alone widget

Scroll the viewport to see the example working

<style>
  .affix-example1.affix {
    top: 40px;
  }
  .affix-example1.affix-bottom {
    position: absolute;
    top: auto;
    bottom: 14px;
  }
</style>
<div style="height: 300px">
    <div
        class="affix-example1"
        data-dojo-type="havok/widget/Affix"
        data-dojo-props="viewportOffset: {top: 40, bottom: 0}"
    >
        <button class="btn">I'm affixed!</button>
    </div>
</div>

Alternate affix target

Scroll the viewport to see the example working

<style>
  .affix-example2.affix {
    top: 40px;
  }
  .affix-example2.affix-bottom {
    position: absolute;
    top: auto;
    bottom: 0px;
  }
</style>
<div class="row-fluid" style="position:relative">
    <div class="span3">
      <div
          class="affix-example2"
          data-dojo-type="havok/widget/Affix"
          data-dojo-props="
              viewportOffset: {top: 40, bottom: 0},
              affixTarget: 'AffixTarget1'
          "
      >
          <button class="btn">Target 1</button>
      </div>
    </div>
    <div class="span9">
      <div id ="AffixTarget1" class="well">
          <p><b>Target 1</b></p>
          ...
      </div>
    </div>
</div>
...

Affix Mixin

Affix behaviour can be mixed in to any widget. Simply use data-dojo-mixins="havok/widget/_AffixMixin"

<div style="height: 300px">
    <button
        class="affix-example1"
        data-dojo-type="havok/widget/ToggleButton"
        data-dojo-mixins="havok/widget/_AffixMixin"
        data-dojo-props="viewportOffset: {top: 40, bottom: 0}"
    >
        Affixed toggle
    </button>
</div>

Properties

Example in navbar

The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.

Simply use havok/widget/_ScrollSpyMixin with a nav widget, and set the spyTarget property.

<div data-dojo-type="havok/widget/NavBar" class="navbar-static">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project Name</a>
      <ul data-dojo-type="havok/widget/NavBarLinks"
          data-dojo-mixins="havok/widget/_ScrollSpyMixin"
          data-dojo-props="
          spyTarget: 'scrollspyExample1',
          store:{
            idProperty: 'text',
            data: [
                {text: '@superdweebie', spy: 'superdweebie'},
                {text: '@crimsonronin', spy: 'crimsonronin'},
                {type: 'dropdown', text: 'Dropdown'},
                {text: 'one', spy: 'one', parent: 'Dropdown'},
                {text: 'two', spy: 'two', parent: 'Dropdown'},
                {type: 'divider', text: 'divider1', parent: 'Dropdown'},
                {text: 'three', spy: 'three', parent: 'Dropdown'}
            ]
          }"
      >
      </ul>
    </div>
</div>
<div id="scrollspyExample1" class="scrollspy-example">
  <h4 id="superdweebie">@superdweebie</h4>
  <p>...</p>
  <h4 id="crimsonronin">@crimsonronin</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

Auto populate nav

ScrollSpy can autopopulate the nav using the id and title attributes of the child elemnts of spyTarget.

<div class="row-fluid">
    <div class="span3">
        <ul data-dojo-type="havok/widget/NavPill"
            data-dojo-mixins="havok/widget/_ScrollSpyMixin"
            data-dojo-props="spyTarget: 'scrollspyExample2'"
            class="nav-stacked"
        >
        </ul>
    </div>
    <div id="scrollspyExample2" class="span9 scrollspy-example">
        <h4 id="superdweebie">@superdweebie</h4>
        <p>...</p>
        <h4 id="crimsonronin">@crimsonronin</h4>
        <p>...</p>
        <h4 id="one" title="ONE">one</h4>
        <p>...</p>
        <h4 id="two" title="TWO">two</h4>
        <p>...</p>
        <h4 id="three" title="THREE">three</h4>
        <p>...</p>
    </div>
</div>

Properties

Simply use havok/widget/Accordion. The title attribute of the contained divs will be used for the headings.

<div data-dojo-type="havok/widget/Accordion">
    <div title="one">
        <p>...</p>
    </div>
    <div title="two">
        <p>...</p>
    </div>
    <div title="three">
        <p>...</p>
    </div>
</div>

For simple modals use havok/widget/Modal.

Live Demo

<div data-dojo-type="havok/widget/Modal" title="Modal Heading">
    ...
</div>

Custom footer

Change the modal footer by using data-dojo-attach-point="footer". Button names and keys can also be set. (This modal can be closed with ctrl-y)

<div data-dojo-type="havok/widget/Modal" id="modal2" title="Custom footer">
  <h4>Text in a modal</h4>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
  <div data-dojo-attach-point="footer">
      <button class="btn" data-dojo-attach-event="click: onCloseClick">Something</button>
      <button data-dojo-type="havok/widget/Button"
              data-dojo-attach-event="click: onCloseClick"
              data-dojo-props="keys: 'ESCAPE', keyTarget: false">No Thanks</button>
      <button class="btn-info"
              data-dojo-type="havok/widget/Button"
              data-dojo-attach-event="click: onOkClick"
              data-dojo-props="keys: ['ENTER', {char: 'y', ctrl: true}], keyTarget: false">Yeah!</button>
  </div>
</div>

Properties

Methods

Use havok/widget/Tooltip to make a tooltip.

<a data-dojo-type="havok/widget/Tooltip" title="Default tooltip">you probably</a>

Four directions

<a data-dojo-type="havok/widget/Tooltip" data-dojo-props="placement: 'top'" title="Tooltip on top">Tooltip on top</a>

Custom trigger event

<a data-dojo-type="havok/widget/Tooltip" data-dojo-props="eventShow: 'click'" title="I was clicked">Click to show tooltip</a>

Inverse tooltip

<a class="inverse" data-dojo-type="havok/widget/Tooltip" title="Inverse tooltip">Inverse Tooltip</a>

Use havok/widget/Alert to create and show/hide alerts.

Default alert

Wrap any text in havok/widget/Alert for a basic warning alert message.

<div data-dojo-type="havok/widget/Alert" data-dojo-props="hidden: false">
  <strong>Warning!</strong> Best check your self, you're not looking too good.
</div>

Block alerts

Add class alert-block for longer messages.

<div data-dojo-type="havok/widget/Alert" class="alert-block" data-dojo-props="hidden: false">
  <h4>Warning!</h4>
  <p>Best check your self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>

Pretty colors

Add sematic classes for different styling:

<div data-dojo-type="havok/widget/Alert" class="alert-info" data-dojo-props="hidden: false">
  <strong>Info!</strong> alert.
</div>
<div data-dojo-type="havok/widget/Alert" class="alert-error" data-dojo-props="hidden: false">
  <strong>Error!</strong> alert.
</div>
<div data-dojo-type="havok/widget/Alert" class="alert-success" data-dojo-props="hidden: false">
  <strong>Success!</strong> alert.
</div>

Properties

havok/widget/Overlay A widget designed to act as a Standby/Busy/Disable/Blocking widget to indicate a particular DOM node is processing and cannot be clicked on at this time.

Example

<p>...</p>
<span id="overlay1" data-dojo-type="havok/widget/Overlay" >This is overlayed</span>
<button id="overlayToggle1" data-dojo-type="havok/widget/ToggleButton">Toggle overlay</button>
<script>
    require(['dijit/registry', 'havok/parseComplete!'], function(registry){
        registry.byId('overlayToggle1').watch('active', function(){
            registry.byId('overlay1').toggle();
        });
    })
</script>

With wait cursor

<p>...</p>
<span id="overlay2" class="overlay-wait" data-dojo-type="havok/widget/Overlay" >This is overlayed</span>
<button id="overlayToggle2" data-dojo-type="havok/widget/ToggleButton">Toggle overlay</button>
<script>
    require(['dijit/registry', 'havok/parseComplete!'], function(registry){
        registry.byId('overlayToggle2').watch('active', function(){
            registry.byId('overlay2').toggle();
        });
    })
</script>

Overlay whole viewport

By default, the overlay widget will target the previous element in the dom. This can be changed by specifying an alternate target node. Eg:

<span id="overlay3"
      data-dojo-type="havok/widget/Overlay"
      data-dojo-props="target: document.body"
>
    <button id="overlay3hide" class="btn">Hide overlay</button>
</span>
<button id="overlay3show" class="btn">Show overlay</button>
<script>
    require(['dijit/registry', 'dojo/dom', 'dojo/on', 'havok/parseComplete!'], function(registry, dom, on){
        on(dom.byId('overlay3show'), 'click', function(){
            registry.byId('overlay3').show();
        });
        on(dom.byId('overlay3hide'), 'click', function(){
            registry.byId('overlay3').hide();
        });
    })
</script>

havok/dnd/Dragable makes an element dragable.

Example

<div class="label label-info" data-dojo-type="havok/widget/Dragable">Drag me!</div>

Grip

Add a data-dojo-attach-point="grip" to indicate a drag grip.

<div class="label label-info" data-dojo-type="havok/widget/Dragable">Drag me! <i class="icon-move icon-white" data-dojo-attach-point="grip"></i></div>

Simply use havok/widget/Carousel. Eg:

<ol data-dojo-type="havok/widget/Carousel">
    <li class="active" title="First Thumbnail label">
        <img alt="" src="img/carousel-01.jpg">
        Cras justo odio...
    </li>
    <li title="Second Thumbnail label">
        <img alt="" src="img/carousel-02.jpg">
        Cras justo odio...
    </li>
    <li title="Third Thumbnail label">
        <img alt="" src="img/carousel-03.jpg">
        Cras justo odio...
    </li>
</ol>

Example using a store:

<ol data-dojo-type="havok/widget/Carousel"
    data-dojo-props="
    active: 2,
    store: {
        data: [
            {id: 0, title: 'First Thumbnail label', caption: 'caption 1', img: 'img/carousel-01.jpg'},
            {id: 1, title: 'Second Thumbnail label', caption: 'caption 2', img: 'img/carousel-02.jpg'},
            {id: 2, title: 'Third Thumbnail label', caption: 'caption 3', img: 'img/carousel-03.jpg'}
        ]
    }"
></ol>

Example

<div data-dojo-type="havok/widget/TextEditor">
    Here is some text to edit.
</div>

The tools visible will show and hide as the width of the text editor changes.

Separated toolbar

You can use a separated text editing toolbar, and pass it a target node id to edit. The toolbar below can be used to edit this paragraph.

<div data-dojo-type="havok/widget/TextToolbar" data-dojo-props="target: 'editExample'"></div>

Custom font and size lists

You can change the font and size lists by overriding the appropriate store in di config. Eg:

di: {
    'havok/store/stores': {
        proxies: {
            font: {
                base: 'my/alternative/font/store',
                proxyMethods: [
                    'get',
                    'query'
                ]
            }
        }
    }
}

Properties