You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
8.7 KiB
HTML
315 lines
8.7 KiB
HTML
---
|
|
layout: default
|
|
title: Compare Markdown Implementations
|
|
---
|
|
<div class="row">
|
|
<div class="twelve columns">
|
|
<textarea id="markdown" class="u-full-width" placeholder="Type a markdown text..." autofocus></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="twelve columns">
|
|
<button class="button-primary" onclick="sendRequestFromInput()">Convert <kbd>CTRL</kbd>+<kbd>ENTER</kbd></button>
|
|
<label style="display: inline-block;">
|
|
<input id="normalize" type="checkbox" checked onchange="displayResults()">
|
|
<span class="label-body">Normalize</span>
|
|
</label>
|
|
<span id="query-spin" class="spin" style="display: none">{% include spin.svg %}</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div id="results" class="twelve columns">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="twelve columns" style="margin-top: 10%">
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function($) {
|
|
$.QueryString = (function(a) {
|
|
if (a == "") return {};
|
|
var b = {};
|
|
for (var i = 0; i < a.length; ++i)
|
|
{
|
|
var p=a[i].split('=');
|
|
if (p.length != 2) continue;
|
|
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
|
|
}
|
|
return b;
|
|
})(document.location.search.substr(1).split('&'))
|
|
})(jQuery);
|
|
|
|
function escapeHtml(s)
|
|
{
|
|
return s ? s.replace(/&/g, '&').replace(/</g, '<') : "";
|
|
}
|
|
|
|
globalResults = [];
|
|
|
|
function displayResults() {
|
|
var mapResults = {};
|
|
var groupResults = [];
|
|
|
|
var normalized = $('#normalize').is(':checked');
|
|
|
|
// We keep globalResults as a local var as globalResults may change during a display
|
|
var localResults = globalResults;
|
|
for (var i = 0; i < localResults.length; i++) {
|
|
var json = localResults[i];
|
|
|
|
// Get the text (normalized or not, error or not)
|
|
var text = json.html;
|
|
var text_safe = json.html_safe;
|
|
if (json.error)
|
|
{
|
|
text = json.error;
|
|
text_safe = json.error;
|
|
}
|
|
else if (normalized)
|
|
{
|
|
text = json.html_clean;
|
|
}
|
|
text = (text ? text : "").trim();
|
|
text_safe = (text_safe ? text_safe : "").trim();
|
|
|
|
var resultsPerGroup = mapResults[text]
|
|
if (!resultsPerGroup)
|
|
{
|
|
resultsPerGroup = { id: groupResults.length, text: text, text_safe: text_safe, error: json.error, elements:[]};
|
|
mapResults[text] = resultsPerGroup;
|
|
groupResults.push(resultsPerGroup)
|
|
}
|
|
resultsPerGroup.elements.push(json);
|
|
}
|
|
|
|
var sortable = [];
|
|
for (var i = 0; i < groupResults.length; i++) {
|
|
var group = groupResults[i];
|
|
sortable.push([group, group.elements.length])
|
|
}
|
|
sortable.sort(function(a, b) {
|
|
return b[1] - a[1]
|
|
});
|
|
|
|
$('#results').html("");
|
|
|
|
for (var i = 0; i < sortable.length; i++) {
|
|
var group = sortable[i][0];
|
|
var groupHtml = $("<div>", {
|
|
id: "json-group-" + group.id,
|
|
class: "twelve columns"
|
|
});
|
|
|
|
var groupContentHeaderHtml = $("<div>", {
|
|
class: "row"
|
|
});
|
|
groupHtml.append(groupContentHeaderHtml);
|
|
|
|
var implem = "";
|
|
if (group.elements.length > 0) {
|
|
implem = '<span class="heading-info"><code>' + group.elements.length + '</code> implementation' + (group.elements.length === 1 ? '' : 's') + '</span>';
|
|
}
|
|
groupContentHeaderHtml.append($('<div class="twelve columns result"><h4>Results ' + implem + '<code class="result-order">#' + i + '</code></h4></div>'));
|
|
|
|
var groupContentBodyHtml = $("<div>", {class: "row"});
|
|
groupHtml.append(groupContentBodyHtml);
|
|
$('#results').append(groupHtml);
|
|
|
|
var groupNames = $("<div>", {class: "four columns result-names"});
|
|
|
|
group.elements.sort(function(a, b) {
|
|
return (a.name + a.version).localeCompare(b.name + b.version);
|
|
});
|
|
|
|
// output names
|
|
for (var j = 0; j < group.elements.length; j++) {
|
|
var json = group.elements[j];
|
|
groupNames.append($("<p><a href='" + json.repo + "' target='_blank'>" + escapeHtml(json.name) + "</a> " + escapeHtml(json.version) + "<code class='result-lang'>" + json.lang + "</code>" + (json.cmark?" <span class='cmark' title='CommonMark Compliant'></span>" : "") + "</p>"));
|
|
}
|
|
groupContentBodyHtml.append(groupNames);
|
|
|
|
// output results
|
|
var groupResult = $('<div class="eight columns"></div>');
|
|
groupContentBodyHtml.append(groupResult);
|
|
if (group.text === '')
|
|
{
|
|
groupResult.append(getInfoDiv("Warning, result is empty", "warning"));
|
|
}
|
|
else if (group.error)
|
|
{
|
|
groupResult.append(getInfoDiv(group.text, "error"));
|
|
}
|
|
else
|
|
{
|
|
var preElement = $('<pre class="language-html"></pre>')
|
|
var codeElement = $('<code class="language-html line-numbers">' + escapeHtml(group.text) + "</code><");
|
|
preElement.append(codeElement);
|
|
groupResult.append(preElement);
|
|
groupResult.append($('<div class="preview markdown-body">' + group.text_safe + '</div>'))
|
|
Prism.highlightElement(codeElement[0]);
|
|
}
|
|
}
|
|
}
|
|
|
|
function getInfoDiv(message, type)
|
|
{
|
|
return $("<div class='result-" + type +"'><p>" + message + "</p></div>");
|
|
}
|
|
|
|
xhrid = 0;
|
|
|
|
|
|
function clearResults()
|
|
{
|
|
// Clears the actual results
|
|
globalResults = [];
|
|
$('#results').html("");
|
|
}
|
|
|
|
function sendRequestFromInput()
|
|
{
|
|
sendRequest($('#markdown').val(), true);
|
|
}
|
|
|
|
function sendRequest(markdownText, shouldPushHistory)
|
|
{
|
|
clearResults();
|
|
|
|
// Update browser query
|
|
if (!markdownText || markdownText === '')
|
|
{
|
|
$('#markdown').val('');
|
|
if (shouldPushHistory || markdownText === '')
|
|
{
|
|
history.pushState(markdownText, '', '/');
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Update the input box
|
|
if ($('#markdown').val() != markdownText)
|
|
{
|
|
$('#markdown').val(markdownText);
|
|
}
|
|
if (shouldPushHistory)
|
|
{
|
|
history.pushState(markdownText, '', "?" + $.param({text: markdownText}));
|
|
}
|
|
|
|
var xhr = new XMLHttpRequest()
|
|
$('#query-spin').show();
|
|
xhr.timeout = 30000;
|
|
xhr.open("GET", "https://babelmark.azurewebsites.net/api/get?text=" + encodeURIComponent(markdownText), true)
|
|
xhrid++;
|
|
var xhrid_copy = xhrid;
|
|
|
|
xhr.onload = function() {
|
|
$('#query-spin').hide();
|
|
}
|
|
|
|
xhr.onprogress = function () {
|
|
if (xhr.readyState != 2 && xhr.readyState != 3 && xhr.readyState != 4)
|
|
return;
|
|
if (xhr.readyState == 3 && xhr.status != 200)
|
|
return;
|
|
|
|
// If we have already another request going on, don't do anything, not super reliable
|
|
if (xhrid_copy != xhrid)
|
|
{
|
|
return;
|
|
}
|
|
|
|
// Because I haven't been able to find a correct way to seek into the correct
|
|
// chunk position (unreliable), we reparse all results from the beginning
|
|
// This is not a big issue, as we have to re-display all of them anyway
|
|
|
|
// Accumulate results locally
|
|
var localResults = [];
|
|
var slice = xhr.responseText;
|
|
var textResults = slice.split("\n\n");
|
|
for(var i = 0; i < textResults.length; i++)
|
|
{
|
|
var jsonText = textResults[i].trim();
|
|
if (jsonText === "")
|
|
{
|
|
continue;
|
|
}
|
|
var json = JSON.parse(jsonText);
|
|
localResults.push(json);
|
|
}
|
|
|
|
// Once we are done, replace globalResults once
|
|
globalResults = localResults;
|
|
displayResults();
|
|
};
|
|
|
|
xhr.onerror = function()
|
|
{
|
|
// If we have already another request going on, don't do anything, not super reliable
|
|
if (xhrid_copy != xhrid)
|
|
{
|
|
return;
|
|
}
|
|
var divRow = $("<div>", {class: "row"});
|
|
var divColumns = $("<div>", {class: "twelve columns"});
|
|
divRow.append(divColumns);
|
|
divColumns.append(getInfoDiv("An unexpected error occured when trying to contact babelmark-proxy. Reason: <strong>" + escapeHtml(xhr.responseText ? xhr.responseText : (xhr.status === 0 ? "timeout" : "unknown" )) + "</strong>, Error status: " + escapeHtml('' + xhr.status), "error"));
|
|
$('#results').append(divRow);
|
|
$('#query-spin').hide();
|
|
};
|
|
|
|
xhr.ontimeout = function()
|
|
{
|
|
// If we have already another request going on, don't do anything, not super reliable
|
|
if (xhrid_copy != xhrid)
|
|
{
|
|
return;
|
|
}
|
|
var divRow = $("<div>", {class: "row"});
|
|
var divColumns = $("<div>", {class: "twelve columns"});
|
|
divRow.append(divColumns);
|
|
divColumns.append(getInfoDiv("The request has timeout", "warning"));
|
|
$('#results').append(divRow);
|
|
$('#query-spin').hide();
|
|
};
|
|
|
|
xhr.onabort = function()
|
|
{
|
|
// If we have already another request going on, don't do anything, not super reliable
|
|
if (xhrid_copy != xhrid)
|
|
{
|
|
return;
|
|
}
|
|
$('#query-spin').hide();
|
|
};
|
|
|
|
xhr.send()
|
|
|
|
// jsonpipe.flow('http://localhost:55312/api/get?test=xxx', {
|
|
// "success": function(data) {
|
|
// console.log(data);
|
|
// $('#results').append("<p>" + data.id + "</p>");
|
|
// }
|
|
// });
|
|
}
|
|
|
|
window.addEventListener('popstate', function(event) {
|
|
sendRequest(event.state, false);
|
|
}, false);
|
|
|
|
$( document ).ready(function() {
|
|
sendRequest($.QueryString.text, false);
|
|
|
|
$('#markdown').keydown(function (e) {
|
|
if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) {
|
|
sendRequestFromInput();
|
|
}
|
|
});
|
|
});
|
|
|
|
//var simplemde = new SimpleMDE({ element: document.getElementById("markdown"), spellChecker: false });
|
|
</script>
|