Améliore l'édition du site public

2026-09-10 00:35:23 +02:00 · 2026-09-10 00:35:23 +02:00 · 81f259ea6e
commit 81f259ea6e
parent e786756f22
11 changed files with 123 additions and 26 deletions
--- a/app/Controllers/SettingsController.php
+++ b/app/Controllers/SettingsController.php
@ -775,8 +775,22 @@ final class SettingsController
            $filename = ImageService::storeUploaded((string) $upload['tmp_name'], $directory, 'site', 'photo');
            @chmod($directory, 0755);
            AuditService::log('public_site_image_uploaded', '/settings/public-site/image', 'Image du site public ajoutée');
+            if (str_contains((string) ($_SERVER['HTTP_ACCEPT'] ?? ''), 'application/json')) {
+                header('Content-Type: application/json; charset=utf-8');
+                echo json_encode([
+                    'filename' => $filename,
+                    'url' => '/media/site/' . rawurlencode($filename),
+                ], JSON_UNESCAPED_SLASHES | JSON_THROW_ON_ERROR);
+                exit();
+            }
            header('Location: /settings/public-site?image=' . rawurlencode($filename));
        } catch (Throwable $e) {
+            if (str_contains((string) ($_SERVER['HTTP_ACCEPT'] ?? ''), 'application/json')) {
+                http_response_code(422);
+                header('Content-Type: application/json; charset=utf-8');
+                echo json_encode(['error' => SecurityService::publicError($e)], JSON_THROW_ON_ERROR);
+                exit();
+            }
            header('Location: /settings/public-site?error=' . rawurlencode(SecurityService::publicError($e)));
        }
        exit();
--- a/app/Views/evolutions.php
+++ b/app/Views/evolutions.php
@ -31,10 +31,10 @@
    <div class="col-lg-6">
        <section class="card h-100">
            <div class="card-body">
-                <span class="badge bg-blue-lt mb-2">1.0.0-rc.17</span>
-                <h3>Utilisation mobile</h3>
-                <p class="text-muted">Navigation repliable sur les petits écrans et publication fiable des nouvelles
-                    photographies, y compris depuis l’application Android.</p>
+                <span class="badge bg-blue-lt mb-2">1.0.0-rc.18</span>
+                <h3>Site public</h3>
+                <p class="text-muted">Informations légales accessibles sur chaque page, insertion guidée des images
+                    dans les contenus et liens sociaux plus lisibles.</p>
            </div>
        </section>
    </div>
--- a/app/Views/public_site_contact.php
+++ b/app/Views/public_site_contact.php
@ -13,11 +13,16 @@ $obfuscate = static fn (string$value): string => implode('', array_reverse(mb_st
                <?php endif; ?><?php if ($settings['association_email']): ?><div class="contact-item">✉ <span
                        class="contact-obfuscated"><?= h($obfuscate($settings['association_email'])) ?></span></div>
                <?php endif; ?></div>
-            <div class="chips" style="margin-top:25px">
-                <?php foreach (['facebook' => 'Facebook','instagram' => 'Instagram','youtube' => 'YouTube','tiktok' => 'TikTok','whatsapp' => 'WhatsApp','linkedin' => 'LinkedIn','x' => 'X','snapchat' => 'Snapchat'] as $network => $label):
+            <div class="social-links">
+                <?php $socialNetworks = [
+                    'facebook' => ['Facebook','f'], 'instagram' => ['Instagram','◎'], 'youtube' => ['YouTube','▶'],
+                    'tiktok' => ['TikTok','♪'], 'whatsapp' => ['WhatsApp','☎'], 'linkedin' => ['LinkedIn','in'],
+                    'x' => ['X','𝕏'], 'snapchat' => ['Snapchat','👻'],
+                ];
+                foreach ($socialNetworks as $network => [$label,$icon]):
                    $url = trim((string)($settings['public_site_' . $network . '_url'] ?? ''));
                    if ($url === '') continue; ?>
-                <a class="button secondary" href="<?= h($url) ?>" rel="noopener noreferrer"><?= h($label) ?></a>
+                <a class="social-link social-<?= h($network) ?>" href="<?= h($url) ?>" target="_blank" rel="noopener noreferrer"><span class="social-icon" aria-hidden="true"><?= h($icon) ?></span><span><?= h($label) ?></span></a>
                <?php endforeach; ?>
            </div>
            <?php if ($lat !== null && $lng !== null): ?><h2 style="margin-top:35px">
@ -27,8 +32,6 @@ $obfuscate = static fn (string$value): string => implode('', array_reverse(mb_st
        </div>
    </div>
 </section>
-<div class="wrap" style="text-align:center"><a href="<?= h($siteUrl('legal')) ?>"><?= h(t('public_site.legal')) ?></a> ·
-    <a href="<?= h($siteUrl('privacy')) ?>"><?= h(t('public_site.privacy')) ?></a></div>
 <?php if ($lat !== null && $lng !== null): ?><script src="/assets/vendor/leaflet/leaflet.js"></script>
 <script>
    (() => {
--- a/app/Views/public_site_layout.php
+++ b/app/Views/public_site_layout.php
@ -373,6 +373,23 @@ if (!function_exists('public_age')) {
            background: var(--paper)
        }

+        .social-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px }
+        .social-link {
+            display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px;
+            border-radius: 999px; color: #fff; font-weight: 800; text-decoration: none;
+            box-shadow: 0 5px 14px rgba(0, 0, 0, .12); transition: .15s ease
+        }
+        .social-link:hover { color: #fff; filter: brightness(.92); transform: translateY(-1px) }
+        .social-icon { min-width: 1.15em; text-align: center; font-size: 1.05rem; line-height: 1 }
+        .social-facebook { background: #1877f2 }
+        .social-instagram { background: linear-gradient(135deg, #833ab4, #e1306c, #f77737) }
+        .social-youtube { background: #f00 }
+        .social-tiktok, .social-x { background: #111 }
+        .social-whatsapp { background: #128c7e }
+        .social-linkedin { background: #0a66c2 }
+        .social-snapchat { background: #fffc00; color: #111 }
+        .social-snapchat:hover { color: #111 }
+
        footer {
            margin-top: 55px;
            border-top: 1px solid var(--line);
@ -395,6 +412,9 @@ if (!function_exists('public_age')) {
            font-size: .9rem
        }

+        .footer-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px }
+        .footer-links a { color: var(--muted); font-weight: 700 }
+
        .footer-powered a {
            color: var(--accent-dark);
            font-weight: 800
@ -488,6 +508,10 @@ if (!function_exists('public_age')) {
                        <?= h($settings['association_rna']) ?></span><?php endif; ?><?php if (($settings['association_rna'] ?? '') !== '' && ($settings['association_siret'] ?? '') !== ''): ?>
                    · <?php endif; ?><?php if (($settings['association_siret'] ?? '') !== ''): ?><span><?= h(t('public_site.siret')) ?>
                        : <?= h($settings['association_siret']) ?></span><?php endif; ?></div>
+                <nav class="footer-links" aria-label="<?= h(t('public_site.legal_privacy')) ?>">
+                    <a href="<?= h($siteUrl('legal')) ?>"><?= h(t('public_site.legal')) ?></a>
+                    <a href="<?= h($siteUrl('privacy')) ?>"><?= h(t('public_site.privacy')) ?></a>
+                </nav>
            </div>
            <div class="footer-powered"><?= h(t('public_site.powered_by')) ?> <a
                    href="https://globinours.fr" target="_blank"
--- a/app/Views/settings_public_site.php
+++ b/app/Views/settings_public_site.php
@ -11,20 +11,20 @@
 <div class="card mb-3">
    <div class="card-header"><h3 class="card-title">🖼️ <?= h(t('public_site.image_library')) ?></h3></div>
    <div class="card-body">
-        <form method="post" action="/settings/public-site/image" enctype="multipart/form-data" class="row g-2 align-items-end mb-3">
+        <form id="public-image-upload" method="post" action="/settings/public-site/image" enctype="multipart/form-data" class="row g-2 align-items-end mb-3">
            <input type="hidden" name="csrf" value="<?= h(Auth::csrf()) ?>">
            <div class="col-md"><label class="form-label"><?= h(t('public_site.image_file')) ?></label><input class="form-control" type="file" name="public_site_image" accept="image/jpeg,image/png,image/webp" required></div>
            <div class="col-md-auto"><button class="btn btn-outline-primary"><?= h(t('public_site.image_upload')) ?></button></div>
        </form>
-        <div class="form-hint mb-3"><?= h(t('public_site.image_help')) ?></div>
-        <?php if (!$images): ?><div class="text-muted"><?= h(t('public_site.image_none')) ?></div><?php else: ?>
-        <div class="row g-3">
+        <div class="form-hint mb-3" id="public-image-help"><?= h(t('public_site.image_help')) ?></div>
+        <div class="text-muted<?= $images ? ' d-none' : '' ?>" id="public-image-empty"><?= h(t('public_site.image_none')) ?></div>
+        <div class="row g-3" id="public-image-library">
            <?php foreach ($images as $image): ?><div class="col-6 col-md-3 col-xl-2">
                <div class="card h-100"><img src="<?= h($image['url']) ?>" alt="" class="card-img-top" style="height:110px;object-fit:cover">
-                    <div class="card-body p-2"><button type="button" class="btn btn-sm btn-outline-secondary w-100 public-image-insert" data-markup="<?= h('![Image](' . $image['url'] . ')') ?>"><?= h(t('public_site.image_insert')) ?></button></div>
+                    <div class="card-body p-2"><button type="button" class="btn btn-sm btn-outline-secondary w-100 public-image-insert" data-url="<?= h($image['url']) ?>"><?= h(t('public_site.image_insert')) ?></button></div>
                </div>
            </div><?php endforeach; ?>
-        </div><?php endif; ?>
+        </div>
    </div>
 </div>
 <form method="post" action="/settings/public-site/save"><input type="hidden" name="csrf" value="<?= h(Auth::csrf()) ?>">
@ -162,6 +162,17 @@
 </form>
 <script>
 let activePublicEditor = null;
+const imageLibrary = document.getElementById('public-image-library');
+const imageHelp = document.getElementById('public-image-help');
+const insertImage = (button) => {
+    const textarea = activePublicEditor || document.querySelector('.public-rich-text');
+    if (!textarea) return;
+    const alt = window.prompt(<?= json_encode(t('public_site.image_alt_prompt'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>, '');
+    if (alt === null) return;
+    const safeAlt = alt.replace(/[\[\]]/g, '').trim() || <?= json_encode(t('public_site.image_default_alt'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
+    textarea.setRangeText(`![${safeAlt}](${button.dataset.url})\n`, textarea.selectionStart, textarea.selectionEnd, 'end');
+    textarea.focus();
+};
 document.querySelectorAll('.public-rich-text').forEach((textarea) => {
    textarea.addEventListener('focus', () => { activePublicEditor = textarea; });
    const toolbar = document.createElement('div');
@ -181,15 +192,47 @@ document.querySelectorAll('.public-rich-text').forEach((textarea) => {
        });
        toolbar.append(button);
    });
+    const imageButton = document.createElement('button');
+    imageButton.type = 'button';
+    imageButton.className = 'btn btn-sm btn-outline-primary';
+    imageButton.textContent = <?= json_encode('🖼️ ' . t('public_site.image_insert'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
+    imageButton.addEventListener('click', () => {
+        activePublicEditor = textarea;
+        imageHelp.textContent = <?= json_encode(t('public_site.image_target_selected'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
+        imageLibrary.scrollIntoView({behavior: 'smooth', block: 'center'});
+    });
+    toolbar.append(imageButton);
    textarea.before(toolbar);
 });
 document.querySelectorAll('.public-image-insert').forEach((button) => {
-    button.addEventListener('click', () => {
-        const textarea = activePublicEditor || document.querySelector('.public-rich-text');
-        if (!textarea) return;
-        const start = textarea.selectionStart;
-        textarea.setRangeText(button.dataset.markup + '\n', start, textarea.selectionEnd, 'end');
-        textarea.focus();
-    });
+    button.addEventListener('click', () => insertImage(button));
+});
+document.getElementById('public-image-upload').addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const submit = form.querySelector('button');
+    submit.disabled = true;
+    try {
+        const response = await fetch(form.action, {method: 'POST', headers: {'Accept': 'application/json'}, body: new FormData(form)});
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || <?= json_encode(t('public_site.image_invalid'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>);
+        const column = document.createElement('div');
+        column.className = 'col-6 col-md-3 col-xl-2';
+        column.innerHTML = '<div class="card h-100"><img alt="" class="card-img-top" style="height:110px;object-fit:cover"><div class="card-body p-2"><button type="button" class="btn btn-sm btn-outline-secondary w-100 public-image-insert"></button></div></div>';
+        const image = column.querySelector('img');
+        const insert = column.querySelector('button');
+        image.src = data.url;
+        insert.dataset.url = data.url;
+        insert.textContent = <?= json_encode(t('public_site.image_insert'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
+        insert.addEventListener('click', () => insertImage(insert));
+        imageLibrary.prepend(column);
+        document.getElementById('public-image-empty').classList.add('d-none');
+        form.reset();
+        insert.click();
+    } catch (error) {
+        window.alert(error.message);
+    } finally {
+        submit.disabled = false;
+    }
 });
 </script>