git @ Cat's Eye Technologies yoob.js / 7ef1f05
Add yoob.SourceHTMLView + demo. Fix colour bug in yoob.Cursor. Cat's Eye Technologies 11 years ago
3 changed file(s) with 126 addition(s) and 1 deletion(s). Raw diff Collapse all Expand all
+58
-0
eg/source-html-view.html less more
0 <!DOCTYPE html>
1 <head>
2 <meta charset="utf-8">
3 <title>yoob.Playfield Demo</title>
4 <script src="../src/yoob/cursor.js"></script>
5 <script src="../src/yoob/source-html-view.js"></script>
6 <style>
7 #canvas { border: 1px solid blue; }
8 #pre { border: 1px solid red; font-size: 20px; }
9 </style>
10 </head>
11 <body>
12
13 <h1>yoob.SourceHTMLView Demo</h1>
14
15 <textarea id="program" rows="10" cols="40">
16 10 print "hello"
17 20 goto 10
18 etc
19 </textarea>
20
21 <pre id="pre"></pre>
22
23 <button id="load">Load</button>
24 <button id="step">Step</button>
25
26 </body>
27 <script>
28 var pre = document.getElementById('pre');
29 var textarea = document.getElementById('program');
30
31 var pc1 = new yoob.Cursor();
32 var pc2 = new yoob.Cursor();
33 pc2.fillStyle = "brown";
34 var sourceView = new yoob.SourceHTMLView();
35 sourceView.init(undefined, pre).setCursors([pc1, pc2]);
36
37 document.getElementById('load').onclick = function(e) {
38 sourceView.setSourceText(textarea.value);
39 pc1.x = 0;
40 pc1.y = 0;
41 pc1.dx = 1;
42 pc1.dy = 0;
43 pc2.x = 10;
44 pc2.y = 0;
45 pc2.dx = 1;
46 pc2.dy = 0;
47 sourceView.draw();
48 };
49
50 document.getElementById('step').onclick = function(e) {
51 pc1.advance();
52 while (sourceView.text.charAt(pc1.x) === '\n') {
53 pc1.advance();
54 }
55 sourceView.draw();
56 };
57 </script>
+1
-1
src/yoob/cursor.js less more
7575 */
7676 this.wrapText = function(text) {
7777 var fillStyle = this.fillStyle || "#50ff50";
78 return '<span style="background: ' + this.fillStyle + '">' +
78 return '<span style="background: ' + fillStyle + '">' +
7979 text + '</span>';
8080 };
8181
+67
-0
src/yoob/source-html-view.js less more
0 /*
1 * This file is part of yoob.js version 0.6-PRE
2 * Available from https://github.com/catseye/yoob.js/
3 * This file is in the public domain. See http://unlicense.org/ for details.
4 */
5 if (window.yoob === undefined) yoob = {};
6
7 /*
8 * A view (in the MVC sense) for depicting a program source (or any
9 * unidimensional text string, really) onto any DOM element that supports
10 * innerHTML.
11 *
12 * Supports yoob.Cursors. The cursor's x indicates the position in the
13 * program. The cursor's y is ignored.
14 */
15 yoob.SourceHTMLView = function() {
16 this.text = undefined;
17 this.element = undefined;
18
19 this.init = function(text, element) {
20 this.text = text;
21 this.element = element;
22 this.cursors = [];
23 return this;
24 };
25
26 /*** Chainable setters ***/
27
28 /*
29 * Set the list of cursors to the given list of yoob.Cursor (or compatible)
30 * objects.
31 */
32 this.setCursors = function(cursors) {
33 this.cursors = cursors;
34 return this;
35 };
36
37 this.setSourceText = function(text) {
38 this.text = text;
39 return this;
40 };
41
42 /*
43 * Override if you wish to convert source text characters to HTML somehow.
44 */
45 this.render = function(value) {
46 return value;
47 };
48
49 /*
50 * Render the source text, as HTML, on the DOM element.
51 */
52 this.draw = function() {
53 var text = "";
54 for (var x = 0; x < this.text.length; x++) {
55 var rendered = this.render(this.text.charAt(x));
56 for (var i = 0; i < this.cursors.length; i++) {
57 if (this.cursors[i].x === x) {
58 rendered = this.cursors[i].wrapText(rendered);
59 }
60 }
61 text += rendered;
62 }
63 this.element.innerHTML = text;
64 };
65
66 };