UH Emergency Alerts WordPress Plugin
Download
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.
“Banner” (top)
“Window Shade” (top, overlaid)
“Toast” (bottom right, overlaid)
“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 theapi_url
andregion
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 inUHAlerts.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 inUHAlerts.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
: Defaultfalse
- string
element_id
: Defaultuh-alerts
- integer
refresh_rate
: Default0
- string
region
: Default""
- string
wrapper_id
: Defaultuh-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 theuh-alerts-wrapper
when there are active alerts. The absence of this class means there are no active alerts.
- The
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.