2 more files converted

app/assets/javascripts/enhancedTextbox.js

@@ -11,53 +11,62 @@
 
     this.start = function(element) {
 
-      let textarea = $(element);
+      let textarea = element;
       let visibleTextbox;
 
       this.highlightPlaceholders = (
-        typeof textarea.data('highlightPlaceholders') === 'undefined' ||
-        !!textarea.data('highlightPlaceholders')
+        typeof textarea.dataset.highlightPlaceholders === 'undefined' ||
+        textarea.dataset.highlightPlaceholders !== 'false'
       );
 
-      this.$textbox = textarea
-        .wrap(`
-          <div class='textbox-highlight-wrapper' />
-        `)
-        .after(this.$background = $(`
-          <div class="textbox-highlight-background" aria-hidden="true" />
-        `))
-        .on("input", this.update);
+      // Create wrapper div
+      const wrapper = document.createElement('div');
+      wrapper.className = 'textbox-highlight-wrapper';
 
-      $(window).on("resize", this.resize);
+      // Insert wrapper before textarea and move textarea into it
+      textarea.parentNode.insertBefore(wrapper, textarea);
+      wrapper.appendChild(textarea);
 
-      visibleTextbox = this.$textbox.clone().appendTo("body").css({
-        position: 'absolute',
-        visibility: 'hidden',
-        display: 'block'
-      });
-      this.initialHeight = visibleTextbox.height();
+      // Create background div
+      this.background = document.createElement('div');
+      this.background.className = 'textbox-highlight-background';
+      this.background.setAttribute('aria-hidden', 'true');
 
-      this.$background.css({
-        'border-width': this.$textbox.css('border-width')
-      });
+      // Insert background after textarea
+      textarea.parentNode.insertBefore(this.background, textarea.nextSibling);
+
+      this.textbox = textarea;
+
+      this.textbox.addEventListener("input", this.update);
+      window.addEventListener("resize", this.resize);
+
+      // Clone textbox to measure initial height
+      visibleTextbox = this.textbox.cloneNode(true);
+      visibleTextbox.style.position = 'absolute';
+      visibleTextbox.style.visibility = 'hidden';
+      visibleTextbox.style.display = 'block';
+      document.body.appendChild(visibleTextbox);
+
+      this.initialHeight = visibleTextbox.offsetHeight;
+
+      const borderWidth = window.getComputedStyle(this.textbox).borderWidth;
+      this.background.style.borderWidth = borderWidth;
 
       visibleTextbox.remove();
 
-      this.$textbox
-        .trigger("input");
+      this.textbox.dispatchEvent(new Event("input"));
 
     };
 
     this.resize = () => {
 
-      this.$background.width(this.$textbox.width());
+      const computedStyle = window.getComputedStyle(this.textbox);
+      const width = parseFloat(computedStyle.width);
+      this.background.style.width = width + 'px';
 
-      this.$textbox.height(
-        Math.max(
-          this.initialHeight,
-          this.$background.outerHeight()
-        )
-      );
+      const backgroundHeight = this.background.offsetHeight;
+
+      this.textbox.style.height = Math.max(this.initialHeight, backgroundHeight) + 'px';
 
       if ('stickAtBottomWhenScrolling' in window.NotifyModules) {
         window.NotifyModules.stickAtBottomWhenScrolling.recalculate();
@@ -65,7 +74,11 @@
 
     };
 
-    this.contentEscaped = () => $('<div/>').text(this.$textbox.val()).html();
+    this.contentEscaped = () => {
+      const div = document.createElement('div');
+      div.textContent = this.textbox.value;
+      return div.innerHTML;
+    };
 
     this.contentReplaced = () => this.contentEscaped().replace(
       tagPattern, (match, name, separator, value) => value && separator ?
@@ -75,9 +88,8 @@
 
     this.update = () => {
 
-      this.$background.html(
-        this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped()
-      );
+      this.background.innerHTML =
+        this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped();
 
       this.resize();