xref: /webtrees/resources/views/edit-blocks-page.phtml (revision 1270d2767576ed4a83917769b0ee3613e3b010bf)

<?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') ?>">
                <?= 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() ?>