corrects block label

Reviewed-on: #6

asset/css/carousel.css

@@ -2,8 +2,9 @@
 	display: block !important;
 	flex-wrap: nowrap !important;
 }
+
 .siema {
-	margin: 0;
+	margin: 0; /*1rem 0;*/
 	background-color: #000;
 	position: relative;
 }
@@ -15,7 +16,7 @@
 	width: 100%;
 }
 
-#siema-ui {
+.siema-ui {
 	display: flex;
 	justify-content: space-between;
 	position: absolute;
@@ -34,11 +35,11 @@
 	opacity: 1;
 }
 
-.caret#left {
+.caret-left {
 	margin-left: 20px;
 }
 
-.caret#right {
+.caret-right {
 	transform: rotate(180deg);
 	margin-right: 20px;
 }
@@ -50,6 +51,6 @@
 	margin: 0;
 	align-self: center;
 }
-.archive-carousel-container { 
+.archive-carousel-container {
 	position: relative;
 }

src/Site/BlockLayout/Carousel.php

@@ -34,7 +34,7 @@ class Carousel extends AbstractBlockLayout
     }
 
 	public function getLabel() {
-		return 'Image Carrousel';
+		return 'Carousel';
 	}
 
 	public function form(PhpRenderer $view, SiteRepresentation $site,
@@ -92,10 +92,9 @@ class Carousel extends AbstractBlockLayout
 				}
 			}
 		}
-
+    $wrap = $block->dataValue('wrapStyle') . 'height:'.$block->dataValue('height').';';
 		return $view->partial('common/block-layout/simple-carousel', [
       'carousel_id' => 'ic_' . ++$id,
-			'height' => $block->dataValue('height'),
 			'duration' => $block->dataValue('duration'),
 			'perPage' => $block->dataValue('perPage'),
 			'loop' => $block->dataValue('loop'),
@@ -104,7 +103,7 @@ class Carousel extends AbstractBlockLayout
       'images' => $images,
 			'autoSlide' => $block->dataValue('autoSlide'),
 			'autoSlideInt' => $block->dataValue('autoSlideInt'),
-			'wrapStyle' => $block->dataValue('wrapStyle'),
+			'wrapStyle' => $wrap,
 			'imgStyle' => $block->dataValue('imgStyle'),
 			'ui_background' => $block->dataValue('ui_background'),
       'renderSourceLink' => $block->dataValue('renderSourceLink'),

view/common/block-layout/simple-carousel.phtml

@@ -7,7 +7,9 @@
 ?>
 
 <style>
-/* styles placed in carousel.css */
+	#siema-ui_<?= $carousel_id ?> {
+		 background-color: <?= $ui_background ?>;
+	}
 </style>
 
 <div class="archive-item-block archive-carousel">
@@ -18,55 +20,66 @@
 		</div>
 	<?php } ?>
 
-	<div class="archive-carousel-container">
-		<div class="siema_<?php $carousel_id ?> siema">
+	<div style="position:relative;">
+		<div id="siema_<?= $carousel_id ?>"
+			 	 class="siema">
 			<?php foreach ($images as $image) { ?>
-					<div class="siema-wrap" style="<?php // $wrapStyle ?>"
+					<div class="siema-wrap" style="<?= $wrapStyle ?>"
 					>
 						<img class="siema-img"
-								 style="<?php $imgStyle ?>"
-								 src="<?php $image['media_url'] ?>"
+								 style="<?= $imgStyle ?>"
+								 src="<?= $image['media_url'] ?>"
 						/>
 					</div>
 			<?php } ?>
 		</div>
-		<div id="siema-ui"></div>
+		<div id="siema-ui_<?= $carousel_id ?>"
+				 class="siema-ui">
+		</div>
 	</div>
 
 	<?php if ($title) { ?>
 	<div class="item_title">
-		<?php $title ?>
+		<?= $title ?>
 	</div>
 	<?php } ?>
 </div>
 
 <script>
 
-var sourceURLs = [];
+var sourceURLs_<?= $carousel_id ?> = [];
 <?php foreach ($images as $image) { ?>
-	sourceURLs.push("<?php $image['item_url'] ?>")
+	sourceURLs_<?= $carousel_id ?>.push("<?= $image['item_url'] ?>")
 <?php } ?>
 
 $(document).ready(function() {
-	let siema = new Siema({
-		selector: '.siema_<?php $carousel_id ?>',
+	let siema_<?= $carousel_id ?> = new Siema({
+		selector: '#siema_<?= $carousel_id ?>',
 		easing: 'ease-out',
 		duration: <?php echo $duration ?>,
 		perPage: <?php echo $perPage ?>,
 		loop: <?php echo $loop ?>,
 		draggable: <?php echo $draggable ?>,
-		onInit: changeSourceURL,
-		onChange: changeSourceURL,
+		onInit: changeSourceURL_<?= $carousel_id ?>,
+		onChange: changeSourceURL_<?= $carousel_id ?>,
 	});
 
-	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').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(() => {
@@ -75,17 +88,18 @@ $(document).ready(function() {
 <?php endif ?>
 });
 
-function changeSourceURL(){
+function changeSourceURL_<?= $carousel_id ?>(){
 	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_<?php $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])
 	}
 
 }