-
Notifications
You must be signed in to change notification settings - Fork 503
/
EmbedLiveSample.ejs
104 lines (98 loc) · 4.09 KB
/
EmbedLiveSample.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<%
// 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><% } %>