xref: /webtrees/resources/views/modules/fanchart/chart.phtml (revision 3430c0bab1304f028145cca3ec085308fb0390b5)
1<?php
2
3/**
4 * @var string $areas
5 * @var int    $fanh
6 * @var int    $fanw
7 * @var string $html
8 * @var string $png
9 * @var string $title
10 */
11
12?>
13<?= $html ?>
14
15<map id="fan-chart-map" name="fan-chart-map">
16    <?= $areas ?>
17</map>
18
19<div class="text-center">
20    <img class="wt-chart-fan-img" src="data:image/png;base64,<?= base64_encode($png) ?>" width="<?= $fanw ?>" height="<?= $fanh ?>" alt="<?= strip_tags($title) ?>" usemap="#fan-chart-map">
21</div>
22
23<script>
24  jQuery("area")
25    .click(function (e) {
26      e.stopPropagation();
27      e.preventDefault();
28      let target = jQuery(this.hash);
29      // position the menu centered immediately above the mouse click position and
30      // make sure it doesn’t end up off the screen
31      target
32        .css({
33          left: Math.max(0, e.pageX - (target.outerWidth() / 2)),
34          top:  Math.max(0, e.pageY - target.outerHeight())
35        })
36        .toggle()
37        .siblings(".fan_chart_menu").hide();
38    });
39  jQuery(".fan_chart_menu")
40    .on("click", "a", function (e) {
41      e.stopPropagation();
42    });
43  jQuery("#fan_chart")
44    .click(function () {
45      jQuery(".fan_chart_menu").hide();
46    });
47</script>
48