From 90e45f224a7ece13f34cb2bdc93d5caf430fbc39 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 26 Mar 2025 13:00:19 +0100
Subject: [PATCH] Use data attributs instead of class for js integration.

---
 assets/js/contact.js            |  4 ++--
 assets/js/search.js             | 14 +++++++-------
 layouts/shortcodes/contact.html |  4 ++--
 layouts/shortcodes/search.html  | 12 ++++++------
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/assets/js/contact.js b/assets/js/contact.js
index b92e82e..193338e 100644
--- a/assets/js/contact.js
+++ b/assets/js/contact.js
@@ -38,11 +38,11 @@
   if (location.search.substring(1) !== '') {
     switch (location.search.substring(1)) {
       case 'submitted':
-        document.querySelector('.contact-submitted').classList.remove('hidden');
+        document.querySelector(['data-contact-submitted']).classList.remove('hidden');
         break;
 
       case 'error':
-        document.querySelector('.contact-error').classList.remove('hidden');
+        document.querySelector(['data-contact-error']).classList.remove('hidden');
         break;
     }
   }
diff --git a/assets/js/search.js b/assets/js/search.js
index 5531e2b..36bf649 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -19,7 +19,7 @@ import * as params from '@params';
     const template = document.querySelector('template').content;
     const fragment = document.createDocumentFragment();
 
-    const results = document.querySelector('.search-results');
+    const results = document.querySelector('[data-search-results]');
     results.textContent = '';
 
     for (const id in items) {
@@ -38,7 +38,7 @@ import * as params from '@params';
   }
 
   function doSearch() {
-    const query = document.querySelector('.search-text').value.trim();
+    const query = document.querySelector('[data-search-text]').value.trim();
     const results = index.search({
       query: query,
       enrich: true,
@@ -54,7 +54,7 @@ import * as params from '@params';
   }
 
   function enableUI() {
-    const searchform = document.querySelector('.search-form');
+    const searchform = document.querySelector('[data-search-form]');
     searchform.addEventListener('submit', function (e) {
       e.preventDefault();
       doSearch();
@@ -62,14 +62,14 @@ import * as params from '@params';
     searchform.addEventListener('input', function () {
       doSearch();
     });
-    document.querySelector('.search-loading').classList.add('hidden');
-    document.querySelector('.search-input').classList.remove('hidden');
-    document.querySelector('.search-text').focus();
+    document.querySelector('[data-search-loading]').classList.add('hidden');
+    document.querySelector('[data-search-input]').classList.remove('hidden');
+    document.querySelector('[data-search-loading]').focus();
   }
 
   function buildIndex() {
     const searchindex = params.basePath + 'searchindex.json';
-    document.querySelector('.search-loading').classList.remove('hidden');
+    document.querySelector('[data-search-loading]').classList.remove('hidden');
     fetch(searchindex)
       .then(function (response) {
         return response.json();
diff --git a/layouts/shortcodes/contact.html b/layouts/shortcodes/contact.html
index e71282a..02208a9 100644
--- a/layouts/shortcodes/contact.html
+++ b/layouts/shortcodes/contact.html
@@ -1,6 +1,6 @@
 <p class="error message js-hidden">{{ i18n "js_required" }}</p>
-<p class="contact-submitted status message hidden">{{ i18n "contact_submitted" }}</p>
-<p class="contact-error error message hidden">{{ i18n "contact_error" }}</p>
+<p class="success message hidden" data-contact-submitted>{{ i18n "contact_submitted" }}</p>
+<p class="error message hidden" data-contact-error>{{ i18n "contact_error" }}</p>
 
 <form class="contact-form hidden" data-protect="/php/contact.php" action="#" method="post" accept-charset="UTF-8">
   <label for="edit-name">{{ i18n "contact_name" }}</label>
diff --git a/layouts/shortcodes/search.html b/layouts/shortcodes/search.html
index d88484f..47d5dcd 100644
--- a/layouts/shortcodes/search.html
+++ b/layouts/shortcodes/search.html
@@ -1,17 +1,17 @@
 <p class="error message js-hidden">{{ i18n "js_required" }}</p>
-<p class="search-loading status message hidden">{{ i18n "search_loading" }}</p>
+<p class="info message hidden" data-search-loading>{{ i18n "search_loading" }}</p>
 
-<div class="search-input hidden">
-  <form id="search-form" class="search-form" action="#" method="post" accept-charset="UTF-8" role="search">
+<div data-search-input class="hidden">
+  <form data-search-form id="search-form" action="#" method="post" accept-charset="UTF-8" role="search">
     <label for="query" class="visually-hidden">{{ i18n "search_title" }}</label>
-    <input type="search" id="query" name="query" class="search-text" placeholder="{{ i18n "search_placeholder" }}" maxlength="128">
+    <input data-search-text type="search" id="query" name="query" placeholder="{{ i18n "search_placeholder" }}" maxlength="128">
   </form>
 </div>
 
-<div class="search-results"></div>
+<div data-search-results></div>
 
 <template>
-  <article class="search-result list-view">
+  <article data-search-result class="list-view">
     <header>
       <h2 class="title mt--s mb--xxs"><a href="#">Title here</a></h2>
       <div class="submitted"><time class="created-date">Date here</time></div>