Announcement Banner

{% comment %}
	This template should be included at the very top of the page. It is intended to be placed before the site header.

	Renders an announcement banner (e.g. site-wide notice or promo) until it has been closed by the user at least once.
	When the user closes it, stores it in session storage so that it can be automatically hidden for the rest of the session.

	Custom Fields:
		announcement_snippet
		announcement_background

	Outputs:
		section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- if entity.announcement_snippet.is_valid -%}
	<div id="top-popup-notification" class="{{entity.announcement_background.value}} d-none border-bottom border-bottom-3" data-guid="{{entity.announcement_snippet.guid}}">
		<div class="container d-flex align-items-center">
			<i class="bi bi-info-circle fs-3"></i>
			<div class="flex-grow-1">{{ entity.announcement_snippet }}</div>
			<a id="top-popup-notification_closebtn" href="#" class="bi bi-times" aria-label="Close" title="Close"></a>
		</div>
	</div>

	{%- add_javascript inline topPopupNotification = position:'body' -%}
		(function(notification, closeBtn) {
			const guid = notification.dataset.guid;
			const sessionKey = 'announced_'+guid;
			const initClosed = sessionStorage.getItem(sessionKey);

			if (initClosed) {
				close();
			} else {
				notification.classList.remove('d-none');
				closeBtn.addEventListener('click', close);
			}

			function close($event) {
				if($event) {
					$event.stopPropagation();
					$event.preventDefault();
				}
				notification.remove();
				if(!initClosed) {
					sessionStorage.setItem(sessionKey, true);
				}
				return false;
			}
		})(document.getElementById('top-popup-notification'), document.getElementById('top-popup-notification_closebtn'));
	{%- end_javascript -%}
	{%- set section_rendered = true -%}
{%- else -%}
	{%- set section_rendered = false -%}
{%- endif %}

[
  {
    "Type": "group",
    "Fields": [
      {
        "Type": "snippet",
        "FieldID": "announcement_snippet",
        "Label": "Announcement Snippet"
      },
      {
        "Type": "select",
        "AllowMultiple": false,
        "Options": "text-bg-light:Light;text-bg-dark:Dark;text-bg-primary:Primary;text-bg-secondary:Secondary;text-bg-success:Success;text-bg-warning:Warning;text-bg-danger:Danger",
        "Delimiter": ";",
        "ValueDelimiter": ":",
        "DefaultValue": "text-bg-dark",
        "IsRequired": true,
        "FieldID": "announcement_background",
        "Label": "Background Color",
        "Condition": {
          "Type": "exists",
          "FieldID": "announcement_snippet"
        }
      }
    ],
    "Label": "Announcement Banner"
  }
]