Widgets

The TOM uses a number of custom widgets to display information in a more user-friendly way. These widgets are implemented as Django template tags and can be used in any template. Be sure to include {% load tom_common_extras %} at the top of your template to load the required tags.

Copy Button:

Uses the copy_button.html partial to copy the text_to_copy to the clipboard. The help_text is displayed as a tooltip when hovering over the button. Use this tag to include a low-profile copy button in your template. Example: `{% copy_button 'text to be copied' 'Help Text' %}`

Popup Notification (Toast):

If you wish to add a small, but obvious, non-intrusive popup notification that will temporarily appear at the top of the page (commonly referred to as a Toast Notification), the TOMtoolkit provides the following strategy to do so.

Add the toast class to a div to create a temporary notification at the top of the TOM. Add something like the following codeblock to your template. Anything that can trigger a javascript function can be used to show the toast.

<button onclick="ShowToast()">Show Toast</button>
<div id="toast_window" class="toast">Thing inside the toast window! </div>

{% block scripts %}
<script>
  function ShowToast() {
  // Get the toast DIV
  var x = document.getElementById("toast_window");

  // Add the "show" class to DIV
  x.className += " show";

  // After 3 seconds, remove the show class from DIV
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
{% endblock scripts %}

Change the background color of the toast by adding a class to the toast div. i.e. class="toast warning" will change the background color to yellow (unless you have changed your root colors):

The following classes are available:

• primary

• info

• success

• warning

• danger