add the carousel widget

ot_templating/Configuration/TypoScript/setup.txt

@@ -88,6 +88,10 @@ lib.auth {
     userFunc = Opentalent\OtConnect\OtAuthenticationService->logout
 }
 
+# Overrides fluid_styled_content contents (builtin contents)
+#lib.contentElement.templateRootPaths.10 = EXT:ot_templating/Resources/Private/Templates/Ext/fluid_styled_content/Default/Templates/
+
+
 
 # **** Settings: récupère les variables utilisateur *****
 
@@ -127,14 +131,15 @@ page.meta {
 page.includeCSS {
     fontAwesome = {$publicRootPath}assets/style/ext/font-awesome/css/all.css
     slick = {$publicRootPath}assets/style/ext/slick.css
+    slick-theme = {$publicRootPath}assets/style/ext/slick-theme.css
     datepicker = {$publicRootPath}assets/style/ext/jquery-ui.css
     leaflet = {$publicRootPath}assets/style/ext/leaflet.css
 }
 
 page.includeJS {
     jquery = {$publicRootPath}assets/script/jquery-3.4.1.min.js
-    slick = {$publicRootPath}assets/script/slick.min.js
     datepicker = {$publicRootPath}assets/script/jquery-ui.js
+    slick = {$publicRootPath}assets/script/slick.min.js
     leaflet = {$publicRootPath}assets/script/leaflet.js
     main = {$publicRootPath}assets/script/main.js
 }

ot_templating/Resources/Private/Partials/Carousel.html

@@ -14,13 +14,15 @@
                           limit="10"  >
 
         <f:for each="{images}" as="image">
-            <f:image src="{image.url}"
-                     alt="{image.alternative}"
-                     title="{image.title}"
-                     class="carousel-img"
-                     width="1170c"
-                     height="380c"
-            />
+            <div>
+                <f:image src="{image.url}"
+                         alt="{image.alternative}"
+                         title="{image.title}"
+                         class="carousel-img"
+                         width="1170c"
+                         height="380c"
+                />
+            </div>
         </f:for>
 
     </v:page.resources.fal>

ot_templating/Resources/Private/Templates/Content/Carousel.html

@@ -0,0 +1,76 @@
+<f:comment><!-- Widget flux par Opentalent: Carousel --></f:comment>
+<f:comment><!-- Require: https://kenwheeler.github.io/slick/ --></f:comment>
+
+{namespace v=FluidTYPO3\Vhs\ViewHelpers}
+{namespace flux=FluidTYPO3\Flux\ViewHelpers}
+
+<div xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
+     xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
+     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
+
+    <f:layout name="CustomContent"/>
+
+    <f:section name="Configuration">
+        <flux:form id="Carousel"
+                   label="Carrousel"
+                   description="Insérez un carrousel d'images"
+                   extensionName="OtTemplating"
+        >
+            <flux:form.option.group value="fce" />
+            <flux:form.option.icon value="EXT:ot_templating/Resources/Public/Icons/opentalent-144x144.png" />
+
+            <flux:field.input name="width" eval="trim" default="600" label="Largeur (en pixels)"/>
+            <flux:field.input name="height" eval="trim" default="400" label="Hauteur (en pixels)"/>
+            <flux:field.checkbox name="crop" label="Rogner les images trop grandes ?" default="0"/>
+
+            <flux:field.inline.fal name="images" minItems="2" maxItems="10"/>
+
+        </flux:form>
+    </f:section>
+
+    <f:section name="Preview">
+        <p>Carrousel</p>
+
+        <div class="be-carousel-preview">
+            <f:for each="{v:content.resources.fal(field: 'images', uid: '{record.uid}')}"
+                   as="image"
+                   iteration="iterator">
+
+                <f:image treatIdAsReference="1"
+                         src="{image.id}"
+                         title="{image.title}"
+                         alt="{image.alternative}"
+                         class="be-carousel-img-preview"
+                         maxWidth="128"
+                         maxHeight="128"
+                />
+
+            </f:for>
+        </div>
+    </f:section>
+
+    <f:section name="Main">
+
+        <div class="center-carousel">
+            <div class="carousel" style="max-width:{width}px; max-height:{height}px">
+                <f:for each="{v:content.resources.fal(field: 'images', uid: '{record.uid}')}"
+                       as="image"
+                       iteration="iterator">
+                    <div style="height: {height}px">
+                        <f:image treatIdAsReference="1"
+                                 src="{image.id}"
+                                 title="{image.title}"
+                                 alt="{image.alternative}"
+                                 class="carousel-img"
+                                 width="{width}"
+                                 maxHeight="{height}{f:if(condition: crop, then: 'c')}"
+                        />
+                    </div>
+                </f:for>
+            </div>
+        </div>
+
+    </f:section>
+
+</div>

ot_templating/Resources/Public/assets/script/main.js

@@ -108,10 +108,10 @@ $(document).ready(function(){
         dateFormat: "dd/mm/yy"
     });
 
-    // **** Carousel *****
+    // **** Carousels *****
 
     // uses the slick lib, see https://kenwheeler.github.io/slick/
-    $('.carousel').slick({
+    $('header .carousel').slick({
         arrows: false,
         dots: false,
         autoplay: true,
@@ -121,6 +121,15 @@ $(document).ready(function(){
         adaptiveHeight: false
     });
 
+    $('.content .carousel').slick({
+        arrows: true,
+        dots: true,
+        autoplay: true,
+        autoplaySpeed: 2400,
+        draggable: false,
+        speed: 700
+    });
+
     // **** Leaflet: maps *****
 
     function showEventMap(mapDiv) {

ot_templating/Resources/Public/assets/style/common/_states.scss

@@ -4,4 +4,3 @@
   color: $forms-error-color;
   font-weight: bold;
 }
-

ot_templating/Resources/Public/assets/style/common/module/_carousel.scss

@@ -1,8 +1,11 @@
 // All site's carousels
-$carousel-height: $carousel-height;
+$head-carousel-max-height: $head-carousel-max-height;
+
+header .slick-track {
+  max-height: $head-carousel-max-height;
+}
 
 .slick-track {
-  max-height: $carousel-height;
   overflow: hidden;
 }
 
@@ -19,3 +22,40 @@ $carousel-height: $carousel-height;
 .carousel .carousel-img:first-child:not(.slick-slide) {
   display: inline;
 }
+
+// vertically center
+.content .slick-slide {
+  display: flex;
+  align-items:center;
+}
+
+// horizontally center
+.center-carousel {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.center-carousel .carousel {
+  display: block;
+}
+
+// arrows color:
+
+.slick-prev:before, .slick-next:before {
+  color: #2b2b2b;
+}
+
+// Special: Carousel content preview on backend
+
+.be-carousel-preview {
+  word-wrap: break-word;
+}
+
+.be-carousel-img-preview {
+  margin-right: 4px;
+}
+
+
+

ot_templating/Resources/Public/assets/style/ext/fonts/slick.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="slick" horiz-adv-x="512">
+<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512" />
+
+<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
+</font></defs></svg>

ot_templating/Resources/Public/assets/style/ext/slick-theme.css

@@ -0,0 +1,204 @@
+@charset 'UTF-8';
+/* Slider */
+.slick-loading .slick-list
+{
+    background: #fff url('./ajax-loader.gif') center center no-repeat;
+}
+
+/* Icons */
+@font-face
+{
+    font-family: 'slick';
+    font-weight: normal;
+    font-style: normal;
+
+    src: url('./fonts/slick.eot');
+    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
+}
+/* Arrows */
+.slick-prev,
+.slick-next
+{
+    font-size: 0;
+    line-height: 0;
+
+    position: absolute;
+    top: 50%;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+
+    cursor: pointer;
+
+    color: transparent;
+    border: none;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus
+{
+    color: transparent;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before
+{
+    opacity: 1;
+}
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before
+{
+    opacity: .25;
+}
+
+.slick-prev:before,
+.slick-next:before
+{
+    font-family: 'slick';
+    font-size: 20px;
+    line-height: 1;
+
+    opacity: .75;
+    color: white;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev
+{
+    left: -25px;
+}
+[dir='rtl'] .slick-prev
+{
+    right: -25px;
+    left: auto;
+}
+.slick-prev:before
+{
+    content: '←';
+}
+[dir='rtl'] .slick-prev:before
+{
+    content: '→';
+}
+
+.slick-next
+{
+    right: -25px;
+}
+[dir='rtl'] .slick-next
+{
+    right: auto;
+    left: -25px;
+}
+.slick-next:before
+{
+    content: '→';
+}
+[dir='rtl'] .slick-next:before
+{
+    content: '←';
+}
+
+/* Dots */
+.slick-dotted.slick-slider
+{
+    margin-bottom: 30px;
+}
+
+.slick-dots
+{
+    position: absolute;
+    bottom: -25px;
+
+    display: block;
+
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    text-align: center;
+}
+.slick-dots li
+{
+    position: relative;
+
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin: 0 5px;
+    padding: 0;
+
+    cursor: pointer;
+}
+.slick-dots li button
+{
+    font-size: 0;
+    line-height: 0;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+
+    cursor: pointer;
+
+    color: transparent;
+    border: 0;
+    outline: none;
+    background: transparent;
+}
+.slick-dots li button:hover,
+.slick-dots li button:focus
+{
+    outline: none;
+}
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before
+{
+    opacity: 1;
+}
+.slick-dots li button:before
+{
+    font-family: 'slick';
+    font-size: 6px;
+    line-height: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 20px;
+    height: 20px;
+
+    content: '•';
+    text-align: center;
+
+    opacity: .25;
+    color: black;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before
+{
+    opacity: .75;
+    color: black;
+}

ot_templating/Resources/Public/assets/style/style.css

@@ -562,8 +562,11 @@ footer .logo-ot {
   color: #737373;
 }
 
-.slick-track {
+header .slick-track {
   max-height: 380px;
+}
+
+.slick-track {
   overflow: hidden;
 }
 
@@ -580,6 +583,34 @@ footer .logo-ot {
   display: inline;
 }
 
+.content .slick-slide {
+  display: flex;
+  align-items: center;
+}
+
+.center-carousel {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.center-carousel .carousel {
+  display: block;
+}
+
+.slick-prev:before, .slick-next:before {
+  color: #2b2b2b;
+}
+
+.be-carousel-preview {
+  word-wrap: break-word;
+}
+
+.be-carousel-img-preview {
+  margin-right: 4px;
+}
+
 .ot-box {
   font-size: 0.8em;
 }

ot_templating/Resources/Public/assets/style/style.scss

@@ -6,7 +6,7 @@ $main-title-color: #333 !default;
 $main-title-size: 1.6em !default;
 $main-title-weight: 500 !default;
 
-$carousel-height: 380px !default;
+$head-carousel-max-height: 380px !default;
 
 $menu-background-color: #4facc6 !default;
 $menu-background-color-hovered: #e6e6e6 !default;

ot_templating/Resources/Public/assets/style/theme-blue.css

@@ -562,8 +562,11 @@ footer .logo-ot {
   color: #737373;
 }
 
-.slick-track {
+header .slick-track {
   max-height: 380px;
+}
+
+.slick-track {
   overflow: hidden;
 }
 
@@ -580,6 +583,34 @@ footer .logo-ot {
   display: inline;
 }
 
+.content .slick-slide {
+  display: flex;
+  align-items: center;
+}
+
+.center-carousel {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.center-carousel .carousel {
+  display: block;
+}
+
+.slick-prev:before, .slick-next:before {
+  color: #2b2b2b;
+}
+
+.be-carousel-preview {
+  word-wrap: break-word;
+}
+
+.be-carousel-img-preview {
+  margin-right: 4px;
+}
+
 .ot-box {
   font-size: 0.8em;
 }

ot_templating/Resources/Public/assets/style/theme-green.css

@@ -562,8 +562,11 @@ footer .logo-ot {
   color: #737373;
 }
 
-.slick-track {
+header .slick-track {
   max-height: 380px;
+}
+
+.slick-track {
   overflow: hidden;
 }
 
@@ -580,6 +583,34 @@ footer .logo-ot {
   display: inline;
 }
 
+.content .slick-slide {
+  display: flex;
+  align-items: center;
+}
+
+.center-carousel {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.center-carousel .carousel {
+  display: block;
+}
+
+.slick-prev:before, .slick-next:before {
+  color: #2b2b2b;
+}
+
+.be-carousel-preview {
+  word-wrap: break-word;
+}
+
+.be-carousel-img-preview {
+  margin-right: 4px;
+}
+
 .ot-box {
   font-size: 0.8em;
 }

ot_templating/Resources/Public/assets/style/theme-grey.css

@@ -562,8 +562,11 @@ footer .logo-ot {
   color: #737373;
 }
 
-.slick-track {
+header .slick-track {
   max-height: 380px;
+}
+
+.slick-track {
   overflow: hidden;
 }
 
@@ -580,6 +583,34 @@ footer .logo-ot {
   display: inline;
 }
 
+.content .slick-slide {
+  display: flex;
+  align-items: center;
+}
+
+.center-carousel {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.center-carousel .carousel {
+  display: block;
+}
+
+.slick-prev:before, .slick-next:before {
+  color: #2b2b2b;
+}
+
+.be-carousel-preview {
+  word-wrap: break-word;
+}
+
+.be-carousel-img-preview {
+  margin-right: 4px;
+}
+
 .ot-box {
   font-size: 0.8em;
 }

ot_templating/Resources/Public/assets/style/theme-light-blue.css

@@ -562,8 +562,11 @@ footer .logo-ot {
   color: #737373;
 }
 
-.slick-track {
+header .slick-track {
   max-height: 380px;
+}
+
+.slick-track {
   overflow: hidden;
 }
 
@@ -580,6 +583,34 @@ footer .logo-ot {
   display: inline;
 }
 
+.content .slick-slide {
+  display: flex;
+  align-items: center;
+}
+
+.center-carousel {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.center-carousel .carousel {
+  display: block;
+}
+
+.slick-prev:before, .slick-next:before {
+  color: #2b2b2b;
+}
+
+.be-carousel-preview {
+  word-wrap: break-word;
+}
+
+.be-carousel-img-preview {
+  margin-right: 4px;
+}
+
 .ot-box {
   font-size: 0.8em;
 }

ot_templating/Resources/Public/assets/style/theme-light-red.css

@@ -562,8 +562,11 @@ footer .logo-ot {
   color: #737373;
 }
 
-.slick-track {
+header .slick-track {
   max-height: 380px;
+}
+
+.slick-track {
   overflow: hidden;
 }
 
@@ -580,6 +583,34 @@ footer .logo-ot {
   display: inline;
 }
 
+.content .slick-slide {
+  display: flex;
+  align-items: center;
+}
+
+.center-carousel {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.center-carousel .carousel {
+  display: block;
+}
+
+.slick-prev:before, .slick-next:before {
+  color: #2b2b2b;
+}
+
+.be-carousel-preview {
+  word-wrap: break-word;
+}
+
+.be-carousel-img-preview {
+  margin-right: 4px;
+}
+
 .ot-box {
   font-size: 0.8em;
 }

ot_templating/Resources/Public/assets/style/theme-orange.css

@@ -562,8 +562,11 @@ footer .logo-ot {
   color: #737373;
 }
 
-.slick-track {
+header .slick-track {
   max-height: 380px;
+}
+
+.slick-track {
   overflow: hidden;
 }
 
@@ -580,6 +583,34 @@ footer .logo-ot {
   display: inline;
 }
 
+.content .slick-slide {
+  display: flex;
+  align-items: center;
+}
+
+.center-carousel {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.center-carousel .carousel {
+  display: block;
+}
+
+.slick-prev:before, .slick-next:before {
+  color: #2b2b2b;
+}
+
+.be-carousel-preview {
+  word-wrap: break-word;
+}
+
+.be-carousel-img-preview {
+  margin-right: 4px;
+}
+
 .ot-box {
   font-size: 0.8em;
 }

ot_templating/Resources/Public/assets/style/theme-purple.css

@@ -562,8 +562,11 @@ footer .logo-ot {
   color: #737373;
 }
 
-.slick-track {
+header .slick-track {
   max-height: 380px;
+}
+
+.slick-track {
   overflow: hidden;
 }
 
@@ -580,6 +583,34 @@ footer .logo-ot {
   display: inline;
 }
 
+.content .slick-slide {
+  display: flex;
+  align-items: center;
+}
+
+.center-carousel {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.center-carousel .carousel {
+  display: block;
+}
+
+.slick-prev:before, .slick-next:before {
+  color: #2b2b2b;
+}
+
+.be-carousel-preview {
+  word-wrap: break-word;
+}
+
+.be-carousel-img-preview {
+  margin-right: 4px;
+}
+
 .ot-box {
   font-size: 0.8em;
 }

ot_templating/Resources/Public/assets/style/theme-red.css

@@ -562,8 +562,11 @@ footer .logo-ot {
   color: #737373;
 }
 
-.slick-track {
+header .slick-track {
   max-height: 380px;
+}
+
+.slick-track {
   overflow: hidden;
 }
 
@@ -580,6 +583,34 @@ footer .logo-ot {
   display: inline;
 }
 
+.content .slick-slide {
+  display: flex;
+  align-items: center;
+}
+
+.center-carousel {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.center-carousel .carousel {
+  display: block;
+}
+
+.slick-prev:before, .slick-next:before {
+  color: #2b2b2b;
+}
+
+.be-carousel-preview {
+  word-wrap: break-word;
+}
+
+.be-carousel-img-preview {
+  margin-right: 4px;
+}
+
 .ot-box {
   font-size: 0.8em;
 }