ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use data attributs instead of class for js integration.

Browse source
This commit is contained in:
Fredrik Jonsson 2025-03-26 13:00:19 +01:00
commit 90e45f224a
4 changed files with 17 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/js/contact.js
View file

@ -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;
}
}

14
assets/js/search.js
View file

@ -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();

4
layouts/shortcodes/contact.html
View file

@ -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>

12
layouts/shortcodes/search.html
View file

@ -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>