canto34/browserExample.html at master · stevecooperorg/canto34 · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Canto34 Example</title>
	<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></link>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
</head>

<body>

	<div class="container">

		<h1>Canto34 Example</h1>

		<p>We start with this input:</p>
		<code><pre data-bind="text: input"></pre></code>
		<p>And then we turn it into tokens;</p>
		<code><pre data-bind="text: tokens"></pre></code>
		<p>Which returns this result;</p>
		<code><pre data-bind="text: result"></pre></code>
	</div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
	require(['./dist/canto34', './dist/example'], function (canto34, example) {
		"use strict";

		var lexer = example.lexer;
		var parser = example.parser;

		var input = "foo 1, bar 2.";
		var tokens = lexer.tokenize(input);
		var tokenString = JSON.stringify(tokens, null, 4);

		parser.initialize(tokens);
		parser.listOfNameValuePairs();

		var vm = {
			input: input,
			tokens: tokenString,
			result: JSON.stringify(parser.result, null, 4)
		};

		$(function () {
			ko.applyBindings(vm);
		});
	});
</script>
</body>

</html>