stephan/ms1inscription-v5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add layout management functions for dossard PDF generation. Implement features for loading, saving, and normalizing layouts with support for dynamic box configurations. Enhance field catalog for extensibility and improve comments for clarity. Increment version code.

Browse Source
This commit is contained in:
stephan
2026-07-25 10:22:43 -04:00
parent f0e0feeeb9
commit 3320a26ada
4 changed files with 910 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
assets/dossard_templates/default.layout.json Normal file
View File

@ -0,0 +1,27 @@
{
"version": 2,
"page": "8.5x5.5",
"boxes": [
{
"id": "bib",
"field": "no_bib",
"align": "C",
"font_max": 220,
"left": 0.2,
"right": 0.78,
"top": 0.36,
"bottom": 0.66
},
{
"id": "prenom",
"field": "par_prenom",
"align": "L",
"font_max": 28,
"left": 0.32,
"right": 0.68,
"top": 0.72,
"bottom": 0.84
}
],
"updated_at": "2026-07-25T00:00:00+00:00"
}

378
php/inc_fx_dossard_print.php
View File

@ -172,45 +172,310 @@ function fxDossardPrintBuildQrTempFile($intEveId)
}
/**
* Layout calibré pour le fond comic default (8.5" × 5.5").
* Deux boîtes indépendantes en % de page (références user annotées).
* Fichier layout calibré (GUI drag & drop → %) — vérité pour le PDF.
*
* @param int $intEveId 0 = default
* @return string
*/
function fxDossardPrintLayoutPath($intEveId = 0)
{
$strDir = fxDossardPrintTemplatesDir();
$intEveId = intval($intEveId);
if ($intEveId > 0) {
$strEve = $strDir . '/eve_' . $intEveId . '.layout.json';
if (is_file($strEve)) {
return $strEve;
}
}
return $strDir . '/default.layout.json';
}
/**
* Catalogue des champs exploitables dans une boîte (extensible).
*
* @return array<string,array{label:string,sample:string,font_max:int}>
*/
function fxDossardPrintFieldCatalog()
{
return array(
'no_bib' => array('label' => 'N° dossard', 'sample' => '2347', 'font_max' => 220),
'par_prenom' => array('label' => 'Prénom', 'sample' => 'Cynthia', 'font_max' => 28),
'par_nom' => array('label' => 'Nom', 'sample' => 'Tremblay', 'font_max' => 28),
'par_prenom_nom' => array('label' => 'Prénom + nom', 'sample' => 'Cynthia Tremblay', 'font_max' => 22),
// Réservés pour plus tard (valeur vide tant que non chargé en SQL)
'par_age' => array('label' => 'Âge', 'sample' => '42', 'font_max' => 24),
'par_sexe' => array('label' => 'Sexe', 'sample' => 'F', 'font_max' => 24),
'epr_nom' => array('label' => 'Épreuve', 'sample' => '10K', 'font_max' => 22),
);
}
/**
* Layout défaut : 2 boîtes (n° + prénom) — modèle extensible N boîtes.
*
* @return array{version:int,page:string,boxes:array}
*/
function fxDossardPrintDefaultLayout()
{
return array(
'version' => 2,
'page' => '8.5x5.5',
'boxes' => array(
array(
'id' => 'bib',
'field' => 'no_bib',
'align' => 'C',
'font_max' => 220,
'left' => 0.20,
'right' => 0.78,
'top' => 0.36,
'bottom' => 0.66,
),
array(
'id' => 'prenom',
'field' => 'par_prenom',
'align' => 'L',
'font_max' => 28,
'left' => 0.32,
'right' => 0.68,
'top' => 0.72,
'bottom' => 0.84,
),
),
);
}
/**
* Normalise JSON v1 (bib/name) ou v2 (boxes) → layout v2.
*
* @param array|null $arrData
* @return array
*/
function fxDossardPrintNormalizeLayout($arrData)
{
$arrDefault = fxDossardPrintDefaultLayout();
if (!is_array($arrData)) {
return $arrDefault;
}
// v1 legacy
if (empty($arrData['boxes']) && !empty($arrData['bib']) && !empty($arrData['name'])) {
$arrBoxes = $arrDefault['boxes'];
foreach (array('left', 'right', 'top', 'bottom') as $strEdge) {
if (isset($arrData['bib'][$strEdge])) {
$arrBoxes[0][$strEdge] = floatval($arrData['bib'][$strEdge]);
}
if (isset($arrData['name'][$strEdge])) {
$arrBoxes[1][$strEdge] = floatval($arrData['name'][$strEdge]);
}
}
$arrDefault['boxes'] = $arrBoxes;
return $arrDefault;
}
if (empty($arrData['boxes']) || !is_array($arrData['boxes'])) {
return $arrDefault;
}
$arrCatalog = fxDossardPrintFieldCatalog();
$arrBoxes = array();
foreach ($arrData['boxes'] as $intIdx => $arrBox) {
if (!is_array($arrBox)) {
continue;
}
$strField = isset($arrBox['field']) ? (string)$arrBox['field'] : '';
if ($strField === '' || !isset($arrCatalog[$strField])) {
continue;
}
foreach (array('left', 'right', 'top', 'bottom') as $strEdge) {
if (!isset($arrBox[$strEdge])) {
continue 2;
}
$flt = floatval($arrBox[$strEdge]);
if ($flt < 0 || $flt > 1) {
continue 2;
}
$arrBox[$strEdge] = $flt;
}
if ($arrBox['right'] <= $arrBox['left'] || $arrBox['bottom'] <= $arrBox['top']) {
continue;
}
$strAlign = strtoupper((string)($arrBox['align'] ?? 'C'));
if ($strAlign !== 'L' && $strAlign !== 'R') {
$strAlign = 'C';
}
$intFontMax = isset($arrBox['font_max'])
? max(8, intval($arrBox['font_max']))
: intval($arrCatalog[$strField]['font_max']);
$strId = trim((string)($arrBox['id'] ?? ''));
if ($strId === '') {
$strId = 'box_' . ($intIdx + 1);
}
$arrBoxes[] = array(
'id' => $strId,
'field' => $strField,
'align' => $strAlign,
'font_max' => $intFontMax,
'left' => round($arrBox['left'], 5),
'right' => round($arrBox['right'], 5),
'top' => round($arrBox['top'], 5),
'bottom' => round($arrBox['bottom'], 5),
);
}
if (count($arrBoxes) < 1) {
return $arrDefault;
}
return array(
'version' => 2,
'page' => '8.5x5.5',
'boxes' => $arrBoxes,
'updated_at' => isset($arrData['updated_at']) ? (string)$arrData['updated_at'] : null,
);
}
/**
* Lit le layout calibré (JSON GUI) ou défaut.
*
* @param int $intEveId
* @return array
*/
function fxDossardPrintLoadLayout($intEveId = 0)
{
$strPath = fxDossardPrintLayoutPath($intEveId);
if (!is_file($strPath)) {
return fxDossardPrintDefaultLayout();
}
$strJson = @file_get_contents($strPath);
$arrData = is_string($strJson) ? json_decode($strJson, true) : null;
return fxDossardPrintNormalizeLayout($arrData);
}
/**
* @deprecated alias GUI ancienne — préfère fxDossardPrintLoadLayout
* @return array
*/
function fxDossardPrintLoadLayoutPct($intEveId = 0)
{
return fxDossardPrintLoadLayout($intEveId);
}
/**
* Enregistre le layout calibré (liste de boîtes).
*
* @param array $arrLayout version + boxes[]
* @param int $intEveId 0 = default.layout.json
* @return array{ok:bool,error?:string,path?:string}
*/
function fxDossardPrintSaveLayout($arrLayout, $intEveId = 0)
{
$intEveId = intval($intEveId);
$strDir = fxDossardPrintTemplatesDir();
if (!is_dir($strDir)) {
return array('ok' => false, 'error' => 'Dossier templates absent.');
}
$arrNorm = fxDossardPrintNormalizeLayout($arrLayout);
if (empty($arrNorm['boxes'])) {
return array('ok' => false, 'error' => 'Aucuneune boîte valide.');
}
$strPath = ($intEveId > 0)
? $strDir . '/eve_' . $intEveId . '.layout.json'
: $strDir . '/default.layout.json';
$arrOut = array(
'version' => 2,
'page' => '8.5x5.5',
'boxes' => $arrNorm['boxes'],
'updated_at' => date('c'),
);
$strJson = json_encode($arrOut, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
if ($strJson === false || @file_put_contents($strPath, $strJson) === false) {
return array('ok' => false, 'error' => 'Écriture impossible (droits fichier?).');
}
return array('ok' => true, 'path' => $strPath);
}
/**
* @deprecated — accepte encore {bib,name} ou {boxes}
* @param array $arrPct
* @param int $intEveId
* @return array
*/
function fxDossardPrintSaveLayoutPct($arrPct, $intEveId = 0)
{
if (isset($arrPct['boxes'])) {
return fxDossardPrintSaveLayout($arrPct, $intEveId);
}
return fxDossardPrintSaveLayout($arrPct, $intEveId);
}
/**
* Valeur texte pour un champ boîte.
*
* @param array $arrRow
* @param string $strField
* @return string
*/
function fxDossardPrintResolveFieldValue($arrRow, $strField)
{
$fnUn = function ($str) {
$str = (string)$str;
return function_exists('fxUnescape') ? fxUnescape($str) : $str;
};
switch ((string)$strField) {
case 'no_bib':
$str = trim((string)($arrRow['no_bib'] ?? ''));
return ($str === '' || $str === '0') ? '-' : $str;
case 'par_prenom':
return trim($fnUn($arrRow['par_prenom'] ?? ''));
case 'par_nom':
return trim($fnUn($arrRow['par_nom'] ?? ''));
case 'par_prenom_nom':
return trim($fnUn($arrRow['par_prenom'] ?? '') . ' ' . $fnUn($arrRow['par_nom'] ?? ''));
case 'par_age':
return trim((string)($arrRow['par_age'] ?? $arrRow['age'] ?? ''));
case 'par_sexe':
return trim((string)($arrRow['par_sexe'] ?? ''));
case 'epr_nom':
return trim($fnUn($arrRow['epr_nom'] ?? $arrRow['epr_libelle'] ?? ''));
default:
return '';
}
}
/**
* Layout mm pour le PDF — lit le JSON calibré (N boîtes).
*
* @param int $intEveId
* @return array<string,mixed>
*/
function fxDossardPrintLayout()
function fxDossardPrintLayout($intEveId = 0)
{
$arrSize = fxDossardPrintPageSizeMm();
$fltW = $arrSize[0];
$fltH = $arrSize[1];
$arrLayout = fxDossardPrintLoadLayout($intEveId);
// --- Boîte NUMÉRO (grande) — % page, d'après annotation rouge ---
$arrBibPct = array(
'left' => 0.20,
'right' => 0.78,
'top' => 0.36,
'bottom' => 0.66,
);
// --- Boîte PRÉNOM (petite, plus bas, centrée) — PAS collée au n° ---
$arrNamePct = array(
'left' => 0.32,
'right' => 0.68,
'top' => 0.72,
'bottom' => 0.84,
);
$arrBib = fxDossardPrintBoxFromPct($fltW, $fltH, $arrBibPct);
$arrName = fxDossardPrintBoxFromPct($fltW, $fltH, $arrNamePct);
$arrBoxesMm = array();
foreach ($arrLayout['boxes'] as $arrBox) {
$arrRect = fxDossardPrintBoxFromPct($fltW, $fltH, $arrBox);
$arrBoxesMm[] = array_merge($arrBox, $arrRect);
}
$fltQr = 28.0;
return array(
'page_w' => $fltW,
'page_h' => $fltH,
'bib' => $arrBib,
'name' => $arrName,
'boxes' => $arrBoxesMm,
'ascent_ratio' => 0.72,
'bib_font_max' => 220,
'name_font_max' => 28,
'qr_size' => $fltQr,
'qr_x' => $fltW - $fltQr - 11.5,
'qr_y' => $fltH - $fltQr - 14.5,
@ -278,15 +543,20 @@ function fxDossardPrintFitBibFont($pdf, $strText, $fltMaxW, $fltMaxH, $intFontMa
}
/**
* Texte centré dans une boîte (Cell = centre H + V FPDF).
* Texte dans une boîte (Cell FPDF : align H + centre V de la cellule).
*
* @param FPDF $pdf
* @param array $arrBox x,y,w,h
* @param string $strText
* @param int $intFont
* @param string $strAlign C|L|R
*/
function fxDossardPrintDrawCenteredInBox($pdf, $arrBox, $strText, $intFont)
function fxDossardPrintDrawInBox($pdf, $arrBox, $strText, $intFont, $strAlign = 'C')
{
$strAlign = strtoupper((string)$strAlign);
if ($strAlign !== 'L' && $strAlign !== 'R') {
$strAlign = 'C';
}
$pdf->SetFont('Helvetica', 'B', $intFont);
$pdf->SetXY($arrBox['x'], $arrBox['y']);
$pdf->Cell(
@ -295,10 +565,16 @@ function fxDossardPrintDrawCenteredInBox($pdf, $arrBox, $strText, $intFont)
fxDossardPrintPdfText($strText),
0,
0,
'C'
$strAlign
);
}
/** @deprecated alias — préfère fxDossardPrintDrawInBox(..., 'C') */
function fxDossardPrintDrawCenteredInBox($pdf, $arrBox, $strText, $intFont)
{
fxDossardPrintDrawInBox($pdf, $arrBox, $strText, $intFont, 'C');
}
/**
* Génère et envoie le PDF (exit).
*
@ -328,14 +604,7 @@ function fxDossardPrintOutputPdf($arrRow)
}
require_once $strFpdf;
$arrLayout = fxDossardPrintLayout();
$strBib = trim((string)($arrRow['no_bib'] ?? ''));
if ($strBib === '' || $strBib === '0') {
$strBib = '-';
}
// MSIN-4485 — prénom seul, centré dans sa boîte (%).
$strName = trim(function_exists('fxUnescape') ? fxUnescape($arrRow['par_prenom'] ?? '') : (string)($arrRow['par_prenom'] ?? ''));
$arrLayout = fxDossardPrintLayout($intEveId);
$strQrFile = fxDossardPrintBuildQrTempFile($intEveId);
$strTplType = fxDossardPrintImageType($strTemplate);
@ -355,30 +624,25 @@ function fxDossardPrintOutputPdf($arrRow)
$pdf->SetTextColor(0, 0, 0);
// 1) Numéro → grande boîte, centré, police max
$arrBibBox = $arrLayout['bib'];
$intBibFont = fxDossardPrintFitBibFont(
$pdf,
$strBib,
$arrBibBox['w'] * 0.98,
$arrBibBox['h'] * 0.92,
$arrLayout['bib_font_max'],
$arrLayout['ascent_ratio']
);
fxDossardPrintDrawCenteredInBox($pdf, $arrBibBox, $strBib, $intBibFont);
// 2) Prénom → petite boîte, centré, police max
if ($strName !== '') {
$arrNameBox = $arrLayout['name'];
$intNameFont = fxDossardPrintFitBibFont(
// MSIN-4485 — N boîtes configurables (champ + align + %)
$strBibForFile = '-';
foreach ($arrLayout['boxes'] as $arrBox) {
$strText = fxDossardPrintResolveFieldValue($arrRow, $arrBox['field']);
if ($arrBox['field'] === 'no_bib') {
$strBibForFile = $strText;
}
if ($strText === '') {
continue;
}
$intFont = fxDossardPrintFitBibFont(
$pdf,
$strName,
$arrNameBox['w'] * 0.95,
$arrNameBox['h'] * 0.90,
$arrLayout['name_font_max'],
$strText,
$arrBox['w'] * 0.98,
$arrBox['h'] * 0.92,
intval($arrBox['font_max']),
$arrLayout['ascent_ratio']
);
fxDossardPrintDrawCenteredInBox($pdf, $arrNameBox, $strName, $intNameFont);
fxDossardPrintDrawInBox($pdf, $arrBox, $strText, $intFont, $arrBox['align']);
}
if ($strQrFile !== false) {
@ -393,7 +657,7 @@ function fxDossardPrintOutputPdf($arrRow)
@unlink($strQrFile);
}
$strSafeBib = preg_replace('/[^a-zA-Z0-9_-]+/', '-', $strBib);
$strSafeBib = preg_replace('/[^a-zA-Z0-9_-]+/', '-', $strBibForFile);
$strFilename = 'dossard-' . $strSafeBib . '-par' . intval($arrRow['par_id']) . '.pdf';
$pdf->Output('I', $strFilename);

36
superadm/ajax_dossard_layout.php Normal file
View File

@ -0,0 +1,36 @@
<?php
/**
* MSIN-4485 — Sauvegarde layout dossard (N boîtes / champs).
*/
ob_start();
error_reporting(E_ALL & ~E_DEPRECATED & ~E_NOTICE & ~E_WARNING);
ini_set('display_errors', '0');
require_once dirname(__FILE__) . '/php/inc_functions.php';
require_once dirname(__FILE__) . '/../php/inc_fx_dossard_print.php';
fxSuperadmAjaxAuthOrJsonExit();
if (session_status() === PHP_SESSION_ACTIVE) {
session_write_close();
}
while (ob_get_level() > 0) {
ob_end_clean();
}
header('Content-Type: application/json; charset=utf-8');
$strRaw = file_get_contents('php://input');
$arrIn = is_string($strRaw) ? json_decode($strRaw, true) : null;
if (!is_array($arrIn)) {
http_response_code(400);
echo json_encode(array('ok' => false, 'error' => 'JSON invalide.'));
exit;
}
$intEveId = isset($arrIn['eve_id']) ? intval($arrIn['eve_id']) : 0;
$arrResult = fxDossardPrintSaveLayout($arrIn, $intEveId);
if (empty($arrResult['ok'])) {
http_response_code(400);
}
echo json_encode($arrResult);
exit;

526
superadm/dossard_layout.php Normal file
View File

@ -0,0 +1,526 @@
<?php
/**
* MSIN-4485 — Calibrage GUI dossard : N boîtes glissables, champ + alignement.
*/
$strLangue = 'fr';
require_once __DIR__ . '/php/inc_start_time.php';
require_once __DIR__ . '/php/inc_functions.php';
require_once dirname(__DIR__) . '/php/inc_fx_dossard_print.php';
if (empty($_SESSION['usa_id'])) {
header('Location: login.php');
exit;
}
$intEveId = isset($_GET['eve_id']) ? intval($_GET['eve_id']) : 0;
$arrLayout = fxDossardPrintLoadLayout($intEveId);
$arrCatalog = fxDossardPrintFieldCatalog();
$strTplWeb = '../assets/dossard_templates/default.jpg';
if ($intEveId > 0) {
foreach (array('jpg', 'jpeg', 'png') as $strExt) {
$strCand = dirname(__DIR__) . '/assets/dossard_templates/eve_' . $intEveId . '.' . $strExt;
if (is_file($strCand)) {
$strTplWeb = '../assets/dossard_templates/eve_' . $intEveId . '.' . $strExt;
break;
}
}
}
$strLayoutJson = json_encode($arrLayout, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
$strCatalogJson = json_encode($arrCatalog, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MSIN-4485 — Calibrage dossard</title>
<style>
:root {
--bg: #1a1d23;
--panel: #252a33;
--text: #e8eaed;
--muted: #9aa0a6;
--ok: #43a047;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Segoe UI, system-ui, sans-serif;
background: var(--bg);
color: var(--text);
}
header {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--panel);
border-bottom: 1px solid #333;
}
header h1 { margin: 0; font-size: 1.05rem; font-weight: 600; }
header p { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
button {
appearance: none;
border: 0;
border-radius: 6px;
padding: 8px 14px;
font-size: 0.9rem;
cursor: pointer;
color: #fff;
background: #455a64;
}
button.primary { background: var(--ok); font-weight: 600; }
button.danger { background: #c62828; }
button:disabled { opacity: 0.5; cursor: wait; }
#status { font-size: 0.85rem; color: var(--muted); min-width: 10rem; }
#status.ok { color: #81c784; }
#status.err { color: #ef9a9a; }
.layout {
display: grid;
grid-template-columns: minmax(240px, 300px) 1fr;
gap: 16px;
padding: 16px;
align-items: start;
}
@media (max-width: 900px) {
.layout { grid-template-columns: 1fr; }
}
.sidebar {
background: var(--panel);
border-radius: 8px;
padding: 12px;
}
.sidebar h2 {
margin: 0 0 10px;
font-size: 0.9rem;
color: var(--muted);
font-weight: 600;
}
.box-row {
border: 1px solid #3a414d;
border-radius: 6px;
padding: 8px;
margin-bottom: 8px;
}
.box-row.active { border-color: #90caf9; }
.box-row .row-top {
display: flex;
gap: 6px;
align-items: center;
margin-bottom: 6px;
}
.swatch {
width: 12px;
height: 12px;
border-radius: 2px;
flex: 0 0 auto;
border: 1px solid rgba(255,255,255,.4);
}
.box-row select, .box-row input {
width: 100%;
background: #1a1d23;
color: var(--text);
border: 1px solid #444;
border-radius: 4px;
padding: 4px 6px;
font-size: 0.8rem;
}
.box-row .grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.box-row label {
display: block;
font-size: 0.7rem;
color: var(--muted);
margin-bottom: 2px;
}
.stage-wrap { min-width: 0; }
#stage {
position: relative;
width: 100%;
aspect-ratio: 8.5 / 5.5;
background: #000 center / 100% 100% no-repeat;
border: 1px solid #444;
overflow: hidden;
user-select: none;
touch-action: none;
}
.box {
position: absolute;
border: 2px solid;
background: rgba(255,255,255,.12);
display: flex;
align-items: center;
cursor: move;
min-width: 40px;
min-height: 24px;
}
.box.selected { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.box .label {
font-weight: 800;
pointer-events: none;
text-shadow: 0 0 4px #fff, 0 0 2px #fff;
white-space: nowrap;
overflow: hidden;
max-width: 95%;
font-size: clamp(12px, 4vh, 48px);
}
.box.align-C { justify-content: center; }
.box.align-L { justify-content: flex-start; padding-left: 2px; }
.box.align-R { justify-content: flex-end; padding-right: 2px; }
.handle {
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border: 2px solid currentColor;
right: -6px;
bottom: -6px;
cursor: nwse-resize;
}
.pct {
margin-top: 10px;
font-family: ui-monospace, Consolas, monospace;
font-size: 0.7rem;
color: var(--muted);
white-space: pre-wrap;
background: var(--panel);
padding: 10px 12px;
border-radius: 6px;
max-height: 180px;
overflow: auto;
}
</style>
</head>
<body>
<header>
<div>
<h1>Calibrage dossard — boîtes + champs</h1>
<p>Glisse / resize · choisis le champ et l’alignement · ajoute des boîtes pour plus tard (nom, âge…)</p>
</div>
<div class="actions">
<button type="button" id="btnAdd">+ Boîte</button>
<button type="button" id="btnReset">Réinitialiser</button>
<button type="button" class="primary" id="btnSave">Enregistrer</button>
<span id="status"></span>
</div>
</header>
<div class="layout">
<aside class="sidebar">
<h2>Boîtes</h2>
<div id="boxList"></div>
</aside>
<div class="stage-wrap">
<div id="stage" style="background-image:url('<?php echo htmlspecialchars($strTplWeb, ENT_QUOTES, 'UTF-8'); ?>');"></div>
<div class="pct" id="pctOut"></div>
</div>
</div>
<script>
(function () {
var eveId = <?php echo (int)$intEveId; ?>;
var catalog = <?php echo $strCatalogJson; ?>;
var colors = ['#e53935', '#1e88e5', '#43a047', '#fb8c00', '#8e24aa', '#00897b', '#f4511e'];
var initial = <?php echo $strLayoutJson; ?>;
var layout = JSON.parse(JSON.stringify(initial));
var stage = document.getElementById('stage');
var boxList = document.getElementById('boxList');
var statusEl = document.getElementById('status');
var pctOut = document.getElementById('pctOut');
var selectedId = null;
var drag = null;
var uid = 0;
function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
function ensureIds() {
layout.boxes.forEach(function (b, i) {
if (!b.id) b.id = 'box_' + (++uid);
});
}
function colorFor(i) { return colors[i % colors.length]; }
function sampleFor(field) {
return (catalog[field] && catalog[field].sample) ? catalog[field].sample : field;
}
function defaultFont(field) {
return (catalog[field] && catalog[field].font_max) ? catalog[field].font_max : 24;
}
function renderList() {
boxList.innerHTML = '';
layout.boxes.forEach(function (b, i) {
var row = document.createElement('div');
row.className = 'box-row' + (b.id === selectedId ? ' active' : '');
row.dataset.id = b.id;
var top = document.createElement('div');
top.className = 'row-top';
var sw = document.createElement('span');
sw.className = 'swatch';
sw.style.background = colorFor(i);
top.appendChild(sw);
var title = document.createElement('strong');
title.style.fontSize = '0.8rem';
title.style.flex = '1';
title.textContent = (catalog[b.field] && catalog[b.field].label) ? catalog[b.field].label : b.field;
top.appendChild(title);
var btnDel = document.createElement('button');
btnDel.type = 'button';
btnDel.className = 'danger';
btnDel.style.padding = '2px 8px';
btnDel.textContent = '×';
btnDel.title = 'Supprimer';
btnDel.addEventListener('click', function (e) {
e.stopPropagation();
if (layout.boxes.length <= 1) {
statusEl.textContent = 'Garde au moins une boîte.';
statusEl.className = 'err';
return;
}
layout.boxes = layout.boxes.filter(function (x) { return x.id !== b.id; });
if (selectedId === b.id) selectedId = layout.boxes[0].id;
renderAll();
});
top.appendChild(btnDel);
row.appendChild(top);
var g = document.createElement('div');
g.className = 'grid2';
var lf = document.createElement('div');
var labF = document.createElement('label');
labF.textContent = 'Champ';
var selF = document.createElement('select');
Object.keys(catalog).forEach(function (k) {
var o = document.createElement('option');
o.value = k;
o.textContent = catalog[k].label;
if (k === b.field) o.selected = true;
selF.appendChild(o);
});
selF.addEventListener('change', function () {
b.field = selF.value;
b.font_max = defaultFont(b.field);
renderAll();
});
lf.appendChild(labF);
lf.appendChild(selF);
g.appendChild(lf);
var la = document.createElement('div');
var labA = document.createElement('label');
labA.textContent = 'Alignement';
var selA = document.createElement('select');
[['C', 'Centre'], ['L', 'Gauche'], ['R', 'Droite']].forEach(function (pair) {
var o = document.createElement('option');
o.value = pair[0];
o.textContent = pair[1];
if (pair[0] === b.align) o.selected = true;
selA.appendChild(o);
});
selA.addEventListener('change', function () {
b.align = selA.value;
renderAll();
});
la.appendChild(labA);
la.appendChild(selA);
g.appendChild(la);
row.appendChild(g);
row.addEventListener('click', function () {
selectedId = b.id;
renderAll();
});
boxList.appendChild(row);
});
}
function renderStage() {
stage.innerHTML = '';
layout.boxes.forEach(function (b, i) {
var el = document.createElement('div');
el.className = 'box align-' + (b.align || 'C') + (b.id === selectedId ? ' selected' : '');
el.dataset.id = b.id;
el.style.borderColor = colorFor(i);
el.style.color = colorFor(i);
el.style.left = (b.left * 100) + '%';
el.style.top = (b.top * 100) + '%';
el.style.width = ((b.right - b.left) * 100) + '%';
el.style.height = ((b.bottom - b.top) * 100) + '%';
if (b.field === 'no_bib') {
el.querySelector && null;
el.style.fontSize = '';
}
var lab = document.createElement('span');
lab.className = 'label';
lab.textContent = sampleFor(b.field);
if (b.field === 'no_bib') lab.style.fontSize = 'clamp(18px, 8vh, 72px)';
el.appendChild(lab);
var h = document.createElement('div');
h.className = 'handle';
h.setAttribute('data-resize', '1');
el.appendChild(h);
stage.appendChild(el);
});
pctOut.textContent = JSON.stringify(layout, null, 2);
}
function renderAll() {
ensureIds();
renderList();
renderStage();
}
function findBox(id) {
for (var i = 0; i < layout.boxes.length; i++) {
if (layout.boxes[i].id === id) return layout.boxes[i];
}
return null;
}
function readFromDom(id) {
var el = stage.querySelector('.box[data-id="' + id + '"]');
if (!el) return null;
var r = stage.getBoundingClientRect();
var br = el.getBoundingClientRect();
return {
left: clamp((br.left - r.left) / r.width, 0, 1),
top: clamp((br.top - r.top) / r.height, 0, 1),
right: clamp((br.right - r.left) / r.width, 0, 1),
bottom: clamp((br.bottom - r.top) / r.height, 0, 1)
};
}
stage.addEventListener('pointerdown', function (e) {
var el = e.target.closest('.box');
if (!el || !stage.contains(el)) return;
e.preventDefault();
var id = el.getAttribute('data-id');
selectedId = id;
var resize = !!e.target.closest('[data-resize]');
var r = stage.getBoundingClientRect();
var br = el.getBoundingClientRect();
drag = {
id: id,
resize: resize,
startX: e.clientX,
startY: e.clientY,
orig: {
left: (br.left - r.left) / r.width,
top: (br.top - r.top) / r.height,
right: (br.right - r.left) / r.width,
bottom: (br.bottom - r.top) / r.height
}
};
renderAll();
el.setPointerCapture && el.setPointerCapture(e.pointerId);
});
window.addEventListener('pointermove', function (e) {
if (!drag) return;
var b = findBox(drag.id);
if (!b) return;
var r = stage.getBoundingClientRect();
var dx = (e.clientX - drag.startX) / r.width;
var dy = (e.clientY - drag.startY) / r.height;
var o = drag.orig;
if (drag.resize) {
b.left = o.left;
b.top = o.top;
b.right = clamp(o.right + dx, o.left + 0.04, 1);
b.bottom = clamp(o.bottom + dy, o.top + 0.03, 1);
} else {
var w = o.right - o.left;
var h = o.bottom - o.top;
b.left = clamp(o.left + dx, 0, 1 - w);
b.top = clamp(o.top + dy, 0, 1 - h);
b.right = b.left + w;
b.bottom = b.top + h;
}
renderStage();
});
window.addEventListener('pointerup', function () {
if (!drag) return;
var b = findBox(drag.id);
var edges = readFromDom(drag.id);
if (b && edges) {
b.left = edges.left;
b.top = edges.top;
b.right = edges.right;
b.bottom = edges.bottom;
}
drag = null;
renderAll();
});
document.getElementById('btnAdd').addEventListener('click', function () {
uid++;
layout.boxes.push({
id: 'box_' + Date.now(),
field: 'par_nom',
align: 'L',
font_max: defaultFont('par_nom'),
left: 0.35,
right: 0.65,
top: 0.55,
bottom: 0.65
});
selectedId = layout.boxes[layout.boxes.length - 1].id;
renderAll();
});
document.getElementById('btnReset').addEventListener('click', function () {
layout = JSON.parse(JSON.stringify(initial));
selectedId = layout.boxes[0] ? layout.boxes[0].id : null;
renderAll();
statusEl.textContent = 'Réinitialisé (pas encore sauvé).';
statusEl.className = '';
});
document.getElementById('btnSave').addEventListener('click', function () {
var btn = document.getElementById('btnSave');
btn.disabled = true;
statusEl.textContent = 'Enregistrement…';
statusEl.className = '';
fetch('ajax_dossard_layout.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
eve_id: eveId,
version: 2,
boxes: layout.boxes
})
})
.then(function (r) { return r.json(); })
.then(function (data) {
if (data && data.ok) {
initial = JSON.parse(JSON.stringify(layout));
statusEl.textContent = 'Enregistré — PDF = ces boîtes.';
statusEl.className = 'ok';
} else {
statusEl.textContent = (data && data.error) ? data.error : 'Erreur sauvegarde';
statusEl.className = 'err';
}
})
.catch(function () {
statusEl.textContent = 'Erreur réseau';
statusEl.className = 'err';
})
.finally(function () { btn.disabled = false; });
});
selectedId = layout.boxes[0] ? layout.boxes[0].id : null;
renderAll();
})();
</script>
</body>
</html>