Renuo_Full_Lockup Rails Bootstrap Ui
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<p>These are your classic browser-native alerts and confirms, overridden to use personalized bootstrap modals instead.</p>
<button type="button" class="btn btn-warning" onclick='alert("Please read this message. Its a very important message. Do not dare skip it.");'>Alert!</button>
<form class="button_to" method="get" action="some_path"><button class="btn btn-danger mt-3" data-turbo-confirm="Please read this message. Its a very important message. Do not dare skip it." data-turbo-confirm-title="A custom title for each confirmation modal!" type="submit">Dangerous Action</button></form>
<div class='modal fade' id='turbo-alert-modal' tabindex='-1' aria-labelledby='turboAlertModalLabel' aria-hidden='true'
     data-bs-backdrop="static" data-bs-keyboard="false">
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='turboAlertModalLabel'>This is a nicely styled alert modal!</h5>
      </div>
      <div class='modal-body'></div>
      <div class='modal-footer'>
        <button type="button" class="btn btn-primary" data-bs-dismiss='modal'>Accept</button>
      </div>
    </div>
  </div>
</div>
<div class='modal fade' id='turbo-confirm-modal' tabindex='-1' aria-labelledby='turboConfirmModalLabel' aria-hidden='true'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' data-default-text="This is a nicely styled confirmation modal!"></h5>
      </div>
      <div class='modal-body'></div>
      <div class='modal-footer'>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss='modal'>Cancel</button>
        <button type="button" class="btn btn-success" id='confirm-button'>Confirm</button>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<% message = 'Please read this message. Its a very important message. Do not dare skip it.' %>
<p>These are your classic browser-native alerts and confirms, overridden to use personalized bootstrap modals instead.</p>
<button type="button" class="btn btn-warning" onclick='alert("<%= message %>");'>Alert!</button>
<%= button_to 'Dangerous Action',
              'some_path',
              method: :get,
              class: 'btn btn-danger mt-3',
              data: { turbo_confirm: message,
                      turbo_confirm_title: 'A custom title for each confirmation modal!' } %>
<%# Modals: You can place these two modals on your base html file for convenience to have them available everywhere %>
<%# Alert Modal %>
<div class='modal fade' id='turbo-alert-modal' tabindex='-1' aria-labelledby='turboAlertModalLabel' aria-hidden='true'
     data-bs-backdrop="static" data-bs-keyboard="false">
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='turboAlertModalLabel'>This is a nicely styled alert modal!</h5>
      </div>
      <div class='modal-body'></div>
      <div class='modal-footer'>
        <button type="button" class="btn btn-primary" data-bs-dismiss='modal'>Accept</button>
      </div>
    </div>
  </div>
</div>
<%# Confirm Modal %>
<div class='modal fade' id='turbo-confirm-modal' tabindex='-1' aria-labelledby='turboConfirmModalLabel' aria-hidden='true'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' data-default-text="This is a nicely styled confirmation modal!"></h5>
      </div>
      <div class='modal-body'></div>
      <div class='modal-footer'>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss='modal'>Cancel</button>
        <button type="button" class="btn btn-success" id='confirm-button'>Confirm</button>
      </div>
    </div>
  </div>
</div>

No notes provided.

No params configured.

No assets to display.

confirm_alert.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
window.alert = (message) => {
  const modal = document.querySelector('#turbo-alert-modal');
  modal.querySelector('.modal-body').innerText = message;
  const bootstrapModal = bootstrap.Modal.getOrCreateInstance(modal);
  bootstrapModal.show();
};
// window.confirm is also possible but only takes "message" as argument
Turbo.setConfirmMethod((message, _element, submitter) => {
  const modal = document.querySelector('#turbo-confirm-modal');
  const modalTitle = modal.querySelector('.modal-title');
  const modalBody = modal.querySelector('.modal-body');
  const confirmButton = modal.querySelector('#confirm-button');
  modalTitle.innerText = submitter.dataset.turboConfirmTitle || modalTitle.dataset.defaultText;
  modalBody.innerText = message;
  const bootstrapModal = bootstrap.Modal.getOrCreateInstance(modal);
  bootstrapModal.show();
  return new Promise((resolve) => {
    const confirm = () => {
      resolve(true);
      bootstrapModal.hide();
    };
    confirmButton.addEventListener('click', confirm, { once: true });
    modal.addEventListener('hide.bs.modal', () => {
      resolve(false);
      confirmButton.removeEventListener('click', confirm);
    }, { once: true });
  });
});