<!doctype html>
<head>
  <meta charset="UTF-8" />
  <title>pyxterm</title>
  <!--
  pyxterm: Basic Python socket implementation for term.js

  Example template
  Modified by: R. Saravanan <sarava@sarava.net> 2014
  Original Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
-->
  <style>
    html {
      background: #555;
    }

    h1 {
      margin-bottom: 20px;
      font: 20px/1.5 sans-serif;
    }
  </style>
  <script src="{{ xstatic('termjs', 'term.js') }}"></script>
  <script src="{{ static('terminado.js') }}"></script>
  <script>
    window.onload = function () {
      // Test size: 25x80
      var termRowHeight =
        0.0 + (1.0 * document.getElementById("dummy-screen").offsetHeight) / 25;
      var termColWidth =
        0.0 +
        (1.02 * document.getElementById("dummy-screen-rows").offsetWidth) / 80;
      document
        .getElementById("dummy-screen")
        .setAttribute("style", "display: none");

      var protocol =
        window.location.protocol.indexOf("https") === 0 ? "wss" : "ws";
      var ws_url = protocol + "://" + window.location.host + "{{ws_url_path}}";

      function calculate_size(element) {
        var rows = Math.max(
          2,
          Math.floor(element.innerHeight / termRowHeight) - 1,
        );
        var cols = Math.max(
          3,
          Math.floor(element.innerWidth / termColWidth) - 1,
        );
        console.log(
          "resize:",
          termRowHeight,
          termColWidth,
          element.innerHeight,
          element.innerWidth,
          rows,
          cols,
        );
        return { rows: rows, cols: cols };
      }

      size = calculate_size(window);
      var terminal = make_terminal(document.body, size, ws_url);

      window.onresize = function () {
        var geom = calculate_size(window);
        terminal.term.resize(geom.cols, geom.rows);
        terminal.socket.send(
          JSON.stringify([
            "set_size",
            geom.rows,
            geom.cols,
            window.innerHeight,
            window.innerWidth,
          ]),
        );
      };
    };
  </script>
</head>
<body>
  <!-- test size: 25x80 -->
  <pre
    id="dummy-screen"
    style="
      visibility: hidden;
      border: white solid 5px;
      font-family: 'DejaVu Sans Mono', 'Liberation Mono', monospace;
      font-size: 11px;
    "
  >0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
<span id="dummy-screen-rows" style="visibility:hidden;">01234567890123456789012345678901234567890123456789012345678901234567890123456789</span>
</pre>
</body>
