---
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, '&amp;').replace(/</g, '&lt;') : "";
}

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>