CoT Modal

Include the library

In package.json, turn includeModal:'true'

Launch the modal

Using modal dialogs is a common design pattern with core apps. This helper does most of the work for you, including AODA compliance.

The method below is a static method of the cot_app (if your app is standalone) or CotApp (if your app is embedded) class.

Use it like this:

CotApp.showModal(options); //embedded apps
cot_app.showModal(options); //standalone apps

Options reference

Property	Description	Example
`preset`	string Optional. Loads template.	Default is `false`. Possible values are `'confirm'` or `'alert'` `If no value is provided for the preset then default template is used which requires using the default implementation of footerButtonsHtml or writing a custom implementation for footerButtonsHtml`
`title`	String Title of the modal. Accepts HTML	title: <h2>This is my modal</h2>,
`body`	String Body of the modal. Accepts HTML	`zoom`
`modalSize`	String Set the default bootstrap size of the modal. Possible values : 'modal-sm', 'modal-lg'	modalSize:'modal-lg'
`originatingElement`	String Required An element (DOM or $-selected) to set focus to after the modal is closed, use for accessibility	originatingElement: $('#myButton')
`className`	String Optional, CSS class to put on the root div.modal element	className: 'myCustomClass'
`bootstrapType`	string Optional. When preset='alert', sets a bootstrap alert class to the modal.	Default is 'default'. Possible values are `'primary'` `'success''info'` `'warning'` `'danger'`
`callback`	Function Required if preset='confirm'. Callback function when user confirms the message
`buttons`	Object Optional. When preset='confirm' will change the buttons content and class	buttons: { cancel: { label: ' Cancel', bootstrapType: 'default' }, confirm: { label: ' Confirm', bootstrapType: 'primary' } }
`onShow`	Function Hook into boostrap modal events
`onShown`	Function Hook into boostrap modal events
`onHide`	Function Hook into boostrap modal events
`onHidden`	Function Hook into boostrap modal events
`footerButtonsHtml`	Function Let's the user define the footer for the modal	Example / Usage Details If the value of `footerButtonsHtml is defined` Here is where it falls in to the template of the Modal HTML: '<div class="modal fade ' + options.className + '" id="' + id + '" tabindex="-1" role="dialog" aria-labelledby="' + id + '_title" aria-hidden="true" aria-modal="true">' + ' <div class="modal-dialog ' + options.modalSize + '">' + ' <div class="modal-content">' + ' <div class="modal-header">' + ' <button type="button" aria-label="Close" class="close" type="button" data-dismiss="modal">' + ' <span aria-hidden="true">×</span>' + ' </button>' + ' <div role="heading" aria-level="2" id="' + id + '_title" class="modal-title">' + options.title + '</div>' + ' </div>' + ' <div id="' + id + '_body" class="modal-body">' + options.body + '</div>' + ' <div class="modal-footer">' + options.footerButtonsHtml + ' </div>' + ' </div>' + ' </div>' + ' </div>'; Default behaviour for 'confirm' preset is to call the built in: returnButton method var returnButton = function returnButton(bsType, opt) { if (opt && opt.hasOwnProperty('bootstrapType')) { var bsTypes = ['primary', 'success', 'info', 'warning', 'danger']; if (bsTypes.indexOf(opt.bootstrapType) == -1) { opt.bootstrapType = 'default'; } } There are two functions calls made when the 'confirm' preset is being used returnButton('cancel', { bootstrapType: options.buttons.cancel.bootstrapType, label: options.buttons.cancel.label }) returnButton('confirm', { bootstrapType: options.buttons.confirm.bootstrapType, label: options.buttons.confirm.label }); Then the final footer is being built: <div class="modal-footer">' + returnButton('cancel', { bootstrapType: options.buttons.cancel.bootstrapType, label: options.buttons.cancel.label }) + ' ' + returnButton('confirm', { bootstrapType: options.buttons.confirm.bootstrapType, label: options.buttons.confirm.label }); ' </div>' To customize the footer you will want to do the last code section expect for the `<div class="modal-footer">` `</div> i`n your footerButtonsHtml function

Code sample

Options for a large default window

CotApp.showModal({
  originatingElement:$('#target_to_focus_when_modal_close'),
  title:      "This is the title",
  body:       "<p>Content goes here</p><p>Include <strong>HTML</strong> if you <em>want</em></p>",
  modalSize:  "modal-lg",
  onShow:function(){
    console.log('this event happens onShow');
  },
  onShown:function(){
    console.log('this event happens onShown');
  },
  onHide:function(){
    console.log('this event happens onHide');
  },
  onHidden:function(){
    console.log('this event happens onHidden');
  }
})

Options for an Alert window

CotApp.showModal({
  preset:'alert',
  bootstrapType:'danger', // primary | success | info | danger | warning
  originatingElement:$('#target_to_focus_when_modal_close'),
  body:       "<p>Warning ! This is an alert !</p>",
  modalSize:  "modal-md"
})

Options for a Confirm window

CotApp.showModal({
  preset:'confirm',
  originatingElement:$('#target_to_focus_when_modal_close'),
  title:'Answer the question',
  body:       "<p>Do you really really want it !</p>",
  modalSize:  "modal-md",
  callback:function(){
    alert('You confirmed !')
  }
})

Options for a Confirm window with custom buttons

CotApp.showModal({
  preset:'confirm',
  originatingElement:$('#target_to_focus_when_modal_close'),
  title:'Answer the question',
  body:       "<p>Do you really really want it !</p>",
  modalSize:  "modal-md",
  buttons: {
    cancel: {
      label: ' Custom cancel button',
      bootstrapType: 'danger'
    },
    confirm: {
      label: 'Custom Confirm !',
      bootstrapType: 'success'
    }
  },
  callback:function(){
    alert('You confirmed !')
  }
})

Page Tree