Widgets

inlineConfirm

The inlineConfirm widget is used to request user confirmation for an action without disrupting the workflow by presenting a modal dialog. Not every action or event needs to be confirmed only ones that have potentially negative side effects.

To use this you simply wire up the button like there was no confirm. This means just adding a handler to the buttons click event, many handlers are supported if you need more than one, and adding the appropriate classes btn-danger, btn-primary, etc. Once the button is all set up you just need to call the widget on the button and it will take care of the rest. This can be done in javaScript or as a knockout binding. Keep in mind that for knockout binding executes in order so the widget binding will need to come after the click binding. 

    
$(function(){
  $('.btn-danger').inlineConfirm()
})
    
    
<button class="btn btn-danger" data-bind="click: deleteHandler, widget:'inlineConfirm'">Delete</button>

Options

Name Type Default Description
messageHtml HTML String Are you sure? Message (can be HTML) to be displayed to the the left of the "yes" "no" buttons
yesHtml HTML String YES Text (can be HTML) to be displayed on the "yes" button
noHtml HTML String NO Text (can be HTML) to be displayed on the "no" button
timeout number 3000 Time in milliseconds to leave the confirmation open after the mouse leaves the area before reseting the control.

overflowMenu

The overflow widget takes a menu and automatically places items in the menu into a "actions" overflow dropdown, when there isn't enough horizontal screen resolution to view the entire menu.

This is meant to be used in conjunction with the action toolbar. 

    
$(function(){
  $('.action-toolbar').overflowMenu()
})

Options

Name Type Default Description
threshold number 2 requires this many items before kicking in
cutoff number 0 how many items are left before putting everything in the dropdown
linkText html string more&hellip; text of the dropdown button
linkTitle string View More title of the dropdown button
linkTextAll html string actions&hellip; text of the dropdown button when all items are in it
linkTitleAll string View More Open/Close Menu

actionToolbarConfirm

The actionToolbarConfirm is wired up exactly like the inlineConfirm. See above for more information on how to wire it up.

This is meant to be used in conjunction with the action toolbar. 

    
$(function(){
  $('.action-toolbar-left a').actionToolbarConfirm()
})
    
    
<ol class="action-toolbar-left" data-bind="widget: 'overflowMenu'">
  <li><a href="#" data-bind="click: handler, widget: 'actionToolbarConfirm'"><svg class="cyclops-icon"><use xlink:href='#icon-play'></svg> start</a></li>
  <li><a href="#" data-bind="click: handler, widget: 'actionToolbarConfirm'"><svg class="cyclops-icon"><use xlink:href='#icon-refresh'></svg> restart</a></li>
  <li><a href="#" data-bind="click: handler, widget: 'actionToolbarConfirm'"><svg class="cyclops-icon"><use xlink:href='#icon-archive'></svg> archive</a></li>
</ol>

Options

Name Type Default Description
messageHtml HTML String Are you sure? Message (can be HTML) to be displayed to the the left of the "yes" "no" buttons
yesHtml HTML String YES Text (can be HTML) to be displayed on the "yes" button
noHtml HTML String NO Text (can be HTML) to be displayed on the "no" button
timeout number 3000 Time in milliseconds to leave the confirmation open after the mouse leaves the area before reseting the control.
classes string action-toolbar-confirm-primary Used to style the yes button, these match the default button pattern with primary, default, and danger.