1<?php 2 3use Fisharebest\Webtrees\I18N; 4use Fisharebest\Webtrees\Module\ModuleBlockInterface; 5use Fisharebest\Webtrees\View; 6use Illuminate\Support\Collection; 7 8/** 9 * @var Collection<string,ModuleBlockInterface> $all_blocks 10 * @var bool $can_reset 11 * @var Collection<int,ModuleBlockInterface> $main_blocks 12 * @var Collection<int,ModuleBlockInterface> $side_blocks 13 * @var string $title 14 * @var string $url_cancel 15 * @var string $url_save 16 */ 17 18?> 19 20<h2><?= $title ?></h2> 21 22<p class="mt-4 mb-1"> 23 <?= I18N::translate('Drag the blocks to change their position.') ?> 24</p> 25 26<form method="post" action="<?= e($url_save) ?>" id="edit-blocks"> 27 <?= csrf_field() ?> 28 <div class="row row-cols-1 row-cols-sm-2 g-3" id="current-blocks"> 29 <div class="col"> 30 <div class="card h-100"> 31 <div class="card-body" id="main-blocks"> 32 <?php foreach ($main_blocks as $block_id => $block) : ?> 33 <?= view('edit-blocks-block', ['block_id' => $block_id, 'block' => $block]) ?> 34 <?php endforeach ?> 35 </div> 36 </div> 37 </div> 38 <div class="col"> 39 <div class="card h-100"> 40 <div class="card-body" id="side-blocks"> 41 <?php foreach ($side_blocks as $block_id => $block) : ?> 42 <?= view('edit-blocks-block', ['block_id' => $block_id, 'block' => $block]) ?> 43 <?php endforeach ?> 44 </div> 45 </div> 46 </div> 47 </div> 48 49 <p class="mt-4 mb-1"> 50 <?= I18N::translate('Add more blocks from the following list.') ?> 51 </p> 52 53 <div class="d-flex flex-wrap" id="available-blocks"> 54 <?php foreach ($all_blocks as $block_id => $block) : ?> 55 <?= view('edit-blocks-block', ['block_id' => $block_id, 'block' => $block]) ?> 56 <?php endforeach ?> 57 </div> 58 59 <hr> 60 61 <div> 62 <button class="btn btn-primary" type="submit"> 63 <?= view('icons/save') ?> 64 <?= I18N::translate('save') ?> 65 </button> 66 67 <a class="btn btn-secondary" href="<?= e($url_cancel) ?>"> 68 <?= view('icons/cancel') ?> 69 <?= I18N::translate('cancel') ?> 70 </a> 71 72 <?php if ($can_reset) : ?> 73 <button class="btn btn-link" id="defaults" type="submit" name="defaults" value="on" data-wt-confirm="<?= I18N::translate('Restore the default block layout') ?>" onclick="return confirm(this.dataset.confirm)"> 74 <?= I18N::translate('Restore the default block layout') ?> 75 </button> 76 <?php endif ?> 77 </div> 78</form> 79 80<?php View::push('styles') ?> 81<style> 82 #available-blocks .wt-icon-delete { 83 display: none; 84 } 85 86 #current-blocks .wt-icon-help { 87 display: none; 88 } 89</style> 90<?php View::endpush() ?> 91 92<?php View::push('javascript') ?> 93<script> 94 new Sortable(document.getElementById("main-blocks"), { 95 group: "blocks", 96 handle: ".wt-icon-drag-handle", 97 animation: 150, 98 pull: "clone", 99 }); 100 101 new Sortable(document.getElementById("side-blocks"), { 102 group: "blocks", 103 handle: ".wt-icon-drag-handle", 104 animation: 150, 105 pull: "clone", 106 }); 107 108 new Sortable(document.getElementById("available-blocks"), { 109 group: { 110 name: "blocks", 111 pull: "clone", 112 put: false, 113 }, 114 handle: ".wt-icon-drag-handle", 115 animation: 150, 116 sort: false, 117 }); 118 119 document.getElementById('current-blocks').addEventListener('click', function (event) { 120 if (event.target.matches('.wt-icon-delete')) { 121 const wtBlock = event.target.closest('.wt-block'); 122 wtBlock.parentNode.removeChild(wtBlock); 123 } 124 }); 125 126 document.getElementById('edit-blocks').addEventListener('submit', function (event) { 127 document.querySelectorAll('#main-blocks input').forEach((element) => { element.setAttribute('name', 'main[]'); }) 128 document.querySelectorAll('#side-blocks input').forEach((element) => { element.setAttribute('name', 'side[]'); }) 129 }); 130</script> 131<?php View::endpush() ?> 132