debt - more promise cleanup
Johannes Rieken
6 years ago
parent
a404c91e22
commit
70e48eeb52
@ -1,386 +1,384 @@
|
||||
/// <reference path="../../release/monaco.d.ts" />
|
||||
|
||||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
window.onload = function() {
|
||||
require(['vs/editor/editor.main'], function() {
|
||||
xhr('playground/monaco.d.ts.txt').then(function(response) {
|
||||
monaco.languages.typescript.javascriptDefaults.addExtraLib(response.responseText, 'monaco.d.ts');
|
||||
monaco.languages.typescript.javascriptDefaults.addExtraLib([
|
||||
'declare var require: {',
|
||||
' toUrl(path: string): string;',
|
||||
' (moduleName: string): any;',
|
||||
' (dependencies: string[], callback: (...args: any[]) => any, errorback?: (err: any) => void): any;',
|
||||
' config(data: any): any;',
|
||||
' onError: Function;',
|
||||
'};',
|
||||
].join('\n'), 'require.d.ts');
|
||||
});
|
||||
|
||||
var loading = document.getElementById('loading');
|
||||
loading.parentNode.removeChild(loading);
|
||||
load();
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
var editor = null;
|
||||
var data = {
|
||||
js: {
|
||||
model: null,
|
||||
state: null
|
||||
},
|
||||
css: {
|
||||
model: null,
|
||||
state: null
|
||||
},
|
||||
html: {
|
||||
model: null,
|
||||
state: null
|
||||
}
|
||||
};
|
||||
|
||||
function load() {
|
||||
|
||||
function layout() {
|
||||
var GLOBAL_PADDING = 20;
|
||||
|
||||
var WIDTH = window.innerWidth - 2 * GLOBAL_PADDING;
|
||||
var HEIGHT = window.innerHeight;
|
||||
|
||||
var TITLE_HEIGHT = 110;
|
||||
var FOOTER_HEIGHT = 80;
|
||||
var TABS_HEIGHT = 20;
|
||||
var INNER_PADDING = 20;
|
||||
var SWITCHER_HEIGHT = 30;
|
||||
|
||||
var HALF_WIDTH = Math.floor((WIDTH - INNER_PADDING) / 2);
|
||||
var REMAINING_HEIGHT = HEIGHT - TITLE_HEIGHT - FOOTER_HEIGHT - SWITCHER_HEIGHT;
|
||||
|
||||
playgroundContainer.style.width = WIDTH + 'px';
|
||||
playgroundContainer.style.height = (HEIGHT - FOOTER_HEIGHT) + 'px';
|
||||
|
||||
sampleSwitcher.style.position = 'absolute';
|
||||
sampleSwitcher.style.top = TITLE_HEIGHT + 'px';
|
||||
sampleSwitcher.style.left = GLOBAL_PADDING + 'px';
|
||||
|
||||
typingContainer.style.position = 'absolute';
|
||||
typingContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + 'px';
|
||||
typingContainer.style.left = GLOBAL_PADDING + 'px';
|
||||
typingContainer.style.width = HALF_WIDTH + 'px';
|
||||
typingContainer.style.height = REMAINING_HEIGHT + 'px';
|
||||
|
||||
tabArea.style.position = 'absolute';
|
||||
tabArea.style.boxSizing = 'border-box';
|
||||
tabArea.style.top = 0;
|
||||
tabArea.style.left = 0;
|
||||
tabArea.style.width = HALF_WIDTH + 'px';
|
||||
tabArea.style.height = TABS_HEIGHT + 'px';
|
||||
|
||||
editorContainer.style.position = 'absolute';
|
||||
editorContainer.style.boxSizing = 'border-box';
|
||||
editorContainer.style.top = TABS_HEIGHT + 'px';
|
||||
editorContainer.style.left = 0;
|
||||
editorContainer.style.width = HALF_WIDTH + 'px';
|
||||
editorContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
|
||||
|
||||
if (editor) {
|
||||
editor.layout({
|
||||
width: HALF_WIDTH - 2,
|
||||
height: (REMAINING_HEIGHT - TABS_HEIGHT) - 1
|
||||
(function () {
|
||||
|
||||
'use strict';
|
||||
|
||||
window.onload = function () {
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
xhr('playground/monaco.d.ts.txt').then(function (response) {
|
||||
monaco.languages.typescript.javascriptDefaults.addExtraLib(response.responseText, 'monaco.d.ts');
|
||||
monaco.languages.typescript.javascriptDefaults.addExtraLib([
|
||||
'declare var require: {',
|
||||
' toUrl(path: string): string;',
|
||||
' (moduleName: string): any;',
|
||||
' (dependencies: string[], callback: (...args: any[]) => any, errorback?: (err: any) => void): any;',
|
||||
' config(data: any): any;',
|
||||
' onError: Function;',
|
||||
'};',
|
||||
].join('\n'), 'require.d.ts');
|
||||
});
|
||||
}
|
||||
|
||||
runContainer.style.position = 'absolute';
|
||||
runContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + TABS_HEIGHT + 'px';
|
||||
runContainer.style.left = GLOBAL_PADDING + INNER_PADDING + HALF_WIDTH + 'px';
|
||||
runContainer.style.width = HALF_WIDTH + 'px';
|
||||
runContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
|
||||
var loading = document.getElementById('loading');
|
||||
loading.parentNode.removeChild(loading);
|
||||
load();
|
||||
|
||||
runIframeHeight = (REMAINING_HEIGHT - TABS_HEIGHT);
|
||||
if (runIframe) {
|
||||
runIframe.style.height = runIframeHeight + 'px';
|
||||
});
|
||||
};
|
||||
|
||||
var editor = null;
|
||||
var data = {
|
||||
js: {
|
||||
model: null,
|
||||
state: null
|
||||
},
|
||||
css: {
|
||||
model: null,
|
||||
state: null
|
||||
},
|
||||
html: {
|
||||
model: null,
|
||||
state: null
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function changeTab(selectedTabNode, desiredModelId) {
|
||||
for (var i = 0; i < tabArea.childNodes.length; i++) {
|
||||
var child = tabArea.childNodes[i];
|
||||
if (/tab/.test(child.className)) {
|
||||
child.className = 'tab';
|
||||
function load() {
|
||||
|
||||
function layout() {
|
||||
var GLOBAL_PADDING = 20;
|
||||
|
||||
var WIDTH = window.innerWidth - 2 * GLOBAL_PADDING;
|
||||
var HEIGHT = window.innerHeight;
|
||||
|
||||
var TITLE_HEIGHT = 110;
|
||||
var FOOTER_HEIGHT = 80;
|
||||
var TABS_HEIGHT = 20;
|
||||
var INNER_PADDING = 20;
|
||||
var SWITCHER_HEIGHT = 30;
|
||||
|
||||
var HALF_WIDTH = Math.floor((WIDTH - INNER_PADDING) / 2);
|
||||
var REMAINING_HEIGHT = HEIGHT - TITLE_HEIGHT - FOOTER_HEIGHT - SWITCHER_HEIGHT;
|
||||
|
||||
playgroundContainer.style.width = WIDTH + 'px';
|
||||
playgroundContainer.style.height = (HEIGHT - FOOTER_HEIGHT) + 'px';
|
||||
|
||||
sampleSwitcher.style.position = 'absolute';
|
||||
sampleSwitcher.style.top = TITLE_HEIGHT + 'px';
|
||||
sampleSwitcher.style.left = GLOBAL_PADDING + 'px';
|
||||
|
||||
typingContainer.style.position = 'absolute';
|
||||
typingContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + 'px';
|
||||
typingContainer.style.left = GLOBAL_PADDING + 'px';
|
||||
typingContainer.style.width = HALF_WIDTH + 'px';
|
||||
typingContainer.style.height = REMAINING_HEIGHT + 'px';
|
||||
|
||||
tabArea.style.position = 'absolute';
|
||||
tabArea.style.boxSizing = 'border-box';
|
||||
tabArea.style.top = 0;
|
||||
tabArea.style.left = 0;
|
||||
tabArea.style.width = HALF_WIDTH + 'px';
|
||||
tabArea.style.height = TABS_HEIGHT + 'px';
|
||||
|
||||
editorContainer.style.position = 'absolute';
|
||||
editorContainer.style.boxSizing = 'border-box';
|
||||
editorContainer.style.top = TABS_HEIGHT + 'px';
|
||||
editorContainer.style.left = 0;
|
||||
editorContainer.style.width = HALF_WIDTH + 'px';
|
||||
editorContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
|
||||
|
||||
if (editor) {
|
||||
editor.layout({
|
||||
width: HALF_WIDTH - 2,
|
||||
height: (REMAINING_HEIGHT - TABS_HEIGHT) - 1
|
||||
});
|
||||
}
|
||||
}
|
||||
selectedTabNode.className = 'tab active';
|
||||
|
||||
var currentState = editor.saveViewState();
|
||||
runContainer.style.position = 'absolute';
|
||||
runContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + TABS_HEIGHT + 'px';
|
||||
runContainer.style.left = GLOBAL_PADDING + INNER_PADDING + HALF_WIDTH + 'px';
|
||||
runContainer.style.width = HALF_WIDTH + 'px';
|
||||
runContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
|
||||
|
||||
var currentModel = editor.getModel();
|
||||
if (currentModel === data.js.model) {
|
||||
data.js.state = currentState;
|
||||
} else if (currentModel === data.css.model) {
|
||||
data.css.state = currentState;
|
||||
} else if (currentModel === data.html.model) {
|
||||
data.html.state = currentState;
|
||||
runIframeHeight = (REMAINING_HEIGHT - TABS_HEIGHT);
|
||||
if (runIframe) {
|
||||
runIframe.style.height = runIframeHeight + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
editor.setModel(data[desiredModelId].model);
|
||||
editor.restoreViewState(data[desiredModelId].state);
|
||||
editor.focus();
|
||||
}
|
||||
|
||||
|
||||
// create the typing side
|
||||
var typingContainer = document.createElement('div');
|
||||
typingContainer.className = 'typingContainer';
|
||||
|
||||
var tabArea = (function() {
|
||||
var tabArea = document.createElement('div');
|
||||
tabArea.className = 'tabArea';
|
||||
|
||||
var jsTab = document.createElement('span');
|
||||
jsTab.className = 'tab active';
|
||||
jsTab.appendChild(document.createTextNode('JavaScript'));
|
||||
jsTab.onclick = function() { changeTab(jsTab, 'js'); };
|
||||
tabArea.appendChild(jsTab);
|
||||
|
||||
var cssTab = document.createElement('span');
|
||||
cssTab.className = 'tab';
|
||||
cssTab.appendChild(document.createTextNode('CSS'));
|
||||
cssTab.onclick = function() { changeTab(cssTab, 'css'); };
|
||||
tabArea.appendChild(cssTab);
|
||||
|
||||
var htmlTab = document.createElement('span');
|
||||
htmlTab.className = 'tab';
|
||||
htmlTab.appendChild(document.createTextNode('HTML'));
|
||||
htmlTab.onclick = function() { changeTab(htmlTab, 'html'); };
|
||||
tabArea.appendChild(htmlTab);
|
||||
function changeTab(selectedTabNode, desiredModelId) {
|
||||
for (var i = 0; i < tabArea.childNodes.length; i++) {
|
||||
var child = tabArea.childNodes[i];
|
||||
if (/tab/.test(child.className)) {
|
||||
child.className = 'tab';
|
||||
}
|
||||
}
|
||||
selectedTabNode.className = 'tab active';
|
||||
|
||||
var runBtn = document.createElement('span');
|
||||
runBtn.className = 'action run';
|
||||
runBtn.appendChild(document.createTextNode('Run'));
|
||||
runBtn.onclick = function() { run(); };
|
||||
tabArea.appendChild(runBtn);
|
||||
var currentState = editor.saveViewState();
|
||||
|
||||
return tabArea;
|
||||
})();
|
||||
|
||||
var editorContainer = document.createElement('div');
|
||||
editorContainer.className = 'editor-container';
|
||||
var currentModel = editor.getModel();
|
||||
if (currentModel === data.js.model) {
|
||||
data.js.state = currentState;
|
||||
} else if (currentModel === data.css.model) {
|
||||
data.css.state = currentState;
|
||||
} else if (currentModel === data.html.model) {
|
||||
data.html.state = currentState;
|
||||
}
|
||||
|
||||
typingContainer.appendChild(tabArea);
|
||||
typingContainer.appendChild(editorContainer);
|
||||
editor.setModel(data[desiredModelId].model);
|
||||
editor.restoreViewState(data[desiredModelId].state);
|
||||
editor.focus();
|
||||
}
|
||||
|
||||
var runContainer = document.createElement('div');
|
||||
runContainer.className = 'run-container';
|
||||
|
||||
var sampleSwitcher = document.createElement('select');
|
||||
var sampleChapter;
|
||||
PLAY_SAMPLES.forEach(function (sample) {
|
||||
if (!sampleChapter || sampleChapter.label !== sample.chapter) {
|
||||
sampleChapter = document.createElement('optgroup');
|
||||
sampleChapter.label = sample.chapter;
|
||||
sampleSwitcher.appendChild(sampleChapter);
|
||||
}
|
||||
var sampleOption = document.createElement('option');
|
||||
sampleOption.value = sample.id;
|
||||
sampleOption.appendChild(document.createTextNode(sample.name));
|
||||
sampleChapter.appendChild(sampleOption);
|
||||
});
|
||||
sampleSwitcher.className = 'sample-switcher';
|
||||
|
||||
var LOADED_SAMPLES = [];
|
||||
function findLoadedSample(sampleId) {
|
||||
for (var i = 0; i < LOADED_SAMPLES.length; i++) {
|
||||
var sample = LOADED_SAMPLES[i];
|
||||
if (sample.id === sampleId) {
|
||||
return sample;
|
||||
// create the typing side
|
||||
var typingContainer = document.createElement('div');
|
||||
typingContainer.className = 'typingContainer';
|
||||
|
||||
var tabArea = (function () {
|
||||
var tabArea = document.createElement('div');
|
||||
tabArea.className = 'tabArea';
|
||||
|
||||
var jsTab = document.createElement('span');
|
||||
jsTab.className = 'tab active';
|
||||
jsTab.appendChild(document.createTextNode('JavaScript'));
|
||||
jsTab.onclick = function () { changeTab(jsTab, 'js'); };
|
||||
tabArea.appendChild(jsTab);
|
||||
|
||||
var cssTab = document.createElement('span');
|
||||
cssTab.className = 'tab';
|
||||
cssTab.appendChild(document.createTextNode('CSS'));
|
||||
cssTab.onclick = function () { changeTab(cssTab, 'css'); };
|
||||
tabArea.appendChild(cssTab);
|
||||
|
||||
var htmlTab = document.createElement('span');
|
||||
htmlTab.className = 'tab';
|
||||
htmlTab.appendChild(document.createTextNode('HTML'));
|
||||
htmlTab.onclick = function () { changeTab(htmlTab, 'html'); };
|
||||
tabArea.appendChild(htmlTab);
|
||||
|
||||
var runBtn = document.createElement('span');
|
||||
runBtn.className = 'action run';
|
||||
runBtn.appendChild(document.createTextNode('Run'));
|
||||
runBtn.onclick = function () { run(); };
|
||||
tabArea.appendChild(runBtn);
|
||||
|
||||
return tabArea;
|
||||
})();
|
||||
|
||||
var editorContainer = document.createElement('div');
|
||||
editorContainer.className = 'editor-container';
|
||||
|
||||
typingContainer.appendChild(tabArea);
|
||||
typingContainer.appendChild(editorContainer);
|
||||
|
||||
var runContainer = document.createElement('div');
|
||||
runContainer.className = 'run-container';
|
||||
|
||||
var sampleSwitcher = document.createElement('select');
|
||||
var sampleChapter;
|
||||
PLAY_SAMPLES.forEach(function (sample) {
|
||||
if (!sampleChapter || sampleChapter.label !== sample.chapter) {
|
||||
sampleChapter = document.createElement('optgroup');
|
||||
sampleChapter.label = sample.chapter;
|
||||
sampleSwitcher.appendChild(sampleChapter);
|
||||
}
|
||||
var sampleOption = document.createElement('option');
|
||||
sampleOption.value = sample.id;
|
||||
sampleOption.appendChild(document.createTextNode(sample.name));
|
||||
sampleChapter.appendChild(sampleOption);
|
||||
});
|
||||
sampleSwitcher.className = 'sample-switcher';
|
||||
|
||||
var LOADED_SAMPLES = [];
|
||||
function findLoadedSample(sampleId) {
|
||||
for (var i = 0; i < LOADED_SAMPLES.length; i++) {
|
||||
var sample = LOADED_SAMPLES[i];
|
||||
if (sample.id === sampleId) {
|
||||
return sample;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function findSamplePath(sampleId) {
|
||||
for (var i = 0; i < PLAY_SAMPLES.length; i++) {
|
||||
var sample = PLAY_SAMPLES[i];
|
||||
if (sample.id === sampleId) {
|
||||
return sample.path;
|
||||
function findSamplePath(sampleId) {
|
||||
for (var i = 0; i < PLAY_SAMPLES.length; i++) {
|
||||
var sample = PLAY_SAMPLES[i];
|
||||
if (sample.id === sampleId) {
|
||||
return sample.path;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function loadSample(sampleId, callback) {
|
||||
var sample = findLoadedSample(sampleId);
|
||||
if (sample) {
|
||||
return callback(null, sample);
|
||||
}
|
||||
function loadSample(sampleId, callback) {
|
||||
var sample = findLoadedSample(sampleId);
|
||||
if (sample) {
|
||||
return callback(null, sample);
|
||||
}
|
||||
|
||||
var samplePath = findSamplePath(sampleId);
|
||||
if (!samplePath) {
|
||||
return callback(new Error('sample not found'));
|
||||
}
|
||||
var samplePath = findSamplePath(sampleId);
|
||||
if (!samplePath) {
|
||||
return callback(new Error('sample not found'));
|
||||
}
|
||||
|
||||
samplePath = 'playground/new-samples/' + samplePath;
|
||||
|
||||
var js = xhr(samplePath + '/sample.js').then(function(response) { return response.responseText});
|
||||
var css = xhr(samplePath + '/sample.css').then(function(response) { return response.responseText});
|
||||
var html = xhr(samplePath + '/sample.html').then(function(response) { return response.responseText});
|
||||
monaco.Promise.join([js, css, html]).then(function(_) {
|
||||
var js = _[0];
|
||||
var css = _[1];
|
||||
var html = _[2];
|
||||
LOADED_SAMPLES.push({
|
||||
id: sampleId,
|
||||
js: js,
|
||||
css: css,
|
||||
html: html
|
||||
samplePath = 'playground/new-samples/' + samplePath;
|
||||
|
||||
var js = xhr(samplePath + '/sample.js').then(function (response) { return response.responseText });
|
||||
var css = xhr(samplePath + '/sample.css').then(function (response) { return response.responseText });
|
||||
var html = xhr(samplePath + '/sample.html').then(function (response) { return response.responseText });
|
||||
Promise.all([js, css, html]).then(function (_) {
|
||||
var js = _[0];
|
||||
var css = _[1];
|
||||
var html = _[2];
|
||||
LOADED_SAMPLES.push({
|
||||
id: sampleId,
|
||||
js: js,
|
||||
css: css,
|
||||
html: html
|
||||
});
|
||||
return callback(null, findLoadedSample(sampleId));
|
||||
}, function (err) {
|
||||
callback(err, null);
|
||||
});
|
||||
return callback(null, findLoadedSample(sampleId));
|
||||
}, function(err) {
|
||||
callback(err, null);
|
||||
});
|
||||
}
|
||||
|
||||
sampleSwitcher.onchange = function() {
|
||||
var sampleId = sampleSwitcher.options[sampleSwitcher.selectedIndex].value;
|
||||
window.location.hash = sampleId;
|
||||
};
|
||||
|
||||
var playgroundContainer = document.getElementById('playground');
|
||||
}
|
||||
|
||||
layout();
|
||||
window.onresize = layout;
|
||||
sampleSwitcher.onchange = function () {
|
||||
var sampleId = sampleSwitcher.options[sampleSwitcher.selectedIndex].value;
|
||||
window.location.hash = sampleId;
|
||||
};
|
||||
|
||||
playgroundContainer.appendChild(sampleSwitcher);
|
||||
playgroundContainer.appendChild(typingContainer);
|
||||
playgroundContainer.appendChild(runContainer);
|
||||
var playgroundContainer = document.getElementById('playground');
|
||||
|
||||
data.js.model = monaco.editor.createModel('console.log("hi")', 'javascript');
|
||||
data.css.model = monaco.editor.createModel('css', 'css');
|
||||
data.html.model = monaco.editor.createModel('html', 'html');
|
||||
layout();
|
||||
window.onresize = layout;
|
||||
|
||||
editor = monaco.editor.create(editorContainer, {
|
||||
model: data.js.model,
|
||||
minimap: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
playgroundContainer.appendChild(sampleSwitcher);
|
||||
playgroundContainer.appendChild(typingContainer);
|
||||
playgroundContainer.appendChild(runContainer);
|
||||
|
||||
var currentToken = 0;
|
||||
function parseHash(firstTime) {
|
||||
var sampleId = window.location.hash.replace(/^#/, '');
|
||||
if (!sampleId) {
|
||||
sampleId = PLAY_SAMPLES[0].id;
|
||||
}
|
||||
data.js.model = monaco.editor.createModel('console.log("hi")', 'javascript');
|
||||
data.css.model = monaco.editor.createModel('css', 'css');
|
||||
data.html.model = monaco.editor.createModel('html', 'html');
|
||||
|
||||
if (firstTime) {
|
||||
for (var i = 0; i < sampleSwitcher.options.length; i++) {
|
||||
var opt = sampleSwitcher.options[i];
|
||||
if (opt.value === sampleId) {
|
||||
sampleSwitcher.selectedIndex = i;
|
||||
break;
|
||||
}
|
||||
editor = monaco.editor.create(editorContainer, {
|
||||
model: data.js.model,
|
||||
minimap: {
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var myToken = (++currentToken);
|
||||
loadSample(sampleId, function(err, sample) {
|
||||
if (err) {
|
||||
alert('Sample not found! ' + err.message);
|
||||
return;
|
||||
var currentToken = 0;
|
||||
function parseHash(firstTime) {
|
||||
var sampleId = window.location.hash.replace(/^#/, '');
|
||||
if (!sampleId) {
|
||||
sampleId = PLAY_SAMPLES[0].id;
|
||||
}
|
||||
if (myToken !== currentToken) {
|
||||
return;
|
||||
|
||||
if (firstTime) {
|
||||
for (var i = 0; i < sampleSwitcher.options.length; i++) {
|
||||
var opt = sampleSwitcher.options[i];
|
||||
if (opt.value === sampleId) {
|
||||
sampleSwitcher.selectedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
data.js.model.setValue(sample.js);
|
||||
data.html.model.setValue(sample.html);
|
||||
data.css.model.setValue(sample.css);
|
||||
editor.setScrollTop(0);
|
||||
run();
|
||||
});
|
||||
}
|
||||
window.onhashchange = parseHash;
|
||||
parseHash(true);
|
||||
|
||||
function run() {
|
||||
doRun(runContainer);
|
||||
}
|
||||
}
|
||||
var myToken = (++currentToken);
|
||||
loadSample(sampleId, function (err, sample) {
|
||||
if (err) {
|
||||
alert('Sample not found! ' + err.message);
|
||||
return;
|
||||
}
|
||||
if (myToken !== currentToken) {
|
||||
return;
|
||||
}
|
||||
data.js.model.setValue(sample.js);
|
||||
data.html.model.setValue(sample.html);
|
||||
data.css.model.setValue(sample.css);
|
||||
editor.setScrollTop(0);
|
||||
run();
|
||||
});
|
||||
}
|
||||
window.onhashchange = parseHash;
|
||||
parseHash(true);
|
||||
|
||||
var runIframe = null, runIframeHeight = 0;
|
||||
function doRun(runContainer) {
|
||||
if (runIframe) {
|
||||
// Unload old iframe
|
||||
runContainer.removeChild(runIframe);
|
||||
function run() {
|
||||
doRun(runContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// Load new iframe
|
||||
runIframe = document.createElement('iframe');
|
||||
runIframe.id = 'runner';
|
||||
runIframe.src = 'playground/playground-runner.html';
|
||||
runIframe.className = 'run-iframe';
|
||||
runIframe.style.boxSizing = 'border-box';
|
||||
runIframe.style.height = runIframeHeight + 'px';
|
||||
runIframe.style.width = '100%';
|
||||
runIframe.style.border = '1px solid lightgrey';
|
||||
runIframe.frameborder = '0';
|
||||
runContainer.appendChild(runIframe);
|
||||
|
||||
var getLang = function(lang) {
|
||||
return data[lang].model.getValue();
|
||||
};
|
||||
var runIframe = null, runIframeHeight = 0;
|
||||
function doRun(runContainer) {
|
||||
if (runIframe) {
|
||||
// Unload old iframe
|
||||
runContainer.removeChild(runIframe);
|
||||
}
|
||||
|
||||
runIframe.addEventListener('load', function(e) {
|
||||
runIframe.contentWindow.load(getLang('js'), getLang('html'), getLang('css'));
|
||||
});
|
||||
}
|
||||
// Load new iframe
|
||||
runIframe = document.createElement('iframe');
|
||||
runIframe.id = 'runner';
|
||||
runIframe.src = 'playground/playground-runner.html';
|
||||
runIframe.className = 'run-iframe';
|
||||
runIframe.style.boxSizing = 'border-box';
|
||||
runIframe.style.height = runIframeHeight + 'px';
|
||||
runIframe.style.width = '100%';
|
||||
runIframe.style.border = '1px solid lightgrey';
|
||||
runIframe.frameborder = '0';
|
||||
runContainer.appendChild(runIframe);
|
||||
|
||||
var getLang = function (lang) {
|
||||
return data[lang].model.getValue();
|
||||
};
|
||||
|
||||
var preloaded = {};
|
||||
(function() {
|
||||
var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
|
||||
runIframe.addEventListener('load', function (e) {
|
||||
runIframe.contentWindow.load(getLang('js'), getLang('html'), getLang('css'));
|
||||
});
|
||||
}
|
||||
|
||||
elements.forEach(function(el) {
|
||||
var path = el.getAttribute('data-preload');
|
||||
preloaded[path] = el.innerText || el.textContent;
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
})();
|
||||
var preloaded = {};
|
||||
(function () {
|
||||
var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
|
||||
|
||||
function xhr(url) {
|
||||
if (preloaded[url]) {
|
||||
return monaco.Promise.as({
|
||||
responseText: preloaded[url]
|
||||
elements.forEach(function (el) {
|
||||
var path = el.getAttribute('data-preload');
|
||||
preloaded[path] = el.innerText || el.textContent;
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
var req = null;
|
||||
return new monaco.Promise(function(c,e,p) {
|
||||
req = new XMLHttpRequest();
|
||||
req.onreadystatechange = function () {
|
||||
if (req._canceled) { return; }
|
||||
|
||||
if (req.readyState === 4) {
|
||||
if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
|
||||
c(req);
|
||||
} else {
|
||||
e(req);
|
||||
function xhr(url) {
|
||||
if (preloaded[url]) {
|
||||
return Promise.resolve({
|
||||
responseText: preloaded[url]
|
||||
});
|
||||
}
|
||||
|
||||
var req = null;
|
||||
return new Promise(function (c, e) {
|
||||
req = new XMLHttpRequest();
|
||||
req.onreadystatechange = function () {
|
||||
if (req._canceled) { return; }
|
||||
|
||||
if (req.readyState === 4) {
|
||||
if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
|
||||
c(req);
|
||||
} else {
|
||||
e(req);
|
||||
}
|
||||
req.onreadystatechange = function () { };
|
||||
}
|
||||
req.onreadystatechange = function () { };
|
||||
} else {
|
||||
p(req);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
req.open("GET", url, true );
|
||||
req.responseType = "";
|
||||
req.open("GET", url, true);
|
||||
req.responseType = "";
|
||||
|
||||
req.send(null);
|
||||
}, function () {
|
||||
req._canceled = true;
|
||||
req.abort();
|
||||
});
|
||||
}
|
||||
req.send(null);
|
||||
}, function () {
|
||||
req._canceled = true;
|
||||
req.abort();
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
})();
|
||||
|
||||
Loading…
Reference in New Issue