Widgets

chart

The chart function allows you to easily create chartist charts with a cyclops style and feel. It does all the heavy lifting of setting the numeruos configuration options for you. 

    
$(function(){
  $('.myChart').chart({ type: 'Line', data: data })
})
    
    
<div class="myChart"></div>

Options

Name Type Default Description
type String Line What type of chart. Possible types
isLoading boolean | Observable boolean false Is the data loading still
isErrored boolean | Observable boolean false Was there an error loading the data
data object | observable object required The data for the chart. The shape is determined by the chart type.
getLoadingMessageHtml function fetching data… function that returns text to display while loading data
getErrorMessageHtml function Unable to fetch data. function that returns text to display when loading has failed
getEmptyMessageHtml function No data at this time. function that returns text to display when there is no data
chartOptions object { fullWidth: true } Possible options
responsiveOptions object none Possible options

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.