wip

RedTurtle · Dec 13, 2024 · d152512 · d152512
1 parent bce80cc
commit d152512
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 52 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -35,6 +35,7 @@ module.exports = {
             '@redturtle/volto-slate-extras',
             './packages/volto-slate-extras/src',
           ],
+          ['@redturtle/volto-carousel', './packages/volto-carousel/src'],
           ...addonAliases,
         ],
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],

diff --git a/packages/volto-carousel/babel.config.js b/packages/volto-carousel/babel.config.js
@@ -1,17 +1,23 @@
-module.exports = function (api) {
-  api.cache(true);
-  const presets = ['razzle'];
-  const plugins = [
-    [
-      'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
+module.exports = {
+  module: {
+    rules: [
       {
-        messagesDir: './build/messages/',
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              '@babel/preset-env',
+              '@babel/preset-react',
+              '@babel/preset-typescript',
+            ],
+          },
+        },
       },
     ],
-  ];
-
-  return {
-    plugins,
-    presets,
-  };
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
 };
diff --git a/packages/volto-carousel/src/components/Blocks/Listing/Carousel/CarouselTemplate.jsx b/packages/volto-carousel/src/components/Blocks/Listing/Carousel/CarouselTemplate.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Carousel } from '@redturtle/volto-rt-carousel';
+import { Carousel } from '@redturtle/volto-carousel';
 import config from '@plone/volto/registry';
 import './carouselTemplate.less';
+import { EffectCoverflow } from 'swiper/modules';
+import 'swiper/css/effect-coverflow';
 
 const CarouselTemplate = (props) => {
   const {
@@ -16,6 +18,8 @@ const CarouselTemplate = (props) => {
     full_width,
     head_position,
     slide_appearance = 'default',
+    showCarouselButtons = 'true',
+    sliderEffect3d,
     ...data
   } = props;
 
@@ -30,17 +34,30 @@ const CarouselTemplate = (props) => {
   const TitleTag = headlineTag ? getTitleTag(headlineTag) : 'h3';
 
   const SlideComponent =
-    config.settings['volto-rt-carousel'].slide_appearances[slide_appearance]
+    config.settings['volto-carousel'].slide_appearances[slide_appearance]
       .component;
 
   const TopSlotComponent =
-    config.settings['volto-rt-carousel'].slots?.['top']?.component;
+    config.settings['volto-carousel'].slots?.['top']?.component;
   const BottomSlotComponent =
-    config.settings['volto-rt-carousel'].slots?.['bottom']?.component;
+    config.settings['volto-carousel'].slots?.['bottom']?.component;
   //options
   let carouselOptions = {
     slidesPerView: slides_to_show,
     displayDots: display_dots,
+    enabled: showCarouselButtons,
+    // autoHeight: true,
+    modules: sliderEffect3d ? [EffectCoverflow] : [],
+    effect: sliderEffect3d ? 'coverflow' : null,
+    coverflowEffect: sliderEffect3d
+      ? {
+          rotate: 50,
+          stretch: -50,
+          depth: 0,
+          modifier: 1,
+          slideShadows: false,
+        }
+      : {},
   };
   if (autoplay) {
     carouselOptions.autoplay = true;
@@ -63,7 +80,7 @@ const CarouselTemplate = (props) => {
   }
   return (
     <div
-      className={`ui container carousel-template-wrapper head-position-${
+      className={`ui container volto-carousel-template-wrapper head-position-${
         head_position ?? 'top'
       }`}
     >

diff --git a/...to-carousel/src/components/Blocks/Listing/Carousel/SlideAppearance/defaultAppearance.less b/...to-carousel/src/components/Blocks/Listing/Carousel/SlideAppearance/defaultAppearance.less
@@ -6,7 +6,7 @@
   img {
     overflow: hidden;
     width: 100%;
-    height: var(--rt-carousel-height, 30rem);
+    height: var(--volto-carousel-height, 30rem);
     margin: 0;
   }
 

diff --git a/packages/volto-carousel/src/components/Blocks/Listing/Carousel/carouselTemplate.less b/packages/volto-carousel/src/components/Blocks/Listing/Carousel/carouselTemplate.less
@@ -5,7 +5,7 @@
       display: none;
     }
 
-    .carousel-template-wrapper {
+    .volto-template-wrapper {
       &.head-position-left {
         display: flex;
 
@@ -14,7 +14,7 @@
           padding-right: 2rem;
         }
 
-        .rt-carousel-wrapper.ui.container {
+        .volto-carousel-wrapper.ui.container {
           width: 70% !important;
         }
       }
@@ -25,15 +25,15 @@
 @media (max-width: 950px) {
   .block.listing {
     &.carousel {
-      .carousel-template-wrapper {
+      .volto-carousel-template-wrapper {
         &.head-position-left {
           display: flex;
           flex-direction: column;
           .top {
             padding-right: 0;
           }
 
-          .rt-carousel-wrapper.ui.container {
+          .volto-carousel-wrapper.ui.container {
             width: 100% !important;
           }
         }

diff --git a/packages/volto-carousel/src/components/Carousel/Carousel.jsx b/packages/volto-carousel/src/components/Carousel/Carousel.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
-import { injectLazyLibs } from '@plone/volto/src/helpers/Loadable/Loadable';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import PlayIcon from './PlayIcon';
 import PauseIcon from './PauseIcon';
 
@@ -63,6 +63,7 @@ const Carousel = ({
   full_width,
   className,
   isEditMode,
+  modules,
   ...carouselConfig
 }) => {
   const intl = useIntl();
@@ -75,6 +76,7 @@ const Carousel = ({
     label: intl.formatMessage(messages.play),
     icon: PlayIcon,
   });
+
   const _autoplay = autoplay
     ? {
         delay: autoplayDelay,
@@ -94,18 +96,26 @@ const Carousel = ({
   }
 
   let swiperConfig = {
-    modules: [Navigation, Pagination, A11y, Autoplay, Keyboard],
+    modules: [
+      ...new Set([
+        ...modules,
+        Navigation,
+        Pagination,
+        A11y,
+        Autoplay,
+        Keyboard,
+      ]),
+    ],
     slidesPerView: 1, //default, for mobile is 1 slide.
     spaceBetween,
     loop,
     centeredSlides: slidesPerView > 1 ? false : true,
-    navigation: true,
     lazy: true,
     keyboard: {
       enabled: true,
       onlyInViewport: true,
     },
-    className: 'rt-carousel',
+    className: 'volto-carousel',
     a11y: {
       enabled: true,
       containerMessage: intl.formatMessage(messages.carousel),
@@ -122,6 +132,7 @@ const Carousel = ({
     ...breakpointsConfig,
     ...(carouselConfig ?? {}),
   };
+
   if (autoplay) {
     swiperConfig.autoplay = _autoplay;
   }
@@ -159,7 +170,7 @@ const Carousel = ({
 
   return (
     <div
-      className={cx('rt-carousel-wrapper', {
+      className={cx('volto-carousel-wrapper', {
         'full-width': full_width,
         'ui container': !full_width,
         ['appearance-' + className]: className,

diff --git a/packages/volto-carousel/src/components/Carousel/CarouselSlide.jsx b/packages/volto-carousel/src/components/Carousel/CarouselSlide.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectLazyLibs } from '@plone/volto/src/helpers/Loadable/Loadable';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const CarouselSlide = ({ swiper, children }) => {
   const { SwiperSlide } = swiper;

diff --git a/packages/volto-carousel/src/components/Carousel/style.css b/packages/volto-carousel/src/components/Carousel/style.css
@@ -4,7 +4,7 @@
   --swiper-bullet-color: #fff;
   --swiper-navigation-color: #fff;
   --swiper-navigation-shadow: #000;
-  --rt-carousel-height: 30rem;
+  --volto-carousel-height: 30rem;
 }
 .swiper {
   width: 100%;
@@ -49,17 +49,17 @@
     0 0 2px var(--swiper-navigation-shadow),
     0 0 2px var(--swiper-navigation-shadow);
 }
-.rt-carousel-wrapper {
-  height: var(--rt-carousel-height, 30rem);
+.volto-carousel-wrapper {
+  height: var(--volto-carousel-height, 30rem);
 }
 
 @media (max-width: 1200px) {
-  .rt-carousel-wrapper {
+  .volto-carousel-wrapper {
     height: auto;
   }
 }
 
-.rt-carousel-wrapper .play-pause-wrapper {
+.volto-carousel-wrapper .play-pause-wrapper {
   position: absolute;
   z-index: 10;
   top: var(--swiper-pagination-top, auto);
@@ -68,7 +68,7 @@
   height: 2.5rem;
   color: #000;
 }
-.rt-carousel-wrapper .play-pause-wrapper button {
+.volto-carousel-wrapper .play-pause-wrapper button {
   width: 25px;
   height: 25px;
   border: none;
@@ -79,17 +79,17 @@
   cursor: pointer;
   line-height: 15px;
 }
-.rt-carousel-wrapper .play-pause-wrapper svg {
+.volto-carousel-wrapper .play-pause-wrapper svg {
   width: 10px;
   height: 10px;
 }
 
-.rt-carousel-wrapper.full-width .swiper-button-prev {
+.volto-carousel-wrapper.full-width .swiper-button-prev {
   left: 2rem;
 }
-.rt-carousel-wrapper.full-width .swiper-button-next {
+.volto-carousel-wrapper.full-width .swiper-button-next {
   right: 2rem;
 }
-.rt-carousel-wrapper.full-width .play-pause-wrapper {
+.volto-carousel-wrapper.full-width .play-pause-wrapper {
   right: 2rem;
 }
diff --git a/packages/volto-carousel/src/index.ts → packages/volto-carousel/src/index.js b/packages/volto-carousel/src/index.ts → packages/volto-carousel/src/index.js
@@ -70,19 +70,20 @@ const messages = defineMessages({
 });
 
 const applyConfig = (config) => {
+  console.log(config);
   config.settings.loadables = {
     ...(config.settings.loadables ?? {}),
     swiper: loadable.lib(() => import('swiper/react')),
     swiperModules: loadable.lib(() => import('swiper/modules')),
   };
-  config.settings['volto-rt-carousel'] = {
-    ...(config.settings['volto-rt-carousel'] ?? {}),
+  config.settings['volto-carousel'] = {
+    ...(config.settings['volto-carousel'] ?? {}),
     slide_appearances: {
       default: {
         name: 'Default',
         component: DefaultSlideAppearance,
       },
-      ...(config.settings['volto-rt-carousel']?.slide_appearances ?? {}),
+      ...(config.settings['volto-carousel']?.slide_appearances ?? {}),
     },
     slots: {
       top: { component: TopCarouselSlot },
@@ -199,7 +200,7 @@ const applyConfig = (config) => {
 
           position++;
 
-          //appearance slide
+          // appearance slide
           // let choices = [
           //   [
           //     SliderTemplateAppearance_SIMPLECARD,
@@ -213,11 +214,11 @@ const applyConfig = (config) => {
 
           let choices = [];
           Object.keys(
-            config.settings['volto-rt-carousel'].slide_appearances,
+            config.settings['volto-carousel'].slide_appearances,
           ).forEach((a) => {
             choices.push([
               a,
-              config.settings['volto-rt-carousel'].slide_appearances[a].name,
+              config.settings['volto-carousel'].slide_appearances[a].name,
             ]);
           });
 

diff --git a/packages/volto-carousel/tsconfig.json b/packages/volto-carousel/tsconfig.json
@@ -17,13 +17,7 @@
       "@redturtle/volto-carousel/*": ["./src/*"]
     }
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "src/components/index.js",
-    "src/components/Carousel/Carousel.jsx",
-    "src/components/Carousel/CarouselSlide.jsx"
-  ],
+  "include": ["**/*.ts", "**/*.tsx"],
   "exclude": [
     "node_modules",
     "build",