notifyPopup.hbs

{{! make the _globals object in course.json available to this template}}
{{import_globals}}

<div {{#each _attributes}}{{@key}}="{{this}}" {{/each}} class="notify__popup notify__popup-type-{{_type}}{{#if _classes}} {{_classes}}{{/if}}{{#if _graphic._src}} has-image{{/if}}{{#if _imageAlignment}} align-image-{{_imageAlignment}}{{/if}}">
  <div class="notify__popup-inner">

    <div class="notify__content">
      <div class="notify__content-inner">

        {{#if _showIcon}}
        <div class="notify__icon">
          <div class="icon{{#equals _type "prompt"}} is-prompt{{/equals}}{{#equals _type "alert"}} is-alert{{/equals}}" aria-hidden="true"></div>
        </div>
        {{/if}}

        {{#if title}}
        <div class="notify__title{{#if isAltTitle}} aria-label{{/if}}" id="notify-heading">
          <div class="notify__title-inner" role="heading" aria-level="{{a11y_aria_level _id 'notify' _ariaLevel}}">
            {{{compile title}}}
          </div>
        </div>
        {{/if}}

        {{#any _graphic._src body}}
        <div class="notify__section">
          <div class="notify__section-inner">

            {{#if _graphic._src}}
            {{#any (equals _imageAlignment 'left') (equals _imageAlignment 'top')}}
            <div class="notify__image-container{{#if _graphic.attribution}} has-attribution{{/if}}">
              <img class="notify__image" src="{{_graphic._src}}" {{#if _graphic.alt}}aria-label="{{{_graphic.alt}}}"{{else}}aria-hidden="true"{{/if}}>
              {{#if _graphic.attribution}}
              <div class="notify__attribution">
                <div class="notify__attribution-inner">
                  {{{compile _graphic.attribution}}}
                </div>
              </div>
              {{/if}}
            </div>
            {{~/any~}}
            {{~/if~}}

            {{~#if body~}}
            <div class="notify__body">
              <div class="notify__body-inner">
                {{{compile body}}}
              </div>
            </div>
            {{~/if~}}

            {{~#if _graphic._src~}}
            {{~#any (equals _imageAlignment 'right') (equals _imageAlignment 'bottom')~}}
            <div class="notify__image-container{{#if _graphic.attribution}} has-attribution{{/if}}">
              <img class="notify__image" src="{{_graphic._src}}" {{#if _graphic.alt}}aria-label="{{{_graphic.alt}}}"{{else}}aria-hidden="true"{{/if}}>
              {{#if _graphic.attribution}}
              <div class="notify__attribution">
                <div class="notify__attribution-inner">
                  {{{compile _graphic.attribution}}}
                </div>
              </div>
              {{/if}}
            </div>
            {{/any}}
            {{/if}}

          </div>
        </div>
        {{/any}}

        {{#equals _type "alert"}}
        <div class="notify__btn-container">
          <button class="btn-text notify__btn notify__btn-alert js-notify-btn-alert" aria-label="{{{confirmText}}}">
            {{{confirmText}}}
          </button>
        </div>
        {{/equals}}

        {{#equals _type "prompt"}}
        <div class="notify__btn-container">
          {{#each _prompts}}
          <button class="btn-text notify__btn notify__btn-prompt js-notify-btn-prompt" data-event="{{_callbackEvent}}" aria-label="{{{promptText}}}">
            {{{promptText}}}
          </button>
          {{/each}}
        </div>
        {{/equals}}

      </div>
    </div>

    {{! toolbar moved for AA purposes - last tabbable element}}
    {{#all _isCancellable _showCloseButton}}
    {{#equals _type "popup"}}
    <button class="btn-icon notify__btn-icon notify__close-btn js-notify-close-btn" aria-label="{{_globals._accessibility._ariaLabels.closePopup}}">
      <span class="icon" aria-hidden="true"></span>
    </button>
    {{/equals}}
    {{/all}}

  </div>

  {{{a11y_wrap_focus}}}

</div>

<div class="shadow notify__shadow js-notify-shadow-click"></div>