yaroslav
/
SequenceDiagram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add loading state to editor

This commit is contained in:
David Evans 2017-11-25 13:26:57 +00:00
parent 33410ce064
commit 189730d037
5 changed files with 71 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
editor.htm
View File

@ -25,12 +25,12 @@
crossorigin="anonymous" crossorigin="anonymous"
> >
<link rel="stylesheet" href="styles/main.css"> <link rel="stylesheet" href="styles/editor.css">
<script src="scripts/requireConfig.js"></script> <script src="scripts/requireConfig.js"></script>
<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" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk=" integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
crossorigin="anonymous" crossorigin="anonymous"
@ -63,7 +63,15 @@
</head> </head>
<body> <body>
<noscript>This tool requires Javascript!</noscript> <div id="loader">
<h1>Sequence Diagram Online Editor</h1>
<p class="loadmsg">Loading&hellip;</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> </body>
</html> </html>

14
scripts/main.js → scripts/editor.js
View File

@ -222,12 +222,26 @@
preview: 'begin A\nterminators box', 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({ const ui = new Interface({
defaultCode, defaultCode,
sequenceDiagram: new SequenceDiagram(), sequenceDiagram: new SequenceDiagram(),
library, library,
links,
localStorage: 'src', localStorage: 'src',
}); });
loader.parentNode.removeChild(loader);
ui.build(document.body); ui.build(document.body);
}); });
})()); })());

28
scripts/interface/Interface.js
View File

@ -46,12 +46,14 @@ define([
sequenceDiagram, sequenceDiagram,
defaultCode = '', defaultCode = '',
localStorage = '', localStorage = '',
library = null, library = [],
links = [],
}) { }) {
this.diagram = sequenceDiagram; this.diagram = sequenceDiagram;
this.defaultCode = defaultCode; this.defaultCode = defaultCode;
this.localStorage = localStorage; this.localStorage = localStorage;
this.library = library; this.library = library;
this.links = links;
this.minScale = 1.5; this.minScale = 1.5;
this.diagram.registerCodeMirrorMode(CodeMirror); this.diagram.registerCodeMirrorMode(CodeMirror);
@ -70,21 +72,15 @@ define([
} }
buildOptionsLinks() { 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'}); const options = makeNode('div', {'class': 'options links'});
options.appendChild(libLink); this.links.forEach((link) => {
options.appendChild(githubLink); const linkNode = makeNode('a', {
'href': link.href,
'target': '_blank',
});
linkNode.appendChild(makeText(link.label));
options.appendChild(linkNode);
});
return options; return options;
} }
@ -259,7 +255,7 @@ define([
const codePane = makeNode('div', {'class': 'pane-code'}); const codePane = makeNode('div', {'class': 'pane-code'});
container.appendChild(codePane); container.appendChild(codePane);
if(this.library !== null) { if(this.library.length > 0) {
const libPane = makeNode('div', {'class': 'pane-library'}); const libPane = makeNode('div', {'class': 'pane-library'});
const libPaneScroller = makeNode('div', { const libPaneScroller = makeNode('div', {
'class': 'pane-library-scroller', 'class': 'pane-library-scroller',

2
scripts/tester/jshintRunner.js
View File

@ -6,7 +6,7 @@ define(['jshintConfig', 'specs'], (jshintConfig) => {
// Thanks, https://opensoul.org/2011/02/20/jslint-and-jasmine/ // Thanks, https://opensoul.org/2011/02/20/jslint-and-jasmine/
const extraFiles = [ const extraFiles = [
'scripts/main.js', 'scripts/editor.js',
'scripts/requireConfig.js', 'scripts/requireConfig.js',
'scripts/readmeImages.js', 'scripts/readmeImages.js',
'scripts/standalone.js', 'scripts/standalone.js',

34
styles/main.css → styles/editor.css
View File

@ -1,6 +1,39 @@
html, body { html, body {
margin: 0; margin: 0;
padding: 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 { .pane-code {
@ -173,7 +206,6 @@ html, body {
.options { .options {
position: absolute; position: absolute;
background: #FFFFFF; background: #FFFFFF;
font-family: sans-serif;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
} }