Connecting Learning, Life and Aloha
‘O ka ‘imi na‘auao, ke ola a me ke aloha kā kākou e huliāmahi ai

Office of Campus Technology

UH Emergency Alerts WordPress Plugin

Download

Clone it on GitHub.

WordPress Plugin

Periodically check the UH Alerts API to automatically display any notifications specific to the selected region.

A region must be selected before the plugin will work.

Settings

  • Main Settings
    • Region - Fetch alerts for this selected region. The regions are collected from the UH Alerts API.
    • Refresh Rate - How often, in seconds, are new alerts checked for?
    • Display Style - See below for the built-in styles offered.
  • API Settings
    • API Base URL - The root URL for the UH Alerts API.
    • Regions Route - Route from the API Base to grab the regions data.
    • Alerts Route - Route from the API Base to grab the alert data.
    • Debug - Show a debug log in the browser console when checking alerts.

Display Styles

Because there are a wide variety of WordPress templates in use, so not all display styles will work with all templates.

alerts show in a banner at the top of the page above other content
“Banner” (top)

alerts show in a banner at the top of the page over other content
“Window Shade” (top, overlaid)

alerts show in bottom right of page over other content
“Toast” (bottom right, overlaid)

alerts show in the center of the page over other content
“Modal” (center, overlaid)

Without WordPress

While this system was designed as a WordPress plugin, the core functionality does not require WordPress at all. This is the documentation for using this plugin without WordPress.

Usage

To use the UHAlerts JavaScript plugin, simply copy and embed both the uh-alerts.js and uh-alerts.css files in the assets directory of this WordPress plugin to your site at the end of the page and in the <head> respectively.

<link rel="stylesheet" href="path/to/uh-alerts.css">
<script src="path/to/uh-alerts.js"></script>
<script>
UHAlerts.init({
  api_url: "…",
  region: "…",
  refresh_rate: 15,
  classes: "…"
});
</script>

JavaScript Methods / API

  • UHAlerts.init({settings}) Initialize the plugin and start checking for alerts. The settings must specify the api_url and region or nothing will happen.
  • UHAlerts.destroy() Destroy the plugin functionality. Any content already generated by the plugin will remain, but all other functionality will cease.
  • UHAlerts.pause() Pause the automatic checking for new alerts.
  • UHAlerts.resume() Resume the automatic checking for new alerts.

JavaScript Settings / Defaults

  • alert_info_url: The base url to view specific alert data (a "read more" link with alert id appended).
  • api_url: (required) The base url for the API. This must be specified in UHAlerts.init() for the plugin to work.
  • classes: CSS class(es) for additional styling applied to the wrapper container.
  • debug: Show debugging info in the browser console?
  • element_id: The id of the container where the alerts get injected. If you provide your own HTML, this is required.
  • refresh_rate: The refresh rate in number of seconds. A zero refresh rate means don't check again after the initial check.
  • region: (required) The region for alert notifications. This must be specified in UHAlerts.init() for the plugin to work.
  • wrapper_id: The id of the whole alerts plugin container. If you provide your own HTML, this is required.

Data Types and Defaults

  • string alert_info_url: Default ""
  • string api_url: Default ""
  • string classes: Default ""
  • boolean debug: Default false
  • string element_id: Default uh-alerts
  • integer refresh_rate: Default 0
  • string region: Default ""
  • string wrapper_id: Default uh-alerts-wrapper

CSS Styling

You may use the default styling to display the alerts, or you may provide your own.

  • uh-alerts-wrapper is the class applied to the entire alerts wrapping container.
    • The uh-alerts-active class is applied to the uh-alerts-wrapper when there are active alerts. The absence of this class means there are no active alerts.
  • uh-alerts-hide-wrapper is the class of the wrapping container for the hide button.
    • uh-alerts-hide is the class of the actual hide button itself.
  • uh-alerts-alerts is on the wrapping container of the list alerts.
    • uh-alerts-updated is applied to the "(Updated ...)" message at the end of each alert.

Using Your Own HTML

By default, the plugin will generate all its own HTML needed to display the alerts. If you provide your own HTML for the plugin to use, please use the following structure or the plugin may not work properly.

<div id="{settings.wrapper_id}" class="uh-alerts-wrapper {settings.classes}">
  <div>
    <p class="uh-alerts-hide-wrapper">
      <button class="uh-alerts-hide">Hide</button>
    </p>
    <div id="{settings.element_id}" class="uh-alerts-alerts">
      <!-- alerts get injected here -->
    </div>
  </div>
</div>

When using your own HTML, you must ensure the wrapper_id and element_id settings are specified in the UHAlerts.init() call.