Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
138 lines (109 sloc) 5.99 KB
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<!--
a version of
https://github.com/bramp/js-sequence-diagrams/blob/master/test/test.html
to support exploratory testing
removes any risk of the editor interfering with the library
records results so you can save the page as a record of your testing
Note:
- Only Firefox and Chrome seem to keep the history record when you 'save' the html page.
- Haven't used any JS libraries other than those mandatory for sequence-diagram so may not
be fully cross browser compliant - have used on Firefox 39, IE 11 and Chrome 43.0.2357.132m
- Use of querySelector limits backwards compatibility in browser,
but I think the browsers that don't support querySelector also do not support svg
20140714
* fixed bug that prevented diagram text being shown on firefox by using innerHTML instead of innerTEXT,
* removed id's from copied table which was causing rendering issues in Firefox
* cleared all table contents prior to re-drawing: clear, then draw
* removed unused template div
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
</head>
<textarea id="language" rows="10" cols="50"></textarea>
<p id ="error"></p>
<button id="parse" type="button">Render it</button>
<table id="result" border="1">
<tr>
<td>
<div id="diagramsimple"></div>
</td>
<td>
<div id="diagramhand"></div>
</td>
</tr>
</table>
<hr/>
<h1>History</h1>
<div id='examples'>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
<!--
is JQuery actually optional?
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<!--
<script src="../build/diagram-grammar.js"></script>
<script src="../fonts/daniel/daniel_700.font.js"></script>
<script src="../src/sequence-diagram.js"></script>
<script src="../src/jquery-plugin.js"></script>
-->
<!--script src="../build/sequence-diagram.js"></script-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>
<script>
document.getElementById("parse").onclick = function() {
try {
document.getElementById('error').innerHTML='';
var theText = document.getElementById('language').value;
console.log(theText);
//var theText = $('#language').val();
var diagram = Diagram.parse(theText);
console.log(diagram);
// clear
document.getElementById('diagramsimple').innerHTML='';
document.getElementById('diagramhand').innerHTML='';
// draw
diagram.drawSVG('diagramsimple', {theme: 'simple'});
diagram.drawSVG('diagramhand', {theme: 'hand'});
// document this in the history
var examples = document.getElementById('examples');
var theDiv = document.createElement("div");
var aTitle = document.createElement("h2");
// http://stackoverflow.com/questions/10211145/getting-current-date-and-time-in-javascript
var currentdate = new Date();
aTitle.innerHTML = currentdate.getDate() + "/"
+ (currentdate.getMonth()+1) + "/"
+ currentdate.getFullYear() + " @ "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes() + ":"
+ currentdate.getSeconds();
theDiv.appendChild(aTitle);
// now add to history
var aPre = document.createElement("pre");
//innerTEXT works on chrome but not Firefox, so use innerHTML
aPre.innerHTML = theText;
theDiv.appendChild(aPre);
var newTable = document.getElementById('result').cloneNode(true);
newTable.setAttribute('id','');
// remove the ids from the tds
// added to fix issue when running on firefox
newTable.querySelector('#diagramsimple').setAttribute('id','');
newTable.querySelector('#diagramhand').setAttribute('id','');
theDiv.appendChild(newTable);
examples.insertBefore(theDiv, examples.firstChild);
} catch (e) {
console.log(e);
document.getElementById('error').innerHTML=e;
}
};
</script>
</body>
</html>