Commits

Lars Yencken  committed 312364e

Animates neighbour display by tier.

  • Participants
  • Parent commits f306439
  • Branches raphael

Comments (0)

Files changed (1)

File simsearch/search/templates/search/display.html

       }
     }
 
-    function draw_kanji(paper) {
+    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});
         });
         e.mouseout(function(event) {
           this.attr({fill: 'black', opacity: this.real_opacity});
         });
-        e.real_opacity = 1.0;
         return e;
       };
       var pivot = d(paper.width / 2, paper.height / 2, data['kanji']);
       pivot.node.onclick = function() {
         window.location.href = '{% url search_target %}?kanji=' + data['kanji'] + '&path=' + data['path'];
       };
-      draw_tier(data['tier1'], 1, paper, d);
-      draw_tier(data['tier2'], 2, paper, d);
-      draw_tier(data['tier3'], 3, paper, d);
+      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) {
+    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;
       var center_w = paper.width / 2;
       var center_h = paper.height / 2;
 
-      var opacity = 1.0 - (n + 0.5) * 0.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 y = center_h + radius * Math.sin(angle);
 
         var e = draw_f(x, y, kanji);
-        e.attr('opacity', opacity);
+        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() {
           window.location.href = '{% url search_index %}?kanji=' + kanji +
               '&path=' + data['path'];
       }
     }
 
-    function redraw() {
+    function redraw(animate) {
       var paper = setup_canvas();
-      draw_kanji(paper);
+      draw_kanji(paper, animate);
     }
 
     $(document).ready(function() {
-      redraw(); 
-      $(window).resize(redraw);
+      redraw(true); 
+      $(window).resize(function() { redraw(false); });
     });
   </script>
 {% endblock %}