various improvements

templates/top_speakers.html

@@ -1,8 +1,66 @@
 {% extends "base.html" %}
 
+{% block style %}
+<script src="{{ url_for("static", filename="leader-line.min.js") }}"></script>
+<style>
+  .right-images {
+  position: absolute;
+  right: -280px;
+  top: 0;
+  width: 120px;
+  }
+
+  .left-images {
+  position: absolute;
+  right: -140px;
+  top: 0;
+  width: 120px;
+  }
+
+
+
+  .image {
+      max-width: 100%;
+  }
+
+  .container {
+    position: relative;
+  }
+</style>
+{% endblock %}
+
+{% set show_images = True %}
+
 {% block title %}Conference archive{% endblock %}
 
   {% block content %}
+  <div class="container">
+
+  {% if show_images %}
+
+  <div class="left-images">
+  {% for person, photo in left_photos %}
+  <div class="image-container" id="image-{{person.id}}">
+     <a href="{{ url_for("person", person_id=person.id) }}">
+       <img class="image" src="{{ url_for("static", filename=photo) }}" alt="{{ person.name}}" title="{{ person.name}}">
+    </a>
+  </div>
+  {% endfor %}
+  </div>
+
+  <div class="right-images">
+  {% for person, photo in right_photos %}
+  <div class="image-container">
+     <a href="{{ url_for("person", person_id=person.id) }}">
+       <img id="image-{{person.id}}" class="image" src="{{ url_for("static", filename=photo) }}" alt="{{ person.name}}" title="{{ person.name}}">
+    </a>
+  </div>
+  {% endfor %}
+
+  </div>
+  {% endif %}
+
+
     <h1>Conference archive</h1>
 
     <form action="{{ url_for("search_people") }}">
@@ -27,17 +85,68 @@
     <ul>
 
     {% for person, count in top_speakers %}
+    {% if loop.first or loop.previtem[1] != count %}
+    <h4>{{ count }} conferences</h4>
+    {% endif %}
     <div>
+      <span id="person-{{ person.id }}">
       👤
       <a href="{{ url_for("person", person_id=person.id) }}">{{ person.name }}</a>
       ({{ count }} conferences, {{ person.event_count }} talks)
-      {% if person.wikidata_photo %}📷{% endif %}
+      {% if person.photo_filename() %}📷{% endif %}
       {% if person.wikidata_qid %}
       <a href="https://www.wikidata.org/wiki/{{ person.wikidata_qid }}">Wikidata</a>
       {% endif %}
+      </span>
     </div>
     {% endfor %}
 
+</div>
 {% endblock %}
 
+{% block script %}
+{% if show_images %}
+<script>
+  {# var person_ids = {{ photo_person_ids | tojson }}; #}
+  var left = {{ left | tojson }};
+  var right = {{ right | tojson }};
+var lines = {};
 
+window.addEventListener('load', function() {
+
+  for(var i =0; i < left.length; i++) {
+    var id = left[i];
+    var person = document.getElementById('person-' + id);
+    var image = document.getElementById('image-' + id);
+
+    var line = new LeaderLine(LeaderLine.mouseHoverAnchor(person, 'draw'), image);
+    line.setOptions({startSocket: 'right', endSocket: 'left', path: 'fluid'});
+
+    var line2 = new LeaderLine(LeaderLine.mouseHoverAnchor(image, 'draw'), person);
+    line2.setOptions({startSocket: 'left', endSocket: 'right', path: 'fluid'});
+
+
+    // lines[id] = line;
+  }
+
+  for(var i =0; i < right.length; i++) {
+    var id = right[i];
+    var person = document.getElementById('person-' + id);
+    var image = document.getElementById('image-' + id);
+
+    var line = new LeaderLine(LeaderLine.mouseHoverAnchor(person, 'draw'), image);
+    line.setOptions({startSocket: 'right', endSocket: 'left', path: 'fluid'});
+
+    var line2 = new LeaderLine(LeaderLine.mouseHoverAnchor(image, 'draw'), person);
+    line2.setOptions({startSocket: 'left', endSocket: 'right', path: 'fluid'});
+
+    // lines[id] = line;
+  }
+
+
+
+});
+
+</script>
+{% endif %}
+{% endblock %}