mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
cf9bd5cd5d
- tag-search: add minTags/required params, counter shows red if < 3, accent if ≥ 3 - form.php: pass minTags=3 for partage mode keywords - checkbox-list: support labelHtml for raw HTML label with targetable asterisk span - language-autre-fragment: OOB swap updates #languages-required-asterisk when autre pills change - language-search: client-side update #languages-required-asterisk on pill add/remove - contenus.php: replace 3 form+submit-button fieldsets with HTMX auto-save checkboxes - settings.php: detect HX-Request header, return OOB CSRF token updates, skip redirect
262 lines
12 KiB
PHP
262 lines
12 KiB
PHP
<?php
|
|
/**
|
|
* Language search partial — interactive "Autre(s) langue(s)" input with HTMX-powered suggestions.
|
|
*
|
|
* Replaces the old plain text input with an interactive component:
|
|
* - Type to search among existing languages via HTMX
|
|
* - If the language doesn't exist, a "Créer" option appears
|
|
* - Selected languages are shown as pills with a round delete button (bin icon)
|
|
* - All language names are lowercased and deduplicated
|
|
*
|
|
* Variables consumed:
|
|
* string $name — base input name (hidden inputs will be name[]); default 'language_autre'
|
|
* string $label — visible label text
|
|
* string $placeholder — placeholder text for the search input
|
|
* string $hint — optional hint shown above the input
|
|
* string $hxPost — HTMX POST endpoint for language search
|
|
* array $selectedLanguages — array of ['id' => int|null, 'name' => string] for pre-filled languages
|
|
* string|null $id — override the id attribute prefix
|
|
* int $maxLanguages — maximum number of languages (default 10)
|
|
* bool $required — whether at least one "other language" is required (default false)
|
|
*/
|
|
|
|
$name = $name ?? 'language_autre';
|
|
$label = $label ?? 'Autre(s) langue(s)';
|
|
$placeholder = $placeholder ?? 'Rechercher une langue…';
|
|
$hint = $hint ?? null;
|
|
$hxPost = $hxPost ?? '/admin/language-search-fragment.php';
|
|
$selectedLanguages = $selectedLanguages ?? [];
|
|
$id = $id ?? $name;
|
|
$maxLanguages = $maxLanguages ?? 10;
|
|
$required = $required ?? false;
|
|
$langCount = count($selectedLanguages);
|
|
?>
|
|
<div id="<?= htmlspecialchars($id) ?>-search-container">
|
|
<span class="admin-row-label"><?= htmlspecialchars($label) ?><span id="language-autre-required"><?= $required ? ' <span class="asterisk">*</span>' : '' ?></span></span>
|
|
<div class="tag-search-wrapper">
|
|
<?php if ($hint): ?>
|
|
<small class="tag-search-hint"><?= htmlspecialchars($hint) ?></small>
|
|
<?php endif; ?>
|
|
|
|
<!-- Active language pills -->
|
|
<div class="tag-search-pills" id="<?= htmlspecialchars($id) ?>-pills">
|
|
<?php foreach ($selectedLanguages as $lang): ?>
|
|
<span class="tag-pill">
|
|
<input type="hidden" name="<?= htmlspecialchars($name) ?>[]" value="<?= htmlspecialchars($lang['name']) ?>">
|
|
<span class="tag-pill-name"><?= htmlspecialchars($lang['name']) ?></span>
|
|
<button type="button" class="tag-pill-remove" title="Retirer « <?= htmlspecialchars($lang['name']) ?> »" aria-label="Retirer <?= htmlspecialchars($lang['name']) ?>">
|
|
<svg width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM112,168V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Zm48,0V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Z"></path></svg>
|
|
</button>
|
|
</span>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<!-- Counter visible only when languages exist or max reached -->
|
|
<div class="tag-search-counter" id="<?= htmlspecialchars($id) ?>-counter"<?= $langCount === 0 ? ' style="display:none"' : '' ?>>
|
|
<span class="tag-search-count" id="<?= htmlspecialchars($id) ?>-count"><?= $langCount ?>/<?= (int)$maxLanguages ?></span>
|
|
<?php if ($langCount >= $maxLanguages): ?>
|
|
<span class="tag-search-max-msg">Maximum de langues atteint</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<!-- Search input (hidden when max languages reached) -->
|
|
<div class="tag-search-input-wrap"<?= $langCount >= $maxLanguages ? ' style="display:none"' : '' ?>>
|
|
<input type="text"
|
|
name="language_search_q"
|
|
id="<?= htmlspecialchars($id) ?>-search"
|
|
class="tag-search-input"
|
|
placeholder="<?= htmlspecialchars($placeholder) ?>"
|
|
autocomplete="off"
|
|
hx-post="<?= htmlspecialchars($hxPost) ?>"
|
|
hx-trigger="input changed delay:200ms, focus"
|
|
hx-target="#<?= htmlspecialchars($id) ?>-suggestions"
|
|
hx-swap="innerHTML"
|
|
hx-include="#<?= htmlspecialchars($id) ?>-pills">
|
|
</div>
|
|
|
|
<!-- Suggestions dropdown (positioned absolutely over content) -->
|
|
<div class="tag-search-suggestions" id="<?= htmlspecialchars($id) ?>-suggestions" role="listbox"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inline script for the interactive behaviour (no external JS required) -->
|
|
<script>
|
|
(function() {
|
|
const container = document.getElementById(<?= json_encode($id . '-search-container') ?>);
|
|
if (!container || container._langSearchInit) return;
|
|
container._langSearchInit = true;
|
|
|
|
const pills = document.getElementById(<?= json_encode($id . '-pills') ?>);
|
|
const search = document.getElementById(<?= json_encode($id . '-search') ?>);
|
|
const dropdown = document.getElementById(<?= json_encode($id . '-suggestions') ?>);
|
|
const countEl = document.getElementById(<?= json_encode($id . '-count') ?>);
|
|
const counter = document.getElementById(<?= json_encode($id . '-counter') ?>);
|
|
const maxLanguages = <?= (int)$maxLanguages ?>;
|
|
const inputName = <?= json_encode($name) ?>;
|
|
let selectedIdx = -1;
|
|
|
|
function updateCount() {
|
|
const n = pills.querySelectorAll('.tag-pill').length;
|
|
if (countEl) countEl.textContent = n + '/' + maxLanguages;
|
|
if (counter) counter.style.display = (n > 0) ? '' : 'none';
|
|
|
|
// Toggle the checkbox-list asterisk: if any "autre" language pill
|
|
// is present, the checkbox list is no longer required.
|
|
const asteriskEl = document.getElementById('languages-required-asterisk');
|
|
if (asteriskEl) {
|
|
const checkboxes = document.querySelectorAll('#languages-fieldset input[type="checkbox"]:checked');
|
|
asteriskEl.innerHTML = (n === 0 && checkboxes.length === 0) ? ' <span class="asterisk">*</span>' : '';
|
|
}
|
|
|
|
// Show/hide search input based on max
|
|
const wrap = container.querySelector('.tag-search-input-wrap');
|
|
const maxMsg = container.querySelector('.tag-search-max-msg');
|
|
if (n >= maxLanguages) {
|
|
if (wrap) wrap.style.display = 'none';
|
|
if (maxMsg) maxMsg.style.display = '';
|
|
} else {
|
|
if (wrap) {
|
|
wrap.style.display = '';
|
|
if (search) search.style.display = '';
|
|
}
|
|
if (maxMsg) maxMsg.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Lowercase, collapse spaces, trim, ucfirst for display
|
|
function normalizeLang(name) {
|
|
return name.trim().replace(/\s+/g, ' ').toLowerCase();
|
|
}
|
|
|
|
function ucfirst(str) {
|
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
}
|
|
|
|
// Check if language already exists in pills (case-insensitive)
|
|
function langAlreadyAdded(name) {
|
|
const norm = normalizeLang(name);
|
|
const existing = pills.querySelectorAll('.tag-pill-name');
|
|
for (const el of existing) {
|
|
if (normalizeLang(el.textContent) === norm) return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// Remove a pill
|
|
pills.addEventListener('click', function(e) {
|
|
const btn = e.target.closest('.tag-pill-remove');
|
|
if (!btn) return;
|
|
const pill = btn.closest('.tag-pill');
|
|
pill.remove();
|
|
updateCount();
|
|
// Re-enable search field visibility
|
|
const wrap = container.querySelector('.tag-search-input-wrap');
|
|
const searchInput = container.querySelector('.tag-search-input');
|
|
if (wrap && searchInput) {
|
|
wrap.style.display = '';
|
|
searchInput.style.display = '';
|
|
}
|
|
});
|
|
|
|
// Highlight a suggestion by index
|
|
function highlight(idx) {
|
|
const items = dropdown.querySelectorAll('.tag-search-item');
|
|
items.forEach(function(item, i) {
|
|
if (i === idx) {
|
|
item.classList.add('tag-search-item--highlight');
|
|
} else {
|
|
item.classList.remove('tag-search-item--highlight');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Select a suggestion by button element
|
|
function selectLang(btn) {
|
|
const langName = normalizeLang(btn.getAttribute('data-tag-name') || '');
|
|
if (!langName) return;
|
|
|
|
if (langAlreadyAdded(langName)) return;
|
|
if (pills.querySelectorAll('.tag-pill').length >= maxLanguages) return;
|
|
|
|
const escapedName = htmlEscape(langName);
|
|
const pill = document.createElement('span');
|
|
pill.className = 'tag-pill';
|
|
pill.innerHTML = '<input type="hidden" name="' + inputName + '[]" value="' + escapedName + '">'
|
|
+ '<span class="tag-pill-name">' + escapedName + '</span>'
|
|
+ '<button type="button" class="tag-pill-remove" title="Retirer \u00AB\u00A0' + escapedName + '\u00A0\u00BB" aria-label="Retirer ' + escapedName + '">'
|
|
+ '<svg width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM112,168V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Zm48,0V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Z"></path></svg>'
|
|
+ '</button>';
|
|
pills.appendChild(pill);
|
|
updateCount();
|
|
search.value = '';
|
|
dropdown.innerHTML = '';
|
|
selectedIdx = -1;
|
|
search.focus();
|
|
}
|
|
|
|
// Click on suggestion
|
|
dropdown.addEventListener('click', function(e) {
|
|
console.log('[lang-search] dropdown click, target:', e.target.tagName, e.target.className);
|
|
const btn = e.target.closest('.tag-search-item');
|
|
if (!btn) { console.log('[lang-search] no .tag-search-item found in click path'); return; }
|
|
console.log('[lang-search] found btn:', btn.getAttribute('data-tag-name'), btn.className);
|
|
selectLang(btn);
|
|
});
|
|
|
|
// Keyboard navigation
|
|
search.addEventListener('keydown', function(e) {
|
|
const items = dropdown.querySelectorAll('.tag-search-item');
|
|
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
if (items.length === 0) return;
|
|
if (e.key === 'ArrowDown') {
|
|
selectedIdx = (selectedIdx + 1) % items.length;
|
|
} else {
|
|
selectedIdx = selectedIdx <= 0 ? items.length - 1 : selectedIdx - 1;
|
|
}
|
|
highlight(selectedIdx);
|
|
} else if (e.key === 'Enter') {
|
|
if (items.length > 0) {
|
|
e.preventDefault();
|
|
if (selectedIdx >= 0 && selectedIdx < items.length) {
|
|
selectLang(items[selectedIdx]);
|
|
} else {
|
|
selectLang(items[0]);
|
|
}
|
|
}
|
|
} else if (e.key === 'Escape') {
|
|
dropdown.innerHTML = '';
|
|
selectedIdx = -1;
|
|
}
|
|
});
|
|
|
|
// Hide dropdown on blur (after a tiny delay so click events fire)
|
|
search.addEventListener('blur', function() {
|
|
setTimeout(function() {
|
|
if (!dropdown.contains(document.activeElement)) {
|
|
console.log('[lang-search] blur: hiding dropdown');
|
|
dropdown.innerHTML = '';
|
|
selectedIdx = -1;
|
|
}
|
|
}, 150);
|
|
});
|
|
|
|
// Log HTMX responses
|
|
document.body.addEventListener('htmx:afterSwap', function(e) {
|
|
if (e.detail.target && e.detail.target.id === '<?= htmlspecialchars($id) ?>-suggestions') {
|
|
console.log('[lang-search] htmx:afterSwap, target:', e.detail.target.id, 'html length:', e.detail.target.innerHTML.length);
|
|
console.log('[lang-search] innerHTML:', e.detail.target.innerHTML);
|
|
}
|
|
});
|
|
|
|
function htmlEscape(str) {
|
|
const el = document.createElement('span');
|
|
el.textContent = str;
|
|
return el.innerHTML;
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<?php
|
|
unset($name, $label, $placeholder, $hint, $hxPost, $selectedLanguages, $id, $maxLanguages, $langCount, $required);
|