Refactoring js to remove jquery dependency

conditional_message.libraries.yml

 conditional-message:
-  version: 1.x
   css:
     theme:
       css/conditional_message.css: {}
   js:
     js/conditional_message.js: {}
-    js/conditional_message_edit_form.js: {}
   dependencies:
-    - core/jquery
     - core/drupal
     - core/drupalSettings
+
+conditional-message-settings:
+  js:
+    js/conditional_message_edit_form.js: {}

conditional_message.module

@@ -79,9 +79,13 @@ function conditional_message_page_attachments(array &$page) {
 }
 
 /**
- * Implements hook_form_FORM_ID_alter().
+ * Implements hook_page_attachments_alter().
  */
-function conditional_message_form_conditional_message_edit_form_alter(&$form, FormStateInterface $form_state, $form_id) {
+function conditional_message_page_attachments_alter(array &$page) {
+  // Get the current path and compare.
+  $path = $current_path = \Drupal::service('path.current')->getPath();
+  if (substr($path, 0, 34) == '/admin/content/conditional-message') {
     // Add JS to show or hide fields according to selected conditions.
-  $form['#attached']['library'][] = 'conditional_message/conditional-message-edit-form';
+    $page['#attached']['library'][] = 'conditional_message/conditional-message-settings';
+  }
 }

js/conditional_message.js

@@ -2,39 +2,38 @@
  * @file
  */
 
-(function ($, Drupal, drupalSettings) {
+(function (Drupal, drupalSettings) {
 
   "use strict";
 
   Drupal.behaviors.conditional_message = {
     attach: function (context, settings) {
       // Run only once (not on ajax calls).
-      if (context != document) {
+      if (context != document || drupalSettings.conditional_message === undefined) {
         return;
       }
       // Shorthand for the configurations.
       let config = drupalSettings.conditional_message;
       let htmls = [];
-      // TODO rewrite this in pure JS to avoid jQuery dependency.
       for (let key in config) {
         // Bail if user already closed the message before.
         let cmuc = 'conditionalMessageUserClosed' + key;
         if (localStorage.getItem(cmuc) == config[key].hash) {
           continue;
         }
-        (function ($, config, key, htmls) {
-          queryEndpoint($, config, key, htmls);
-        }).call(this, $, config, key, htmls);
-      }
-    }
-  };
-})(jQuery, Drupal, drupalSettings);
-
-
-function queryEndpoint($, config, key, htmls) {
-  $.ajax({
-    url: Drupal.url("conditional_message_data_output"), success: function (result) {
+        (function (config, key, htmls) {
+          this.queryEndpoint(config, key, htmls);
+        }).call(this, config, key, htmls);
+      }
+    },
+    queryEndpoint: function (config, key, htmls) {
+      const request = new XMLHttpRequest();
+      request.open('GET', Drupal.url("conditional_message_data_output"), true);
+      request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+      request.onload = function () {
+        if (this.status>= 200 && this.status < 400) {
           // Do not proceed if key not defined. Node deleted?
+          const result = JSON.parse(this.responseText);
           if (result[key] == undefined) {
             return;
           }
@@ -46,9 +45,10 @@ function queryEndpoint($, config, key, htmls) {
             let cmrs = 'conditionalMessageReadStatus' + key;
             let readStatus = localStorage.getItem(cmrs);
             if (readStatus !== config[key].hash) {
-          check['session'] = false;
-        } else {
+              check['session'] = true;
               localStorage.setItem(cmrs, config[key].hash);
+            } else {
+              check['session'] = false;
             }
           }
           // Check close button with localStorage.
@@ -73,7 +73,7 @@ function queryEndpoint($, config, key, htmls) {
             check['type'] = false;
             result[key].types.forEach(function (type) {
               let typeClass = 'page-node-type-' + type;
-          if ($('body').hasClass(typeClass)) {
+              if (document.querySelector('body').classList.contains(typeClass)) {
                 check['type'] = true;
               }
             });
@@ -86,12 +86,6 @@ function queryEndpoint($, config, key, htmls) {
             && check['type']
             && check['close']) {
 
-        // Display the close button only if option to close enabled.
-        let closeButton = '';
-        if (result[key].close) {
-          closeButton = '<span>&times;</span>';
-        }
-
             // Prepare color, either color name or HEX. If HEX color, add hash.
             if (/^([0-9A-F]{3}){1,2}$/i.test(config[key].bg_color)) {
               config[key].bg_color = '#' + config[key].bg_color;
@@ -100,26 +94,31 @@ function queryEndpoint($, config, key, htmls) {
               config[key].color = '#' + config[key].color;
             }
 
-        // Build the message HTML.
-        let html = '<div class="conditional-message" data-cm-key="'
-          + key +'" style="background-color:'
-          + config[key].bg_color + '; color:'
-          + config[key].color + ';">' + closeButton
-          + config[key].message + '</div>';
-        htmls[key] = html;
+            // Build the message div element.
+            htmls[key] = document.createElement('div');
+            htmls[key].setAttribute('class', 'conditional-message');
+            htmls[key].setAttribute('data-cm-key', key);
+            htmls[key].setAttribute('style', 'background-color:' + config[key].bg_color + '; color:' + config[key].color);
+            if (result[key].close) {
+              config[key].message += '<span>&times;</span>';
+            }
+            htmls[key].innerHTML = config[key].message;
+
             // Place the message in the page top or bottom.
             switch (config[key].position) {
               case  'bottom':
-            $(config[key].target).append($(htmls[key]).addClass('conditional-message-bottom'));
+                htmls[key].classList.add('conditional-message-bottom');
+                document.querySelector(config[key].target).append(htmls[key]);
                 break;
 
               default:
-            $(config[key].target).prepend($(htmls[key]).addClass('conditional-message-top'));
+                htmls[key].classList.add('conditional-message-top');
+                document.querySelector(config[key].target).prepend(htmls[key]);
             }
             // Close button.
-        $('.conditional-message span').on('click', function () {
-          let cmKey = $(this).parent().data('cm-key');
-          $(this).parent().remove();
+            document.querySelector('.conditional-message span').addEventListener('click', function () {
+              let cmKey = this.parentElement.getAttribute('data-cm-key');
+              this.parentElement.remove();
               let cmuc = 'conditionalMessageUserClosed' + cmKey;
               if (result[key].close) {
                 localStorage.setItem(cmuc, config[key].hash);
@@ -127,5 +126,11 @@ function queryEndpoint($, config, key, htmls) {
             });
           }
         }
-  });
+      };
+      request.onerror = function () {
+        console.log('Conditional Message might not be working as expected: connection error.');
       }
+      request.send();
+    },
+  };
+})(Drupal, drupalSettings);

js/conditional_message_edit_form.js

@@ -2,7 +2,7 @@
  * @file
  */
 
-(function ($, Drupal) {
+(function (Drupal) {
 
     "use strict";
 
@@ -10,28 +10,28 @@
       attach: function (context, settings) {
         // Show or hide options according to selected conditions.
         function toggleVisibility() {
-                if ($('#edit-conditions-role', context).prop('checked')) {
-                    $('#edit-role-options-wrapper', context).show();
+          if (document.querySelector('#edit-conditions-role').checked) {
+            document.querySelector('#edit-role-options-wrapper').style.display = 'block';
           }
           else {
-                    $('#edit-role-options-wrapper', context).hide();
+            document.querySelector('#edit-role-options-wrapper').style.display = 'none';
           }
-                if ($('#edit-conditions-path', context).prop('checked')) {
-                    $('#edit-path-options-wrapper', context).show();
+          if (document.querySelector('#edit-conditions-path').checked) {
+            document.querySelector('#edit-path-options-wrapper').style.display = 'block';
           }
           else {
-                    $('#edit-path-options-wrapper', context).hide();
+            document.querySelector('#edit-path-options-wrapper').style.display = 'none';
           }
-                if ($('#edit-conditions-content-type', context).prop('checked')) {
-                    $('#edit-content-type-options-wrapper', context).show();
+          if (document.querySelector('#edit-conditions-content-type').checked) {
+            document.querySelector('#edit-content-type-options-wrapper').style.display = 'block';
           }
           else {
-                    $('#edit-content-type-options-wrapper', context).hide();
+            document.querySelector('#edit-content-type-options-wrapper').style.display = 'none';
           }
         }
         toggleVisibility();
 
-            $(document, context).on('click', toggleVisibility);
+        document.addEventListener('click', toggleVisibility);
       }
     }
-})(jQuery, Drupal);
+})(Drupal);