-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
171 lines (149 loc) · 8.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vsdoc-2-md</title>
<!--<link rel="icon" href="favicon.ico">-->
<link rel="stylesheet" href="./vendor/normalize.css">
<link rel="stylesheet" href="./vendor/github-markdown.css">
<link rel="stylesheet" href="./style.css">
</head>
<body class="viewport">
<!-- File load -->
<section id="dropzone-container" class="dropzone-container initial">
<section id="dropzone" class="dropzone initial"
ondragenter="onDragEnterDropzone(event, this)"
ondragover="onDragOverDropzone(event)"
ondragleave="onDragLeaveDropzone(event, this)"
ondrop="onDragLeaveDropzone(event, this); onDropToDropzone(event)"
onclick="onClickDropzone(event)">
<img src="./img/loading.gif" alt="Loading" class="transparent" width="48" height="48">
Drag & drop Visual Studio XML documentation file here or click to browse.
<img id="loading-indicator" src="./img/loading.gif" alt="Loading" width="48" height="48" class="transparent">
</section>
<input type="file" accept=".xml" id="dropzone-dialog" name="dropzone-dialog" class="hide" onchange="onLoadDialogFile(event)" />
</section>
<!-- Markdown editor and preview -->
<section class="content-section-container">
<section class="content-section">
<header class="content-header">
MARKDOWN
<button class="button" type="button" onclick="onCopyToClipboard()">
COPY TO CLIPBOARD
</button>
</header>
<section class="content">
<textarea id="markdown-editor" class="markdown-editor" spellcheck="false"
oninput="onChangeMarkdown()"
onscroll="onScrollMarkdownEditor()">
</textarea>
</section>
</section>
<section class="content-section preview">
<header class="content-header">PREVIEW</header>
<section class="content markdown-preview markdown-body" id="markdown-preview"></section>
</section>
</section>
<!-- Fork me on GitHub -->
<a href="https://github.com/discosultan/vsdoc-2-md" class="github-corner"><svg width="64" height="64" viewBox="0 0 250 250" style="fill:#7070FF; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- Error curtain -->
<section id="error-curtain" class="error-curtain error-curtain--closed">
<p>Ops, something went wrong! ^^</p>
<p>Please consider <a href="https://github.com/discosultan/vsdoc-2-md/issues">opening an issue on GitHub</a>.</p>
<textarea id="error-curtain-content" class="error-curtain-content" spellcheck="false"></textarea>
<button type="button" class="button-dark" onclick="onCloseErrorCurtain()">CLOSE</button>
</section>
<script src="./vendor/marked.min.js"></script>
<script src="./convert.js"></script>
<script>
/* Get DOM element references */
var dropzoneContainer = document.getElementById('dropzone-container');
var dropzone = document.getElementById('dropzone');
var dropzoneDialog = document.getElementById('dropzone-dialog');
var markdownEditor = document.getElementById('markdown-editor');
var markdownPreview = document.getElementById('markdown-preview');
var loadingIndicator = document.getElementById('loading-indicator');
var errorCurtain = document.getElementById('error-curtain');
var errorCurtainContent = document.getElementById('error-curtain-content');
/* Event handlers */
function onDragEnterDropzone(evt, elem) {
evt.dataTransfer.dropEffect = 'copy';
elem.classList.add('hover');
}
function onDragOverDropzone(evt) {
evt.preventDefault();
}
function onDragLeaveDropzone(evt, elem) {
elem.classList.remove('hover');
}
function onClickDropzone(evt) {
if (evt.which === 1) { // Left click.
dropzoneDialog.click();
}
}
function onDropToDropzone(evt) {
evt.preventDefault();
var file = evt.dataTransfer.files[0];
loadFile(file);
}
function onLoadDialogFile(evt) {
var files = evt.target.files;
if (files.length > 0) {
loadFile(files[0]);
}
}
function loadFile(file) {
loadingIndicator.classList.remove('transparent');
var reader = new FileReader();
reader.onload = function() {
try {
markdownEditor.value = Convert.vsdocToMarkdown(this.result);
onChangeMarkdown();
dropzoneContainer.classList.remove('initial');
dropzone.classList.remove('initial');
dropzone.innerHTML = file.name;
markdownEditor.scrollTop = 0;
markdownPreview.scrollTop = 0;
} catch (err) {
handleError(err);
}
loadingIndicator.classList.add('transparent');
}
try {
reader.readAsText(file);
} catch (err) {
handleError(err);
}
}
function onChangeMarkdown() {
try {
markdownPreview.innerHTML = Convert.markdownToHtml(markdownEditor.value);
} catch (err) {
handleError(err);
}
}
function handleError(err) {
if (console && console.error) console.error(err);
errorCurtain.classList.remove('error-curtain--closed');
errorCurtainContent.value = err.stack;
}
function onScrollMarkdownEditor() {
var scrollProgress = markdownEditor.scrollTop / (markdownEditor.scrollHeight - markdownEditor.offsetHeight);
markdownPreview.scrollTop = (markdownPreview.scrollHeight - markdownPreview.offsetHeight) * scrollProgress;
}
function onCopyToClipboard() {
// Select all the text in the editor.
markdownEditor.select();
// Execute 'copy' command.
var success = document.execCommand('copy');
// Deselect all the text in the editor.
window.getSelection().removeAllRanges(); // Does not work in IE11 nor Firefox!
// markdownEditor.selectionEnd = 0; // Jumps to top in IE11 and Firefox!
}
function onCloseErrorCurtain() {
errorCurtain.classList.add('error-curtain--closed');
}
</script>
</body>
</html>