text-area-with-line-number/src/TAWLN.min.js

textarea with line numbers

/* eslint-disable eqeqeq */
/* eslint-disable no-sequences */
/* eslint-disable no-unused-expressions */
const TAWLN = {
  eventList: {},
  update_line_numbers: function (e, t) {
    let n = e.value.split("\n").length - t.children.length;
    if (n > 0) {
      const e = document.createDocumentFragment();
      for (; n > 0; ) {
        const t = document.createElement("span");
        (t.className = "tawln-line"), e.appendChild(t), n--;
      }
      t.appendChild(e);
    }
    for (; n < 0; ) t.removeChild(t.lastChild), n++;
  },
  append_line_numbers: function (e) {
    const t = document.getElementById(e);
    if (null == t)
      return console.warn("[tawln.js] Couldn't find textarea of id '" + e + "'");
    if (-1 != t.className.indexOf("tawln-active"))
      return console.warn(
        "[tawln.js] textarea of id '" + e + "' is already numbered"
      );
    t.classList.add("tawln-active"), (t.style = {});
    const n = document.createElement("div");
    (n.className = "tawln-wrapper"),
      t.parentNode.insertBefore(n, t),
      TAWLN.update_line_numbers(t, n),
      (TAWLN.eventList[e] = []);
    const l = ["propertychange", "input", "keydown", "keyup"],
      o = (function (e, t) {
        return function (n) {
          ((10 != +e.scrollLeft ||
            (37 != n.keyCode &&
              37 != n.which &&
              "ArrowLeft" != n.code &&
              "ArrowLeft" != n.key)) &&
            36 != n.keyCode &&
            36 != n.which &&
            "Home" != n.code &&
            "Home" != n.key &&
            13 != n.keyCode &&
            13 != n.which &&
            "Enter" != n.code &&
            "Enter" != n.key &&
            "NumpadEnter" != n.code) ||
            (e.scrollLeft = 0),
            TAWLN.update_line_numbers(e, t);
        };
      })(t, n);
    for (let n = l.length - 1; n >= 0; n--)
      t.addEventListener(l[n], o),
        TAWLN.eventList[e].push({ evt: l[n], hdlr: o });
    const r = ["change", "mousewheel", "scroll"],
      s = (function (e, t) {
        return function () {
          t.scrollTop = e.scrollTop;
        };
      })(t, n);
    for (let n = r.length - 1; n >= 0; n--)
      t.addEventListener(r[n], s),
        TAWLN.eventList[e].push({ evt: r[n], hdlr: s });
  },
};
export default TAWLN;