Start implementing page block groups

omeka · Dec 8, 2023 · efafaac · efafaac
1 parent 26c3ffa
commit efafaac
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 38 deletions.
diff --git a/application/asset/js/site-page-edit.js b/application/asset/js/site-page-edit.js
@@ -522,27 +522,33 @@
                 .css('grid-template-columns', `repeat(${gridColumns}, 1fr)`);
             $('.block').each(function() {
                 const thisBlock = $(this);
-                const gridColumnPositionSelect = thisBlock.find('.block-page-layout-grid-column-position-select');
-                const gridColumnPositionSelectValue = parseInt(gridColumnPositionSelect.val(), 10) || 'auto';
-                const gridColumnSpanSelect = thisBlock.find('.block-page-layout-grid-column-span-select');
-                const gridColumnSpanSelectValue = parseInt(gridColumnSpanSelect.val(), 10);
-                const selectedTooltip = $('<div class="selected-tooltip" title="Selected">');
-                const blockDiv = $('<div class="grid-layout-previewing-block">')
-                    .css('grid-column', `${gridColumnPositionSelectValue} / span ${gridColumnSpanSelectValue}`);
-                if (thisBlock.hasClass('grid-layout-previewing')) {
-                    blockDiv.addClass('grid-layout-previewing').append(selectedTooltip);
-                }
-                blockDiv.hover(
-                    function() {
-                        thisBlock.addClass('hovered-block');
-                        $(this).addClass('hovered-block');
-                    },
-                    function() {
-                        thisBlock.removeClass('hovered-block');
-                        $(this).removeClass('hovered-block');
+                const blockLayout = thisBlock.data('block-layout');
+                if ('blockGroup' == blockLayout) {
+                    const blockGroupSpan = thisBlock.find('.block-group-span').val();
+                    // @todo: fix preview to account for groups (use PageLayout::render() for example code)
+                } else {
+                    const gridColumnPositionSelect = thisBlock.find('.block-page-layout-grid-column-position-select');
+                    const gridColumnPositionSelectValue = parseInt(gridColumnPositionSelect.val(), 10) || 'auto';
+                    const gridColumnSpanSelect = thisBlock.find('.block-page-layout-grid-column-span-select');
+                    const gridColumnSpanSelectValue = parseInt(gridColumnSpanSelect.val(), 10);
+                    const selectedTooltip = $('<div class="selected-tooltip" title="Selected">');
+                    const blockDiv = $('<div class="grid-layout-previewing-block">')
+                        .css('grid-column', `${gridColumnPositionSelectValue} / span ${gridColumnSpanSelectValue}`);
+                    if (thisBlock.hasClass('grid-layout-previewing')) {
+                        blockDiv.addClass('grid-layout-previewing').append(selectedTooltip);
                     }
-                );
-                gridLayoutPreview.append(blockDiv);
+                    blockDiv.hover(
+                        function() {
+                            thisBlock.addClass('hovered-block');
+                            $(this).addClass('hovered-block');
+                        },
+                        function() {
+                            thisBlock.removeClass('hovered-block');
+                            $(this).removeClass('hovered-block');
+                        }
+                    );
+                    gridLayoutPreview.append(blockDiv);
+                }
             });
             Omeka.openSidebar($('#grid-layout-preview-sidebar'));
         };

diff --git a/application/config/module.config.php b/application/config/module.config.php
@@ -753,6 +753,7 @@
             'lineBreak' => Site\BlockLayout\LineBreak::class,
             'itemWithMetadata' => Site\BlockLayout\ItemWithMetadata::class,
             'pageDateTime' => Site\BlockLayout\PageDateTime::class,
+            'blockGroup' => Site\BlockLayout\BlockGroup::class,
         ],
         'factories' => [
             'asset' => Service\BlockLayout\AssetFactory::class,

diff --git a/application/src/Site/BlockLayout/BlockGroup.php b/application/src/Site/BlockLayout/BlockGroup.php
@@ -0,0 +1,50 @@
+<?php
+namespace Omeka\Site\BlockLayout;
+
+use Omeka\Api\Representation\SiteRepresentation;
+use Omeka\Api\Representation\SitePageRepresentation;
+use Omeka\Api\Representation\SitePageBlockRepresentation;
+use Laminas\Form\Element;
+use Laminas\Form\Form;
+use Laminas\View\Renderer\PhpRenderer;
+
+class BlockGroup extends AbstractBlockLayout
+{
+    public function getLabel()
+    {
+        return 'Block group'; // @translate
+    }
+
+    public function form(PhpRenderer $view, SiteRepresentation $site,
+        SitePageRepresentation $page = null, SitePageBlockRepresentation $block = null
+    ) {
+        $form = new Form;
+
+        $elementSpan = new Element\Number("o:block[__blockIndex__][o:data][span]");
+        $elementSpan->setOptions([
+                'label' => 'Block span', // @translate
+                'info' => 'Number of blocks to include in this group. Groups may not overlap.', // @translate
+            ])
+            ->setAttribute('min', '1')
+            ->setValue($block ? $block->dataValue('span') : '1');
+        $form->add($elementSpan);
+
+        $elementClass = new Element\Text("o:block[__blockIndex__][o:data][class]");
+        $elementClass->setOptions([
+                'label' => 'Class', // @translate
+                'info' => 'Optional CSS class for this group.', // @translate
+            ])
+            ->setAttributes([
+                'class' => 'block-group-span',
+            ])
+            ->setValue($block ? $block->dataValue('class') : '');
+        $form->add($elementClass);
+
+        return $view->formCollection($form);
+    }
+
+    public function render(PhpRenderer $view, SitePageBlockRepresentation $block)
+    {
+        return '';
+    }
+}
diff --git a/application/src/View/Helper/PageLayout.php b/application/src/View/Helper/PageLayout.php
@@ -64,26 +64,56 @@ public function render(SitePageRepresentation $page)
                 $layouts[$block->layout()] = null;
                 $view->blockLayout()->prepareRender($block->layout());
             }
-            // Render each block according to page layout.
-            switch ($page->layout()) {
-                case 'grid':
-                    $gridColumns = (int) $page->layoutDataValue('grid_columns');
-                    $blockLayoutData = $block->layoutData();
-                    $getValidPosition = fn ($columnPosition) => in_array($columnPosition, ['auto',...range(1, $gridColumns)]) ? $columnPosition : 'auto';
-                    $getValidSpan = fn ($columnSpan) => in_array($columnSpan, range(1, $gridColumns)) ? $columnSpan : $gridColumns;
-                    echo sprintf(
-                        '<div style="grid-column: %s / span %s">%s</div>',
-                        $getValidPosition($blockLayoutData['grid_column_position'] ?? 'auto'),
-                        $getValidSpan($blockLayoutData['grid_column_span'] ?? $gridColumns),
-                        $view->blockLayout()->render($block)
-                    );
-                    break;
-                case '':
-                default:
-                    echo $view->blockLayout()->render($block);
-                    break;
+            if ('blockGroup' === $block->layout()) {
+                // The blockGroup block gets special treatment.
+                if (isset($blockGroupSpan) && $blockGroupCurrentSpan < $blockGroupSpan) {
+                    // Blocks may not overlap.
+                    echo '</div>';
+                    unset($blockGroupSpan, $blockGroupCurrentSpan);
+                }
+                $blockGroupSpan = (int) $block->dataValue('span');
+                $blockGroupCurrentSpan = 0;
+                echo sprintf(
+                    '<div class="block-group %s" style="display: grid; grid-template-columns: repeat(%s, 1fr); grid-column: span %s;">',
+                    $view->escapeHtml($block->dataValue('class')),
+                    $view->escapeHtml((int) $page->layoutDataValue('grid_columns')),
+                    $view->escapeHtml((int) $page->layoutDataValue('grid_columns'))
+                );
+            } else {
+                // Render each block according to page layout.
+                switch ($page->layout()) {
+                    case 'grid':
+                        $gridColumns = (int) $page->layoutDataValue('grid_columns');
+                        $blockLayoutData = $block->layoutData();
+                        $getValidPosition = fn ($columnPosition) => in_array($columnPosition, ['auto',...range(1, $gridColumns)]) ? $columnPosition : 'auto';
+                        $getValidSpan = fn ($columnSpan) => in_array($columnSpan, range(1, $gridColumns)) ? $columnSpan : $gridColumns;
+                        echo sprintf(
+                            '<div style="grid-column: %s / span %s">%s</div>',
+                            $getValidPosition($blockLayoutData['grid_column_position'] ?? 'auto'),
+                            $getValidSpan($blockLayoutData['grid_column_span'] ?? $gridColumns),
+                            $view->blockLayout()->render($block)
+                        );
+                        break;
+                    case '':
+                    default:
+                        echo $view->blockLayout()->render($block);
+                        break;
+                }
+            }
+            // The blockGroup block gets special treatment.
+            if (isset($blockGroupSpan)) {
+                if ($blockGroupCurrentSpan == $blockGroupSpan) {
+                    echo '</div>';
+                    unset($blockGroupSpan, $blockGroupCurrentSpan);
+                } else {
+                    $blockGroupCurrentSpan++;
+                }
             }
         }
+        if (isset($blockGroupSpan)) {
+            // Close the blockGroup block if not already closed.
+            echo '</div>';
+        }
         echo '</div>';
     }
 }
diff --git a/application/view/common/block-layout.phtml b/application/view/common/block-layout.phtml
@@ -19,6 +19,7 @@ $layoutGridColumnSpan = $layoutData['grid_column_span'] ?? '12';
         <span class="sortable-handle"></span>
         <span class="block-type"><?php echo $translate($layoutLabel); ?></span>
         <span class="restore-value"><?php echo $translate('Block to be removed'); ?></span>
+        <?php if ('blockGroup' !== $layout): ?>
         <span class="block-page-layout-grid-controls">
             <select class="block-page-layout-grid-column-position-select" data-block-page-layout-grid-column-position="<?php echo $escape($layoutGridColumnPosition); ?>">
                 <?php foreach ($layoutGridColumnPositionOptions as $key => $value): ?>
@@ -31,6 +32,7 @@ $layoutGridColumnSpan = $layoutData['grid_column_span'] ?? '12';
                 <?php endforeach; ?>
             </select>
         </span>
+        <?php endif; ?>
         <ul class="actions">
             <li><a href="#" class="o-icon-search preview-block-page-layout-grid" aria-label="<?php echo $translate('Preview layout'); ?>" title="<?php echo $translate('Preview layout'); ?>"></a></li>
             <li><a href="#" class="o-icon-settings configure-block-layout-data" aria-label="<?php echo $translate('Configure layout'); ?>" title="<?php echo $translate('Configure layout'); ?>"></a></li>