File: dump.html

package info (click to toggle)
jsxgraph 1.3.5+dfsg1-2
  • links: PTS, VCS
  • area: main
  • in suites: buster
  • size: 26,044 kB
  • sloc: xml: 5,869; java: 1,072; python: 747; php: 192; makefile: 146; sh: 47
file content (105 lines) | stat: -rw-r--r-- 3,493 bytes parent folder | download | duplicates (3)
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html>
<head>
    <title>JSXGraph example</title>
    <link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />

    <!--script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/MathJax/MathJax.js"></script-->
    <script type="text/javascript" src="../src/loadjsxgraph.js"></script>
    <script type="text/javascript" src="../src/reader/geonext.js"></script>

    <script type="text/javascript" src="/javascript/jquery/jquery.js"></script>
</head>
<body>

<h2>WRP Playground</h2>

<input type="radio" name="export" id="type-js" /> JavaScript <input type="radio" name="export" id="type-jc" checked="checked" /> JessieCode
<div style="width:800px">
  <div id="jxgbox" class="jxgbox" style="width:800px; height:800px; float: left;"></div>
</div>

<textarea id="debug" style="display:block;" cols="100" rows="50">DEBUG</textarea>
<button onclick="exec();">Execute</button>
<div id="jxgbox2" class="jxgbox" style="width:800px; height:800px; float: left;"></div>
<script type="text/javascript">
    /* <![CDATA[ */

    var board, test,
        wrp = (function() {
            board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: true});
            var p = board.create('point', [1, 2], {strokeColor: 'blue'});

            if ($('#type-jc').is(':checked')) {
                console.log('dumping jessie');
                $('#debug').html(JXG.Dump.toJessie(board));
            } else {
                console.log('dumping js');
                $('#debug').html(JXG.Dump.toJavaScript(board));
            }
        })();

    function exec() {
        var code = document.getElementById('debug').value,
            p;
            test = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 5, 5, -5], axis: false, keepaspectratio: true});

        code = 'use jxgbox2;\n' + code;

        p = new JXG.JessieCode();
        p.parse(code);
    }

    (function () {
        var file_drop = document.getElementById('jxgbox');

        function supportsFileAPI() {
            return window.File && window.FileReader && window.FileList && window.Blob;
        }

        function playFile(f) {
            var freader = new FileReader();

            freader.onload = function(e) {
                if (board) {
                    JXG.JSXGraph.freeBoard(board);
                }
                
                board = JXG.JSXGraph.loadBoardFromString('jxgbox', e.target.result, 'geonext');
                if ($('#type-jc').is(':checked')) {
                    console.log('dumping jessie');
                    $('#debug').html(JXG.Dump.toJessie(board));
                } else {
                    console.log('dumping js');
                    $('#debug').html(JXG.Dump.toJavaScript(board));
                }
            };
            freader.readAsText(f);
        }

        function handleDrop(e) {
            e.stopPropagation();
            e.preventDefault();

            var files = e.dataTransfer.files, // file list object
                output = [], i, f;

            if (files.length > 0) {
                f = files[0];
                
                playFile(f);
            }
        }

        function handleDragOver(e) {
            e.stopPropagation();
            e.preventDefault();
        }

        file_drop.addEventListener('dragover', handleDragOver, false);
        file_drop.addEventListener('drop', handleDrop, false);
    })();
    
    /* ]]> */
</script>
</body>
</html>