domInit()

in source/webapp/src/lib/js/imageEditor.js [88:189]

• 92 lines of code
• 3 McCabe index (conditional complexity)

  domInit() {
    const imageId = `${ImageEditor.Constants.Id.Image}-${this.suffix}`;
    const loadId = `${ImageEditor.Constants.Id.Loading}-${this.suffix}`;
    const input = `${ImageEditor.Constants.Id.InputName}-${this.suffix}`;
    const alert = `${ImageEditor.Constants.Id.AlertMessage}-${this.suffix}`;

    this.element = $(`
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class = "container">
          <div class="row p-0">
            <!-- image -->
            <div class="col-sm p-1 m-auto">
              <div style="max-width: 100%">
                <img id="${imageId}" src="./images/image.png" alt="snapshot">
              </div>
            </div>

            <!-- controls -->
            <div class="col-sm p-0 m-auto">
              <div class="modal-body">
                <div class="container mt-2">
                  <!-- loading icon -->
                  <div
                    id="${loadId}"
                    class="spinner-grow text-secondary loading collapse"
                    style="height: 3em; width: 3em;"
                    role="status">
                    <span class="sr-only">Loading...</span>
                  </div>

                  <!-- description  -->
                  <ul>
                    <li>Move and resize the crop box to center the face</li>
                    <li>Make sure the crop area covers the entire face</li>
                    <li>Name the face and click on <strong>Index now</strong></li>
                    <li>OR leave the name blank and click on <strong>Queue for later</strong> to send it Amazon SageMaker Ground Truth later</li>
                  </ul>

                  <!-- actions -->
                  <div class="row">
                    <div class="col-12">
                      <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                          <label class="input-group-text" for="${input}">Who is this person?</label>
                        </div>
                        <input
                          type="text"
                          class="form-control"
                          id="${input}"
                          placeholder="Optional for GroundTruth">
                      </div>
                    </div>

                    <div class="col-12 mt-auto mb-auto">
                      <div class="form-group mb-3 float-right">
                        <button
                          type="button"
                          class="btn btn-success btn-sm mb-2"
                          data-action="index">
                          Index now
                        </button>

                        <button
                          type="button"
                          class="btn btn-primary btn-sm mb-2"
                          data-action="queue">
                          Queue for later
                        </button>

                        <button
                          type="button"
                          class="btn btn-light btn-sm mb-2"
                          data-action="cancel">
                          Cancel
                        </button>
                      </div>
                    </div>
                  </div>
                  <!-- alert message -->
                  <div class="row">
                    <div class="col">
                      <span
                        id="${alert}"
                        class="collapse text-danger">
                        no message...
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>`);

    /* attach to preview modal */
    this.$element.appendTo(this.modal);

    this.registerEvents();
  }