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' ||
+        typeof textarea.dataset.highlightPlaceholders === 'undefined' ||
-        !!textarea.data('highlightPlaceholders')
+        textarea.dataset.highlightPlaceholders !== 'false'
       );
 
-      this.$textbox = textarea
+      // Create wrapper div
-        .wrap(`
+      const wrapper = document.createElement('div');
-          <div class='textbox-highlight-wrapper' />
+      wrapper.className = 'textbox-highlight-wrapper';
-        `)
-        .after(this.$background = $(`
-          <div class="textbox-highlight-background" aria-hidden="true" />
-        `))
-        .on("input", this.update);
 
-      $(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({
+      // Create background div
-        position: 'absolute',
+      this.background = document.createElement('div');
-        visibility: 'hidden',
+      this.background.className = 'textbox-highlight-background';
-        display: 'block'
+      this.background.setAttribute('aria-hidden', 'true');
-      });
-      this.initialHeight = visibleTextbox.height();
 
-      this.$background.css({
+      // Insert background after textarea
-        'border-width': this.$textbox.css('border-width')
+      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
+      this.textbox.dispatchEvent(new Event("input"));
-        .trigger("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(
+      const backgroundHeight = this.background.offsetHeight;
-        Math.max(
+
-          this.initialHeight,
+      this.textbox.style.height = Math.max(this.initialHeight, backgroundHeight) + 'px';
-          this.$background.outerHeight()
-        )
-      );
 
       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.background.innerHTML =
-        this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped()
+        this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped();
-      );
 
       this.resize();
 

app/assets/javascripts/radioSelect.js

@@ -70,12 +70,13 @@
   };
 
   let shiftFocus = function(elementToFocus, component) {
+    const radios = component.querySelectorAll('[type=radio]');
     // The first option is always the default
-    if (elementToFocus === 'default') {
+    if (elementToFocus === 'default' && radios[0]) {
-      $('[type=radio]', component).eq(0).focus();
+      radios[0].focus();
     }
-    if (elementToFocus === 'option') {
+    if (elementToFocus === 'option' && radios[1]) {
-      $('[type=radio]', component).eq(1).focus();
+      radios[1].focus();
     }
   };
 
@@ -83,24 +84,22 @@
 
     this.start = function(component) {
 
-      let $component = $(component);
       let render = (state, data) => {
-        $component.html(renderStates[state](data));
+        component.innerHTML = renderStates[state](data);
       };
       // store array of all options in component
-      let choices = $('label', $component).toArray().map(function(element) {
+      let choices = Array.from(component.querySelectorAll('label')).map(function(element) {
-        let $element = $(element);
         return {
-          'id': $element.attr('for'),
+          'id': element.htmlFor,
-          'label': $.trim($element.text()),
+          'label': element.textContent.trim(),
-          'value': $element.prev('input').attr('value')
+          'value': element.previousElementSibling.value
         };
       });
-      let categories = $component.data('categories').split(',');
+      let categories = component.dataset.categories.split(',');
-      let name = $component.find('input').eq(0).attr('name');
+      let name = component.querySelector('input').name;
       let mousedownOption = null;
       let showNowAsDefault = (
-        $component.data('show-now-as-default').toString() === 'true' ?
+        component.dataset.showNowAsDefault === 'true' ?
         {'name': name} : false
       );
 
@@ -129,22 +128,23 @@
         const parentNode = event.target.parentNode;
 
         if (parentNode === mousedownOption) {
-          const value = $('input', parentNode).attr('value');
+          const input = parentNode.querySelector('input');
+          const value = input ? input.value : '';
 
           selectOption(value);
 
           // clear tracking
           mousedownOption = null;
-          $(document).off('mouseup', trackMouseup);
+          document.removeEventListener('mouseup', trackMouseup);
         }
       };
 
-      // set events
+      // set events using event delegation
-      $component
+      component.addEventListener('click', function(event) {
-        .on('click', '.radio-select__button--category', function(event) {
+        // Handle category button clicks
-
+        if (event.target.classList.contains('radio-select__button--category')) {
           event.preventDefault();
-          let wordsInDay = $(this).attr('value').split(' ');
+          let wordsInDay = event.target.value.split(' ');
           let day = wordsInDay[wordsInDay.length - 1].toLowerCase();
           render('choose', {
             'choices': choices.filter(
@@ -154,57 +154,58 @@
             'showNowAsDefault': showNowAsDefault
           });
           shiftFocus('option', component);
+        }
 
-        })
+        // Handle done button clicks
-        .on('mousedown', '.js-option', function(event) {
+        if (event.target.classList.contains('radio-select__button--done')) {
-          mousedownOption = this;
-
-          // mouseup on the same option completes the click action
-          $(document).on('mouseup', trackMouseup);
-        })
-        // space and enter, clicked on a radio confirm that option was selected
-        .on('keydown', 'input[type=radio]', function(event) {
-
-          // allow keypresses which aren’t enter or space through
-          if (event.which !== 13 && event.which !== 32) {
-            return true;
-          }
-
           event.preventDefault();
-          let value = $(this).attr('value');
+          let selection = event.target.parentNode.querySelector('input[type=radio]:checked');
-          selectOption(value);
+          if (selection) {
-
-        })
-        .on('click', '.radio-select__button--done', function(event) {
-
-          event.preventDefault();
-          let $selection = $('input[type=radio]:checked', this.parentNode);
-          if ($selection.length) {
-
             render('chosen', {
               'choices': choices.filter(
-                element => element.value == $selection.eq(0).attr('value')
+                element => element.value == selection.value
               ),
               'name': name,
               'showNowAsDefault': showNowAsDefault
             });
             shiftFocus('option', component);
-
           } else {
-
             reset();
             shiftFocus('default', component);
-
           }
+        }
 
-        })
+        // Handle reset button clicks
-        .on('click', '.radio-select__button--reset', function(event) {
+        if (event.target.classList.contains('radio-select__button--reset')) {
-
           event.preventDefault();
           reset();
           shiftFocus('default', component);
+        }
+      });
 
-        });
+      component.addEventListener('mousedown', function(event) {
+        // Handle option mousedown
+        const option = event.target.closest('.js-option');
+        if (option) {
+          mousedownOption = option;
+          // mouseup on the same option completes the click action
+          document.addEventListener('mouseup', trackMouseup);
+        }
+      });
+
+      component.addEventListener('keydown', function(event) {
+        // Handle radio keydown (space and enter)
+        if (event.target.type === 'radio') {
+          // allow keypresses which aren't enter or space through
+          if (event.which !== 13 && event.which !== 32) {
+            return true;
+          }
+
+          event.preventDefault();
+          let value = event.target.value;
+          selectOption(value);
+        }
+      });
 
       // set HTML to initial state
       render('initial', {
@@ -213,7 +214,7 @@
         'showNowAsDefault': showNowAsDefault
       });
 
-      $component.css({'height': 'auto'});
+      component.style.height = 'auto';
 
     };