<% // 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) { %><% %><% %><% %><% %><% %><% %><% %><% %><% %><% %>

Screenshot	Live sample
<% %><% %>	<% } // end hasScreenshot %> <% if (hasScreenshot) { %>

<% } %>