xref: /webtrees/resources/views/modules/random_media/slide-show.phtml (revision d97083fe315dad9b7d0a150d4fb5f563e57d1869)
1<?php
2
3use Fisharebest\Webtrees\I18N;
4use Fisharebest\Webtrees\Media;
5use Fisharebest\Webtrees\MediaFile;
6use Fisharebest\Webtrees\Tree;
7
8/**
9 * @var int       $block_id
10 * @var int       $delay
11 * @var bool      $show_controls
12 * @var bool      $start_automatically
13 * @var Media     $media
14 * @var MediaFile $media_file
15 * @var Tree      $tree
16 */
17
18?>
19
20<div class="wt-slide-show-container">
21    <?php if ($show_controls) : ?>
22        <div class="wt-slide-show-controls text-center">
23            <a href="#" title="<?= I18N::translate('Play') ?>" <?= $start_automatically ? 'hidden' : '' ?>>
24                <?= view('icons/media-play') ?>
25                <span class="visually-hidden"><?= I18N::translate('Play') ?></span>
26            </a>
27            <a href="#" title="<?= I18N::translate('Stop') ?>" <?= $start_automatically ? '' : 'hidden' ?>>
28                <?= view('icons/media-stop') ?>
29                <span class="visually-hidden"><?= I18N::translate('Stop') ?></span>
30            </a>
31            <a href="#" title="<?= I18N::translate('Next image') ?>">
32                <?= view('icons/media-next') ?>
33                <span class="visually-hidden"><?= I18N::translate('Next image') ?></span>
34            </a>
35        </div>
36    <?php endif ?>
37
38    <figure class="wt-slide-show-figure text-center">
39        <?= $media_file->displayImage(200, 200, 'contain', ['class' => 'slide-show-image img-fluid']) ?>
40        <figcaption class="wt-slide-show-figcaption">
41            <a href="<?= e($media->url()) ?>">
42                <b><?= $media->fullName() ?></b>
43            </a>
44        </figcaption>
45    </figure>
46
47    <p class="wt-slide-show-notes text-center">
48        <?php foreach ($media->facts(['NOTE']) as $fact) : ?>
49            <?= view('fact-gedcom-fields', ['gedcom' => $fact->gedcom(), 'parent' => $media->tag(), 'tree' => $tree]) ?>
50        <?php endforeach ?>
51    </p>
52
53    <ul class="fa-ul wt-slide-show-links">
54        <?php foreach ($media->linkedIndividuals('OBJE') as $individual) : ?>
55            <li>
56                <span class="fa-li" title="<?= I18N::translate('Individual') ?>"><?= view('icons/individual') ?></span>
57                <a href="<?= e($individual->url()) ?>" class="wt-slide-show-link">
58                    <?= $individual->fullName() ?>
59                </a>
60            </li>
61        <?php endforeach ?>
62
63        <?php foreach ($media->linkedFamilies('OBJE') as $family) : ?>
64            <li>
65                <span class="fa-li" title="<?= I18N::translate('Family') ?>"><?= view('icons/family') ?></span>
66                <a href="<?= e($family->url()) ?>" class="wt-slide-show-link">
67                    <?= $family->fullName() ?>
68                </a>
69            </li>
70        <?php endforeach ?>
71
72        <?php foreach ($media->linkedSources('OBJE') as $source) : ?>
73            <li>
74                <span class="fa-li" title="<?= I18N::translate('Source') ?>"><?= view('icons/source') ?></span>
75                <a href="<?= e($source->url()) ?>" class="wt-slide-show-link">
76                    <?= $source->fullName() ?>
77                </a>
78            </li>
79        <?php endforeach ?>
80    </ul>
81</div>
82
83<script>
84    var play = <?= json_encode($start_automatically, JSON_THROW_ON_ERROR) ?>;
85
86    if (play) {
87        var timeout = setTimeout(slideShowReload, <?= json_encode($delay * 1000, JSON_THROW_ON_ERROR) ?>);
88    }
89
90    function slideShowReload() {
91        var block = $("#block-<?= $block_id ?>").parent();
92        clearTimeout(timeout);
93        block.load(block.data("wtAjaxUrl") + "&start=" + (play ? "1" : "0"));
94
95        return false;
96    }
97
98    $(".wt-icon-media-play").on("click", function () {
99        $(".wt-icon-media-play").parent().attr("hidden", true);
100        $(".wt-icon-media-stop").parent().attr("hidden", false);
101        play = true;
102        return slideShowReload();
103    });
104
105    $(".wt-icon-media-stop").on("click", function () {
106        $(".wt-icon-media-stop").parent().attr("hidden", true);
107        $(".wt-icon-media-play").parent().attr("hidden", false);
108        play = false;
109        clearTimeout(timeout);
110        return false;
111    });
112
113    $(".wt-icon-media-next").on("click", function () {
114        return slideShowReload();
115    });
116</script>
117