FEATURE Carousel controls (#7)

dynamic · Sep 8, 2023 · 5ed8b0e · 5ed8b0e
1 parent 88d6552
commit 5ed8b0e
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 8 deletions.
diff --git a/phpcs.xml.dist b/phpcs.xml.dist
@@ -8,6 +8,6 @@
     <!-- base rules are PSR-12 -->
     <rule ref="PSR12" >
         <!-- You may need to use this exclusion if you override some core methods -->
-        <!--<exclude name="PSR1.Methods.CamelCapsMethodName.NotCamelCaps" />-->
+        <exclude name="PSR1.Methods.CamelCapsMethodName.NotCamelCaps" />
     </rule>
 </ruleset>
diff --git a/src/Extension/CarouselPageExtension.php b/src/Extension/CarouselPageExtension.php
@@ -5,23 +5,42 @@
 use SilverStripe\View\SSViewer;
 use Dynamic\Carousel\Model\Slide;
 use SilverStripe\ORM\DataExtension;
+use SilverStripe\Forms\DropdownField;
 use SilverStripe\Forms\GridField\GridField;
-use SilverStripe\Forms\GridField\GridFieldAddExistingAutocompleter;
+use SilverStripe\Forms\ToggleCompositeField;
 use SilverStripe\Forms\GridField\GridFieldAddNewButton;
+use SilverStripe\Forms\GridField\GridFieldFilterHeader;
 use Symbiote\GridFieldExtensions\GridFieldOrderableRows;
 use Symbiote\GridFieldExtensions\GridFieldAddNewMultiClass;
 use SilverStripe\Forms\GridField\GridFieldConfig_RelationEditor;
-use SilverStripe\Forms\GridField\GridFieldFilterHeader;
 use Symbiote\GridFieldExtensions\GridFieldAddExistingSearchButton;
+use SilverStripe\Forms\GridField\GridFieldAddExistingAutocompleter;
+use SilverStripe\Forms\NumericField;
 
 /**
  * Class \Dynamic\Carousel\Extension\CarouselPageExtension
  *
  * @property BlockPage|CampaignLandingPage|HomePage|CarouselPageExtension $owner
+ * @property string $Controls
+ * @property string $Indicators
+ * @property string $Transitions
+ * @property string $Autoplay
+ * @property int $Interval
  * @method ManyManyList|Slide[] Slides()
  */
 class CarouselPageExtension extends DataExtension
 {
+    /**
+     * @var array
+     */
+    private static $db = [
+        'Controls' => 'Enum("Off,On", "On")',
+        'Indicators' => 'Enum("Off,On", "On")',
+        'Transitions' => 'Enum("Slide,Fade", "Slide")',
+        'Autoplay' => 'Enum("Off,Autoplay after interaction,On","Off")',
+        'Interval' => 'Int'
+    ];
+
     /**
      * @var array
      */
@@ -38,6 +57,13 @@ class CarouselPageExtension extends DataExtension
         ],
     ];
 
+    /**
+     * @var array
+     */
+    private static $defaults = [
+        'Interval' => 5
+    ];
+
     /**
      * @param \SilverStripe\Forms\FieldList $fields
      * @return void
@@ -62,7 +88,44 @@ public function updateCMSFields(\SilverStripe\Forms\FieldList $fields)
                 new GridFieldAddExistingSearchButton(),
             ]);
 
-        $fields->addFieldToTab('Root.Hero', $grid);
+        $settings = ToggleCompositeField::create('CarouselSettingsHD', 'Settings', [
+            DropdownField::create('Controls', 'Show Controls', $this->owner->dbObject('Controls')->enumValues())
+                ->setDescription('Previous/next arrows. Hidden if only one slide'),
+            DropdownField::create('Indicators', 'Show Indicators', $this->owner->dbObject('Indicators')->enumValues())
+                ->setDescription(' Let users jump directly to a particular slide. Hidden if only one slide'),
+            DropdownField::create('Transitions', 'Transitions', $this->owner->dbObject('Transitions')->enumValues()),
+            DropdownField::create('Autoplay', 'Autoplay', $this->owner->dbObject('Autoplay')->enumValues()),
+            NumericField::create('Interval')
+                ->setDescription('Time in seconds'),
+        ])->setHeadingLevel(4);
+
+        $fields->addFieldsToTab('Root.Hero', [
+            $grid,
+            $settings,
+        ]);
+    }
+
+    /**
+     * @return string
+     */
+    public function onBeforeWrite()
+    {
+        if (!$this->owner->Interval || $this->owner->Interval < 0) {
+            $this->owner->Interval = self::$defaults['Interval'];
+        }
+        parent::onBeforeWrite();
+    }
+
+    /**
+     * @return string
+     */
+    public function IntervalInMilliseconds(): int
+    {
+        $interval = $this->owner->Interval;
+        if (!$this->owner->Interval || $this->owner->Interval < 0) {
+            $interval = self::$defaults['Inverval'];
+        }
+        return (int) $interval * 1000;
     }
 
     /**

diff --git a/templates/Includes/Carousel.ss b/templates/Includes/Carousel.ss
@@ -1,6 +1,9 @@
 <% if $Slides %>
-    <div id="carousel-{$ID}" class="carousel slide mb-5">
-        <% if $Slides.Count > 1 %>
+    <div id="carousel-{$ID}" class="carousel slide mb-5
+        <% if Transitions == "Fade" %> carousel-fade<% end_if%>"
+        <% if $Autoplay == "On" %>data-bs-ride="carousel" <% end_if %>
+        <% if $Autoplay == "Autoplay after interaction" %>data-bs-ride="true" <% end_if %>>
+        <% if $Slides.Count > 1 && Indicators == On %>
             <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>
@@ -9,7 +12,7 @@
         <% end_if %>
         <div class="carousel-inner">
             <% loop $Slides.Sort('SortOrder') %>
-                <div class="carousel-item<% if $IsFirst %> active<% end_if %>">
+                <div class="carousel-item<% if $IsFirst %> active<% end_if %>" <% if $Top.Autoplay != "Off" %>data-bs-interval="$Top.IntervalInMilliseconds" <% end_if %>>
                     <% if $ClassName.ShortName == ImageSlide %>
                         <% include ImageSlide %>
                     <% else_if $ClassName.ShortName == VideoSlide %>
@@ -18,7 +21,7 @@
                 </div>
             <% end_loop %>
         </div>
-        <% if $Slides.Count > 1 %>
+        <% if $Slides.Count > 1 && Controls == On %>
             <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>