From 4aaeddc487ff379fa984466ec927c793eb58a678 Mon Sep 17 00:00:00 2001
From: buttle <chris@gatopelao.org>
Date: Mon, 13 Sep 2021 14:37:47 +0200
Subject: [PATCH] handles multiple carousels on same page

---
 asset/css/carousel.css                        |  9 ++--
 .../common/block-layout/simple-carousel.phtml | 43 +++++++++++--------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/asset/css/carousel.css b/asset/css/carousel.css
index eb552d6..89e605e 100644
--- a/asset/css/carousel.css
+++ b/asset/css/carousel.css
@@ -3,7 +3,7 @@
 	flex-wrap: nowrap !important;
 }
 .siema {
-	margin: 1rem 0;
+	margin: margin: 0; /*1rem 0;*/
 	background-color: #000;
 	position: relative;
 }
@@ -12,9 +12,10 @@
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
+	width: 100%;
 }
 
-#siema-ui {
+.siema-ui {
 	display: flex;
 	justify-content: space-between;
 	position: absolute;
@@ -33,11 +34,11 @@
 	opacity: 1;
 }
 
-.caret#left {
+.caret-left {
 	margin-left: 20px;
 }
 
-.caret#right {
+.caret-right {
 	transform: rotate(180deg);
 	margin-right: 20px;
 }
diff --git a/view/common/block-layout/simple-carousel.phtml b/view/common/block-layout/simple-carousel.phtml
index 2c729a2..2c57ab5 100644
--- a/view/common/block-layout/simple-carousel.phtml
+++ b/view/common/block-layout/simple-carousel.phtml
@@ -7,10 +7,8 @@
 ?>
 
 <style>
-	.siema { margin: 0; }
-	.siema-img { width: 100%; }
-	#siema-ui {
-		/* background-color: <?php echo $ui_background ?>; */
+	#siema-ui_<?= $carousel_id ?> {
+		 background-color: <?php echo $ui_background ?>;
 	}
 </style>
 
@@ -23,7 +21,8 @@
 	<?php } ?>
 
 	<div style="position:relative;">
-		<div class="siema_<?= $carousel_id ?> siema">
+		<div id="siema_<?= $carousel_id ?>"
+			 	 class="siema">
 			<?php foreach ($images as $image) { ?>
 					<div class="siema-wrap"
 							 style="<?= $wrapStyle ?>"
@@ -35,7 +34,9 @@
 					</div>
 			<?php } ?>
 		</div>
-		<div id="siema-ui"></div>
+		<div id="siema-ui_<?= $carousel_id ?>"
+				 class="siema-ui">
+		</div>
 	</div>
 
 	<?php if ($title) { ?>
@@ -47,14 +48,14 @@
 
 <script>
 
-var sourceURLs = [];
+var sourceURLs_<?= $carousel_id ?> = [];
 <?php foreach ($images as $image) { ?>
-	sourceURLs.push("<?= $image['item_url'] ?>")
+	sourceURLs_<?= $carousel_id ?>.push("<?= $image['item_url'] ?>")
 <?php } ?>
 
 $(document).ready(function() {
-	let siema = new Siema({
-		selector: '.siema_<?= $carousel_id ?>',
+	let siema_<?= $carousel_id ?> = new Siema({
+		selector: '#siema_<?= $carousel_id ?>',
 		easing: 'ease-out',
 		duration: <?php echo $duration ?>,
 		perPage: <?php echo $perPage ?>,
@@ -64,14 +65,18 @@ $(document).ready(function() {
 		onChange: changeSourceURL,
 	});
 
-	let caret = '<?php echo $caret;?>';
-	let caret_r = '<?php echo $caret_r;?>';
+	let caret = $('<?php echo $caret;?>');
+	$(caret).prop('id', '<?= $carousel_id ?>_left')
+	$(caret).addClass('caret-left');
+	let caret_r = $('<?php echo $caret_r;?>');
+	$(caret_r).prop('id', '<?= $carousel_id ?>_right')
+	$(caret_r).addClass('caret-right');
 
-	$('#siema-ui').append(caret);
-	$('#siema-ui accesskey=""').append(caret_r);
+	$('#siema-ui_<?= $carousel_id ?>').append(caret);
+	$('#siema-ui_<?= $carousel_id ?>').append(caret_r);
 
-	$('.caret#left').click(function () {siema.prev()});
-	$('.caret#right').click(function () {siema.next()});
+	$('#<?= $carousel_id ?>_left').click(function () {siema_<?= $carousel_id ?>.prev()});
+	$('#<?= $carousel_id ?>_right').click(function () {siema_<?= $carousel_id ?>.next()});
 
 <?php if ($autoSlide == true): ?>
 	window.setInterval(() => {
@@ -83,14 +88,14 @@ $(document).ready(function() {
 function changeSourceURL(){
 	var slide_idx = this.currentSlide
 	if (slide_idx < 0) {
-		slide_idx = sourceURLs.length -1;
+		slide_idx = sourceURLs_<?= $carousel_id ?>.length -1;
 	}
-	var source_link = $(".siema_<?= $carousel_id ?>")
+	var source_link = $("#siema_<?= $carousel_id ?>")
 										.closest(".archive-carousel")
 										.find(".source-link")
 										.find('a');
 	if (source_link.length != 0) {
-		$(source_link).attr("href", sourceURLs[slide_idx])
+		$(source_link).attr("href", sourceURLs_<?= $carousel_id ?>[slide_idx])
 	}
 
 }