Load iFrame on page load

This commit is contained in:
Berkeley Martinez
2015-11-22 19:42:53 -08:00
parent 6f98f62dd9
commit 5a785dbad7
7 changed files with 123 additions and 84 deletions

View File

@ -1,35 +1,22 @@
window.common = (function(global) {
const {
$,
Rx: { Observable, Disposable },
common = { init: [] }
} = global;
function getFaux() {
return new Observable(function(observer) {
const jqXHR = $.get('/js/faux.js')
.success(data => observer.onNext(data))
.fail(e => observer.onError(e))
.always(() => observer.onCompleted());
const faux$ = common.getScriptContent$('/js/faux.js').shareReplay();
return new Disposable(() => {
jqXHR.abort();
});
});
}
const faux$ = getFaux().shareReplay();
common.safeHTMLRun = function safeHTMLRun(code) {
if (!code.match(/\<script\>/gi)) {
return Observable.just(code);
}
common.hasJs = function hasJs(code = '') {
return code.match(/\<\s?script\s?\>/gi) &&
code.match(/\<\s?\/\s?script\s?\>/gi);
};
common.addFaux$ = function addFaux$(code) {
// grab user javaScript
var scriptCode = code
.split(/\<\s?script\s?\>/gi)[1]
.split(/\<\s?\/\s?script\s?\>/gi)[0];
return faux$.map(faux => faux + scriptCode);
};

View File

@ -71,24 +71,24 @@ $(document).ready(function() {
}
);
var $preview = $('#preview');
if ($preview.html()) {
$preview.load(function() {
common.executeChallenge()
.subscribe(
({ output = '' }) => {
common.updateOutputDisplay(output);
},
({ err }) => {
common.updateOutputDisplay('' + err);
}
);
});
} else if (
challengeType !== '2' &&
challengeType !== '3' &&
challengeType !== '4' &&
challengeType !== '7'
if (challengeType === challengeTypes.HTML) {
var $preview = $('#preview');
return Observable.fromCallback($preview.ready, $preview)()
.delay(500)
.flatMap(() => common.executeChallenge$())
.subscribe(
({ code, tests }) => {
common.displayTestResults(tests);
},
({ err }) => {
console.error(err);
}
);
}
if (
challengeType === challengeTypes.BONFIRE &&
challengeType === challengeTypes.JS
) {
Observable.just({})
.delay(500)

View File

@ -84,9 +84,28 @@ window.common = (function(global) {
// add head and tail and detect loops
return Observable.just({ code: head + code + tail, original: code });
})
.map(data => {
.flatMap(data => {
if (common.challengeType === common.challengeTypes.HTML) {
return common.getScriptCode(data);
if (common.hasJs(code)) {
return common.addFaux$(data)
.flatMap(code => common.detectLoops$(code))
.flatMap(({ err }) => {
if (err) {
return Observable.throw({ err });
}
return common.runPreviewTests$({
code: data.code,
tests: common.tests.slice()
});
});
}
return common.updatePreview$(data.code)
.flatMap(code => common.runPreviewTests$({
code,
tests: common.tests.slice()
}));
}
return common.addTestsToString(Object.assign(
@ -95,21 +114,21 @@ window.common = (function(global) {
code: common.removeComments(code),
tests: common.tests.slice()
}
));
})
.flatMap(common.detectLoops$)
.flatMap(({ err, code, data, userTests, original }) => {
if (err) {
return Observable.throw({ err });
}
))
.flatMap(common.detectLoops$)
.flatMap(({ err, code, data, userTests, original }) => {
if (err) {
return Observable.throw({ err });
}
return common.runTests$({
data,
code,
userTests,
original,
output: data.output.replace(/\\\"/gi, '')
});
return common.runTests$({
data,
code,
userTests,
original,
output: data.output.replace(/\\\"/gi, '')
});
});
})
.catch(e => {
return e && e.err ?

View File

@ -3,7 +3,7 @@ window.common = (function(global) {
// all classes should be stored here
// called at the beginning of dom ready
const {
Rx: { config },
Rx: { Disposable, Observable, config },
common = { init: [] }
} = global;
@ -86,5 +86,21 @@ window.common = (function(global) {
return code.replace(regexp, text);
};
common.getScriptContent$ = function getScriptContent$(script) {
return Observable.create(function(observer) {
const jqXHR = $.get(script)
.success(data => {
observer.onNext(data);
observer.onCompleted();
})
.fail(e => observer.onError(e))
.always(() => observer.onCompleted());
return new Disposable(() => {
jqXHR.abort();
});
});
};
return common;
})(window);

View File

@ -5,12 +5,12 @@ window.common = (function(global) {
common = { init: [] }
} = global;
const { challengeType = '0' } = common;
const { challengeTypes, challengeType = '0' } = common;
if (
!CodeMirror ||
challengeType === '0' ||
challengeType === '7'
challengeType !== challengeTypes.JS ||
challengeType !== challengeTypes.BONFIRE
) {
common.updateOutputDisplay = () => {};
common.appendToOutputDisplay = () => {};

View File

@ -1,4 +1,4 @@
window.common = (function({ common = { init: [] } }) {
window.common = (function({ Rx: { Observable }, common = { init: [] } }) {
var libraryIncludes = `
<link
rel='stylesheet'
@ -19,21 +19,29 @@ window.common = (function({ common = { init: [] } }) {
</style>
`;
var iFrameScript = "<script src='/js/iFrameScripts.js'></script>";
const iFrameScript$ =
common.getScriptContent$('/js/iFrameScripts.js').shareReplay();
// runPreviewTests$ should be set up in the preview window
common.runPreviewTests$ =
() => Observable.throw({ err: new Error('run preview not enabled') });
common.updatePreview = function updatePreview(code = '', shouldTest = false) {
common.updatePreview$ = function updatePreview$(code = '') {
const previewFrame = document.getElementById('preview');
const preview = previewFrame.contentDocument ||
previewFrame.contentWindow.document;
if (!preview) {
return code;
return Observable.just(code);
}
preview.open();
preview.write(libraryIncludes + code + (shouldTest ? iFrameScript : ''));
preview.close();
return code;
return iFrameScript$
.map(script => `<script>${script}</script>`)
.doOnNext(script => {
preview.open();
preview.write(libraryIncludes + code + script);
preview.close();
})
.map(() => code);
};
return common;

View File

@ -2,27 +2,36 @@
window.$ = parent.$;
window.$(function() {
var _ = parent._;
var Rx = parent.Rx;
var chai = parent.chai;
var expect = chai.expect;
var assert = chai.assert;
var tests = parent.tests;
var common = parent.common;
var editorValue = common.editor.getValue();
var code = common.editor.getValue();
var editor = common.editor;
var userTests = common.tests.map(test => {
var userTest = {};
try {
/* eslint-disable no-eval */
eval(test);
/* eslint-enable no-eval */
} catch (e) {
userTest.err = e.message.split(':').shift();
} finally {
userTest.text = test
.split(',')
.pop()
.replace(/\'/g, '')
.replace(/\)/, '');
}
});
common.runPreviewTests$ =
function runPreviewTests$({ tests = [], ...rest }) {
return Rx.Observable.from(tests)
.map(test => {
const userTest = {};
try {
/* eslint-disable no-eval */
eval(test);
/* eslint-enable no-eval */
} catch (e) {
userTest.err = e.message.split(':').shift();
} finally {
userTest.text = test
.split(',')
.pop()
.replace(/\'/g, '')
.replace(/\)/, '');
}
return userTest;
})
.toArray()
.map(tests => ({ ...rest, tests }));
};
});