Release 2.8.3

src/web/public/js/shared/placeholder-info.js

@@ -0,0 +1,67 @@
+// Shared offcanvas renderer for region placeholder documentation.
+
+(function () {
+  var root = window;
+
+  function escapeHtml(value) {
+    return String(value === undefined || value === null ? '' : value)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  function render(regionId, title, body) {
+    var offcanvasId = String(regionId || 'region') + '-placeholder-info';
+    return '' +
+      '<button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" data-bs-toggle="offcanvas" data-bs-target="#' + offcanvasId + '" aria-controls="' + offcanvasId + '">More info</button>' +
+      '<div class="offcanvas offcanvas-end fw-normal" tabindex="-1" id="' + offcanvasId + '" aria-labelledby="' + offcanvasId + '-label">' +
+        '<div class="offcanvas-header">' +
+          '<h2 class="offcanvas-title fs-5" id="' + offcanvasId + '-label">' + escapeHtml(title) + '</h2>' +
+          '<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>' +
+        '</div>' +
+        '<div class="offcanvas-body">' + body + '</div>' +
+      '</div>';
+  }
+
+  function renderTextTransforms() {
+    return '<h3 class="fs-6 mt-4 fw-normal">Text transforms</h3>' +
+      '<dl class="small fw-normal">' +
+        '<dt class="fw-normal"><code>upper()</code></dt><dd>Converts text to uppercase.</dd>' +
+        '<dt class="fw-normal"><code>lower()</code></dt><dd>Converts text to lowercase.</dd>' +
+        '<dt class="fw-normal"><code>title()</code></dt><dd>Capitalizes each word.</dd>' +
+        '<dt class="fw-normal"><code>tz()</code></dt><dd>Returns the short timezone name for a date.</dd>' +
+        '<dt class="fw-normal"><code>tz_long()</code></dt><dd>Returns the full timezone name for a date.</dd>' +
+      '</dl>';
+  }
+
+  function renderDateFormatTokens() {
+    return '<h3 class="fs-6 mt-4 fw-normal">Date format tokens</h3>' +
+      '<p class="small">Use the <code>format("...")</code> transform with these tokens. Text inside square brackets is treated as a literal.</p>' +
+      '<div class="table-responsive small"><table class="table table-sm align-middle mb-0"><thead><tr><th>Token</th><th>Meaning</th><th>Example</th></tr></thead><tbody>' +
+        '<tr><td><code>YYYY</code></td><td>Four-digit year</td><td><code>2026</code></td></tr><tr><td><code>YY</code></td><td>Two-digit year</td><td><code>26</code></td></tr>' +
+        '<tr><td><code>MMMM</code></td><td>Full month name</td><td><code>August</code></td></tr><tr><td><code>MMM</code></td><td>Short month name</td><td><code>Aug</code></td></tr>' +
+        '<tr><td><code>MM</code></td><td>Two-digit month</td><td><code>08</code></td></tr><tr><td><code>M</code></td><td>Month number</td><td><code>8</code></td></tr>' +
+        '<tr><td><code>DD</code></td><td>Two-digit day</td><td><code>16</code></td></tr><tr><td><code>D</code></td><td>Day number</td><td><code>16</code></td></tr>' +
+        '<tr><td><code>dddd</code></td><td>Full weekday name</td><td><code>Sunday</code></td></tr><tr><td><code>ddd</code></td><td>Short weekday name</td><td><code>Sun</code></td></tr>' +
+        '<tr><td><code>HH</code> / <code>H</code></td><td>24-hour time</td><td><code>19</code> / <code>7</code></td></tr><tr><td><code>hh</code> / <code>h</code></td><td>12-hour time</td><td><code>07</code> / <code>7</code></td></tr>' +
+        '<tr><td><code>mm</code> / <code>m</code></td><td>Minutes</td><td><code>05</code> / <code>5</code></td></tr><tr><td><code>ss</code> / <code>s</code></td><td>Seconds</td><td><code>09</code> / <code>9</code></td></tr>' +
+        '<tr><td><code>A</code> / <code>a</code></td><td>AM or PM</td><td><code>PM</code> / <code>pm</code></td></tr>' +
+      '</tbody></table></div>';
+  }
+
+  function renderImageTransform() {
+    return '<h3 class="fs-6 mt-4 fw-normal">Image transform</h3>' +
+      '<p class="small">Use <code>image(width, height)</code> to render an image URL inside a proportional bounding box.</p>' +
+      '<ul class="small"><li>The preview shows the width and height boundary.</li><li>The player has no boundary.</li><li>The image keeps its original aspect ratio.</li><li>Both dimensions are required for a bounding box.</li></ul>';
+  }
+
+  root.placeholderInfo = {
+    escapeHtml: escapeHtml,
+    render: render,
+    renderTextTransforms: renderTextTransforms,
+    renderDateFormatTokens: renderDateFormatTokens,
+    renderImageTransform: renderImageTransform
+  };
+}());

src/web/public/js/shared/placeholder-utils.js

@@ -298,6 +298,27 @@
     return resolved;
   }
 
+  function isImagePlaceholderExpression(expression) {
+    var parsed = parsePlaceholderExpression(expression);
+    return parsed.transforms.some(function (transform) {
+      return transform && transform.name === 'image';
+    });
+  }
+
+  function getImagePlaceholderConfig(expression) {
+    var parsed = parsePlaceholderExpression(expression);
+    var imageTransform = parsed.transforms.find(function (transform) {
+      return transform && transform.name === 'image';
+    });
+    var args = imageTransform && Array.isArray(imageTransform.args) ? imageTransform.args : [];
+    var width = Number(args[0]);
+    var height = Number(args[1]);
+    return {
+      width: Number.isFinite(width) && width > 0 ? Math.round(width) : 0,
+      height: Number.isFinite(height) && height > 0 ? Math.round(height) : 0
+    };
+  }
+
   function formatPlaceholderValue(value) {
     if (value === undefined || value === null) {
       return '';
@@ -349,6 +370,8 @@
     resolvePath: resolvePath,
     parsePlaceholderExpression: parsePlaceholderExpression,
     resolvePlaceholderExpression: resolvePlaceholderExpression,
+    isImagePlaceholderExpression: isImagePlaceholderExpression,
+    getImagePlaceholderConfig: getImagePlaceholderConfig,
     formatPlaceholderValue: formatPlaceholderValue,
     collectPlaceholderFieldPaths: collectPlaceholderFieldPaths
   };