feat: added gallery block

fork · Apr 14, 2023 · 511e8cd · 511e8cd
1 parent 0d72bd8
commit 511e8cd
Show file tree

Hide file tree

Showing 16 changed files with 219 additions and 104 deletions.
diff --git a/site/blueprints/blocks/gallery.yml b/site/blueprints/blocks/gallery.yml
@@ -6,8 +6,5 @@ fields:
     extends: fields/image
     label: Images
     multiple: true
-  caption:
-    label: Caption
-    type: writer
-    icon: text
-    inline: true
+    min: 3
+    help: Add a minimum of three images
diff --git a/site/blueprints/blocks/image-text.yml → site/blueprints/blocks/imageText.yml b/site/blueprints/blocks/image-text.yml → site/blueprints/blocks/imageText.yml
diff --git a/site/blueprints/blocks/images.yml b/site/blueprints/blocks/images.yml
@@ -7,3 +7,4 @@ fields:
     label: Images
     multiple: true
     max: 2
+    help: Add a maximum of two images
diff --git a/site/blueprints/fields/blocks.yml b/site/blueprints/fields/blocks.yml
@@ -5,6 +5,6 @@ fieldsets:
   accordion: blocks/accordion
   gallery: blocks/gallery
   images: blocks/images
-  imageText: blocks/image-text
+  imageText: blocks/imageText
   richtext: blocks/richtext
   table: blocks/table
diff --git a/site/languages/en.php b/site/languages/en.php
@@ -11,5 +11,7 @@
         'relatedArticles' => 'Related articles',
         'readMore' => 'Read more',
         'filterTags' => 'Filter by tags',
+        'prevImages' => 'Scroll to previous images',
+        'nextImages' => 'Scroll to next images',
     ],
 ];
diff --git a/site/snippets/blocks.php b/site/snippets/blocks.php
@@ -1,5 +1,5 @@
-<div class="grid-container my-xl">
-  <?php foreach ($page->blocks()->toBlocks() as $block): ?>
-    <?php snippet('blocks/'.$block->type(), ['block' => $block]) ?>
+<div class="my-xl">
+  <?php foreach ($page->blocks()->toBlocks() as $block) : ?>
+    <?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
   <?php endforeach ?>
-</div>
+</div>
diff --git a/site/snippets/blocks/accordion.php b/site/snippets/blocks/accordion.php
@@ -1,21 +1,23 @@
 <?php if (isset($block)) : ?>
-  <div class="col-span-4 md:col-start-3 md:col-span-8 mb-xl pb-m border-t-2">
-    <?php foreach ($block->items()->toStructure() as $item) : ?>
-      <div x-data="{ activeAccordion: false }" class="group border-b-2">
-        <button @click="activeAccordion = !activeAccordion" :aria-expanded="activeAccordion" aria-controls="accordion-panel-<?= $block->id() ?>" class="group flex justify-between items-center py-m w-full text-left">
-          <p class="copy font-bold"><?= $item->title() ?></p>
+  <div class="grid-container">
+    <div class="col-span-4 md:col-start-3 md:col-span-8 mb-xl pb-m border-t-2">
+      <?php foreach ($block->items()->toStructure() as $item) : ?>
+        <div x-data="{ activeAccordion: false }" class="group border-b-2">
+          <button @click="activeAccordion = !activeAccordion" :aria-expanded="activeAccordion" aria-controls="accordion-panel-<?= $block->id() ?>" class="group flex justify-between items-center py-m w-full text-left">
+            <p class="copy font-bold"><?= $item->title() ?></p>
 
-          <div class="group-aria-expanded:rotate-180 w-s">
-            <?= svg('assets/icons/chevron-down.svg') ?>
-          </div>
-        </button>
+            <div class="group-aria-expanded:rotate-180 w-s">
+              <?= svg('assets/icons/chevron-down.svg') ?>
+            </div>
+          </button>
 
-        <section :hidden="!activeAccordion" id="accordion-panel-<?= $block->id() ?>" aria-labelledby="accordion-header-<?= $block->id() ?>" class="pb-m">
-          <div class="richtext">
-            <?= $item->text() ?>
-          </div>
-        </section>
-      </div>
-    <?php endforeach; ?>
+          <section :hidden="!activeAccordion" id="accordion-panel-<?= $block->id() ?>" aria-labelledby="accordion-header-<?= $block->id() ?>" class="pb-m">
+            <div class="richtext">
+              <?= $item->text() ?>
+            </div>
+          </section>
+        </div>
+      <?php endforeach; ?>
+    </div>
   </div>
 <?php endif; ?>
diff --git a/site/snippets/blocks/gallery.php b/site/snippets/blocks/gallery.php
@@ -1,29 +1,26 @@
-<?php use Kirby\Cms\Html;
+<?php
 
-?>
-
-<?php if(isset($block)): ?>
-  <?php
-    $caption = $block->caption();
-    $crop = $block->crop()->isTrue();
-    $ratio = $block->ratio()->or('auto');
+use Kirby\Cms\Html;
 
-    $attr = Html::attr(['data-ratio' => $ratio, 'data-crop' => $crop]);
-    ?>
+?>
 
-  <figure<?= $attr ?>>
-    <ul>
-      <?php foreach ($block->images()->toFiles() as $image): ?>
-      <li>
-        <?= $image ?>
-      </li>
+<?php if (isset($block)) : ?>
+  <div class="relative overflow-hidden mb-xl" x-data="Gallery">
+    <section class="flex items-center snap-x snap-proximity overflow-x-scroll scrollbar-none max-w-full mx-auto" x-ref="container" x-resizeobserver="onResize" tabindex="0">
+      <?php foreach ($block->images()->toFiles() as $image) : ?>
+        <figure class="shrink-0 h-[100vh] min-h-[500px] max-h-[650px] snap-center">
+          <img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>" class="h-full">
+        </figure>
       <?php endforeach ?>
-    </ul>
+    </section>
 
-    <?php if ($caption->isNotEmpty()): ?>
-      <figcaption>
-        <?= $caption ?>
-      </figcaption>
-    <?php endif ?>
-  </figure>
-<?php endif; ?>
+    <div class="flex gap-x-m mt-s justify-end max-w-default mx-auto px-m">
+      <button type="button" @click.prevent="onClickPrev" :disabled="prevHidden" title="<?= t('prevImages') ?>" class="block w-s disabled:text-neutral-50">
+        <?= svg('assets/icons/arrow-left.svg') ?>
+      </button>
+      <button type="button" @click.prevent="onClickNext" :disabled="nextHidden" title="<?= t('nextImages') ?>" class="block w-s disabled:text-neutral-50">
+        <?= svg('assets/icons/arrow-right.svg') ?>
+      </button>
+    </div>
+  </div>
+<?php endif; ?>
diff --git a/site/snippets/blocks/imageText.php b/site/snippets/blocks/imageText.php
@@ -1,31 +1,34 @@
 <?php if (isset($block)) : ?>
   <?php
   $image = $block->image()->toFile();
-    $imagePosition = $block->imagePosition();
+  $imagePosition = $block->imagePosition();
 
-    $imageColumns = $imagePosition == 'left' ? 'md:col-start-1' : 'md:col-start-7';
-    $textColumns = $imagePosition == 'left' ? 'md:col-start-6' : 'md:col-start-1';
-    ?>
+  $imageColumns = $imagePosition == 'left' ? 'md:col-start-1' : 'md:col-start-7';
+  $textColumns = $imagePosition == 'left' ? 'md:col-start-6' : 'md:col-start-1';
+  ?>
 
-  <div class="col-span-4 md:col-start-2 md:col-span-10 mb-xxl md:grid md:grid-cols-10">
-    <?php if ($block->headline()->isNotEmpty()) : ?>
-      <h3 class="headline-3 mb-m md:col-span-5 <?= $textColumns ?>"><?= $block->headline() ?></h3>
-    <?php endif; ?>
 
-    <div class="<?= $textColumns ?> mb-m md:col-span-5 md:row-start-2">
-      <div class="richtext">
-        <?= $block->text() ?>
+  <div class="grid-container">
+    <div class="col-span-4 md:col-start-2 md:col-span-10 mb-xxl md:grid md:grid-cols-10">
+      <?php if ($block->headline()->isNotEmpty()) : ?>
+        <h3 class="headline-3 mb-m md:col-span-5 <?= $textColumns ?>"><?= $block->headline() ?></h3>
+      <?php endif; ?>
+
+      <div class="<?= $textColumns ?> mb-m md:col-span-5 md:row-start-2">
+        <div class="richtext">
+          <?= $block->text() ?>
+        </div>
       </div>
-    </div>
 
-    <figure class="md:row-start-2 md:col-span-4 <?= $imageColumns ?>">
-      <img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>" class="w-full">
+      <figure class="md:row-start-2 md:col-span-4 <?= $imageColumns ?>">
+        <img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>" class="w-full">
 
-      <?php if ($image->caption()->isNotEmpty()) : ?>
-        <figcaption class="mt-s">
-          <p class="copy-small"><?= $image->caption() ?></p>
-        </figcaption>
-      <?php endif; ?>
-    </figure>
+        <?php if ($image->caption()->isNotEmpty()) : ?>
+          <figcaption class="mt-s">
+            <p class="copy-small"><?= $image->caption() ?></p>
+          </figcaption>
+        <?php endif; ?>
+      </figure>
+    </div>
   </div>
 <?php endif; ?>
diff --git a/site/snippets/blocks/images.php b/site/snippets/blocks/images.php
@@ -1,22 +1,24 @@
 <?php if (isset($block)) : ?>
   <?php
   $images = $block->images()->toFiles();
-    $multiple = count($images) > 1;
+  $multiple = count($images) > 1;
 
-    $class = $multiple ? 'col-span-1' : 'col-span-2';
-    ?>
+  $class = $multiple ? 'col-span-1' : 'col-span-2';
+  ?>
 
-  <div class="col-span-4 md:col-span-12 md:grid md:grid-cols-2 md:gap-x-m">
-    <?php foreach ($images as $item) : ?>
-      <figure class="<?= $class ?> mb-l">
-        <img src="<?= $item->url() ?>" alt="<?= $item->alt()->esc() ?>" class="w-full">
+  <div class="grid-container">
+    <div class="col-span-4 md:col-span-12 md:grid md:grid-cols-2 md:gap-x-m">
+      <?php foreach ($images as $item) : ?>
+        <figure class="<?= $class ?> mb-l">
+          <img src="<?= $item->url() ?>" alt="<?= $item->alt()->esc() ?>" class="w-full">
 
-        <?php if ($item->caption()->isNotEmpty()) : ?>
-          <figcaption class="mt-s">
-            <p class="copy-small"><?= $item->caption() ?></p>
-          </figcaption>
-        <?php endif; ?>
-      </figure>
-    <?php endforeach; ?>
+          <?php if ($item->caption()->isNotEmpty()) : ?>
+            <figcaption class="mt-s">
+              <p class="copy-small"><?= $item->caption() ?></p>
+            </figcaption>
+          <?php endif; ?>
+        </figure>
+      <?php endforeach; ?>
+    </div>
   </div>
 <?php endif; ?>
diff --git a/site/snippets/blocks/richtext.php b/site/snippets/blocks/richtext.php
@@ -1,5 +1,7 @@
-<?php if(isset($block)): ?>
-  <div class="richtext col-span-4 md:col-start-3 md:col-span-8 mb-xl">
-    <?= $block->text(); ?>
+<?php if (isset($block)) : ?>
+  <div class="grid-container">
+    <div class="richtext col-span-4 md:col-start-3 md:col-span-8 mb-xl">
+      <?= $block->text(); ?>
+    </div>
   </div>
 <?php endif; ?>
diff --git a/site/snippets/blocks/table.php b/site/snippets/blocks/table.php
@@ -1,21 +1,23 @@
 <?php if (isset($block)) : ?>
-  <div class="col-span-4 md:col-start-3 md:col-span-8 mb-l">
-    <?php if ($block->headline()->isNotEmpty()) : ?>
-      <h3 class="headline-3 mb-l"><?= $block->headline() ?></h3>
-    <?php endif; ?>
+  <div class="grid-container">
+    <div class="col-span-4 md:col-start-3 md:col-span-8 mb-l">
+      <?php if ($block->headline()->isNotEmpty()) : ?>
+        <h3 class="headline-3 mb-l"><?= $block->headline() ?></h3>
+      <?php endif; ?>
 
-    <?php foreach ($block->items()->toStructure() as $item) : ?>
-      <div class="flex flex-col md:grid md:grid-cols-8 gap-s md:gap-m border-b-2 pb-m mb-m">
-        <div class="md:col-span-2">
-          <p class="copy font-bold"><?= $item->title() ?></p>
-        </div>
+      <?php foreach ($block->items()->toStructure() as $item) : ?>
+        <div class="flex flex-col md:grid md:grid-cols-8 gap-s md:gap-m border-b-2 pb-m mb-m">
+          <div class="md:col-span-2">
+            <p class="copy font-bold"><?= $item->title() ?></p>
+          </div>
 
-        <div class="md:col-span-6">
-          <div class="richtext">
-            <?= $item->text() ?>
+          <div class="md:col-span-6">
+            <div class="richtext">
+              <?= $item->text() ?>
+            </div>
           </div>
         </div>
-      </div>
-    <?php endforeach; ?>
+      <?php endforeach; ?>
+    </div>
   </div>
 <?php endif; ?>
diff --git a/src/blocks/gallery.ts b/src/blocks/gallery.ts
@@ -0,0 +1,92 @@
+import { AlpineComponent } from "alpinejs";
+
+const Gallery = (): AlpineComponent => ({
+  /**
+   * Whether the prev button is hidden, i.e. we are on the very left
+   */
+  prevHidden: true,
+
+  /**
+   * Whether the next button is hidden, i.e. we are on the very right
+   */
+  nextHidden: true,
+
+  /**
+   * Current width of the container
+   */
+  containerWidth: 0,
+
+  /**
+   * Event handler for when the container gets resized
+   */
+  onResize() {
+    this.containerWidth = this.$refs.container.getBoundingClientRect().width;
+  },
+
+  /**
+   * Event handler for when intersection of the first slide changes
+   */
+  onPrevObs(obs: IntersectionObserverEntry[]) {
+    console.log("PREV", obs[0].intersectionRatio);
+    this.prevHidden = obs[0].intersectionRatio === 1;
+  },
+
+  /**
+   * Event handler for when intersection of the last slide changes
+   */
+  onNextObs(obs: IntersectionObserverEntry[]) {
+    console.log("NEXT", obs[0].intersectionRatio);
+    this.nextHidden = obs[0].intersectionRatio === 1;
+  },
+
+  /**
+   * Apply an offset to the container's current scroll position
+   *
+   * @param {Number} value Scroll offset to apply, in px
+   */
+  scrollTo(value: number) {
+    const { scrollLeft } = this.$refs.container;
+
+    let left = scrollLeft + value;
+    if (left > scrollLeft + this.containerWidth) {
+      left = scrollLeft + this.containerWidth;
+    } else if (left < 0) {
+      left = 0;
+    }
+
+    this.$refs.container.scrollTo({ left, behavior: "smooth" });
+  },
+
+  /**
+   * Event handler for when the prev button is clicked
+   */
+  onClickPrev() {
+    this.scrollTo(-this.containerWidth);
+  },
+
+  /**
+   * Event handler for when the next button is clicked
+   */
+  onClickNext() {
+    this.scrollTo(this.containerWidth);
+  },
+
+  init() {
+    const options = {
+      root: this.$refs.container,
+      threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
+    };
+
+    this.containerWidth = this.$refs.container.getBoundingClientRect().width;
+
+    const { firstElementChild, lastElementChild } = this.$refs.container;
+
+    const prevObs = new IntersectionObserver(this.onPrevObs.bind(this), options);
+    if (firstElementChild) prevObs.observe(firstElementChild);
+
+    const nextObs = new IntersectionObserver(this.onNextObs.bind(this), options);
+    if (lastElementChild) nextObs.observe(lastElementChild);
+  }
+});
+
+export default Gallery;
diff --git a/src/index.scss → src/main.scss b/src/index.scss → src/main.scss
@@ -13,6 +13,16 @@
   }
 }
 
+@layer utilities {
+  .scrollbar-none {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
 @layer components {
   .grid-container {
     @apply grid grid-cols-4 md:grid-cols-12 gap-x-m max-w-default mx-auto px-m;