<commit_before><!--
# modal
Copyright ©2016-2017 <NAME>
-->
<style>
  .modal-dialog-backdrop {
    background-color: rgba(0,0,0,0.15);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-dialog {
    position: relative;
    padding: 12px;
    min-width: 400px;
    background-color: white;
    box-shadow: 1px 6px 12px 0 rgba(0,0,0,0.5);
  }
</style>
<div class="modal-dialog-backdrop">
  <div class="modal-dialog" data-event="click:_component_.button">
    <div data-children>
      <h3>Placeholder</h3>
      <p>Here is some text</p>
      <div style="text-align: right;">
        <button>Cancel</button> <button class="default">OK</button>
      </div>
    </div>
  </div>
</div>
<script>
  register({
    button: function(evt) {
      if (data && data.callback) {
        data.callback(evt, component);
      } else {
        console.log('dialog has no callback; user pressed', evt.target.textContent);
      }
      if (evt.target instanceof HTMLButtonElement) {
        component.remove();
      } else {
        return true;
      }
    },
  });
</script><commit_msg>Improved modal component's focus behavior Made its buttons easier to customize Added ability to replace the modal-dialog class<commit_after><!--
# modal
Copyright ©2016-2017 <NAME>
-->
<style>
  .modal-dialog-backdrop {
    background-color: rgba(0,0,0,0.15);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-dialog {
    position: relative;
    padding: 12px;
    min-width: 400px;
    background-color: white;
    box-shadow: 1px 6px 12px 0 rgba(0,0,0,0.5);
  }

  .modal-dialog button {
    margin-left: 5px;
  }
</style>
<div class="modal-dialog-backdrop">
  <div
    class="modal-dialog"
    tabindex="0"
    data-event="
      click:_component_.button;
      keyup(Enter):_component_.default;
      keyup(Escape):_component_.cancel;
    "
  >
    <div data-children>
      <h3>Placeholder</h3>
      <p>Here is some text</p>
      <div style="text-align: right;">
        <button
          data-list="_component_.buttons"
          data-bind="
            text=.caption;
            class(default)=.default;
            class(cancel)=.cancel
          "
        >Button Name</button>
      </div>
    </div>
  </div>
</div>
<script>
/* global data, findOne, component, set, b8r */
'use strict';
  const dialog = findOne('.modal-dialog');

  if (data.className) {
    dialog.classList.remove('modal-dialog');
    dialog.classList.add(data.className);
  }

  dialog.focus();

  if (!data.buttons) {
    set('buttons', [{
      caption: 'Cancel',
      cancel: true
    },
    {
      caption: 'OK',
      default: true
    }]);
  }

  const defaultButton = findOne('button.default');
  if (defaultButton) {
    setTimeout(() => defaultButton.focus());
  }

  set({
    cancel: () => b8r.trigger('click', findOne('button.cancel')),
    default: () => b8r.trigger('click', findOne('button.default')),
    button: function(evt) {
      if (data && data.callback) {
        data.callback(evt, component);
      } else {
        console.warn('dialog has no callback; user pressed', evt.target.textContent);
      }
      if (evt.target instanceof HTMLButtonElement) {
        component.remove();
      } else {
        return true;
      }
    },
  });
</script>
{'fraction_non_alphanumeric': 0.15789473684210525, 'fraction_numerical': 0.021688837478311164, 'mean_word_length': 2.4555444555444557, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 48, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4098865', 'n_tokens_mistral': 1198, 'n_tokens_neox': 1142, 'n_words': 247}