EmbedLiveSample.ejs

<%
// Embeds a live sample given the ID of its header block.
//
// Parameters:
//  $0 - The ID of the header block containing the sample
//  $1 - The width of the iframe (optional)
//  $2 - The height of the iframe (optional)
//  $3 - (Deprecated) The url of a screenshot of the sample working as intended (optional)
//  $4 - (Deprecated) The slug from which to load the sample (optional; current page used if not provided)
//  $5 - (Deprecated) The class name of the frame; defaults to "sample-code-frame". If you
//       pass this parameter and give it a value other than "sample-code-frame",
//       then the "Open in CodePen"/"Open in JSFiddle" buttons will not be displayed.
//  $6 - Allowed features (like geolocation, microphone), separated by semicolons (optional).
//       Defaults to ''.
//
// See also : LiveSampleLink

// We have deprecated the $3, $4, and $5 parameters.
// If a non-empty value is provided for a deprecated parameter, we raise a MacroDeprecationError flaw
// When there are 0 uses in translated-content,
// we will be able to simplify this macro (and likely the whole of MDN).
if ($3 !== "") {
  mdn.deprecatedParams("'EmbedLiveSample' parameter $3 is deprecated (no screenshot URLs).");
}
if ($4 !== "") {
  mdn.deprecatedParams("'EmbedLiveSample' parameter $4 is deprecated (no sample slug).");
}
if ($5 !== "") {
  mdn.deprecatedParams("'EmbedLiveSample' parameter $5 is deprecated (no iframe classes).");
}

var sampleIdOrOffset = $0 || $token.location.start.offset;
if(typeof sampleIdOrOffset === "string"){
  sampleIdOrOffset = sampleIdOrOffset.toLowerCase();
}
var width = $1;
var height = $2;
var screenshotUrl = $3;
var sampleSlug = $4;
var className = $5 || "sample-code-frame";
var allowedFeatures = $6;

var hasScreenshot = (screenshotUrl && (screenshotUrl.length > 0));
var title = $0.replace(/[_]+/gm, " ");

var MIN_HEIGHT = 60;
// Forcibly make sure the height is at least `MIN_HEIGHT` pixels.
// In old MDN, there was less padding in the live samples so it was then OK
// to have a iframe height of 30px. This is too cramped and it's easier
// and safer to make sure the height is at least 60px to make sure it
// looks presently "uncramped" within our design system.
// Note that if the 'height' is a string like '100%' it won't be a
// problem because `parseInt('100%') := 100` which is more than `MIN_HEIGHT`
// assuming it's value is less than 100.
if (height && parseInt(height) < MIN_HEIGHT) {
  height = MIN_HEIGHT;
}

var sampleUrl = "";
if (sampleSlug) {
    // We're asking for the live sample from a different page than
    // the one we're rendering.
    sampleUrl = `/${env.locale}/docs`;
    if (sampleSlug.charAt(0) !== "/") {
      sampleSlug = "/" + sampleSlug;
    }
    sampleUrl += sampleSlug;
    if (env.locale.toLowerCase() !== "en-us") {
      const samplePage = wiki.getPage(sampleUrl);
      if (!(samplePage && samplePage.url)) {
        // The page from which we're being asked to get the live sample
        // doesn't exist in this locale, so most likely it only exists
        // in English.
        sampleUrl = `/en-US/docs${sampleSlug}`;
      }
    }
}
var id = web.slugify(web.safeDecodeURIComponent(sampleIdOrOffset));
var url = await template('LiveSampleURL', [id, sampleUrl]);

if (hasScreenshot) {
%><table class="sample-code-table"><%
  %><thead><%
    %><tr><%
      %><th scope="col" style="text-align: center;">Screenshot</th><%
      %><th scope="col" style="text-align: center;">Live sample</th><%
    %></tr><%
  %></thead><%
  %><tbody><%
    %><tr><%
      %><td><%
        %><img alt="" class="internal" src="<%= screenshotUrl %>" /><%
      %></td><%
      %><td><%
} // end hasScreenshot
%><div class="code-example"><div class="example-header"></div><iframe class="<%= className %>"<%
%> title="<%= title %> sample" id="frame_<%= id %>"<%
if (width) { %> width="<%= width %>"<% }
if (height) { %> height="<%= height %>"<% }
%> src="<%- url %>"<%
if (allowedFeatures) { %> allow="<%= allowedFeatures %>"<% }
if ($token) { %> data-token="<%= JSON.stringify($token) %>"<% }
%> sandbox="allow-same-origin allow-scripts"></iframe></div><%
if (hasScreenshot) { %></td></tr></tbody></table><% } %>