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