Media WebUI

Alerts

WebUI provides a set of standard JavaScript alert functions - this means you don't have to write any HTML to show alerts. The behaviour is controlled by the JavaScript initialisation as shown in the example below. Alerts also have automatic stacking built in, so that multiple alerts can be shown at the same time.

Global Initialisation

Setting
Description
autoHide
Whether to hide the alert using the duration and transition settings or hide immediately.
Can be true or false. Default: false.
duration
The amount of time in milliseconds that the alert is visible.
An integer value. Default: 300
inline
Whether the header including the icon and close button is collapsed inline with the message.
Can be true or false. Default: true.
position
The initial starting position of the alert batch.
Can be "top-left", "top-center", "top-right", "bottom-left", "bottom-center", or "bottom-right". Default: "top-right".
showHeader
Whether the header including the icon and close button is
Can be true or false. Default: true.
showIcon
Whether to show an icon corresponding to the type argument specified.
Can be true or false. Default: true.
showClose
Whether to show a close button.
Can be true or false. Default: true.
style
The basic alert style.
Can be "outline-square", "ouline-rounded", "solid-square", "solid-rounded". Default: "outline-square".
transitionDuration
The time taken in milliseconds for the alert to fade in and out.
An integer value. Default: 300.
width
The initial width of the alert as a CSS string value, e.g. "60rem".
Default: "18.75rem".

Functions

Function
Description
showAlert(message, type, auto, icon, close)
Shows an alert
showSuccessAlert(message, auto, icon, close)
Shows an alert styled in the success theme.
showInfoAlert(message, auto, icon, close)
Shows an alert styled in the info theme.
showWarningAlert(message, auto, icon, close)
Shows an alert styled in the warning theme.
showDangerAlert(message, auto, icon, close)
Shows an alert styled in the danger theme.
hideAlert(alert, auto)
Hides an alert.

Function Arguments

Argument
Description
message
The text or HTML to be displayed in the alert.
type
The alert theme to use: Can be "success", "info", "warning", or "danger".
auto
Whether to hide the alert using the duration and transition settings or hide immediately.
Can be true or false. Default: false.
Overrides the autoHide global setting.
icon
Whether to show an icon corresponding to the type argument specified.
Can be true or false. Default: true.
Overrides the showIcon global setting.
close
Whether to show a close button.
Can be true or false. Default: true.
Overrides the showClose global setting.
Example
Markup
<div class="form-row text-bold text-sm">
  <div class="form-col-20 background-accent-1-light">
    <button type="button" class="button-sm button-accent-1" id="showAlert">
      Show alert
    </button>
  </div>
</div>
Script
webui.ready(function() {

  ui.initAlerts({
    position: "top-center",
    duration: 6000,
    transitionDuration: 2000,
    width: "60rem",
    showHeader: true,
    inline: true,
    style: "outline-rounded",
    autoHide: false,
    showIcon: true,
    showClose: true
  });

  ui("#showAlert").click( function() {
    ui.showInfoAlert("Alert - Configure behaviour, structure, and style.", false);
  }); 

});

Customisation

Alerts can also be written inline using markup. You can use any of the WebUI styles and JavaScript functions to create the look and behaviour you want.

Example

Using flexbox

Markup
<div class="alert alert-success-outline pad-left-md pad-right-md hidden" role="alert" id="alert1">
  <div class="panel">
    <span class='text-bold'>Alert</span> - Configure behaviour, structure, and style.
  </div>
</div>

<div class="alert alert-info-outline pad-left-md pad-right-md hidden" role="alert" id="alert2">
  <div class="panel">
    <div class="move-left">
      <div class="alert-info-icon"></div>
    </div>
    <div class="move-right">
      <div class="alert-cancel-button alert-close" role="button"></div>
    </div>
  </div>
  <div class="panel">
    <span class='text-bold'>Alert</span> - Configure behaviour, structure, and style.
  </div>
</div>

<div class="alert alert-warning-outline rounded-md pad-left-md pad-right-md hidden" role="alert" id="alert3">
  <div class="panel">
    <div class="move-left">
      <div class="alert-warning-icon"></div>
    </div>
    <div class="move-right">
      <div class="alert-cancel-button alert-close" role="button"></div>
    </div>
    <div class="move-left pad-left-sm"><span class="text-bold">Alert</span> - Configure behaviour, structure, and style.</div>
  </div>
</div>

<div class="row-spacing-md"></div>

<p class="text-bold">Using flexbox</p>

<div class="alert alert-danger-outline rounded-md hidden" role="alert" id="alert4">
  <div class="flex flex-nowrap flex-items-center pad-left-md pad-right-md">
    <div class="flex-initial flex-justify-center width-sm">
      <div class="alert-danger-icon"></div>
    </div>
    <div class="flex-auto pad-left-sm">
      <div><span class='text-bold'>Alert</span> - Configure behaviour, structure, and style.</div>
    </div>
    <div class="flex-initial flex-justify-center width-sm">
      <div class="alert-cancel-button alert-close" role="button"></div>
    </div>
  </div>
</div>
Script
webui.ready(function() {

  ui("#alert1, #alert2, #alert3, #alert4").fadeIn(1000);

});