tee3apps-cms-sdk-react 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Uses JSON to dynamically generate and render UI pages in a website",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/PageComponents/Visual-Components/TabComponent.tsx

@@ -326,6 +326,33 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 		setCarouselIndex(0);
 	};
 
+	// Helper function to get sliding window indices for grid layouts
+	const getSlidingWindowIndices = (totalItems: number, itemsPerView: number, currentIndex: number): number[] => {
+		if (totalItems <= itemsPerView) {
+			// If total items <= items per view, show all items
+			return Array.from({ length: totalItems }, (_, i) => i);
+		}
+
+		// Calculate max possible index for sliding window
+		// For sliding window, we can slide until the last item is shown
+		// Max index is when we show the last itemsPerView items
+		const maxIndex = totalItems - itemsPerView;
+		const clampedIndex = Math.min(Math.max(0, currentIndex), maxIndex);
+		
+		// Sliding window: start from clampedIndex, show itemsPerView items
+		return Array.from({ length: itemsPerView }, (_, i) => clampedIndex + i);
+	};
+
+	// Helper function to calculate max carousel index for grid layouts
+	const getMaxCarouselIndex = (totalItems: number, itemsPerView: number): number => {
+		if (totalItems <= itemsPerView) {
+			return 0; // No carousel needed
+		}
+		// For sliding window, max index is when we show the last itemsPerView items
+		// This allows us to slide through all items with overlapping windows
+		return Math.max(0, totalItems - itemsPerView);
+	};
+
 	const getCurrentLayout = (tab: TabItem): string => {
 		switch (deviceMode) {
 			case 'mobileweb': return tab.mode.mobileweb.layout;
@@ -599,7 +626,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							);
 						  }
 					  
-						  // Other layouts: grid display with limited images
+						  // Other layouts: grid display with sliding window carousel
 						  const getMaxImages = () => {
 							switch (layout) {
 							  case '1x2': return 2;
@@ -609,8 +636,11 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							}
 						  };
 						  
-						  const maxImages = getMaxImages();
-						  const displayImages = images.slice(0, maxImages);
+						  const itemsPerView = getMaxImages();
+						  const maxCarouselIndex = getMaxCarouselIndex(images.length, itemsPerView);
+						  const displayIndices = getSlidingWindowIndices(images.length, itemsPerView, carouselIndex);
+						  const displayImages = displayIndices.map(idx => images[idx]);
+						  const needsCarousel = images.length > itemsPerView;
 						  
 						  // Create dynamic content style for GROUPIMAGE
 						  const groupImageContentStyle = {
@@ -623,46 +653,137 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						  };
 						  
 						  return (
-							<div style={groupImageContentStyle} className='media-box'>
-							  {displayImages.map((image, index) => {
-								const linkUrl = buildLinkForSlide(image);
-								const imageElement = (
-								  <div key={index} className="media-box">
-									<img
-									  src={getImageUrl(
-										tab.tabContentGroupImage.type === 'DYNAMIC' 
-										  ? image.image.url 
-										  : image.attr?.url
-									  )}
-									  alt={
-										tab.tabContentGroupImage.type === 'DYNAMIC' 
-										  ? image.image.alt 
-										  : image.attr?.alt
+							<div style={{ position: 'relative', width: '100%' }}>
+							  <div style={groupImageContentStyle} className='media-box'>
+								{displayImages.map((image, displayIndex) => {
+								  const originalIndex = displayIndices[displayIndex];
+								  const linkUrl = buildLinkForSlide(image);
+								  const imageElement = (
+									<div key={originalIndex} className="media-box">
+									  <img
+										src={getImageUrl(
+										  tab.tabContentGroupImage.type === 'DYNAMIC' 
+											? image.image.url 
+											: image.attr?.url
+										)}
+										alt={
+										  tab.tabContentGroupImage.type === 'DYNAMIC' 
+											? image.image.alt 
+											: image.attr?.alt
+										}
+										className="media-content"
+									  />
+									</div>
+								  );
+							
+								  return linkUrl ? (
+									<a
+									  key={originalIndex}
+									  href={linkUrl}
+									  target={
+										image.link_type === 'EXTERNALLINK'
+										  ? image.external_link?.target || '_blank'
+										  : '_self'
 									  }
-									  className="media-content"
-									/>
-								  </div>
-								);
-						  
-								return linkUrl ? (
-								  <a
-									key={index}
-									href={linkUrl}
-									target={
-									  image.link_type === 'EXTERNALLINK'
-										? image.external_link?.target || '_blank'
-										: '_self'
-									}
-									className='media-box'
+									  className='media-box'
+									>
+									  {imageElement}
+									</a>
+								  ) : (
+									<div key={originalIndex} style={{ width: '100%', height: '100%' }}>
+									  {imageElement}
+									</div>
+								  );
+								})}
+							  </div>
+
+							  {/* Carousel Navigation for Grid Layouts */}
+							  {needsCarousel && (
+								<>
+								  {/* Previous Button */}
+								  <button
+									onClick={prevCarouselItem}
+									disabled={carouselIndex === 0}
+									style={{
+									  position: 'absolute',
+									  left: '10px',
+									  top: '50%',
+									  transform: 'translateY(-50%)',
+									  background: 'rgba(0,0,0,0.5)',
+									  color: 'white',
+									  border: 'none',
+									  borderRadius: '50%',
+									  width: '40px',
+									  height: '40px',
+									  cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
+									  opacity: carouselIndex === 0 ? 0.5 : 1,
+									  display: 'flex',
+									  alignItems: 'center',
+									  justifyContent: 'center',
+									  fontSize: '18px',
+									  zIndex: 10,
+									}}
 								  >
-									{imageElement}
-								  </a>
-								) : (
-								  <div key={index} style={{ width: '100%', height: '100%' }}>
-									{imageElement}
+									‹
+								  </button>
+
+								  {/* Next Button */}
+								  <button
+									onClick={nextCarouselItem}
+									disabled={carouselIndex >= maxCarouselIndex}
+									style={{
+									  position: 'absolute',
+									  right: '10px',
+									  top: '50%',
+									  transform: 'translateY(-50%)',
+									  background: 'rgba(0,0,0,0.5)',
+									  color: 'white',
+									  border: 'none',
+									  borderRadius: '50%',
+									  width: '40px',
+									  height: '40px',
+									  cursor: carouselIndex >= maxCarouselIndex ? 'not-allowed' : 'pointer',
+									  opacity: carouselIndex >= maxCarouselIndex ? 0.5 : 1,
+									  display: 'flex',
+									  alignItems: 'center',
+									  justifyContent: 'center',
+									  fontSize: '18px',
+									  zIndex: 10,
+									}}
+								  >
+									›
+								  </button>
+
+								  {/* Dots Indicator */}
+								  <div
+									style={{
+									  position: 'absolute',
+									  bottom: '10px',
+									  left: '50%',
+									  transform: 'translateX(-50%)',
+									  display: 'flex',
+									  gap: '8px',
+									  zIndex: 10,
+									}}
+								  >
+									{Array.from({ length: maxCarouselIndex + 1 }, (_, index) => (
+									  <button
+										key={index}
+										onClick={() => goToCarouselItem(index)}
+										style={{
+										  width: index === carouselIndex ? '12px' : '8px',
+										  height: index === carouselIndex ? '12px' : '8px',
+										  borderRadius: '50%',
+										  border: 'none',
+										  background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
+										  cursor: 'pointer',
+										  transition: 'all 0.3s ease',
+										}}
+									  />
+									))}
 								  </div>
-								);
-							  })}
+								</>
+							  )}
 							</div>
 						  );
 						  
@@ -827,7 +948,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								);
 						  }
 					  
-						  // Other layouts: grid display with limited videos
+						  // Other layouts: grid display with sliding window carousel
 						  const getMaxVideos = () => {
 							switch (layout) {
 							  case '1x2': return 2;
@@ -837,8 +958,11 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							}
 						  };
 						  
-						  const maxVideos = getMaxVideos();
-						  const displayVideos = videos.slice(0, maxVideos);
+						  const itemsPerView = getMaxVideos();
+						  const maxCarouselIndex = getMaxCarouselIndex(videos.length, itemsPerView);
+						  const displayIndices = getSlidingWindowIndices(videos.length, itemsPerView, carouselIndex);
+						  const displayVideos = displayIndices.map(idx => videos[idx]);
+						  const needsCarousel = videos.length > itemsPerView;
 						  
 						  // Create dynamic content style for GROUPVIDEO
 						  const groupVideoContentStyle = {
@@ -851,49 +975,140 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						  };
 						  
 						  return (
-							<div style={groupVideoContentStyle} className='media-box'>
-							  {displayVideos.map((video, index) => {
-								const linkUrl = buildLinkForSlide(video);
-								
-								const videoElement = (
-								  <div className="media-box">
-									<video
-									  src={getImageUrl(
-										tab.tabContentGroupVideo.type === 'DYNAMIC' 
-										  ? video.video?.url 
-										  : video.attr?.url
-									  )}
-									  title={
-										tab.tabContentGroupVideo.type === 'DYNAMIC' 
-										  ? video.video?.alt || video.name
-										  : video.attr?.alt 
-									  }
-									  className="media-content"
-									  controls
-									  style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
-									/>
-								  </div>
-								);
+							<div style={{ position: 'relative', width: '100%' }}>
+							  <div style={groupVideoContentStyle} className='media-box'>
+								{displayVideos.map((video, displayIndex) => {
+								  const originalIndex = displayIndices[displayIndex];
+								  const linkUrl = buildLinkForSlide(video);
+								  
+								  const videoElement = (
+									<div key={originalIndex} className="media-box">
+									  <video
+										src={getImageUrl(
+										  tab.tabContentGroupVideo.type === 'DYNAMIC' 
+											? video.video?.url 
+											: video.attr?.url
+										)}
+										title={
+										  tab.tabContentGroupVideo.type === 'DYNAMIC' 
+											? video.video?.alt || video.name
+											: video.attr?.alt 
+										}
+										className="media-content"
+										controls
+										style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
+									  />
+									</div>
+								  );
 						  
-								return linkUrl ? (
-								  <a
-									key={index}
-									href={linkUrl}
-									target={
-									  video.link_type === 'EXTERNALLINK'
-										? video.external_link?.target || '_blank'
-										: '_self'
-									}
-									className='media-box'
+								  return linkUrl ? (
+									<a
+									  key={originalIndex}
+									  href={linkUrl}
+									  target={
+										video.link_type === 'EXTERNALLINK'
+										  ? video.external_link?.target || '_blank'
+										  : '_self'
+									  }
+									  className='media-box'
+									>
+									  {videoElement}
+									</a>
+								  ) : (
+									<div key={originalIndex} style={{ width: '100%', height: '100%' }}>
+									  {videoElement}
+									</div>
+								  );
+								})}
+							  </div>
+
+							  {/* Carousel Navigation for Grid Layouts */}
+							  {needsCarousel && (
+								<>
+								  {/* Previous Button */}
+								  <button
+									onClick={prevCarouselItem}
+									disabled={carouselIndex === 0}
+									style={{
+									  position: 'absolute',
+									  left: '10px',
+									  top: '50%',
+									  transform: 'translateY(-50%)',
+									  background: 'rgba(0,0,0,0.5)',
+									  color: 'white',
+									  border: 'none',
+									  borderRadius: '50%',
+									  width: '40px',
+									  height: '40px',
+									  cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
+									  opacity: carouselIndex === 0 ? 0.5 : 1,
+									  display: 'flex',
+									  alignItems: 'center',
+									  justifyContent: 'center',
+									  fontSize: '18px',
+									  zIndex: 10,
+									}}
 								  >
-									{videoElement}
-								  </a>
-								) : (
-								  <div key={index} style={{ width: '100%', height: '100%' }}>
-									{videoElement}
+									‹
+								  </button>
+
+								  {/* Next Button */}
+								  <button
+									onClick={nextCarouselItem}
+									disabled={carouselIndex >= maxCarouselIndex}
+									style={{
+									  position: 'absolute',
+									  right: '10px',
+									  top: '50%',
+									  transform: 'translateY(-50%)',
+									  background: 'rgba(0,0,0,0.5)',
+									  color: 'white',
+									  border: 'none',
+									  borderRadius: '50%',
+									  width: '40px',
+									  height: '40px',
+									  cursor: carouselIndex >= maxCarouselIndex ? 'not-allowed' : 'pointer',
+									  opacity: carouselIndex >= maxCarouselIndex ? 0.5 : 1,
+									  display: 'flex',
+									  alignItems: 'center',
+									  justifyContent: 'center',
+									  fontSize: '18px',
+									  zIndex: 10,
+									}}
+								  >
+									›
+								  </button>
+
+								  {/* Dots Indicator */}
+								  <div
+									style={{
+									  position: 'absolute',
+									  bottom: '10px',
+									  left: '50%',
+									  transform: 'translateX(-50%)',
+									  display: 'flex',
+									  gap: '8px',
+									  zIndex: 10,
+									}}
+								  >
+									{Array.from({ length: maxCarouselIndex + 1 }, (_, index) => (
+									  <button
+										key={index}
+										onClick={() => goToCarouselItem(index)}
+										style={{
+										  width: index === carouselIndex ? '12px' : '8px',
+										  height: index === carouselIndex ? '12px' : '8px',
+										  borderRadius: '50%',
+										  border: 'none',
+										  background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
+										  cursor: 'pointer',
+										  transition: 'all 0.3s ease',
+										}}
+									  />
+									))}
 								  </div>
-								);
-							  })}
+								</>
+							  )}
 							</div>
 						  );
 						  
@@ -1023,7 +1238,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								);
 							  }
 						  
-							  // Other layouts: Grid view with limited products
+							  // Other layouts: Grid view with sliding window carousel
 							  const getMaxProducts = () => {
 								switch (layout) {
 								  case '1x2': return 2;
@@ -1033,8 +1248,11 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								}
 							  };
 							  
-							  const maxProducts = getMaxProducts();
-							  const displayProducts = products.slice(0, maxProducts);
+							  const itemsPerView = getMaxProducts();
+							  const maxCarouselIndex = getMaxCarouselIndex(products.length, itemsPerView);
+							  const displayIndices = getSlidingWindowIndices(products.length, itemsPerView, carouselIndex);
+							  const displayProducts = displayIndices.map(idx => products[idx]);
+							  const needsCarousel = products.length > itemsPerView;
 							  
 							  // Create dynamic content style for GROUPPRODUCT
 							  const groupProductContentStyle = {
@@ -1049,26 +1267,119 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							  };
 							  
 							  return (
-								<div style={groupProductContentStyle}>
-								  {displayProducts.map((product, index) => (
-									<div
-									  key={index}
-									  style={{
-										width: '100%',
-										height: '100%',
-										display: 'flex',
-										alignItems: 'stretch',
-										justifyContent: 'center',
-										minHeight: '200px',
-									  }}
-									>
-									  <ProductCard product={product} layout={layout} />
+								<div style={{ position: 'relative', width: '100%' }}>
+								  <div style={groupProductContentStyle}>
+									{displayProducts.map((product, displayIndex) => {
+									  const originalIndex = displayIndices[displayIndex];
+									  return (
+										<div
+										  key={originalIndex}
+										  style={{
+											width: '100%',
+											height: '100%',
+											display: 'flex',
+											alignItems: 'stretch',
+											justifyContent: 'center',
+											minHeight: '200px',
+										  }}
+										>
+										  <ProductCard product={product} layout={layout} />
+										</div>
+									  );
+									})}
+								  </div>
+
+								  {/* Carousel Navigation for Grid Layouts */}
+								  {needsCarousel && (
+									<>
+									  {/* Previous Button */}
+									  <button
+										onClick={prevCarouselItem}
+										disabled={carouselIndex === 0}
+										style={{
+										  position: 'absolute',
+										  left: '10px',
+										  top: '50%',
+										  transform: 'translateY(-50%)',
+										  background: 'rgba(0,0,0,0.5)',
+										  color: 'white',
+										  border: 'none',
+										  borderRadius: '50%',
+										  width: '40px',
+										  height: '40px',
+										  cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
+										  opacity: carouselIndex === 0 ? 0.5 : 1,
+										  display: 'flex',
+										  alignItems: 'center',
+										  justifyContent: 'center',
+										  fontSize: '18px',
+										  zIndex: 10,
+										}}
+									  >
+										‹
+									  </button>
+
+									  {/* Next Button */}
+									  <button
+										onClick={nextCarouselItem}
+										disabled={carouselIndex >= maxCarouselIndex}
+										style={{
+										  position: 'absolute',
+										  right: '10px',
+										  top: '50%',
+										  transform: 'translateY(-50%)',
+										  background: 'rgba(0,0,0,0.5)',
+										  color: 'white',
+										  border: 'none',
+										  borderRadius: '50%',
+										  width: '40px',
+										  height: '40px',
+										  cursor: carouselIndex >= maxCarouselIndex ? 'not-allowed' : 'pointer',
+										  opacity: carouselIndex >= maxCarouselIndex ? 0.5 : 1,
+										  display: 'flex',
+										  alignItems: 'center',
+										  justifyContent: 'center',
+										  fontSize: '18px',
+										  zIndex: 10,
+										}}
+									  >
+										›
+									  </button>
+
+									  {/* Dots Indicator */}
+									  <div
+										style={{
+										  position: 'absolute',
+										  bottom: '10px',
+										  left: '50%',
+										  transform: 'translateX(-50%)',
+										  display: 'flex',
+										  gap: '8px',
+										  zIndex: 10,
+										}}
+									  >
+										{Array.from({ length: maxCarouselIndex + 1 }, (_, index) => (
+										  <button
+											key={index}
+											onClick={() => goToCarouselItem(index)}
+											style={{
+											  width: index === carouselIndex ? '12px' : '8px',
+											  height: index === carouselIndex ? '12px' : '8px',
+											  borderRadius: '50%',
+											  border: 'none',
+											  background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
+											  cursor: 'pointer',
+											  transition: 'all 0.3s ease',
+											}}
+										  />
+										))}
+									  </div>
+									</>
+								  )}
 								</div>
-							))}
-						</div>
-					);
-				}
-				break;
+							  );
+							}
+							break;
 
 			default:
 				return (