mirror of https://github.com/freeCodeCamp/devdocs
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.0 KiB
76 lines
2.0 KiB
//= require views/pages/base
|
|
|
|
app.views.JqueryPage = class JqueryPage extends app.views.BasePage {
|
|
static demoClassName = "_jquery-demo";
|
|
|
|
afterRender() {
|
|
// Prevent jQuery Mobile's demo iframes from scrolling the page
|
|
for (var iframe of this.findAllByTag("iframe")) {
|
|
iframe.style.display = "none";
|
|
this.onIframeLoaded = this.onIframeLoaded.bind(this);
|
|
$.on(iframe, "load", this.onIframeLoaded);
|
|
}
|
|
|
|
return this.runExamples();
|
|
}
|
|
|
|
onIframeLoaded(event) {
|
|
event.target.style.display = "";
|
|
$.off(event.target, "load", this.onIframeLoaded);
|
|
}
|
|
|
|
runExamples() {
|
|
for (var el of this.findAllByClass("entry-example")) {
|
|
try {
|
|
this.runExample(el);
|
|
} catch (error) {}
|
|
}
|
|
}
|
|
|
|
runExample(el) {
|
|
let iframe;
|
|
const source = el.getElementsByClassName("syntaxhighlighter")[0];
|
|
if (!source || source.innerHTML.indexOf("!doctype") === -1) {
|
|
return;
|
|
}
|
|
|
|
if (!(iframe = el.getElementsByClassName(JqueryPage.demoClassName)[0])) {
|
|
iframe = document.createElement("iframe");
|
|
iframe.className = JqueryPage.demoClassName;
|
|
iframe.width = "100%";
|
|
iframe.height = 200;
|
|
el.appendChild(iframe);
|
|
}
|
|
|
|
const doc = iframe.contentDocument;
|
|
doc.write(this.fixIframeSource(source.textContent));
|
|
doc.close();
|
|
}
|
|
|
|
fixIframeSource(source) {
|
|
source = source.replace(
|
|
'"/resources/',
|
|
'"https://api.jquery.com/resources/',
|
|
); // attr(), keydown()
|
|
source = source.replace(
|
|
"</head>",
|
|
`\
|
|
<style>
|
|
html, body { border: 0; margin: 0; padding: 0; }
|
|
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
|
|
</style>
|
|
<script>
|
|
$.ajaxPrefilter(function(opt, opt2, xhr) {
|
|
if (opt.url.indexOf('http') !== 0) {
|
|
xhr.abort();
|
|
document.body.innerHTML = "<p><strong>This demo cannot run inside DevDocs.</strong></p>";
|
|
}
|
|
});
|
|
</script>
|
|
</head>\
|
|
`,
|
|
);
|
|
return source.replace(/<script>/gi, '<script nonce="devdocs">');
|
|
}
|
|
};
|