Simple carousel on eink.
[wolnelektury.git] / src / wolnelektury / static / js / book_text / references.js
1 (function($){$(function(){
2
3     var interestingReferences = $("#interesting-references").text();
4     if (interestingReferences) {
5         interestingReferences = $.parseJSON(interestingReferences);
6     }
7     if (Object.keys(interestingReferences).length) {
8         $("#settings-references").css('display', 'block');
9     }
10
11     var map_enabled = false;
12     var marker = L.circleMarker([0,0]);
13     var map = null;
14
15     function enable_map() {
16         $("#reference-map").show('slow');
17
18         if (map_enabled) return;
19
20         map = L.map('reference-map').setView([0, 0], 11);
21         L.tileLayer('https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=a8a97f0ae5134403ac38c1a075b03e15', {
22             attribution: 'Maps © <a href="http://www.thunderforest.com">Thunderforest</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
23         }).addTo(map);
24
25         map_enabled = true;
26     }
27     function disable_map() {
28         $("#reference-map").hide('slow');
29     }
30     
31
32     $("#reference-close").on("click", function(event) {
33         event.preventDefault();
34         $("#reference-box").hide();
35     });
36     
37     $('a.reference').each(function() {
38         $this = $(this);
39         uri = $this.attr('data-uri');
40         if (interestingReferences.hasOwnProperty(uri)) {
41             $this.addClass('interesting');
42             ref = interestingReferences[uri];
43
44             $this.attr('href', ref.wikipedia_link);
45             $this.attr('target', '_blank');
46         }
47     });
48
49
50     $('a.reference.interesting').on('click', function(event) {
51         event.preventDefault();
52
53         $("#reference-box").show();
54
55         $this = $(this);
56         uri = $this.attr('data-uri');
57         ref = interestingReferences[uri];
58
59         if (ref.location) {
60             enable_map();
61
62             let newLoc = [
63                 ref.location[0],
64                 ref.location[1] + Math.round(
65                     (map.getCenter().lng - ref.location[1]) / 360
66                 ) * 360
67             ];
68
69             marker.setLatLng(newLoc);
70             marker.bindTooltip(ref.label).openTooltip();
71             map.addLayer(marker);
72
73             map.panTo(newLoc, {
74                 animate: true,
75                 duration: 1,
76             });
77         } else {
78             disable_map();
79             if (map) {
80                 map.removeLayer(marker);
81             }
82         }
83
84         $("#reference-images a").remove();
85         if (ref.images) {
86             $.each(ref.images, function(i, e) {
87                 $i = $("<a target='_blank'><img></a>");
88                 $i.attr('href', e.page);
89                 $('img', $i).attr('src', e.thumburl || e.url);
90                 if (e.thumbresolution) {
91                     $('img', $i).attr('width', e.thumbresolution[0]).attr('height', e.thumbresolution[1]);
92                 }
93
94                 $("#reference-images").append($i);
95             })
96         }
97
98         $("#reference-link").text(ref.label);
99         $("#reference-link").attr('href', ref.wikipedia_link);
100     });
101 })})(jQuery);