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 <div class="row row-cols-1 row-cols-sm-2 g-3" id="current-blocks"> 28 <div class="col"> 29 <div class="card h-100"> 30 <div class="card-body" id="main-blocks"> 31 <?php foreach ($main_blocks as $block_id => $block) : ?> 32 <?= view('edit-blocks-block', ['block_id' => $block_id, 'block' => $block]) ?> 33 <?php endforeach ?> 34 </div> 35 </div> 36 </div> 37 <div class="col"> 38 <div class="card h-100"> 39 <div class="card-body" id="side-blocks"> 40 <?php foreach ($side_blocks as $block_id => $block) : ?> 41 <?= view('edit-blocks-block', ['block_id' => $block_id, 'block' => $block]) ?> 42 <?php endforeach ?> 43 </div> 44 </div> 45 </div> 46 </div> 47 48 <p class="mt-4 mb-1"> 49 <?= I18N::translate('Add more blocks from the following list.') ?> 50 </p> 51 52 <div class="d-flex flex-wrap" id="available-blocks"> 53 <?php foreach ($all_blocks as $block_id => $block) : ?> 54 <?= view('edit-blocks-block', ['block_id' => $block_id, 'block' => $block]) ?> 55 <?php endforeach ?> 56 </div> 57 58 <hr> 59 60 <div> 61 <button class="btn btn-primary" type="submit"> 62 <?= view('icons/save') ?> 63 <?= I18N::translate('save') ?> 64 </button> 65 66 <a class="btn btn-secondary" href="<?= e($url_cancel) ?>"> 67 <?= view('icons/cancel') ?> 68 <?= I18N::translate('cancel') ?> 69 </a> 70 71 <?php if ($can_reset) : ?> 72 <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)"> 73 <?= I18N::translate('Restore the default block layout') ?> 74 </button> 75 <?php endif ?> 76 </div> 77 78 <?= csrf_field() ?> 79</form> 80 81<?php View::push('styles') ?> 82<style> 83 #available-blocks .wt-icon-delete { 84 display: none; 85 } 86 87 #current-blocks .wt-icon-help { 88 display: none; 89 } 90</style> 91<?php View::endpush() ?> 92 93<?php View::push('javascript') ?> 94<script> 95 new Sortable(document.getElementById("main-blocks"), { 96 group: "blocks", 97 handle: ".wt-icon-drag-handle", 98 animation: 150, 99 pull: "clone", 100 }); 101 102 new Sortable(document.getElementById("side-blocks"), { 103 group: "blocks", 104 handle: ".wt-icon-drag-handle", 105 animation: 150, 106 pull: "clone", 107 }); 108 109 new Sortable(document.getElementById("available-blocks"), { 110 group: { 111 name: "blocks", 112 pull: "clone", 113 put: false, 114 }, 115 handle: ".wt-icon-drag-handle", 116 animation: 150, 117 sort: false, 118 }); 119 120 document.getElementById('current-blocks').addEventListener('click', function (event) { 121 if (event.target.closest('.wt-icon-delete')) { 122 const wtBlock = event.target.closest('.wt-block'); 123 wtBlock.parentNode.removeChild(wtBlock); 124 } 125 }); 126 127 document.getElementById('edit-blocks').addEventListener('submit', function (event) { 128 document.querySelectorAll('#main-blocks input').forEach((element) => { element.setAttribute('name', 'main[]'); }) 129 document.querySelectorAll('#side-blocks input').forEach((element) => { element.setAttribute('name', 'side[]'); }) 130 }); 131</script> 132<?php View::endpush() ?> 133