sethbrasile/ember-remodal

View on GitHub
addon/templates/components/ember-remodal.hbs

Summary

Maintainability
Test Coverage
{{#if linkButton}}
  <a {{action 'open'}} href="#" class="ember-remodal outer link text {{buttonClasses}} {{outerButtonClasses}}" data-test-id="linkButton">{{linkButton}}</a>
{{else if openLink}}
  <a {{action 'open'}} href="#" class="ember-remodal outer link text {{buttonClasses}} {{outerButtonClasses}} {{openLinkClasses}}" data-test-id="openLink">{{openLink}}</a>
{{else if openButton}}
  <button {{action 'open'}} class="ember-remodal outer open button {{buttonClasses}} {{outerButtonClasses}} {{openButtonClasses}}" data-test-id="openButton">{{openButton}}</button>
{{/if}}

<span {{action 'open'}} id="open-button-{{elementId}}"></span>

<div data-remodal-id="{{elementId}}" class="ember-remodal {{name}} {{animationState}} window {{if disableForeground 'invisible'}} {{modalClasses}}" data-test-id="modalWindow">

  {{#unless disableNativeClose}}
    <button {{action 'close'}} title="Close Modal" class="remodal-close ember-remodal inner native close" data-test-id="nativeClose"></button>
  {{/unless}}

  {{#if title}}
    <h2 class="ember-remodal inner title text" data-test-id="title">{{title}}</h2>
  {{/if}}

  {{#if text}}
    <p class="ember-remodal inner paragraph text" data-test-id="text">{{text}}</p>
  {{/if}}

  {{#if hasBlock}}
    <div class="ember-remodal inner yielded content" data-test-id="yielded">
      {{yield (hash
        open=(component 'ember-remodal/er-button' modalId=elementId)
        confirm=(component 'ember-remodal/er-button' action=(action 'confirm'))
        cancel=(component 'ember-remodal/er-button' action=(action 'cancel'))
      )}}
    </div>
  {{/if}}

  {{#if cancelButton}}
    <button {{action 'cancel'}} class="ember-remodal inner cancel button {{buttonClasses}} {{innerButtonClasses}} {{cancelButtonClasses}}" data-test-id="cancelButton">{{cancelButton}}</button>
  {{/if}}

  {{#if confirmButton}}
    <button {{action 'confirm'}} class="ember-remodal inner confirm button {{buttonClasses}} {{innerButtonClasses}} {{confirmButtonClasses}}" data-test-id="confirmButton">{{confirmButton}}</button>
  {{/if}}
</div>