Add loading state to editor
This commit is contained in:
David Evans
parent
33410ce064
commit
189730d037
14
editor.htm
14
editor.htm
|
|
@ -25,12 +25,12 @@
|
|||
crossorigin="anonymous"
|
||||
>
|
||||
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="styles/editor.css">
|
||||
|
||||
<script src="scripts/requireConfig.js"></script>
|
||||
|
||||
<script
|
||||
data-main="scripts/main"
|
||||
data-main="scripts/editor"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
|
||||
integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
|
||||
crossorigin="anonymous"
|
||||
|
|
@ -63,7 +63,15 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<noscript>This tool requires Javascript!</noscript>
|
||||
<div id="loader">
|
||||
<h1>Sequence Diagram Online Editor</h1>
|
||||
<p class="loadmsg">Loading…</p>
|
||||
<noscript><p class="noscript">This tool requires Javascript!<p></noscript>
|
||||
<nav>
|
||||
<a href="." target="_blank">Library</a>
|
||||
<a href="https://github.com/davidje13/SequenceDiagram" target="_blank">GitHub</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -222,12 +222,26 @@
|
|||
preview: 'begin A\nterminators box',
|
||||
},
|
||||
];
|
||||
|
||||
const loader = document.getElementById('loader');
|
||||
const nav = loader.getElementsByTagName('nav')[0];
|
||||
const linkElements = nav.getElementsByTagName('a');
|
||||
const links = [];
|
||||
for(let i = 0; i < linkElements.length; ++ i) {
|
||||
links.push({
|
||||
label: linkElements[i].innerText,
|
||||
href: linkElements[i].getAttribute('href'),
|
||||
});
|
||||
}
|
||||
|
||||
const ui = new Interface({
|
||||
defaultCode,
|
||||
sequenceDiagram: new SequenceDiagram(),
|
||||
library,
|
||||
links,
|
||||
localStorage: 'src',
|
||||
});
|
||||
loader.parentNode.removeChild(loader);
|
||||
ui.build(document.body);
|
||||
});
|
||||
})());
|
||||
|
|
@ -46,12 +46,14 @@ define([
|
|||
sequenceDiagram,
|
||||
defaultCode = '',
|
||||
localStorage = '',
|
||||
library = null,
|
||||
library = [],
|
||||
links = [],
|
||||
}) {
|
||||
this.diagram = sequenceDiagram;
|
||||
this.defaultCode = defaultCode;
|
||||
this.localStorage = localStorage;
|
||||
this.library = library;
|
||||
this.links = links;
|
||||
this.minScale = 1.5;
|
||||
|
||||
this.diagram.registerCodeMirrorMode(CodeMirror);
|
||||
|
|
@ -70,21 +72,15 @@ define([
|
|||
}
|
||||
|
||||
buildOptionsLinks() {
|
||||
const libLink = makeNode('a', {
|
||||
'href': '.',
|
||||
'target': '_blank',
|
||||
});
|
||||
libLink.appendChild(makeText('Library'));
|
||||
|
||||
const githubLink = makeNode('a', {
|
||||
'href': 'https://github.com/davidje13/SequenceDiagram',
|
||||
'target': '_blank',
|
||||
});
|
||||
githubLink.appendChild(makeText('GitHub'));
|
||||
|
||||
const options = makeNode('div', {'class': 'options links'});
|
||||
options.appendChild(libLink);
|
||||
options.appendChild(githubLink);
|
||||
this.links.forEach((link) => {
|
||||
const linkNode = makeNode('a', {
|
||||
'href': link.href,
|
||||
'target': '_blank',
|
||||
});
|
||||
linkNode.appendChild(makeText(link.label));
|
||||
options.appendChild(linkNode);
|
||||
});
|
||||
return options;
|
||||
}
|
||||
|
||||
|
|
@ -259,7 +255,7 @@ define([
|
|||
const codePane = makeNode('div', {'class': 'pane-code'});
|
||||
container.appendChild(codePane);
|
||||
|
||||
if(this.library !== null) {
|
||||
if(this.library.length > 0) {
|
||||
const libPane = makeNode('div', {'class': 'pane-library'});
|
||||
const libPaneScroller = makeNode('div', {
|
||||
'class': 'pane-library-scroller',
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ define(['jshintConfig', 'specs'], (jshintConfig) => {
|
|||
// Thanks, https://opensoul.org/2011/02/20/jslint-and-jasmine/
|
||||
|
||||
const extraFiles = [
|
||||
'scripts/main.js',
|
||||
'scripts/editor.js',
|
||||
'scripts/requireConfig.js',
|
||||
'scripts/readmeImages.js',
|
||||
'scripts/standalone.js',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,39 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: 1em sans-serif;
|
||||
}
|
||||
|
||||
#loader {
|
||||
margin: 140px 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#loader h1 {
|
||||
font: 2em sans-serif;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
#loader p {
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
#loader p.noscript {
|
||||
position: relative;
|
||||
top: -2.3em;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
#loader nav {
|
||||
margin: 80px 0 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#loader nav a {
|
||||
display: inline-block;
|
||||
margin: 0 10px 10px;
|
||||
}
|
||||
|
||||
.pane-code {
|
||||
|
|
@ -173,7 +206,6 @@ html, body {
|
|||
.options {
|
||||
position: absolute;
|
||||
background: #FFFFFF;
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
Loading…
Reference in New Issue