AlgorithmVisualizer/index.html at gh-pages · GrowthStudio/AlgorithmVisualizer · 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
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
106
107
108
109
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <meta name="description" content="Tool for visualizing algorithms."/>
  <title>Algorithm Visualizer</title>
  <link rel="stylesheet" href="public/algorithm_visualizer.min.css"/>
  <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
        });
    </script>
  <script type="text/javascript"
          src="public/MathJax.js">
  </script>
</head>

<body>

<button id="btn_run"></button>
<button id="btn_pause"></button>
<div class="workspace">
  <div class="viewer_container">
    <section class="tab_container">
      <div class="tab" id="tab_desc">
        <div class="wrapper">
        </div>
      </div>
      <div class="tab module_container active" id="tab_module">
      </div>
    </section>
  </div>
  <div class="editor_container" style="display: none">
    <section class="files_bar">
      <button class="tab_button btn-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
      <button class="tab_button btn-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
      <div class="wrapper"></div>
    </section>
    <section class="explanation_container">
      <span id="explanation"></span>
    </section>
    <section class="data_container">
      <pre id="data"></pre>
    </section>
    <section class="code_container">
      <pre id="code"></pre>
    </section>
  </div>
</div>
<div class="toast_container">
</div>
<script src="public/lib/jquery-2.2.3.min.js"></script>
<script src="public/lib/showdown.min.js"></script>
<script src="public/lib/ace/ace.js"></script>
<script src="public/lib/ace/ext-language_tools.js"></script>
<script src="public/lib/babel.min.js"></script>
<script src="public/lib/sigma/sigma.min.js"></script>
<script src="public/lib/sigma/plugins/sigma.plugins.dragNodes.min.js"></script>
<script src="public/lib/Chart-2.1.3.min.js"></script>
<script src="public/algorithm_visualizer.min.js"></script>
</body>
<script>
  $(function () {
    function awaitPostMessage() {
      var isReactNativePostMessageReady = !!window.originalPostMessage;
      var queue = [];
      var currentPostMessageFn = function store(message) {
        if (queue.length > 100) queue.shift();
        queue.push(message);
      };
      if (!isReactNativePostMessageReady) {
        var originalPostMessage = window.postMessage;
        Object.defineProperty(window, 'postMessage', {
          configurable: true,
          enumerable: true,
          get: function () {
            return currentPostMessageFn;
          },
          set: function (fn) {
            currentPostMessageFn = fn;
            isReactNativePostMessageReady = true;
            setTimeout(sendQueue, 0);
          }
        });
        window.postMessage.toString = function () {
          return String(originalPostMessage);
        };
      }

      function sendQueue() {
        while (queue.length > 0) window.postMessage(queue.shift());
      }
    }
    awaitPostMessage(); // Call this only once in your Web Code.

    window.postMessage(JSON.stringify({status: 'ready'}));
    document.addEventListener('message', function (event) {
      var data = JSON.parse(event.data);
      if (data.action === 'algorithm') {
        window.algorithm = data.algorithm;
      } else if (data.action === 'run') {
        $(window).trigger('bridge.run', window.algorithm);
      } else if (data.action === 'pause') {
        $('#btn_pause').trigger('click');
      }
    });
  })
</script>
</html>