FEATURE Bootstrap 5 updates (#5)

* enforce $ShowTitle, check for values * Remove GridFieldFilterHeader * require Focuspoint
dynamic · Sep 8, 2023 · 88d6552 · 88d6552
1 parent 0cff6b4
commit 88d6552
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 24 deletions.
diff --git a/composer.json b/composer.json
@@ -8,6 +8,7 @@
         "CMS"
     ],
     "require": {
+        "jonom/focuspoint": "^5",
         "silverstripe/recipe-cms": "^5.0"
     },
     "require-dev": {

diff --git a/src/Extension/CarouselPageExtension.php b/src/Extension/CarouselPageExtension.php
@@ -3,21 +3,21 @@
 namespace Dynamic\Carousel\Extension;
 
 use SilverStripe\View\SSViewer;
-use SilverStripe\Core\ClassInfo;
 use Dynamic\Carousel\Model\Slide;
 use SilverStripe\ORM\DataExtension;
 use SilverStripe\Forms\GridField\GridField;
+use SilverStripe\Forms\GridField\GridFieldAddExistingAutocompleter;
 use SilverStripe\Forms\GridField\GridFieldAddNewButton;
 use Symbiote\GridFieldExtensions\GridFieldOrderableRows;
 use Symbiote\GridFieldExtensions\GridFieldAddNewMultiClass;
-use SilverStripe\Forms\GridField\GridFieldConfig_RecordEditor;
 use SilverStripe\Forms\GridField\GridFieldConfig_RelationEditor;
+use SilverStripe\Forms\GridField\GridFieldFilterHeader;
 use Symbiote\GridFieldExtensions\GridFieldAddExistingSearchButton;
 
 /**
  * Class \Dynamic\Carousel\Extension\CarouselPageExtension
  *
- * @property HomePage|CarouselPageExtension $owner
+ * @property BlockPage|CampaignLandingPage|HomePage|CarouselPageExtension $owner
  * @method ManyManyList|Slide[] Slides()
  */
 class CarouselPageExtension extends DataExtension
@@ -51,14 +51,18 @@ public function updateCMSFields(\SilverStripe\Forms\FieldList $fields)
             GridFieldConfig_RelationEditor::create()
         );
         $grid->getConfig()
-            ->removeComponentsByType(GridFieldAddNewButton::class)
+            ->removeComponentsByType([
+                GridFieldAddNewButton::class,
+                GridFieldAddExistingAutocompleter::class,
+                GridFieldFilterHeader::class,
+            ])
             ->addComponents([
                 $multiClass = GridFieldAddNewMultiClass::create(),
                 new GridFieldOrderableRows('SortOrder'),
                 new GridFieldAddExistingSearchButton(),
             ]);
 
-        $fields->addFieldToTab('Root.Slides', $grid);
+        $fields->addFieldToTab('Root.Hero', $grid);
     }
 
     /**

diff --git a/templates/Includes/Carousel.ss b/templates/Includes/Carousel.ss
@@ -1,28 +1,32 @@
 <% if $Slides %>
-    <div id="carousel-{$ID}" class="carousel slide" data-ride="carousel">
-        <ol class="carousel-indicators">
-            <% loop $Slides.Sort('SortOrder') %>
-                <li data-target="#carousel-{$Top.ID}" data-slide-to="{$Pos(0)}" <% if $IsFirst %>class="active" aria-current="true"<% end_if %> aria-label="{$Title.XML}"></li>
-            <% end_loop %>
-        </ol>
+    <div id="carousel-{$ID}" class="carousel slide mb-5">
+        <% if $Slides.Count > 1 %>
+            <div class="carousel-indicators">
+                <% loop $Slides.Sort('SortOrder') %>
+                    <button type="button" data-bs-target="#carousel-{$Up.ID}" data-bs-slide-to="{$Pos(0)}"  <% if $IsFirst %>class="active" aria-current="true"<% end_if %> aria-label="{$Title.XML}"></button>
+                <% end_loop %>
+            </div>
+        <% end_if %>
         <div class="carousel-inner">
             <% loop $Slides.Sort('SortOrder') %>
                 <div class="carousel-item<% if $IsFirst %> active<% end_if %>">
-                    <img src="$Image.Fill(1200,500).URL" class="d-block w-100" alt="$Image.Title.XML">
-                    <div class="carousel-caption d-none d-md-block">
-                        <h3>$Title</h3>
-                        $Content
-                    </div>
+                    <% if $ClassName.ShortName == ImageSlide %>
+                        <% include ImageSlide %>
+                    <% else_if $ClassName.ShortName == VideoSlide %>
+                        <% include VideoSlide UpID=$Up.ID %>
+                    <% end_if %>
                 </div>
             <% end_loop %>
         </div>
-        <a class="carousel-control-prev" href="#carousel-{$ID}" role="button" data-slide="prev">
-            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-            <span class="sr-only">Previous</span>
-        </a>
-        <a class="carousel-control-next" href="#carousel-{$ID}" role="button" data-slide="next">
-            <span class="carousel-control-next-icon" aria-hidden="true"></span>
-            <span class="sr-only">Next</span>
-        </a>
+        <% if $Slides.Count > 1 %>
+            <button class="carousel-control-prev" type="button" data-bs-target="#carousel-{$ID}" data-bs-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Previous</span>
+            </button>
+            <button class="carousel-control-next" type="button" data-bs-target="#carousel-{$ID}" data-bs-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Next</span>
+            </button>
+        <% end_if %>
     </div>
 <% end_if %>
diff --git a/templates/Includes/ImageSlide.ss b/templates/Includes/ImageSlide.ss
@@ -0,0 +1,5 @@
+<img src="$Image.FocusFill(1200,400).URL" class="d-block w-100 image-fluid" alt="$Image.Title.XML">
+<div class="carousel-caption d-none d-md-block">
+    <% if $Title && $ShowTitle %><h3>$Title</h3><% end_if %>
+    <% if $Content %>$Content<% end_if %>
+</div>