Issue #3401037 by Masami, yas: Refactor to native JavaScript from jQuery...

Issue #3401037 by Masami, yas: Refactor to native JavaScript from jQuery (aws_cloud_auto_refresh.js)

modules/cloud_service_providers/aws_cloud/js/aws_cloud_auto_refresh.js

-(function ($) {
+(function () {
   'use strict';
 
   // The interval to update a view's content.
@@ -8,7 +8,7 @@
   let auto_update = function () {
 
     // The URL of the callback for a view.
-    let url = $('div.views-form form').attr('action');
+    let url = document.querySelector('div.views-form form').getAttribute('action');
     let query_str = '';
     let pos = url.indexOf('?');
     if (pos !== -1) {
@@ -19,52 +19,65 @@
 
     // Update .view-content element, which is the content of view, excluding
     // exposed filter and pager.
-    $.get(url + query_str, function (data) {
-      let form_token = $('.view-content input[name=form_token]').val();
-      let checkbox_ids = $('.view-content .form-checkbox:checked').map(function () {
-        return this.id;
-      }).get();
+    let xhr = new XMLHttpRequest();
+    xhr.open('GET', url + query_str, true);
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        let data = xhr.responseText;
+        let parser = new DOMParser();
+        let doc = parser.parseFromString(data, 'text/html');
+        let form_token = doc.querySelector('.view-content input[name=form_token]').value;
+        let checkbox_ids = Array.from(doc.querySelectorAll('.view-content .form-checkbox:checked')).map(function (checkbox) {
+          return checkbox.id;
+        });
 
-      // Replace table.
-      $('.views-element-container .view-content div.table-responsive')
-        .replaceWith($(data).find('.view-content div.table-responsive'));
+        // Replace table.
+        let oldTable = document.querySelector('.views-element-container .view-content div.table-responsive');
+        let newTable = doc.querySelector('.view-content div.table-responsive');
+        oldTable.parentNode.replaceChild(newTable, oldTable);
 
-      // Replace pager.
-      $('.views-element-container nav.pager-nav')
-        .replaceWith($(data).find('nav.pager-nav'));
+        // Replace pager.
+        let oldPager = document.querySelector('.views-element-container nav.pager-nav');
+        let newPager = doc.querySelector('nav.pager-nav');
 
-      // Restore form token.
-      // If form token changes, the form validation will fail.
-      if (form_token) {
-        $('.view-content input[name=form_token]').val(form_token);
-      }
-
-      // Fix for the theme Bartik, which need to initialize drop buttons.
-      if (Drupal.behaviors.dropButton) {
-        Drupal.behaviors.dropButton.attach(document, drupalSettings);
-      }
+        if (oldPager && oldPager.parentNode) {
+          oldPager.parentNode.replaceChild(newPager, oldPager);
+        }
 
-      if (Drupal.behaviors.tableSelect) {
-        Drupal.behaviors.tableSelect.attach(document, drupalSettings);
-      }
+        // Restore form token.
+        // If form token changes, the form validation will fail.
+        if (form_token) {
+          document.querySelector('.view-content input[name=form_token]').value = form_token;
+        }
 
-      // Fix button initialization for bootstrap theme.
-      if (Drupal.behaviors.bootstrapDropdown) {
-        Drupal.behaviors.bootstrapDropdown.attach(document, drupalSettings);
-      }
+        // Fix for the theme Bartik, which need to initialize drop buttons.
+        if (Drupal.behaviors.dropButton) {
+          Drupal.behaviors.dropButton.attach(document, drupalSettings);
+        }
 
-      // Restore checkbox selection.
-      $.each(checkbox_ids, function (i, val) {
-        if (val) {
-          $('#' + val).prop('checked', true);
+        if (Drupal.behaviors.tableSelect) {
+          Drupal.behaviors.tableSelect.attach(document, drupalSettings);
         }
-        else {
-          $('.select-all .form-checkbox').prop('checked', true);
+
+        // Fix button initialization for bootstrap theme.
+        if (Drupal.behaviors.bootstrapDropdown) {
+          Drupal.behaviors.bootstrapDropdown.attach(document, drupalSettings);
         }
-      });
-    });
+
+        // Restore checkbox selection.
+        checkbox_ids.forEach(function (val) {
+          if (val) {
+            document.getElementById(val).checked = true;
+          }
+          else {
+            document.querySelector('.select-all .form-checkbox').checked = true;
+          }
+        });
+      }
+    };
+    xhr.send();
   };
 
   // Update a view's content every "refresh_in_sec" seconds.
   setInterval(auto_update, refresh_in_sec * 1000);
-})(jQuery);
+})();