Configurable UI element CSS

Neo-Inspiration · Nov 25, 2018 · 4f46f6f · 4f46f6f
1 parent 19992fe
commit 4f46f6f
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 14 deletions.
diff --git a/asset/css/carousel.css b/asset/css/carousel.css
@@ -14,7 +14,7 @@
 	margin-right: auto;
 }
 
-.siema-ui {
+#siema-ui {
 	display: flex;
 	justify-content: space-between;
 	position: absolute;

diff --git a/config/module.config.php b/config/module.config.php
@@ -28,7 +28,8 @@
             'autoSlide' => false,
             'autoSlideInt' => 5000,
             'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
-            'imgStyle' => ''
+            'imgStyle' => '',
+            'ui_background' => 'rgba(0,0,0,0.1)',
         ]
     ]
 ];
diff --git a/config/module.ini b/config/module.ini
@@ -8,5 +8,5 @@ author_link  = "https://github.com/ESnark"
 module_link  = "https://github.com/Neo-Inspiration/Omeka-S-SimpleCarousel"
 support_link = "https://github.com/Neo-Inspiration/Omeka-S-SimpleCarousel/issues"
 configurable = false
-version      = "1.2.2"
+version      = "1.2.3"
 omeka_version_constraint = "^1.1.0"
diff --git a/src/Form/CarouselBlockForm.php b/src/Form/CarouselBlockForm.php
@@ -94,5 +94,14 @@ public function init()
 				'label' => 'img tag Style',
 			]
 		]);
+
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][ui_background]',
+			'type' => Element\Text::class,
+			'options' => [
+				'label' => 'siema UI style',
+				'info' => 'Styling #siema-ui including UI element. commonly used for background setup.'
+			]
+		]);
 	}
 }
diff --git a/src/Site/BlockLayout/Carousel.php b/src/Site/BlockLayout/Carousel.php
@@ -55,6 +55,7 @@ public function form(PhpRenderer $view, SiteRepresentation $site,
 			'o:block[__blockIndex__][o:data][autoSlideInt]' => $data['autoSlideInt'],
 			'o:block[__blockIndex__][o:data][wrapStyle]' => $data['wrapStyle'],
 			'o:block[__blockIndex__][o:data][imgStyle]' => $data['imgStyle'],
+			'o:block[__blockIndex__][o:data][ui_background]' => $data['ui_background'],
 		]);
 		$form->prepare();
 
@@ -100,6 +101,7 @@ public function render(PhpRenderer $view, SitePageBlockRepresentation $block)
 			'autoSlideInt' => $block->dataValue('autoSlideInt'),
 			'wrapStyle' => $block->dataValue('wrapStyle'),
 			'imgStyle' => $block->dataValue('imgStyle'),
+			'ui_background' => $block->dataValue('ui_background'),
 		]);
 	}
 }
diff --git a/view/common/block-layout/simple-carousel.phtml b/view/common/block-layout/simple-carousel.phtml
@@ -21,16 +21,12 @@
 		}
 	?>
 	</div>
-	<div class="siema-ui"></div>
+	<div id="siema-ui"></div>
 
 	<style>
-		.siema-wrap {
-			height: <?php echo $height ?>;
-		}
-
-		.siema-img {
-			width: 100%;
-		}
+		.siema-wrap { height: <?php echo $height ?>; }
+		.siema-img { width: 100%; }
+		#siema-ui { background-color: <?php echo $ui_background ?>; }
 	</style>
 	<script>
 	$(document).ready(function() {
@@ -47,11 +43,11 @@
 		let caret_r = '<?php echo $caret_r;?>';
 
 
-		$('.siema-ui').append(caret);
+		$('#siema-ui').append(caret);
 	<?php if ($title !== false): ?>
-		$('.siema-ui').append('<?php echo $title;?>');
+		$('#siema-ui').append('<?php echo $title;?>');
 	<?php endif ?>
-		$('.siema-ui').append(caret_r);
+		$('#siema-ui').append(caret_r);
 
 		$('.caret#left').click(function () {siema.prev()});
 		$('.caret#right').click(function () {siema.next()});