mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 15:05:39 +01:00
Optimize loading speed of the website pages
This commit is contained in:
Alex Dima
parent
33f534fbe9
commit
825ed22017
17 changed files with 250 additions and 181 deletions
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
|
|
@ -5,5 +5,6 @@
|
|||
"**/node_modules": true,
|
||||
"**/bower_components": true,
|
||||
"**/release": true
|
||||
}
|
||||
},
|
||||
"typescript.tsdk": "./node_modules/typescript/lib"
|
||||
}
|
||||
78
gulpfile.js
78
gulpfile.js
|
|
@ -8,6 +8,8 @@ var rimraf = require('rimraf');
|
|||
var cp = require('child_process');
|
||||
var httpServer = require('http-server');
|
||||
var typedoc = require("gulp-typedoc");
|
||||
var CleanCSS = require('clean-css');
|
||||
var uncss = require('uncss');
|
||||
|
||||
var WEBSITE_GENERATED_PATH = path.join(__dirname, 'website/playground/new-samples');
|
||||
var MONACO_EDITOR_VERSION = (function() {
|
||||
|
|
@ -247,6 +249,16 @@ function addPluginThirdPartyNotices() {
|
|||
gulp.task('clean-website', function(cb) { rimraf('../monaco-editor-website', { maxBusyTries: 1 }, cb); });
|
||||
gulp.task('website', ['clean-website'], function() {
|
||||
|
||||
function replaceWithRelativeResource(dataPath, contents, regex, callback) {
|
||||
return contents.replace(regex, function(_, m0) {
|
||||
var filePath = path.join(path.dirname(dataPath), m0);
|
||||
return callback(m0, fs.readFileSync(filePath));
|
||||
});
|
||||
}
|
||||
|
||||
var waiting = 0;
|
||||
var done = false;
|
||||
|
||||
return (
|
||||
es.merge(
|
||||
gulp.src([
|
||||
|
|
@ -254,7 +266,7 @@ gulp.task('website', ['clean-website'], function() {
|
|||
'!website/typedoc-theme/**'
|
||||
], { dot: true })
|
||||
.pipe(es.through(function(data) {
|
||||
if (!data.contents || !/\.(html)$/.test(data.path)) {
|
||||
if (!data.contents || !/\.(html)$/.test(data.path) || /new-samples/.test(data.path)) {
|
||||
return this.emit('data', data);
|
||||
}
|
||||
|
||||
|
|
@ -263,13 +275,73 @@ gulp.task('website', ['clean-website'], function() {
|
|||
contents = contents.replace(/{{version}}/g, MONACO_EDITOR_VERSION);
|
||||
// contents = contents.replace('© 2016 Microsoft', '© 2016 Microsoft [' + builtTime + ']');
|
||||
|
||||
data.contents = new Buffer(contents);
|
||||
// Preload xhr contents
|
||||
contents = replaceWithRelativeResource(data.path, contents, /<pre data-preload="([^"]+)".*/g, function(m0, fileContents) {
|
||||
return (
|
||||
'<pre data-preload="' + m0 + '" style="display:none">'
|
||||
+ fileContents.toString('utf8')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
+ '</pre>'
|
||||
);
|
||||
});
|
||||
|
||||
// Inline fork.png
|
||||
contents = replaceWithRelativeResource(data.path, contents, /src="(\.\/fork.png)"/g, function(m0, fileContents) {
|
||||
return (
|
||||
'src="data:image/png;base64,' + fileContents.toString('base64') + '"'
|
||||
);
|
||||
});
|
||||
|
||||
var allCSS = '';
|
||||
var tmpcontents = replaceWithRelativeResource(data.path, contents, /<link data-inline="yes-please" href="([^"]+)".*/g, function(m0, fileContents) {
|
||||
allCSS += fileContents.toString('utf8');
|
||||
return '';
|
||||
});
|
||||
tmpcontents = tmpcontents.replace(/<script.*/g, '');
|
||||
tmpcontents = tmpcontents.replace(/<link.*/g, '');
|
||||
|
||||
waiting++;
|
||||
uncss(tmpcontents, {
|
||||
raw: allCSS,
|
||||
ignore: [/\.alert\b/, /\.alert-error\b/, /\.playground-page\b/]
|
||||
}, function(err, output) {
|
||||
waiting--;
|
||||
|
||||
if (!err) {
|
||||
output = new CleanCSS().minify(output).styles;
|
||||
var isFirst = true;
|
||||
contents = contents.replace(/<link data-inline="yes-please" href="([^"]+)".*/g, function(_, m0) {
|
||||
if (isFirst) {
|
||||
isFirst = false;
|
||||
return '<style>' + output + '</style>';
|
||||
}
|
||||
return '';
|
||||
});
|
||||
}
|
||||
|
||||
// Inline javascript
|
||||
contents = replaceWithRelativeResource(data.path, contents, /<script data-inline="yes-please" src="([^"]+)".*/g, function(m0, fileContents) {
|
||||
return '<script>' + fileContents.toString('utf8') + '</script>';
|
||||
});
|
||||
|
||||
data.contents = new Buffer(contents.split(/\r\n|\r|\n/).join('\n'));
|
||||
this.emit('data', data);
|
||||
|
||||
if (done && waiting === 0) {
|
||||
this.emit('end');
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
}, function() {
|
||||
done = true;
|
||||
if (waiting === 0) {
|
||||
this.emit('end');
|
||||
}
|
||||
}))
|
||||
.pipe(gulp.dest('../monaco-editor-website')),
|
||||
|
||||
// node_modules\.bin\typedoc --mode file --out out src\monaco.d.ts --includeDeclarations --theme default --entryPoint monaco --name "Monaco Editor v0.7.0 API" --readme none --hideGenerator
|
||||
gulp.src('monaco.d.ts')
|
||||
.pipe(typedoc({
|
||||
mode: 'file',
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"url": "https://github.com/Microsoft/monaco-editor"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-css": "^3.4.20",
|
||||
"event-stream": "^3.3.2",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-typedoc": "^2.0.0",
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
"monaco-languages": "0.6.0",
|
||||
"monaco-typescript": "2.0.1",
|
||||
"rimraf": "^2.5.2",
|
||||
"typedoc": "^0.5.0"
|
||||
"typedoc": "^0.5.0",
|
||||
"uncss": "^0.14.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -225,6 +225,21 @@ body > section > .container {
|
|||
|
||||
}
|
||||
|
||||
#gh-link {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
margin:0;
|
||||
z-index: 1000;
|
||||
}
|
||||
@media (min-width: 980px) {
|
||||
#gh-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 980px) {
|
||||
.navbar .nav {
|
||||
float: right;
|
||||
|
|
|
|||
BIN
website/fork.png
Normal file
BIN
website/fork.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9 KiB |
|
|
@ -9,17 +9,20 @@
|
|||
|
||||
<title>Monaco Editor</title>
|
||||
|
||||
<link href="./lib/bootstrap-cosmo.css" rel="stylesheet">
|
||||
<link href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
<link href="./all.css" rel="stylesheet" type="text/css">
|
||||
<link href="./lib/bootstrap-select.min.css" rel="stylesheet" type="text/css">
|
||||
<link data-inline="yes-please" href="./lib/bootstrap-cosmo.css" rel="stylesheet">
|
||||
<link data-inline="yes-please" href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
<link data-inline="yes-please" href="./all.css" rel="stylesheet">
|
||||
<link data-inline="yes-please" href="./index/index.css" rel="stylesheet">
|
||||
|
||||
<link href="./index/index.css" rel="stylesheet" type="text/css">
|
||||
<link data-name="vs/editor/editor.main" rel="stylesheet" href="../release/dev/vs/editor/editor.main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="https://github.com/Microsoft/monaco-editor"><img style="position: fixed; top: 0; right: 0; border: 0; margin:0; z-index: 1000" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
|
||||
|
||||
<pre data-preload="index/samples/sample.typescript.txt"></pre>
|
||||
<pre data-preload="index/samples/diff.lhs.txt"></pre>
|
||||
<pre data-preload="index/samples/diff.rhs.txt"></pre>
|
||||
<a id="gh-link" href="https://github.com/Microsoft/monaco-editor"><img
|
||||
width="149" height="149" alt="Fork me on GitHub" src="./fork.png"/></a>
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
|
|
@ -78,10 +81,10 @@
|
|||
<div class="editor row">
|
||||
<div class="span3">
|
||||
<h4 title="Syntax colorization plus support for errors, warnings, IntelliSense, formatting and outlining">Rich IntelliSense, Validation</h4>
|
||||
<p>TypeScript, JavaScript, CSS, LESS</p>
|
||||
<p>TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML</p>
|
||||
<br>
|
||||
<h4 title="Syntax colorization">Basic Syntax Colorization</h4>
|
||||
<p>HTML, XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Jade, F#, Lua, Powershell,
|
||||
<p>XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Jade, F#, Lua, Powershell,
|
||||
Python, SASS, R, Objective-C</p>
|
||||
<br>
|
||||
<p>Colorizers are implemented using <a href="monarch.html"
|
||||
|
|
@ -151,19 +154,14 @@
|
|||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="./lib/jquery-1.9.1.min.js" type="text/javascript"></script>
|
||||
<script src="./lib/bootstrap.min.js"></script>
|
||||
<script src="./lib/bootstrap-select.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js" integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8=" crossorigin="anonymous"></script>
|
||||
|
||||
<script type="text/javascript" src="../release/dev/vs/loader.js"></script>
|
||||
<script type="text/javascript">
|
||||
require.config({
|
||||
paths: {
|
||||
vs: '../release/dev/vs'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="./index/index.js" type="text/javascript"></script>
|
||||
<script>var require = { paths: { 'vs': '../release/dev/vs' } };</script>
|
||||
<script src="../release/dev/vs/loader.js"></script>
|
||||
<script src="../release/dev/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="../release/dev/vs/editor/editor.main.js"></script>
|
||||
<script data-inline="yes-please" src="./index/index.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -134,52 +134,6 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.try .editor.row .bootstrap-select {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.try .editor.row .bootstrap-select .btn {
|
||||
background: none;
|
||||
color: #555;
|
||||
border: 1px solid #ddd;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.try .editor.row .bootstrap-select .open .btn {
|
||||
background-color: #0072C6;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.try .editor.row .bootstrap-select .open .btn .caret {
|
||||
border-top-color: #FFF;
|
||||
}
|
||||
|
||||
.try .editor.row .bootstrap-select .btn:focus {
|
||||
outline: 0 auto #0072C6 !important;
|
||||
}
|
||||
|
||||
.try .editor.row .bootstrap-select .btn:active,
|
||||
.try .editor.row .bootstrap-select.btn-group.open .dropdown-toggle {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.try .editor.row .bootstrap-select .dropdown-menu > li > a {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.try .editor.row .bootstrap-select .dropdown-menu > li > a:hover {
|
||||
background: none;
|
||||
background-color: #CDE7F9;
|
||||
}
|
||||
|
||||
.try .editor.row .bootstrap-select .dropdown-menu {
|
||||
margin: 0;
|
||||
border-top: 0
|
||||
}
|
||||
|
||||
|
||||
.try .editor .editor-frame {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -248,15 +202,6 @@
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.try .editor > .span9 .row .bootstrap-select {
|
||||
display: block;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.try .editor > .span9 .row .bootstrap-select .btn {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.try .editor h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,25 +18,24 @@ $(document).ready(function() {
|
|||
});
|
||||
})();
|
||||
|
||||
var startModeIndex = 0;
|
||||
for (var i = 0; i < MODES.length; i++) {
|
||||
var o = document.createElement('option');
|
||||
o.textContent = MODES[i].modeId;
|
||||
if (MODES[i].modeId === 'typescript') {
|
||||
startModeIndex = i;
|
||||
}
|
||||
$(".language-picker").append(o);
|
||||
}
|
||||
$(".language-picker")[0].selectedIndex = startModeIndex;
|
||||
loadSample(MODES[startModeIndex]);
|
||||
$(".language-picker").change(function() {
|
||||
loadSample(MODES[this.selectedIndex]);
|
||||
});
|
||||
$('.language-picker').selectpicker({
|
||||
size: 10
|
||||
});
|
||||
loadSample(MODES[0]);
|
||||
|
||||
$(".theme-picker").change(function() {
|
||||
changeTheme(this.selectedIndex);
|
||||
});
|
||||
$('.theme-picker').selectpicker({
|
||||
size: 3
|
||||
});
|
||||
|
||||
loadDiffSample();
|
||||
|
||||
|
|
@ -57,15 +56,37 @@ $(document).ready(function() {
|
|||
};
|
||||
});
|
||||
|
||||
function loadSample(mode) {
|
||||
var preloaded = {};
|
||||
(function() {
|
||||
var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
|
||||
|
||||
elements.forEach(function(el) {
|
||||
var path = el.getAttribute('data-preload');
|
||||
preloaded[path] = el.innerText || el.textContent;
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
})();
|
||||
|
||||
function xhr(url, cb) {
|
||||
if (preloaded[url]) {
|
||||
return cb(null, preloaded[url]);
|
||||
}
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: mode.sampleURL,
|
||||
url: url,
|
||||
dataType: 'text',
|
||||
beforeSend: function() {
|
||||
$('.loading.editor').show();
|
||||
},
|
||||
error: function () {
|
||||
cb(this, null);
|
||||
}
|
||||
}).done(function(data) {
|
||||
cb(null, data);
|
||||
});
|
||||
}
|
||||
|
||||
function loadSample(mode) {
|
||||
$('.loading.editor').show();
|
||||
xhr(mode.sampleURL, function(err, data) {
|
||||
if (err) {
|
||||
if (editor) {
|
||||
if (editor.getModel()) {
|
||||
editor.getModel().dispose();
|
||||
|
|
@ -76,8 +97,9 @@ function loadSample(mode) {
|
|||
$('.loading.editor').fadeOut({ duration: 200 });
|
||||
$('#editor').empty();
|
||||
$('#editor').append('<p class="alert alert-error">Failed to load ' + mode.modeId + ' sample</p>');
|
||||
return;
|
||||
}
|
||||
}).done(function (data) {
|
||||
|
||||
if (!editor) {
|
||||
$('#editor').empty();
|
||||
editor = monaco.editor.create(document.getElementById('editor'), {
|
||||
|
|
@ -92,7 +114,7 @@ function loadSample(mode) {
|
|||
oldModel.dispose();
|
||||
}
|
||||
$('.loading.editor').fadeOut({ duration: 300 });
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function loadDiffSample() {
|
||||
|
|
@ -106,25 +128,20 @@ function loadDiffSample() {
|
|||
|
||||
var lhsData = null, rhsData = null, jsMode = null;
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: 'index/samples/diff.lhs.txt',
|
||||
dataType: 'text',
|
||||
error: onError
|
||||
}).done(function (data) {
|
||||
xhr('index/samples/diff.lhs.txt', function(err, data) {
|
||||
if (err) {
|
||||
return onError();
|
||||
}
|
||||
lhsData = data;
|
||||
onProgress();
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: 'index/samples/diff.rhs.txt',
|
||||
dataType: 'text',
|
||||
error: onError
|
||||
}).done(function (data) {
|
||||
})
|
||||
xhr('index/samples/diff.rhs.txt', function(err, data) {
|
||||
if (err) {
|
||||
return onError();
|
||||
}
|
||||
rhsData = data;
|
||||
onProgress();
|
||||
});
|
||||
})
|
||||
|
||||
function onProgress() {
|
||||
if (lhsData && rhsData) {
|
||||
|
|
|
|||
2
website/lib/bootstrap-cosmo.css
vendored
2
website/lib/bootstrap-cosmo.css
vendored
|
|
@ -1,5 +1,3 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,600,700');
|
||||
|
||||
/*!
|
||||
* Bootstrap v2.3.0
|
||||
*
|
||||
|
|
|
|||
1
website/lib/bootstrap-select.min.css
vendored
1
website/lib/bootstrap-select.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.bootstrap-select.btn-group,.bootstrap-select.btn-group[class*="span"]{float:none;display:inline-block;margin-bottom:10px;margin-left:0}.bootstrap-select{width:220px}.bootstrap-select .btn{width:220px}.bootstrap-select .btn:focus{outline:thin dotted #333!important;outline:5px auto -webkit-focus-ring-color!important;outline-offset:-2px}.bootstrap-select.btn-group .btn .filter-option{overflow:hidden;position:absolute;left:12px;right:25px;text-align:left}.bootstrap-select.btn-group .btn .caret{position:absolute;right:12px}.bootstrap-select.btn-group>.disabled,.bootstrap-select.btn-group .dropdown-menu li.disabled>a{cursor:not-allowed}.bootstrap-select.btn-group[class*="span"] .btn{width:100%}.bootstrap-select.btn-group .dropdown-menu{min-width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.bootstrap-select.btn-group .dropdown-menu dt{display:block;padding:3px 20px;cursor:default}.bootstrap-select.btn-group .div-contain{overflow:hidden}.bootstrap-select.btn-group .dropdown-menu li>a.opt{padding-left:35px}.bootstrap-select.btn-group .dropdown-menu li>a{min-height:20px}.bootstrap-select.btn-group .dropdown-menu li small{padding-left:.5em}.bootstrap-select.btn-group .dropdown-menu li:not(.disabled)>a:hover small{color:#64b1d8;color:rgba(255,255,255,0.4)}.bootstrap-select.btn-group .dropdown-menu li>dt small{font-weight:normal}
|
||||
1
website/lib/bootstrap-select.min.js
vendored
1
website/lib/bootstrap-select.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -9,11 +9,12 @@
|
|||
|
||||
<title>Monaco Editor Monarch</title>
|
||||
|
||||
<link href="./lib/bootstrap-cosmo.css" rel="stylesheet">
|
||||
<link href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
<link href="./all.css" rel="stylesheet" type="text/css">
|
||||
<link data-inline="yes-please" href="./lib/bootstrap-cosmo.css" rel="stylesheet">
|
||||
<link data-inline="yes-please" href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
<link data-inline="yes-please" href="./all.css" rel="stylesheet" type="text/css">
|
||||
<link data-inline="yes-please" href="./monarch/monarch.css" rel="stylesheet" />
|
||||
|
||||
<link rel="stylesheet" href="./monarch/monarch.css" />
|
||||
<link data-name="vs/editor/editor.main" rel="stylesheet" href="../release/dev/vs/editor/editor.main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -4294,17 +4295,14 @@ return {
|
|||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="./lib/jquery-1.9.1.min.js" type="text/javascript"></script>
|
||||
<script src="./lib/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js" integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8=" crossorigin="anonymous"></script>
|
||||
|
||||
<script type="text/javascript" src="../release/dev/vs/loader.js"></script>
|
||||
<script type="text/javascript">
|
||||
require.config({
|
||||
paths: {
|
||||
vs: "../release/dev/vs"
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="./monarch/monarch.js"></script>
|
||||
<script>var require = { paths: { 'vs': '../release/dev/vs' } };</script>
|
||||
<script src="../release/dev/vs/loader.js"></script>
|
||||
<script src="../release/dev/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="../release/dev/vs/editor/editor.main.js"></script>
|
||||
|
||||
<script data-inline="yes-please" src="./monarch/monarch.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -9,15 +9,21 @@
|
|||
|
||||
<title>Monaco Editor Playground</title>
|
||||
|
||||
<link href="./lib/bootstrap-cosmo.css" rel="stylesheet">
|
||||
<link href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
<link href="./all.css" rel="stylesheet" type="text/css">
|
||||
<link data-inline="yes-please" href="./lib/bootstrap-cosmo.css" rel="stylesheet" />
|
||||
<link data-inline="yes-please" href="./lib/bootstrap-responsive.min.css" rel="stylesheet" />
|
||||
<link data-inline="yes-please" href="./all.css" rel="stylesheet" type="text/css" />
|
||||
<link data-inline="yes-please" href="./playground/spinner.css" rel="stylesheet" />
|
||||
<link data-inline="yes-please" href="./playground/playground.css" rel="stylesheet" />
|
||||
|
||||
<link rel="stylesheet" href="./playground/spinner.css" />
|
||||
<link rel="stylesheet" href="./playground/playground.css" />
|
||||
<link data-name="vs/editor/editor.main" rel="stylesheet" href="../release/dev/vs/editor/editor.main.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/Microsoft/monaco-editor"><img style="position: fixed; top: 0; right: 0; border: 0; margin:0; z-index: 1000" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
|
||||
<body class="playground-page">
|
||||
<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.js"></pre>
|
||||
<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.css"></pre>
|
||||
<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.html"></pre>
|
||||
|
||||
<a id="gh-link" href="https://github.com/Microsoft/monaco-editor"><img
|
||||
width="149" height="149" alt="Fork me on GitHub" src="./fork.png"/></a>
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
|
|
@ -65,18 +71,15 @@
|
|||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="./lib/jquery-1.9.1.min.js" type="text/javascript"></script>
|
||||
<script src="./lib/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js" integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8=" crossorigin="anonymous"></script>
|
||||
|
||||
<script type="text/javascript" src="../release/dev/vs/loader.js"></script>
|
||||
<script type="text/javascript">
|
||||
require.config({
|
||||
paths: {
|
||||
vs: "../release/dev/vs"
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="./playground/new-samples/all.js"></script>
|
||||
<script type="text/javascript" src="./playground/playground.js"></script>
|
||||
<script>var require = { paths: { 'vs': '../release/dev/vs' } };</script>
|
||||
<script src="../release/dev/vs/loader.js"></script>
|
||||
<script src="../release/dev/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="../release/dev/vs/editor/editor.main.js"></script>
|
||||
|
||||
<script data-inline="yes-please" src="./playground/new-samples/all.js" type="text/javascript"></script>
|
||||
<script data-inline="yes-please" src="./playground/playground.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,17 +2,22 @@
|
|||
<html style="height:100%">
|
||||
<head>
|
||||
|
||||
<link rel="stylesheet" href="./spinner.css" />
|
||||
<link data-inline="yes-please" href="./spinner.css" rel="stylesheet" />
|
||||
|
||||
<link data-name="vs/editor/editor.main" rel="stylesheet" href="../../release/dev/vs/editor/editor.main.css" />
|
||||
|
||||
<style type="text/css">
|
||||
body { margin: 0; padding: 0; border: 0; }
|
||||
.monaco-editor { overflow: hidden; }
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../release/dev/vs/loader.js"></script>
|
||||
<script type="text/javascript">
|
||||
var geval = eval;
|
||||
<script>var require = { paths: { 'vs': '../../release/dev/vs' } };</script>
|
||||
<script src="../../release/dev/vs/loader.js"></script>
|
||||
<script src="../../release/dev/vs/editor/editor.main.nls.js"></script>
|
||||
<script src="../../release/dev/vs/editor/editor.main.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var receivedCall = null;
|
||||
window.load = function (js, html, css) {
|
||||
receivedCall = {
|
||||
|
|
@ -21,12 +26,21 @@
|
|||
css: css
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
require.config({
|
||||
paths: {
|
||||
vs: "../../release/dev/vs"
|
||||
}
|
||||
});
|
||||
<script type="text/javascript">
|
||||
var geval = eval;
|
||||
|
||||
require(['require', 'vs/editor/editor.main'], function (require) {
|
||||
"use strict";
|
||||
|
|
@ -65,16 +79,5 @@
|
|||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,18 +10,18 @@ select {
|
|||
width: initial;
|
||||
}
|
||||
|
||||
.title {
|
||||
.playground-page .title {
|
||||
font-family: "Segoe UI Light","HelveticaNeue-UltraLight", sans-serif;
|
||||
font-weight: 100;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.tabArea {
|
||||
.playground-page .tabArea {
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
.tab {
|
||||
.playground-page .tab {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -32,11 +32,11 @@ select {
|
|||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
.tab.active {
|
||||
.playground-page .tab.active {
|
||||
color: black;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
.action {
|
||||
.playground-page .action {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -48,10 +48,10 @@ select {
|
|||
float: right;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.action.run {
|
||||
background: url('run.png') no-repeat left center;
|
||||
.playground-page .action.run {
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAE1JREFUOE9jKCsrY6AEU6QZZPHgNeA/0Hn7gdiBUPjg8gLIABjGaxAxBuA1iBQDYAalIXuLFAOweoUYA8gOA4pigegERrRCXOlhGBgAAGmggVf7bEk0AAAAAElFTkSuQmCC') no-repeat left center;
|
||||
}
|
||||
.editor-container {
|
||||
.playground-page .editor-container {
|
||||
border: 1px solid #999;
|
||||
border-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,12 @@ window.onload = function() {
|
|||
' onError: Function;',
|
||||
'};',
|
||||
].join('\n'), 'require.d.ts');
|
||||
});
|
||||
|
||||
var loading = document.getElementById('loading');
|
||||
loading.parentNode.removeChild(loading);
|
||||
load();
|
||||
});
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -333,7 +334,24 @@ function doRun(runContainer) {
|
|||
});
|
||||
}
|
||||
|
||||
var preloaded = {};
|
||||
(function() {
|
||||
var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
|
||||
|
||||
elements.forEach(function(el) {
|
||||
var path = el.getAttribute('data-preload');
|
||||
preloaded[path] = el.innerText || el.textContent;
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
})();
|
||||
|
||||
function xhr(url) {
|
||||
if (preloaded[url]) {
|
||||
return monaco.Promise.as({
|
||||
responseText: preloaded[url]
|
||||
});
|
||||
}
|
||||
|
||||
var req = null;
|
||||
return new monaco.Promise(function(c,e,p) {
|
||||
req = new XMLHttpRequest();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue