67 lines
4.4 KiB
JavaScript
67 lines
4.4 KiB
JavaScript
// 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, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
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
|
|
};
|
|
}()); |