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