simsearch / simsearch / templates / search / display.html

{% extends "base.html" %}

{% block headers %}
  <link href="{{MEDIA_URL}}css/lookup.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="{{MEDIA_URL}}js/raphael-min.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.sizes.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    {% autoescape off %}
    var data = {{data}};
    {% endautoescape %}
    var tier_angles = {};
    var canvas = null;

    function setup_canvas() {
      $('svg').remove();
      var eps = 5;
      var nav = $('#nav');
      var margin = nav.margin().top + nav.margin().bottom + nav.height();
      margin *= 2;
      var x = margin;
      var y = margin;
      var canvas_width = window.innerWidth - 2 * margin;
      var canvas_height = window.innerHeight - 2 * margin;
      if (canvas_width < canvas_height) {
        y += (canvas_height - canvas_width) / 2;
        canvas_height = canvas_width;
      } else {
        x += (canvas_width - canvas_height) / 2;
        canvas_width = canvas_height;
      }
      var paper = Raphael(x, y, canvas_width, canvas_height);
      paper.rect(eps, eps, canvas_width - 2 * eps, canvas_height - 2 * eps,
          30).attr("stroke", "#999").attr('fill', 'white');
      return paper;
    }

    function get_min_dim(paper) {
      if (paper.width < paper.height) {
        return paper.width;
      } else {
        return paper.height;
      }
    }

    function draw_kanji(paper, animate) {
      var size = get_min_dim(paper) / 20;
      var d = function(x, y, k) {
        var e = paper.text(x, y, k).attr("font-size", size);
        e.real_opacity = 1.0;
        e.mouseover(function(event) {
          this.attr({fill: 'blue', opacity: 1.0});
          this.node.style.cursor = 'pointer';
        });
        e.mouseout(function(event) {
          this.attr({fill: 'black', opacity: this.real_opacity});
        });
        return e;
      };
      var pivot = d(paper.width / 2, paper.height / 2, data['kanji']);
      pivot.node.onclick = function() {
        window.location.href = '/translate/' + data['kanji'] + '/' + '?path=' + data['path'];
      };
      draw_tier(data['tier1'], 1, paper, d, animate);
      draw_tier(data['tier2'], 2, paper, d, animate);
      draw_tier(data['tier3'], 3, paper, d, animate);
    }

    function draw_tier(ks, n, paper, draw_f, animate) {
      var angle_frac = 2 * Math.PI / ks.length; 
      var radius = n * get_min_dim(paper) / 8;
      var initial_frac;
      if (!(n in tier_angles)) {
        initial_frac = Math.random() * angle_frac;
        tier_angles[n] = initial_frac;
      } else {
        initial_frac = tier_angles[n];
      }
      var center_w = paper.width / 2;
      var center_h = paper.height / 2;

      var opacity = 0.9 - 0.2 * n; // 0.7, 0.5, 0.3

      for (var i = 0; i < ks.length; i++) {
        var kanji = ks[i];

        var angle = initial_frac + i * angle_frac;
        var x = center_w + radius * Math.cos(angle);
        var y = center_h + radius * Math.sin(angle);

        var e = draw_f(x, y, kanji);
        e.kanji = kanji;
        e.real_opacity = opacity;
        if (animate) {
          e.attr('opacity', 0.0);
          var delay = Math.round(20 + 100.0 * (0.7 - opacity) / 0.7) + "%";
          window.setTimeout(function(elem, op) {
            return function() {
              elem.animate({'opacity': op}, 1200);
              };
          }(e, opacity), n * 150);
        } else {
          e.attr('opacity', opacity);
        }
        e.node.onclick = function(k) {
          return function() {
            window.location.href = '/?kanji=' + k +
                '&path=' + data['path'];
          };
        }(kanji);
      }
    }

    function redraw(animate) {
      var paper = setup_canvas();
      draw_kanji(paper, animate);
      canvas = paper;
    }

    $(document).ready(function() {
      redraw(true); 
      $(window).resize(function() { redraw(false); });
    });
  </script>
{% endblock %}
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.