Replace jQuery with vanilla JS

packages/core-web/.eslintrc.js

@@ -6,7 +6,6 @@ module.exports = {
   },
   'extends': ['../../.eslintrc.js'],
   'globals': {
-    'jQuery': 'readonly',
     'Vue': 'readonly',
     'baseUrl': 'readonly',
   },

packages/core-web/src/index.js

@@ -22,28 +22,27 @@ function scrollToUrlAnchorHeading() {
 }
 
 function detectAndApplyHeaderStyles() {
-  jQuery(':header').each((index, heading) => {
+  document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((heading) => {
     if (heading.id) {
-      jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
+      heading.removeAttribute('id');
     }
-  });
-
-  const headerSelector = jQuery('header[sticky]');
+  }); // to avoid duplicated id problem
+  const headerSelector = document.querySelectorAll('header[sticky]');
   if (headerSelector.length === 0) {
     return;
   }
   const [headerEl] = headerSelector;
 
-  let headerHeight = headerSelector.height();
+  let headerHeight = headerSelector.height;
   function updateHeaderHeight() {
-    headerHeight = headerSelector.height();
+    headerHeight = headerSelector.height;
     document.documentElement.style.setProperty('--sticky-header-height', `${headerHeight}px`);
   }
 
   let isHidden = false;
   function showHeader() {
     isHidden = false;
-    headerSelector.removeClass('hide-header');
+    headerSelector.classList.remove('hide-header');
   }
   headerEl.addEventListener('transitionend', () => {
     // reset overflow when header shows again to allow content
@@ -56,8 +55,8 @@ function detectAndApplyHeaderStyles() {
   function hideHeader() {
     isHidden = true;
     // hide header overflow when user scrolls to support transition effect
-    headerSelector.css('overflow', 'hidden');
-    headerSelector.addClass('hide-header');
+    headerSelector.style.overflow = 'hidden';
+    headerSelector.classList.add('hide-header');
   }
 
   // Handles window resizes + dynamic content (e.g. dismissing a box within)
@@ -128,7 +127,8 @@ function detectAndApplyHeaderStyles() {
 }
 
 function updateSearchData(vm) {
-  jQuery.getJSON(`${baseUrl}/siteData.json`)
+  fetch(`${baseUrl}/siteData.json`)
+    .then(response => response.json())
     .then((siteData) => {
       vm.searchData = siteData.pages;
     });

packages/vue-components/.eslintrc.js

@@ -4,7 +4,6 @@ module.exports = {
     'plugin:vue/recommended',
   ],
   'globals': {
-    'jQuery': 'readonly',
     'Vue': 'readonly',
   },
   'rules': {

packages/vue-components/src/Retriever.vue

@@ -58,13 +58,17 @@ export default {
       if (this.hasFetchedCopy) {
         return;
       }
-      jQuery.get(this.srcWithoutHash)
-        .done((response) => {
-          let result = response;
+      fetch(this.srcWithoutHash)
+        .then(response => response.text())
+        .then((htmlText) => {
+          let result = htmlText;
           if (this.hash) {
-            const tempDom = jQuery('<temp>').append(jQuery.parseHTML(result));
-            const appContainer = jQuery(`#${this.hash}`, tempDom);
-            result = appContainer.html();
+            const htmlResult = document.implementation.createHTMLDocument('');
+            htmlResult.body.innerHTML = result;
+            const tempDom = document.createElement('temp');
+            Array.from(htmlResult.body.childNodes).forEach(child => tempDom.append(child));
+            const appContainer = tempDom.querySelectorAll(`#${this.hash}`);
+            result = appContainer.innerHTML;
           }
           this.hasFetchedCopy = true;
           // result is empty / undefined
@@ -92,9 +96,9 @@ export default {
           new TempComponent().$mount(this.$el);
           this.$emit('src-loaded');
         })
-        .fail((error) => {
+        .catch((error) => {
           // eslint-disable-next-line no-console
-          console.error(error.responseText);
+          console.error(error);
           this.$el.innerHTML = '<strong>Error</strong>: Failed to retrieve content from source: '
               + `<em>${this.srcWithoutHash}</em>`;
           this.$emit('src-loaded');

packages/vue-components/src/directives/Closeable.js

@@ -2,46 +2,53 @@ module.exports = {
   bind(el) {
     function onClose() {
       el.dataset.isShown = 'false';
-      $showLabel.show();
-      $closeButton.hide();
-      $content.get()[0].style.display = 'none';
+      showLabel.style.display = '';
+      closeButton.style.display = 'none';
+      content.style.display = 'none';
     }
 
     function onShow() {
       el.dataset.isShown = 'true';
-      $showLabel.hide();
-      $content.get()[0].style.display = '';
+      showLabel.style.display = 'none';
+      content.style.display = '';
     }
 
     function onMouseOver() {
       if (el.dataset.isShown === 'false') {
         return;
       }
-      $closeButton.show();
+      closeButton.style.display = '';
     }
 
     function onMouseOut() {
       if (el.dataset.isShown === 'false') {
         return;
       }
-      $closeButton.hide();
+      closeButton.style.display = 'none';
     }
 
     el.dataset.isShown = 'true';
     el.style.position = 'relative';
     const message = el.getAttribute('alt') || 'Expand Content';
-    const $content = jQuery(`<div class="content"></div>`);
-    jQuery(el).contents().appendTo($content);
-    jQuery(el).empty();
-    jQuery(el).append($content);
-    jQuery(el).attr('class', `${el.className} closeable-wrapper`);
-    const $closeButton = jQuery('<span class="closeable-button label label-default hidden-print" style="display: none; position: absolute; top: 0; left: 0; cursor: pointer;background: #d9534f;"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>');
-    jQuery(el).append($closeButton);
-    const $showLabel = jQuery(`<a class="closeable-show hidden-print" style="display: none; cursor: pointer;text-decoration: underline">${message}</a>`);
-    jQuery(el).append($showLabel);
-    $closeButton.click(onClose);
-    $showLabel.click(onShow);
-    jQuery(el).on('mouseover', onMouseOver);
-    jQuery(el).on('mouseout', onMouseOut);
+    const content = document.createElement('div');
+    el.classList.add('content');
+    Array.from(el.children).forEach(child => content.append(child));
+    el.replaceChildren();
+    el.append(content);
+    el.setAttribute('class', `${el.className} closeable-wrapper`);
+    const closeButton = document.createElement('span');
+    closeButton.classList.add('closeable-button', 'label', 'label-default', 'hidden-print');
+    closeButton.style.cssText += 'display: none; position: absolute; top: 0; left: 0; cursor: pointer;background: #d9534f';
+    closeButton.innerHTML = '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>';
+    el.append(closeButton);
+    const showLabel = document.createElement('a');
+    showLabel.classList.add('closeable-show', 'hidden-print');
+    showLabel.style.cssText += 'display: none; cursor: pointer;text-decoration: underline';
+    showLabel.innerHTML = message;
+    el.append(showLabel);
+    closeButton.addEventListener('click', onClose);
+    showLabel.addEventListener('click', onShow);
+    el.addEventListener('mouseover', onMouseOver);
+    el.addEventListener('mouseout', onMouseOut);
   }
 };

packages/vue-components/src/directives/Float.js

@@ -1,8 +1,8 @@
 module.exports = {
-  bind () {
-    jQuery(this.el).wrap(function () {
-      return `<div></div>`;
-    });
+  bind() {
+    const wrappingElement = document.createElement('div');
+    this.el.replaceWith(wrappingElement);
+    wrappingElement.appendChild(this.el);
   },
   update(direction) {
     this.el.style.float = direction;

packages/vue-components/src/panels/PanelBase.js

@@ -145,10 +145,8 @@ export default {
         requestAnimationFrame(() => {
           // To enable behaviour of auto window scrolling during panel collapse
           if (this.$el.getBoundingClientRect().top < 0) {
-            const headerHeight = jQuery('header[sticky]').height() || 0;
-            jQuery('html').animate({
-              scrollTop: window.scrollY + this.$el.getBoundingClientRect().top - headerHeight - 3,
-            }, 500, 'swing');
+            const headerHeight = document.querySelector('header[sticky]').length || 0;
+            window.scrollTo(0, window.scrollY + this.$el.getBoundingClientRect().top - headerHeight - 3);
           }
           this.$refs.panel.style.maxHeight = `${this.collapsedPanelHeight}px`;
         });