@agence-zef/astro 0.9.0 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/overlay.d.ts +8 -0
  2. package/dist/overlay.js +30 -15
  3. package/package.json +3 -3
package/dist/overlay.d.ts CHANGED
@@ -58,6 +58,14 @@ export type ToPreview = {
58
58
  | {
59
59
  zef: "locked";
60
60
  fields: string[];
61
+ }
62
+ /**
63
+ * Réduction de l'aperçu par le CMS (vue Ordinateur rendue plus large puis réduite) : l'overlay
64
+ * s'agrandit d'autant pour garder la taille de l'interface de l'éditeur.
65
+ */
66
+ | {
67
+ zef: "scale";
68
+ value: number;
61
69
  };
62
70
  export type Pin = {
63
71
  id: string;
package/dist/overlay.js CHANGED
@@ -16,6 +16,8 @@ export function startOverlay() {
16
16
  let pins = [];
17
17
  let commentMode = false;
18
18
  let locked = new Set();
19
+ /** Agrandissement de l'overlay (inverse de la réduction de l'aperçu par le CMS). */
20
+ let zoom = 1;
19
21
  /** Image survolée pendant qu'on glisse un fichier. */
20
22
  let dropTarget = null;
21
23
  /* ---------- Repérage des champs ---------- */
@@ -132,26 +134,26 @@ export function startOverlay() {
132
134
  *, *::before, *::after { animation: none !important; transition: none !important; }
133
135
  [${ATTR}] { cursor: pointer; }
134
136
  [${ATTR}][contenteditable] { cursor: text; outline: none; }
135
- #zef-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; font: 500 11px/1.4 system-ui, sans-serif; }
136
- #zef-overlay .zef-frame { position: fixed; border: 1.5px solid #8c40f7; border-radius: 2px; }
137
+ #zef-overlay { --zef-zoom: 1; position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; font: 500 11px/1.4 system-ui, sans-serif; }
138
+ #zef-overlay .zef-frame { position: fixed; border: calc(1.5px * var(--zef-zoom)) solid #8c40f7; border-radius: 2px; }
137
139
  #zef-overlay .zef-frame.zef-section { border-style: dashed; border-color: #8c40f7aa; }
138
- #zef-overlay .zef-frame.zef-selected { border-width: 2px; }
139
- #zef-overlay .zef-frame.zef-field { border: 1.5px solid #8c40f7; border-radius: 3px; background: #8c40f70d; }
140
+ #zef-overlay .zef-frame.zef-selected { border-width: calc(2px * var(--zef-zoom)); }
141
+ #zef-overlay .zef-frame.zef-field { border: calc(1.5px * var(--zef-zoom)) solid #8c40f7; border-radius: 3px; background: #8c40f70d; }
140
142
  #zef-overlay .zef-frame.zef-field .zef-tag { padding: 1px 5px; font-size: 10px; }
141
- #zef-overlay .zef-tag { position: absolute; left: -1.5px; bottom: 100%; margin-bottom: 2px; padding: 2px 6px; border-radius: 4px; background: #8c40f7; color: #fff; white-space: nowrap; }
142
- #zef-overlay .zef-compare { border: 2px solid #ea580c; }
143
- #zef-overlay .zef-compare .zef-tag { left: 8px; top: 8px; bottom: auto; margin: 0; background: #fff7ed; color: #c2410c; }
143
+ #zef-overlay .zef-tag { position: absolute; left: -1.5px; bottom: 100%; margin-bottom: 2px; padding: 2px 6px; border-radius: 4px; background: #8c40f7; color: #fff; white-space: nowrap; transform: scale(var(--zef-zoom)); transform-origin: left bottom; }
144
+ #zef-overlay .zef-compare { border: calc(2px * var(--zef-zoom)) solid #ea580c; }
145
+ #zef-overlay .zef-compare .zef-tag { left: 8px; top: 8px; bottom: auto; margin: 0; background: #fff7ed; color: #c2410c; transform-origin: left top; }
144
146
  #zef-overlay .zef-compare.zef-added { border-style: dashed; border-color: #16a34a; }
145
147
  #zef-overlay .zef-compare.zef-added .zef-tag { background: #f0fdf4; color: #15803d; }
146
- #zef-overlay .zef-pin { position: fixed; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 999px; background: #f97316; color: #fff; font: 600 10px/1 system-ui, sans-serif; box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); cursor: pointer; pointer-events: auto; }
148
+ #zef-overlay .zef-pin { position: fixed; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 999px; background: #f97316; color: #fff; font: 600 10px/1 system-ui, sans-serif; box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); cursor: pointer; pointer-events: auto; transform: scale(var(--zef-zoom)); }
147
149
  html.zef-commenting, html.zef-commenting * { cursor: crosshair !important; }
148
- #zef-overlay .zef-toolbar { position: fixed; display: flex; gap: 2px; padding: 3px; border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); pointer-events: auto; }
150
+ #zef-overlay .zef-toolbar { position: fixed; display: flex; gap: 2px; padding: 3px; border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); pointer-events: auto; transform: scale(var(--zef-zoom)); transform-origin: right top; }
149
151
  #zef-overlay .zef-toolbar button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #3f3f46; cursor: pointer; }
150
152
  #zef-overlay .zef-toolbar button:hover { background: #f4f4f5; }
151
153
  #zef-overlay .zef-toolbar button:disabled { opacity: 0.35; cursor: default; background: transparent; }
152
154
  #zef-overlay .zef-toolbar button.zef-danger { color: #e11d48; }
153
- #zef-overlay .zef-insert { position: fixed; height: 2px; margin-top: -1px; background: #8c40f7; }
154
- #zef-overlay .zef-insert button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; padding: 4px 12px 4px 10px; border: 0; border-radius: 999px; background: #8c40f7; color: #fff; font: 500 12px/1.4 system-ui, sans-serif; white-space: nowrap; cursor: pointer; pointer-events: auto; }
155
+ #zef-overlay .zef-insert { position: fixed; height: calc(2px * var(--zef-zoom)); margin-top: calc(-1px * var(--zef-zoom)); background: #8c40f7; }
156
+ #zef-overlay .zef-insert button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--zef-zoom)); display: flex; align-items: center; gap: 4px; padding: 4px 12px 4px 10px; border: 0; border-radius: 999px; background: #8c40f7; color: #fff; font: 500 12px/1.4 system-ui, sans-serif; white-space: nowrap; cursor: pointer; pointer-events: auto; }
155
157
  `;
156
158
  document.head.append(style);
157
159
  const layer = document.createElement("div");
@@ -171,8 +173,13 @@ export function startOverlay() {
171
173
  span.className = "zef-tag";
172
174
  span.textContent = tag;
173
175
  // Cadre collé en haut de l'aperçu (header) : l'étiquette passe à l'intérieur.
174
- if (r.top < 20)
175
- Object.assign(span.style, { bottom: "auto", top: "2px", left: "2px" });
176
+ if (r.top < 20 * zoom)
177
+ Object.assign(span.style, {
178
+ bottom: "auto",
179
+ top: "2px",
180
+ left: "2px",
181
+ transformOrigin: "left top",
182
+ });
176
183
  div.append(span);
177
184
  }
178
185
  layer.append(div);
@@ -214,8 +221,12 @@ export function startOverlay() {
214
221
  bar.append(button);
215
222
  }
216
223
  layer.append(bar);
217
- const top = Math.max(r.top + 8, 8);
218
- Object.assign(bar.style, { top: `${top}px`, left: `${r.right - bar.offsetWidth - 8}px` });
224
+ const top = Math.max(r.top + 8 * zoom, 8 * zoom);
225
+ // Agrandie depuis son coin haut droit : `offsetWidth` reste la largeur avant agrandissement.
226
+ Object.assign(bar.style, {
227
+ top: `${top}px`,
228
+ left: `${r.right - bar.offsetWidth - 8 * zoom}px`,
229
+ });
219
230
  }
220
231
  /** Ligne « + Ajouter une section » sous la section survolée. */
221
232
  function insertLine(section, r) {
@@ -562,6 +573,10 @@ export function startOverlay() {
562
573
  case "commentMode":
563
574
  setCommentMode(message.on);
564
575
  break;
576
+ case "scale":
577
+ zoom = message.value > 0 ? 1 / message.value : 1;
578
+ layer.style.setProperty("--zef-zoom", String(zoom));
579
+ break;
565
580
  case "showPin": {
566
581
  const pin = pins.find((p) => p.id === message.id);
567
582
  const element = pin ? pinElement(pin) : null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agence-zef/astro",
3
- "version": "0.9.0",
3
+ "version": "0.9.2",
4
4
  "description": "Intégration Astro du CMS ZEF : routes, rendu des sections, aperçu, composants réutilisables sans style.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -86,8 +86,8 @@
86
86
  "dependencies": {
87
87
  "jiti": "^2.6.1",
88
88
  "vanilla-cookieconsent": "3.1.0",
89
- "@agence-zef/schema": "0.9.0",
90
- "@agence-zef/sdk": "0.9.0"
89
+ "@agence-zef/schema": "0.9.1",
90
+ "@agence-zef/sdk": "0.9.1"
91
91
  },
92
92
  "homepage": "https://agence-zef.fr",
93
93
  "scripts": {