From db0843f4ca491681524d01d8076de30d4c572920 Mon Sep 17 00:00:00 2001
From: Daniel Lo Nigro <d@d.sb>
Date: Sun, 9 Jun 2024 22:42:43 -0700
Subject: [PATCH] Modernize JavaScript on integrations page (#30964)

Co-authored-by: Franck Nijhof <git@frenck.dev>
---
 source/integrations/index.html | 238 ++++++++++++++-------------------
 1 file changed, 97 insertions(+), 141 deletions(-)

diff --git a/source/integrations/index.html b/source/integrations/index.html
index 8ca31308fc1..1adb594483d 100644
--- a/source/integrations/index.html
+++ b/source/integrations/index.html
@@ -33,7 +33,7 @@ regenerate: false
         <a href='#featured' class="btn">Featured</a>
         <a href='#works-with-home-assistant' class="btn">Partner brands</a>
       </div>
-      <div class="version_select">Added in: <select name="versions">
+      <div class="version_select">Added in: <select id="versions" name="versions">
           <option value="#"></option>
           {%- for group in components_by_version -%}
           <optgroup label="{{ group.label }} ({{group.new_components_count}})">
@@ -82,35 +82,9 @@ regenerate: false
   </div>
 </div>
 
-<script
-  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
-  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
-  crossorigin="anonymous"></script>
-  <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"
-    integrity="sha384-wlIoxluAn4R0ncWYWAibi4AATy1rxh4LzxfPhzhRfBwpYzbAQT7FDApW3TTf4KC+"
-    crossorigin="anonymous"></script>
-  <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.17.0/lazyload.min.js"
-    integrity="sha384-vJtpZDYI5wEvw5lJzoCEeYTiRzgoR1NmzkWtzy04p4AaQjHXAzxNqSEVlIsutpxa"
-    crossorigin="anonymous"></script>
-{% raw %}
-<script id="component-template" type="text/x-custom-template">
-  {{#components}}
-  <a href="{{url}}" class="option-card">
-    <div class="img-container">{{{image}}}</div>
-    <div class='title'>{{title}}</div>
-  </a>
-{{/components}}
-{{^components}}
-  <p class='note'>Nothing found!</p>
-{{/components}}
-</script>
-{% endraw %}
-
 <script type="text/javascript">
 // This object contains all components we have
-var allComponents = [
+const allComponents = [
   {%- for component in components -%}
     {%- if component.ha_category -%}
       {%- assign sliced_version = component.ha_release | split: '.' -%}
@@ -131,38 +105,38 @@ allComponents.pop(); // remove placeholder element at the end
 
 <script type="text/javascript">
   (function () {
-    var template = $('#component-template').html();
-    Mustache.parse(template); // make future calls to render faster
+    const SEARCH_PREFIX = '#search/';
+    const VERSION_PREFIX = '#version/';
+
+    const searchInputEl = document.querySelector('.component-search input');
+    const componentContainerEl = document.querySelector('#componentContainer');
 
     function init() {
       // do the lowerCase transformation once
-      for (i = 0; i < allComponents.length; i++) {
-        title = allComponents[i].title.toLowerCase();
-        domain = allComponents[i].domain;
-        title_normalized = title
+      for (let component of allComponents) {
+        const title = component.title.toLowerCase();
+        const domain = component.domain;
+        const titleNormalized = title
           .normalize("NFD")
           .replace(/[\u0300-\u036f]/g, "");
-        title_dedashed = title.replace(/[-_]/g, " ");
-        title_normalized_dedashed = title_normalized.replace(/[-_]/g, " ");
+        const titleDedashed = title.replace(/[-_]/g, " ");
+        const titleNormalizedDedashed = titleNormalized.replace(/[-_]/g, " ");
 
-        allComponents[i].titleLC = title;
-        allComponents[i].search = `${title} ${title_normalized} ${title_dedashed} ${title_normalized_dedashed} ${domain}`;
+        component.titleLC = title;
+        component.search = `${title} ${titleNormalized} ${titleDedashed} ${titleNormalizedDedashed} ${domain}`;
       }
 
       // sort the components alphabetically
-      allComponents.sort(function (a, b) {
-        return a.titleLC.localeCompare(b.titleLC);
-      });
+      allComponents.sort((a, b) => a.titleLC.localeCompare(b.titleLC));
 
-      if (location.hash !== '' && location.hash.indexOf('#search/') === 0) {
+      if (location.hash !== '' && location.hash.indexOf(SEARCH_PREFIX) === 0) {
         // set default value in search from URL
-        jQuery('.component-search input').val(decodeURIComponent(location.hash).substring(8));
+        const search = decodeURIComponent(location.hash).substring(SEARCH_PREFIX.length);
+        searchInputEl.value = search;
       }
 
-      // add focus to the search field - even on IE
-      setTimeout(function () {
-        jQuery('.component-search input').focus();
-      }, 1);
+      // add focus to the search field
+      setTimeout(() => searchInputEl.focus(), 1);
     }
     init();
 
@@ -170,152 +144,134 @@ allComponents.pop(); // remove placeholder element at the end
      * filter all components, based on the location's hash and render them into the component box
      */
     function applyFilter() {
-      var logoLazyLoad = new LazyLoad({
-        elements_selector: ".option-card img"
-      });
-      var rendered, i, filter, search;
-      var hash = location.hash || '';
-      var data = {
-        components: [],
-        image: function () {
-          return `<img src="https://brands.home-assistant.io/${this.ha_brand ? "brands": "_"}/${this.domain}/logo.png" srcset="https://brands.home-assistant.io/${this.ha_brand ? "brands ": "_"}/${this.domain}/logo@2x.png 2x" loading="lazy">`;
-        }
-      };
+      const hash = location.hash || '';
+      let components = [];
 
       // fade-out css effect on the old elements. This is actually not visible on fast browsers
-      $('#componentContainer').addClass('remove-items');
+      componentContainerEl.classList.add('remove-items');
 
       if (hash.indexOf('#search/') === -1) {
         // reset search box when not searching
-        jQuery('.component-search input').val(null);
+        searchInputEl.value = null;
       }
 
       if (hash === '#all') {
         // shortcut: no need to filter
-        data.components = allComponents;
+        components = allComponents;
       } else {
-        if (hash.indexOf('#search/') === 0) {
+        let filter, search;
+        if (hash.indexOf(SEARCH_PREFIX) === 0) {
           // search through title and category
-          search = decodeURIComponent(hash).substring(8).toLowerCase();
-          filter = function (comp) {
-            return (
-              comp.search.indexOf(search) !== -1 ||
-              comp.cat.find((c) => c.includes("#")) != undefined
-            );
-          };
+          search = decodeURIComponent(hash).substring(SEARCH_PREFIX.length).toLowerCase();
+          filter = comp => 
+            comp.search.indexOf(search) !== -1 ||
+            comp.cat.find((c) => c.includes("#")) != undefined;
 
         } else if (hash === '#featured' || hash === '') {
           // only show those with featured = true
-          filter = function (comp) {
-            return comp.featured;
-          };
+          filter = comp => comp.featured;
 
         } else if (hash === '#works-with-home-assistant') {
           // only show those partners of the Works with Home Assistant program
-          filter = function (comp) {
-            return comp.wwha;
-          };
+          filter = comp => comp.wwha;
 
-        } else if (hash.indexOf('#version/') === 0) {
+        } else if (hash.indexOf(VERSION_PREFIX) === 0) {
           // compare against a version
-          search = decodeURIComponent(hash).substring(9).toLowerCase();
-          filter = function (comp) {
-            // compare version string against version js
-            return comp.v === search;
-          };
+          search = decodeURIComponent(hash).substring(VERSION_PREFIX.length).toLowerCase();
+          // compare version string against version js
+          filter = comp => comp.v === search;
 
         } else {
           // regular filter categories
           search = hash.substring(1);
-          filter = function (comp) {
-            return comp.cat.includes(search);
-          };
+          filter = comp => comp.cat.includes(search);
         }
 
         // filter all components using the filter function
-        for (i = 0; i < (allComponents.length); i++) {
-          if (filter(allComponents[i])) {
-            data.components.push(allComponents[i]);
-          }
-        }
+        components = allComponents.filter(filter);
       }
 
-      rendered = Mustache.render(template, data);
+      let rendered;
+      if (components.length > 0) {
+        // Note: Assumes all data has already been sanitized
+        rendered = components.map(component => `
+          <a href="${component.url}" class="option-card">
+            <div class="img-container">${buildImageEl(component)}</div>
+            <div class='title'>${component.title}</div>
+          </a>
+          `).join('\n');
+      } else {
+        rendered = '<p class="note">Nothing found!</p>';
+      }
 
       // set active class on active menu item
-      jQuery('.filter-button-group a.active').removeClass('active');
-      jQuery(`.filter-button-group a[href="${hash}"]`).addClass('active');
+      document.querySelector('.filter-button-group a.active')?.classList?.remove?.('active');
+      document.querySelector(`.filter-button-group a[href="${hash}"]`)?.classList?.add?.('active');
       if (hash === "") {
-        jQuery('.filter-button-group a[href*="#featured"]').addClass('active');
+        document.querySelector('.filter-button-group a[href*="#featured"]').classList.add('active');
       }
 
       // remove previous elements and css classes, add the new stuff and then trigger the fade-in css animation
-      $('#componentContainer').html('').removeClass('show-items remove-items').html(rendered).addClass('show-items');
-      logoLazyLoad.update();
+      componentContainerEl.innerHTML = '';
+      componentContainerEl.classList.remove('show-items');
+      componentContainerEl.classList.remove('remove-items');
+      componentContainerEl.innerHTML = rendered;
+      componentContainerEl.classList.add('show-items');
     }
 
-    /**
-     * update the browser location hash. This enables users to use the browser-history
-     */
-    function updateHash(newHash) {
-      if ('pushState' in history) {
-        history.pushState('', '', newHash);
-      } else {
-        location.hash = newHash;
-      }
+    function buildImageEl(component) {
+      const urlBase = [
+        'https://brands.home-assistant.io',
+        component.ha_brand ? 'brands' : '_',
+        component.domain,
+        'logo'
+      ].join('/');
+
+      return `<img src="${urlBase}.png" srcset="${urlBase}@2x.png 2x" loading="lazy">`;
     }
 
     // update view by filter selection
-    jQuery('.filter-button-group a').click(function () {
-      updateHash(this.getAttribute('href'));
-      applyFilter();
-
-      return false;
-    });
+    for (let filterLink of document.querySelectorAll('.filter-button-group a')) {
+      filterLink.addEventListener('click', () => {
+        history.pushState('', '', filterLink.getAttribute('href'));
+        applyFilter();
+        return false;
+      });
+    }
 
     // update view on select change
-    jQuery('select').change(function () {
-      updateHash(this.value);
+    const versionsEl = document.getElementById('versions');
+    versionsEl.addEventListener('change', () => {
+      history.pushState('', '', versionsEl.value);
       applyFilter();
-
-      return false;
     });
 
     /**
-     * Simple debounce implementation, based on http://davidwalsh.name/javascript-debounce-function
+     * Simple debounce implementation
      */
-    function debounce(func, wait, immediate) {
-      var timeout;
-      return function () {
-        var context = this,
-          args = arguments;
-        var later = function () {
-          timeout = null;
-          if (!immediate) {
-            func.apply(context, args);
-          }
-        };
-        var callNow = immediate && !timeout;
+    function debounce(func, wait) {
+      let timeout;
+      return () => {
         clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-        if (callNow) {
-          func.apply(context, args);
-        }
+        timeout = setTimeout(func, wait);
       };
     };
 
     // update view by search text
-    $('.component-search input').keyup(debounce(function () {
-      var text = $(this).val();
-      // sanitize input
-      text = text.replace(/[(\?|\&\{\}\(\))]/gi, '').trim();
-      if (typeof text === "string" && text.length >= 1) {
-        updateHash('#search/' + text);
+    searchInputEl.addEventListener('keyup', debounce(() => {
+      const text = searchInputEl.value
+        // sanitize input
+        .replace(/[(\?|\&\{\}\(\))]/gi, '')
+        .trim();
+      
+      let newHash = typeof text === "string" && text.length >= 1
+        ? SEARCH_PREFIX + text
+        : '#all';
+      // Only apply filter if hash has changed
+      if (newHash !== window.location.hash) {
+        history.pushState('', '', newHash);
+        applyFilter();
       }
-      else {
-        updateHash('#all');
-      }
-      applyFilter();
     }, 500));
 
     window.addEventListener('hashchange', applyFilter);