Universal Modal

[evangdesigns]

USER STORY As a developer it would be more efficient to have a universal type modal that can be called throughout the app and populated dynamically based on user need.

DEV

• Add parent Div to index
• Add printModal() to utilities.js

[evangdesigns]

Insert ino Index.html <div class="modal fade show" id="uniModal" tabindex="-1" role="dialog" aria-labelledby="uniModalLabel" aria-hidden="true"></div>

Insert under printToDom() in utilities.js

const printModal = (title, body) => {
  const domString = `<div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="uniModalLabel">${title}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ${body}
        </div>
      </div>
    </div>`;

  printToDom('uniModal', domString);
};

[evangdesigns]

EXAMPLE UTILIZATION 1. Create a function based on modal utilization, creating to variables title & body Calling those variables with the printModal(title, body);

const addUserModal = () => {
  const title = 'Add User';
  const body = `<form>
    <div class="form-group">
      <label for="userName">User Name</label>
      <input type="text" class="form-control" id="userName" placeholder="Enter User Name">
    </div>
    <button type="button" class="btn btn-danger">DO THE THING</button>
  </form>`;
  utilities.printModal(title, body);
};

2. Place button in it's respective component <button type="link" class="btn btn-link add-board" data-toggle="modal" data-target="#uniModal" id="userName">ADD USER</button>

3. Add Event Listener $('#userName').click(component.addUserModal())