Преглед на файлове

adds and implements a new viewhelper for carousels

Olivier Massot преди 5 години
родител
ревизия
e9d06de1b2

+ 109 - 0
ot_templating/Classes/ViewHelpers/Carousel/ImagesViewHelper.php

@@ -0,0 +1,109 @@
+<?php
+
+namespace Opentalent\OtTemplating\ViewHelpers\Carousel;
+
+use FluidTYPO3\Vhs\Traits\TemplateVariableViewHelperTrait;
+use FluidTYPO3\Vhs\ViewHelpers\Page\Resources\FalViewHelper;
+use Opentalent\OtTemplating\Domain\Repository\EventRepository;
+use Psr\Log\LoggerAwareInterface;
+use Psr\Log\LoggerAwareTrait;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
+
+/**
+ *   This view helper provides an an array of the FAL images files
+ *   that can be used to display a carousel
+ *
+ *     {namespace ot=Opentalent\OtTemplating\ViewHelpers}
+ *
+ *     <ot:carousel.images as="images"
+ *                         limit="5"
+ *                         countAs="count">
+ *          <f:debug>{images}</f:debug>
+ *     </ot:carousel.images>
+ *
+ * @package Opentalent\OtTemplating\ViewHelpers
+ */
+class ImagesViewHelper extends AbstractViewHelper implements LoggerAwareInterface {
+
+    use LoggerAwareTrait;
+    use TemplateVariableViewHelperTrait;
+
+    /**
+     * >> Required to prevent typo3 to escape the html output
+     * @var boolean
+     */
+    protected $escapeOutput = false;
+
+    /**
+     * -- This method is expected by Fluid --
+     * Declares the viewhelper's parameters
+     */
+    public function initializeArguments()
+    {
+        $this->registerArgument(
+            'as',
+            'string',
+            'Name of the returned array',
+            true
+        );
+        $this->registerArgument(
+            'limit',
+            'integer',
+            'Max number of images to return (mdefault: 5)',
+            false,
+            5
+        );
+        $this->registerArgument(
+            'countAs',
+            'string',
+            "Name of the returned variable that contains the array's length",
+            true,
+            'count'
+        );
+    }
+
+    /**
+     *  -- This method is expected by Fluid --
+     * Renders the content as html
+     *
+     * @return string
+     * @throws \Exception
+     */
+    public function render()
+    {
+
+        // Get current settings
+        $as = $this->arguments['as'];
+        $limit = $this->arguments['limit'];
+        $countAs = $this->arguments['countAs'];
+
+        // Get images
+        $falViewhelper = GeneralUtility::makeInstance(FalViewHelper::class);
+        $pageUid = $GLOBALS['TSFE']->page;
+        $resources = $falViewhelper->getResources($pageUid);
+
+        $images = [];
+        $count = 0;
+        foreach ($resources as $resource) {
+            if (preg_match('/^image\/.*/', $resource['mimetype'])) {
+                $images[] = $resource;
+                $count += 1;
+                if ($count >= $limit) {
+                    break;
+                }
+            }
+        }
+
+        $variables = [$as => $images, $countAs => $count];
+        return $this->renderChildrenWithVariables($variables);
+    }
+
+    /**
+     * @param EventRepository $eventRepository
+     */
+    public function injectEventRepository(EventRepository $eventRepository)
+    {
+        $this->eventRepository = $eventRepository;
+    }
+}

+ 10 - 15
ot_templating/Resources/Private/Partials/Classic/Carousel.html

@@ -6,17 +6,12 @@
     Voir: https://fluidtypo3.org/viewhelpers/vhs/master/Page/Resources/FalViewHelper.html
 --></f:comment>
 
-
-<v:page.resources.fal table="pages"
-                      field="media"
-                      uid="{page.uid}"
-                      as="images"
-                      slide="-1"
-                      limit="10"  >
-
-    <div class="carousel">
-        <f:for each="{images}" as="image">
-            <f:if condition="{v:variable.pregMatch(pattern: '/.*(?:jpe?g|gif|png)$/', subject: image.url)}">
+<ot:carousel.images as="images"
+                    limit="5"
+                    countAs="count">
+    <f:if condition="{count} > 0">
+        <div class="carousel">
+            <f:for each="{images}" as="image">
                 <div>
                     <ot:imageP src="{image.url}"
                              alt="{image.alternative}"
@@ -25,8 +20,8 @@
                              height="500c"
                     />
                 </div>
-            </f:if>
-        </f:for>
-    </div>
-</v:page.resources.fal>
+            </f:for>
+        </div>
+    </f:if>
+</ot:carousel.images>
 

+ 31 - 33
ot_templating/Resources/Private/Partials/Modern/Carousel.html

@@ -6,37 +6,35 @@
     Voir: https://fluidtypo3.org/viewhelpers/vhs/master/Page/Resources/FalViewHelper.html
 --></f:comment>
 
-<section id="main-carousel" class="rev-slider">
-    <div id="rev_slider_268_1_wrapper"
-         class="rev_slider_wrapper fullwidthbanner-container"
-         data-alias="webster-slider-2"
-         data-source="gallery"
-         style="margin:0px auto;background:transparent;padding:0px;margin-top:0px;margin-bottom:0px;">
+<ot:carousel.images as="images"
+                    limit="5"
+                    countAs="count">
 
-        <v:page.resources.fal table="pages"
-                              field="media"
-                              uid="{page.uid}"
-                              as="images"
-                              slide="-1"
-                              limit="10"  >
+    <f:if condition="{count} > 0">
 
-            <f:if condition="{ot:utilities.count(array: images)} <= 1">
-                <style>
-                    .tparrows {
-                        display: none !important;
-                    }
-                </style>
-            </f:if>
+        <section id="main-carousel" class="rev-slider">
+            <div id="rev_slider_268_1_wrapper"
+                 class="rev_slider_wrapper fullwidthbanner-container"
+                 data-alias="webster-slider-2"
+                 data-source="gallery"
+                 style="margin:0px auto;background:transparent;padding:0px;margin-top:0px;margin-bottom:0px;">
 
-            <f:comment><!-- START REVOLUTION SLIDER 5.4.6.3 fullwidth mode --></f:comment>
-            <div id="rev_slider_268_1"
-                 class="rev_slider"
-                 style="display:none;"
-                 data-version="5.4.6.3">
+                <f:if condition="{count} <= 1">
+                    <style>
+                        .tparrows {
+                            display: none !important;
+                        }
+                    </style>
+                </f:if>
 
-                <ul>
-                    <f:for each="{images}" as="image">
-                        <f:if condition="{v:variable.pregMatch(pattern: '/.*(?:jpe?g|gif|png)$/', subject: image.url)}">
+                <f:comment><!-- START REVOLUTION SLIDER 5.4.6.3 fullwidth mode --></f:comment>
+                <div id="rev_slider_268_1"
+                     class="rev_slider"
+                     style="display:none;"
+                     data-version="5.4.6.3">
+
+                    <ul>
+                        <f:for each="{images}" as="image">
                             <li data-index="rs-757"
                                 data-transition="fade"
                                 data-slotamount="default"
@@ -67,10 +65,10 @@
                                      data="{bgposition: 'center center', bgfit: 'cover', bgrepeat: 'no-repeat', no-retina: ''}"
                                 />
                             </li>
-                        </f:if>
-                    </f:for>
-                </ul>
+                        </f:for>
+                    </ul>
+                </div>
             </div>
-        </v:page.resources.fal>
-    </div>
-</section>
+        </section>
+    </f:if>
+</ot:carousel.images>

+ 0 - 3
ot_templating/Resources/Private/Templates/Page/Events.html

@@ -5,9 +5,6 @@
 <f:comment><!-- uses the layout Events, defined in layouts/[templateName]/Events.html --></f:comment>
 <f:layout name="{ot:template.current()}/Events" />
 
-<f:comment><!-- Disable caching --></f:comment>
-<f:cache.disable />
-
 <f:section name='Configuration'>
     <flux:form id="events" label="Gabarit Evènements" extensionName="Opentalent.OtTemplating">
     </flux:form>

+ 0 - 3
ot_templating/Resources/Private/Templates/Page/Structures.html

@@ -5,9 +5,6 @@
 <f:comment><!-- uses the layout Members, defined in layouts/[templateName]/Structures.html --></f:comment>
 <f:layout name="{ot:template.current()}/Structures" />
 
-<f:comment><!-- Disable caching --></f:comment>
-<f:cache.disable />
-
 <f:section name='Configuration'>
     <flux:form id="structures" label="Gabarit Structures adhérentes" extensionName="Opentalent.OtTemplating">
     </flux:form>

+ 0 - 3
ot_templating/Resources/Private/Templates/Page/StructuresEvents.html

@@ -5,9 +5,6 @@
 <f:comment><!-- uses the layout Events, defined in layouts/[templateName]/Events.html --></f:comment>
 <f:layout name="{ot:template.current()}/StructuresEvents" />
 
-<f:comment><!-- Disable caching --></f:comment>
-<f:cache.disable />
-
 <f:section name='Configuration'>
     <flux:form id="structuresEvents" label="Gabarit Evènements des structures" extensionName="Opentalent.OtTemplating">
     </flux:form>