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