1<?php use Fisharebest\Webtrees\FontAwesome; ?> 2<?php use Fisharebest\Webtrees\Gedcom; ?> 3<?php use Fisharebest\Webtrees\I18N; ?> 4<?php use Fisharebest\Webtrees\View; ?> 5 6<h2 class="wt-page-title"><?= $title ?></h2> 7 8<form class="wt-page-content" method="post"> 9 <?= csrf_field() ?> 10 <div class="wt-sortable-list"> 11 <?php foreach ($family->facts(['CHIL']) as $fact) : ?> 12 <div class="card mb-2 wt-sortable-item" data-sortbydate="<?= $fact->target()->getBirthDate()->julianDay() ?>"> 13 <input type="hidden" name="order[]" value="<?= $fact->id() ?>"> 14 <h3 class="card-header"> 15 <?= FontAwesome::semanticIcon('drag-handle', '') ?> 16 <?= $fact->target()->getFullName() ?> 17 </h3> 18 <div class="card-body"> 19 <?= $fact->target()->formatFirstMajorFact(Gedcom::BIRTH_EVENTS, 2) ?> 20 <?= $fact->target()->formatFirstMajorFact(Gedcom::DEATH_EVENTS, 2) ?> 21 </div> 22 </div> 23 <?php endforeach ?> 24 </div> 25 26 <p> 27 <button class="btn btn-primary" type="submit"> 28 <?= FontAwesome::decorativeIcon('save') ?> 29 <?= /* I18N: A button label. */ I18N::translate('save') ?> 30 </button> 31 32 <button class="btn btn-secondary" id="btn-default-order" type="button"> 33 <?= FontAwesome::decorativeIcon('sort') ?> 34 <?= /* I18N: A button label. */ I18N::translate('sort by date of birth') ?> 35 </button> 36 37 <a class="btn btn-secondary" href="<?= e($family->url()) ?>"> 38 <?= FontAwesome::decorativeIcon('cancel') ?> 39 <?= /* I18N: A button label. */ I18N::translate('cancel') ?> 40 </a> 41 </p> 42</form> 43 44<?php View::push('javascript') ?> 45<script> 46 new Sortable(document.querySelector(".wt-sortable-list"), {}); 47 48 $("#btn-default-order").on("click", function() { 49 $(".wt-sortable-list .wt-sortable-item").sort(function(x, y) { 50 return Math.sign(x.dataset.sortbydate - y.dataset.sortbydate); 51 }).appendTo(".wt-sortable-list"); 52 }); 53</script> 54<?php View::endpush() ?> 55