|
|
|
@ -1,12 +1,12 @@
|
|
|
|
|
/// <reference path="../../release/monaco.d.ts" />
|
|
|
|
|
|
|
|
|
|
(function() {
|
|
|
|
|
(function () {
|
|
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
require(['vs/editor/editor.main'], function() {
|
|
|
|
|
xhr('playground/monaco.d.ts.txt').then(function(response) {
|
|
|
|
|
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: {',
|
|
|
|
@ -24,10 +24,10 @@ window.onload = function() {
|
|
|
|
|
load();
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var editor = null;
|
|
|
|
|
var data = {
|
|
|
|
|
var editor = null;
|
|
|
|
|
var data = {
|
|
|
|
|
js: {
|
|
|
|
|
model: null,
|
|
|
|
|
state: null
|
|
|
|
@ -40,9 +40,9 @@ var data = {
|
|
|
|
|
model: null,
|
|
|
|
|
state: null
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function load() {
|
|
|
|
|
function load() {
|
|
|
|
|
|
|
|
|
|
function layout() {
|
|
|
|
|
var GLOBAL_PADDING = 20;
|
|
|
|
@ -135,32 +135,32 @@ function load() {
|
|
|
|
|
var typingContainer = document.createElement('div');
|
|
|
|
|
typingContainer.className = 'typingContainer';
|
|
|
|
|
|
|
|
|
|
var tabArea = (function() {
|
|
|
|
|
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'); };
|
|
|
|
|
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'); };
|
|
|
|
|
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'); };
|
|
|
|
|
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(); };
|
|
|
|
|
runBtn.onclick = function () { run(); };
|
|
|
|
|
tabArea.appendChild(runBtn);
|
|
|
|
|
|
|
|
|
|
return tabArea;
|
|
|
|
@ -224,10 +224,10 @@ function load() {
|
|
|
|
|
|
|
|
|
|
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 = 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];
|
|
|
|
@ -238,12 +238,12 @@ function load() {
|
|
|
|
|
html: html
|
|
|
|
|
});
|
|
|
|
|
return callback(null, findLoadedSample(sampleId));
|
|
|
|
|
}, function(err) {
|
|
|
|
|
}, function (err) {
|
|
|
|
|
callback(err, null);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
sampleSwitcher.onchange = function() {
|
|
|
|
|
sampleSwitcher.onchange = function () {
|
|
|
|
|
var sampleId = sampleSwitcher.options[sampleSwitcher.selectedIndex].value;
|
|
|
|
|
window.location.hash = sampleId;
|
|
|
|
|
};
|
|
|
|
@ -286,7 +286,7 @@ function load() {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var myToken = (++currentToken);
|
|
|
|
|
loadSample(sampleId, function(err, sample) {
|
|
|
|
|
loadSample(sampleId, function (err, sample) {
|
|
|
|
|
if (err) {
|
|
|
|
|
alert('Sample not found! ' + err.message);
|
|
|
|
|
return;
|
|
|
|
@ -307,10 +307,10 @@ function load() {
|
|
|
|
|
function run() {
|
|
|
|
|
doRun(runContainer);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var runIframe = null, runIframeHeight = 0;
|
|
|
|
|
function doRun(runContainer) {
|
|
|
|
|
var runIframe = null, runIframeHeight = 0;
|
|
|
|
|
function doRun(runContainer) {
|
|
|
|
|
if (runIframe) {
|
|
|
|
|
// Unload old iframe
|
|
|
|
|
runContainer.removeChild(runIframe);
|
|
|
|
@ -328,35 +328,35 @@ function doRun(runContainer) {
|
|
|
|
|
runIframe.frameborder = '0';
|
|
|
|
|
runContainer.appendChild(runIframe);
|
|
|
|
|
|
|
|
|
|
var getLang = function(lang) {
|
|
|
|
|
var getLang = function (lang) {
|
|
|
|
|
return data[lang].model.getValue();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
runIframe.addEventListener('load', function(e) {
|
|
|
|
|
runIframe.addEventListener('load', function (e) {
|
|
|
|
|
runIframe.contentWindow.load(getLang('js'), getLang('html'), getLang('css'));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var preloaded = {};
|
|
|
|
|
(function() {
|
|
|
|
|
var preloaded = {};
|
|
|
|
|
(function () {
|
|
|
|
|
var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
|
|
|
|
|
|
|
|
|
|
elements.forEach(function(el) {
|
|
|
|
|
elements.forEach(function (el) {
|
|
|
|
|
var path = el.getAttribute('data-preload');
|
|
|
|
|
preloaded[path] = el.innerText || el.textContent;
|
|
|
|
|
el.parentNode.removeChild(el);
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
function xhr(url) {
|
|
|
|
|
function xhr(url) {
|
|
|
|
|
if (preloaded[url]) {
|
|
|
|
|
return monaco.Promise.as({
|
|
|
|
|
return Promise.resolve({
|
|
|
|
|
responseText: preloaded[url]
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var req = null;
|
|
|
|
|
return new monaco.Promise(function(c,e,p) {
|
|
|
|
|
return new Promise(function (c, e) {
|
|
|
|
|
req = new XMLHttpRequest();
|
|
|
|
|
req.onreadystatechange = function () {
|
|
|
|
|
if (req._canceled) { return; }
|
|
|
|
@ -368,12 +368,10 @@ function xhr(url) {
|
|
|
|
|
e(req);
|
|
|
|
|
}
|
|
|
|
|
req.onreadystatechange = function () { };
|
|
|
|
|
} else {
|
|
|
|
|
p(req);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
req.open("GET", url, true );
|
|
|
|
|
req.open("GET", url, true);
|
|
|
|
|
req.responseType = "";
|
|
|
|
|
|
|
|
|
|
req.send(null);
|
|
|
|
@ -381,6 +379,6 @@ function xhr(url) {
|
|
|
|
|
req._canceled = true;
|
|
|
|
|
req.abort();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})();
|