domInit()

in source/webapp/src/lib/js/labelEditor.js [99:236]

• 125 lines of code
• 1 McCabe index (conditional complexity)

  domInit() {
    this.domRemove();

    const loading = LabelEditor.Constants.Loading.Id;
    const formId = LabelEditor.Constants.Form.Id;
    const inputId = LabelEditor.Constants.Form.Input.Id;
    const tableId = LabelEditor.Constants.Form.Table.Id;
    const chkboxId = LabelEditor.Constants.Form.Checkbox.Id;
    const pattern = LabelEditor.Constants.Form.Input.Pattern;
    const height = Math.ceil(this.parent.player.el().getBoundingClientRect().height + 4);
    const label = $(this.target).text().trim();

    this.element = $(`
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class = "container">
          <div class="row p-0" style="height:${height}px">
            <!-- image -->
            <div class="col-sm m-auto">
              <div class="lead" style="max-width: 100%">
                Modifying label, <strong>${label}</strong>?
              </div>
              <form class="needs-validation mt-4"
                id=${formId}
                novalidate
              >
                <!-- name -->
                <div class="input-group mb-0 mr-sm-2">
                  <label for="${inputId}"
                    class="col-sm-2 col-form-label form-control-sm px-0"
                    >Name
                  </label>
                  <input
                    id=${inputId}
                    type="text"
                    class="form-control form-control-sm col-sm-9"
                    data-label-original="${label}"
                    value="${label}"
                    pattern="${pattern}"
                    required
                  >
                  <div class="invalid-feedback text-center" style="font-size:60%">
                    Must be ${pattern}
                  </div>
                </div>

                <!-- occurences -->
                <div
                  class="mt-4 collapse"
                  id=${tableId}
                  style="overflow-y:scroll; height:${Math.floor(height / 2)}px;"
                >
                  <table class="table table-hover table-sm" style="font-size:0.8em;">
                    <thead>
                      <tr>
                        <th scope="col" class="align-middle">#</th>
                        <th scope="col" class="align-middle px-0">Start</th>
                        <th scope="col" class="align-middle px-0">End</th>
                        <th scope="col" class="align-middle px-0">Duration</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>

                <!-- apply to all -->
                <div class="form-check collapse float-right">
                  <input class="form-check-input" type="checkbox" value="" id="${chkboxId}">
                  <label class="form-check-label" for="${chkboxId}">
                    apply to all
                  </label>
                </div>
              </form>
            </div>

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

                  <!-- description  -->
                  <div>
                    You can do:
                    <ul>
                      <li>Change label name</li>
                      <li>Delete label</li>
                      <li>Apply changes to all occurrences</li>
                      <li>Apply changes to specific timestamp</li>
                    </ul>
                  </div>

                  <div class="col-12 mt-auto mb-auto">
                    <div class="form-group mb-3 float-right">
                      <button
                        type="button"
                        class="btn btn-light btn-sm mb-2"
                        data-action="cancel">
                        Cancel
                      </button>

                      <button
                        type="button"
                        class="btn btn-danger btn-sm mb-2"
                        data-action="delete">
                        Delete selected
                      </button>

                      <button
                        type="button"
                        class="btn btn-success btn-sm mb-2"
                        data-action="apply">
                        Apply selected
                      </button>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>`);

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

    this.registerEvents();
  }