[ENHANCEMENT] [MER-3989] Updates to advanced author image carousel (#…

…5296) * MER-3989 * more changes * Fixes issues where backspace triggers delete window. * Update TorusImageBrowser.tsx * more changes
Simon-Initiative · Dec 13, 2024 · 477df86 · 477df86
1 parent e9af61c
commit 477df86
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 19 deletions.
diff --git a/assets/src/apps/authoring/components/PropertyEditor/custom/TorusImageBrowser.tsx b/assets/src/apps/authoring/components/PropertyEditor/custom/TorusImageBrowser.tsx
@@ -6,7 +6,14 @@ import { selectProjectSlug } from '../../../store/app/slice';
 import { MediaPickerModal } from '../../Modal/MediaPickerModal';
 import { MediaBrowserComponent, TorusMediaBrowserWrapper } from './TorusMediaBrowserWrapper';
 
-const _TorusImageBrowser: MediaBrowserComponent = ({ id, label, value, onChange, onBlur }) => {
+const _TorusImageBrowser: MediaBrowserComponent = ({
+  id,
+  label,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+}) => {
   const [pickerOpen, , openPicker, closePicker] = useToggle();
   const projectSlug: string = useSelector(selectProjectSlug);
 
@@ -33,7 +40,10 @@ const _TorusImageBrowser: MediaBrowserComponent = ({ id, label, value, onChange,
       {hasImage || <div className="truncate-left">No Image</div>}
 
       <Button
-        onClick={openPicker}
+        onClick={() => {
+          if (onFocus) onFocus();
+          openPicker();
+        }}
         type="button"
         variant="secondary"
         size="sm"
@@ -42,7 +52,14 @@ const _TorusImageBrowser: MediaBrowserComponent = ({ id, label, value, onChange,
         <i className="fa-solid fa-image"></i>
       </Button>
 
-      <a href="#" style={{ marginLeft: '5px', textDecoration: 'underline' }} onClick={openPicker}>
+      <a
+        href="#"
+        style={{ marginLeft: '5px', textDecoration: 'underline' }}
+        onClick={() => {
+          if (onFocus) onFocus();
+          openPicker();
+        }}
+      >
         Upload or Link Image
       </a>
       {pickerOpen && (

diff --git a/assets/src/apps/authoring/components/PropertyEditor/custom/TorusMediaBrowserWrapper.tsx b/assets/src/apps/authoring/components/PropertyEditor/custom/TorusMediaBrowserWrapper.tsx
@@ -22,6 +22,7 @@ export interface MediaBrowserProps {
   value: string;
   onChange: (url: string) => void;
   onBlur: (id: string, url: string) => void;
+  onFocus?: () => void;
 }
 
 export type MediaBrowserComponent = React.FC<MediaBrowserProps>;
@@ -43,6 +44,9 @@ export const TorusMediaBrowserWrapper = (
             value={props.value}
             onChange={(event) => props.onChange(event.target.value)}
             onBlur={(event) => props.onBlur(props.id, event.target.value)}
+            onFocus={() => {
+              if (props.onFocus) props.onFocus();
+            }}
           />
         </div>
       );

diff --git a/assets/src/apps/authoring/components/RightMenu/PartPropertyEditor.tsx b/assets/src/apps/authoring/components/RightMenu/PartPropertyEditor.tsx
@@ -335,7 +335,9 @@ export const PartPropertyEditor: React.FC<Props> = ({
   const selectPartType = selectedPartDef?.type || '';
 
   return (
-    <div className={`component-tab p-3 overflow-hidden part-property-editor ${selectPartType}`}>
+    <div
+      className={`component-tab p-3 overflow-hidden part-property-editor ${selectPartType}-part-property`}
+    >
       {selectedPartDef && partEditMode === 'expert' && (
         <ButtonToolbar aria-label="Component Tools">
           <ButtonGroup className="me-2" aria-label="First group">

diff --git a/assets/src/components/activities/adaptive/AdaptiveAuthoring.scss b/assets/src/components/activities/adaptive/AdaptiveAuthoring.scss
@@ -1,18 +1,20 @@
 .advanced-authoring {
-  .part-property-editor.janus-popup .aa-properties-editor .color-picker-widget {
+  .part-property-editor.janus-popup-part-property .aa-properties-editor .color-picker-widget {
     top: 1133px !important;
     padding-left: 14px;
   }
-  .part-property-editor.janus-navigation-button .aa-properties-editor .color-picker-widget {
+  .part-property-editor.janus-navigation-button-part-property
+    .aa-properties-editor
+    .color-picker-widget {
     top: 559px !important;
     padding-left: 14px;
   }
-  .part-property-editor.janus-text-flow .aa-properties-editor .color-picker-widget {
+  .part-property-editor.janus-text-flow-part-property .aa-properties-editor .color-picker-widget {
     top: 506px !important;
     padding-left: 14px;
   }
   //Simple Authoring
-  .part-property-editor.janus-popup .color-picker-widget {
+  .part-property-editor.janus-popup-part-property .color-picker-widget {
     top: 583px !important;
     padding-left: 14px;
   }

diff --git a/assets/src/components/parts/janus-Carousel/CarouselAuthor.tsx b/assets/src/components/parts/janus-Carousel/CarouselAuthor.tsx
@@ -1,22 +1,28 @@
 import React, { CSSProperties, useEffect } from 'react';
+import { A11y, Keyboard, Navigation, Pagination, Zoom } from 'swiper';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import 'swiper/css/zoom';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { AuthorPartComponentProps } from 'components/parts/types/parts';
+import './Carousel.css';
 import { CarouselModel } from './schema';
 
 const CarouselAuthor: React.FC<AuthorPartComponentProps<CarouselModel>> = (props) => {
   const { model } = props;
-
-  const { z = 0, width, height, fontSize = 16, images } = model;
+  const { z = 0, width, height, fontSize = 16, images, zoom: carouselZoom } = model;
   const styles: CSSProperties = {
     fontSize: `${fontSize}px`,
     zIndex: z,
     overflow: 'hidden',
     display: 'flex',
   };
-
+  const MAGIC_NUMBER = 75;
   const imgStyles: CSSProperties = {
-    maxWidth: `calc(${width}px - ${64}px)`,
-    maxHeight: `calc(${height}px - ${32}px)`,
+    maxWidth: `calc(${width}px - ${MAGIC_NUMBER}px)`,
+    maxHeight: `calc(${height} - ${MAGIC_NUMBER}px)`,
   };
 
   useEffect(() => {
@@ -31,13 +37,13 @@ const CarouselAuthor: React.FC<AuthorPartComponentProps<CarouselModel>> = (props
     <div data-janus-type={tagName} className={`janus-image-carousel`} style={styles}>
       {images.length > 0 && (
         <Swiper
-          loop
-          navigation
+          modules={[Navigation, Pagination, A11y, Keyboard, Zoom]}
           slidesPerView={1}
-          zoom={{ maxRatio: 3 }}
+          loop={true}
+          navigation={true}
+          zoom={carouselZoom ? { maxRatio: 3 } : false}
           keyboard={{ enabled: true }}
           pagination={{ clickable: true }}
-          enabled={false}
         >
           {images.map((image: any, index: number) => (
             <SwiperSlide key={index} zoom={true}>

diff --git a/assets/src/components/parts/janus-Carousel/schema.ts b/assets/src/components/parts/janus-Carousel/schema.ts
@@ -33,7 +33,7 @@ export const schema: JSONSchema7Object = {
       properties: {
         url: {
           type: 'string',
-          description: 'Image URL',
+          description: '',
         },
         caption: {
           type: 'string',
@@ -48,7 +48,15 @@ export const schema: JSONSchema7Object = {
   },
 };
 
-export const uiSchema = {};
+export const uiSchema = {
+  images: {
+    items: {
+      url: {
+        'ui:widget': 'TorusImageBrowser',
+      },
+    },
+  },
+};
 
 export const adaptivitySchema = {
   'Current Image': CapiVariableTypes.NUMBER,
@@ -60,4 +68,6 @@ export const createSchema = (): Partial<CarouselModel> => ({
   customCssClass: '',
   zoom: true,
   images: [{ url: '/images/placeholder-image.svg', caption: 'an image at night', alt: 'an image' }],
+  width: 400,
+  height: 400,
 });