renders source link and subtitle

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Neo-Inspiration
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Module.php

@@ -0,0 +1,14 @@
+<?php
+namespace SimpleCarousel;
+
+use Omeka\Module\AbstractModule;
+use Laminas\EventManager\SharedEventManagerInterface;
+use Laminas\Mvc\MvcEvent;
+
+class Module extends AbstractModule
+{
+	public function getConfig()
+	{
+		return include __DIR__ . '/config/module.config.php';
+	}
+}

README.md

@@ -0,0 +1,30 @@
+# Simple Carousel (module for Omeka S)
+[Arc-hive Simple Carousel] is a module for [Omeka S]. Forked from [Simple Carousel]
+
+
+
+
+
+# Original README
+
+[Simple Carousel] is a module for [Omeka S]. This module provides carousel block form.
+
+You can simply place carousel blocks composed of site resource images on a page.
+
+## TODO
+- [ ] Block height value validation. (CSS rule)
+- [x] Adding user configurable CSS setting.
+- [x] More readable slide button.
+- [x] Replacing `filter` CSS attribute for IE compatibility
+
+## LISENCE
+The module is released under the MIT License.
+
+The script for Carousel feature is imported from [siema] of [pawelgrzybek].
+
+[Arc-hive Simple Carousel]:https://git.hangar.org/arcHIVE-tech/SimpleCarousel-omeka-module
+[Simple Carousel]: https://github.com/Neo-Inspiration/Omeka-S-SimpleCarousel
+[Omeka S]: https://omeka.org/s
+[MIT]: http://opensource.org/licenses/MIT
+[siema]: https://github.com/pawelgrzybek/siema
+[pawelgrzybek]: https://github.com/pawelgrzybek

asset/css/carousel.css

@@ -0,0 +1,51 @@
+#content {
+	display: block !important;
+	flex-wrap: nowrap !important;
+}
+.siema {
+	margin: 1rem 0;
+	background-color: #000;
+	position: relative;
+}
+
+.siema-img {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+#siema-ui {
+	display: flex;
+	justify-content: space-between;
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.caret {
+	opacity: 0.5;
+	width: 5%;
+	align-self: center;
+}
+
+.caret:hover {
+	opacity: 1;
+}
+
+.caret#left {
+	margin-left: 20px;
+}
+
+.caret#right {
+	transform: rotate(180deg);
+	margin-right: 20px;
+}
+
+#carousel-title {color: #FFF;
+	font-size: 30px;
+	border: 3px solid;
+	padding: 20px;
+	margin: 0;
+	align-self: center;
+}

config/module.config.php

@@ -0,0 +1,36 @@
+<?php
+namespace SimpleCarousel;
+
+return [
+    'view_manager' => [
+        'template_path_stack' => [
+            dirname(__DIR__) . '/view',
+        ]
+    ],
+	'block_layouts' => [
+        'factories' => [
+            'carousel' => Service\BlockLayout\CarouselFactory::class,
+        ],
+    ],
+    'form_elements' => [
+        'invokables' => [
+            Form\CarouselBlockForm::class => Form\CarouselBlockForm::class,
+        ],
+    ],
+    'DefaultSettings' => [
+        'CarouselBlockForm' => [
+            'height' => '500px',
+            'duration' => 200,
+            'perPage' => 1,
+            'loop' => true,
+            'draggable' => true,
+            'subTitle' => '',
+            'renderSourceLink' => true,
+            'autoSlide' => false,
+            'autoSlideInt' => 5000,
+            'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
+            'imgStyle' => '',
+            'ui_background' => 'rgba(0,0,0,0.1)',
+        ]
+    ]
+];

config/module.ini

@@ -0,0 +1,12 @@
+[info]
+name         = "Simple Carousel"
+description  = "Display carousels into pages"
+tags         = ""
+license      = "MIT"
+author       = "ESnark"
+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.3.0"
+omeka_version_constraint = "^3.0.0"

src/Form/CarouselBlockForm.php

@@ -0,0 +1,119 @@
+<?php
+namespace SimpleCarousel\Form;
+
+use Laminas\Form\Element;
+use Laminas\Form\Form;
+
+class CarouselBlockForm extends Form
+{
+	public function init()
+	{
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][height]',
+            'type' => Element\Text::class,
+            'options' => [
+                'label' => 'Carousel height',
+                'info' => 'Please enter a number with CSS units.',
+            ],
+		]);
+
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][duration]',
+            'type' => Element\Number::class,
+            'options' => [
+				'label' => 'Duration (milliseconds)',
+				'info' => 'Slide transition duration in milliseconds.'
+            ],
+		]);
+
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][perPage]',
+            'type' => Element\Number::class,
+            'options' => [
+				'label' => 'Image Per page',
+				'info' => 'The number of slides to be shown.'
+			],
+			'attributes' => [
+				'min' => 1,
+                'max' => 10,
+			]
+		]);
+
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][loop]',
+			'type' => Element\Checkbox::class,
+            'options' => [
+				'label' => 'Loop',
+			]
+		]);
+
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][draggable]',
+			'type' => Element\Checkbox::class,
+            'options' => [
+				'label' => 'Draggable',
+			]
+		]);
+
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][autoSlide]',
+			'type' => Element\Checkbox::class,
+            'options' => [
+				'label' => 'Auto Slide',
+			]
+		]);
+
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][autoSlideInt]',
+			'type' => Element\Text::class,
+            'options' => [
+				'label' => 'Slide Interval (milliseconds)',
+				'info' => 'Shows next slide every given millisecond.'
+			]
+		]);
+
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][wrapStyle]',
+			'type' => Element\Text::class,
+            'options' => [
+				'label' => 'image wrapper Style',
+			]
+		]);
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][imgStyle]',
+			'type' => Element\Text::class,
+            'options' => [
+				'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.'
+			]
+		]);
+
+		$this->add([
+		    'type' => Element\Checkbox::class,
+		    'name' => 'o:block[__blockIndex__][o:data][renderSourceLink]',
+		    'options' => [
+		        'label' => 'Display a link to the item',
+		        //'use_hidden_element' => true,
+		        'checked_value' => true,
+		        'unchecked_value' => false,
+		    ],
+		]);
+
+		$this->add([
+			'name' => 'o:block[__blockIndex__][o:data][subTitle]',
+			'type' => Element\Text::class,
+      'options' => [
+				'label' => 'Sub-title',
+			]
+		]);
+
+	}
+}

src/Service/BlockLayout/CarouselFactory.php

@@ -0,0 +1,18 @@
+<?php
+namespace SimpleCarousel\Service\BlockLayout;
+
+use Interop\Container\ContainerInterface;
+use SimpleCarousel\Site\BlockLayout\Carousel;
+use Laminas\ServiceManager\Factory\FactoryInterface;
+
+class CarouselFactory implements FactoryInterface
+{
+	public function __invoke(ContainerInterface $services, $requestedName, array $options = null)
+	{
+		return new Carousel(
+			$services->get('FormElementManager'),
+			$services->get('Config')['DefaultSettings']['CarouselBlockForm']
+		);
+	}
+}
+?>

src/Site/BlockLayout/Carousel.php

@@ -0,0 +1,111 @@
+<?php
+namespace SimpleCarousel\Site\BlockLayout;
+
+use Omeka\Api\Representation\SiteRepresentation;
+use Omeka\Api\Representation\SitePageRepresentation;
+use Omeka\Api\Representation\SitePageBlockRepresentation;
+use Omeka\Site\BlockLayout\AbstractBlockLayout;
+use Laminas\View\Renderer\PhpRenderer;
+
+use Laminas\Form\FormElementManager;
+
+use SimpleCarousel\Form\CarouselBlockForm;
+
+class Carousel extends AbstractBlockLayout
+{
+	/**
+     * @var FormElementManager
+     */
+    protected $formElementManager;
+
+    /**
+     * @var array
+     */
+	protected $defaultSettings = [];
+
+    /**
+     * @param FormElementManager $formElementManager
+     * @param array $defaultSettings
+     */
+    public function __construct(FormElementManager $formElementManager, array $defaultSettings)
+    {
+        $this->formElementManager = $formElementManager;
+        $this->defaultSettings = $defaultSettings;
+    }
+
+	public function getLabel() {
+		return 'SimpleCarousel';
+	}
+
+	public function form(PhpRenderer $view, SiteRepresentation $site,
+        SitePageRepresentation $page = null, SitePageBlockRepresentation $block = null
+    ) {
+		$form = $this->formElementManager->get(CarouselBlockForm::class);
+		$data = $block
+			? $block->data() + $this->defaultSettings
+			: $this->defaultSettings;
+		$form->setData([
+			'o:block[__blockIndex__][o:data][height]' => $data['height'],
+			'o:block[__blockIndex__][o:data][duration]' => $data['duration'],
+			'o:block[__blockIndex__][o:data][perPage]' => $data['perPage'],
+			'o:block[__blockIndex__][o:data][loop]' => $data['loop'],
+			'o:block[__blockIndex__][o:data][draggable]' => $data['draggable'],
+			'o:block[__blockIndex__][o:data][subTitle]' => $data['subTitle'],
+			'o:block[__blockIndex__][o:data][autoSlide]' => $data['autoSlide'],
+			'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'],
+      'o:block[__blockIndex__][o:data][renderSourceLink]' => $data['renderSourceLink'],
+		]);
+		$form->prepare();
+
+		$html = '';
+		$html .= $view->blockAttachmentsForm($block);
+		$html .= '<a href="#" class="collapse" aria-label="collapse"><h4>' . $view->translate('Options'). '</h4></a>';
+		$html .= '<div class="collapsible" style="padding-top:6px;">';
+		$html .= $view->formCollection($form);
+        $html .= '</div>';
+		return $html;
+    }
+
+	public function render(PhpRenderer $view, SitePageBlockRepresentation $block)
+	{
+		$attachments = $block->attachments();
+        if (!$attachments) {
+            return '';
+		}
+
+		$urls = [];
+
+		foreach ($attachments as $attachment)
+		{
+			foreach($attachment->item()->media() as $media)
+			{
+				$mediaType = $media->mediaType();
+				$mediaRenderer = $media->renderer();
+				if ((strpos($mediaType, 'image/') !== false) || (strpos($mediaRenderer, 'youtube') !== false)) {
+					array_push($urls, $media->thumbnailUrl('large'));
+				}
+			}
+		}
+
+		return $view->partial('common/block-layout/simple-carousel', [
+			'height' => $block->dataValue('height'),
+			'duration' => $block->dataValue('duration'),
+			'perPage' => $block->dataValue('perPage'),
+			'loop' => $block->dataValue('loop'),
+			'draggable' => $block->dataValue('draggable'),
+			'subTitle' => $block->dataValue('subTitle'),
+			'urls' => $urls,
+			'autoSlide' => $block->dataValue('autoSlide'),
+			'autoSlideInt' => $block->dataValue('autoSlideInt'),
+			'wrapStyle' => $block->dataValue('wrapStyle'),
+			'imgStyle' => $block->dataValue('imgStyle'),
+			'ui_background' => $block->dataValue('ui_background'),
+      'item_url' => $attachments[0]->item()->url(),
+      //'item_title' => $attachments[0]->item()->title(),
+      'renderSourceLink' => $block->dataValue('renderSourceLink'),
+		]);
+	}
+}

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

@@ -0,0 +1,73 @@
+<div style="position:relative;">
+	<?php
+		$this->headLink()->appendStylesheet($this->assetUrl('css/carousel.css', 'SimpleCarousel'));
+		$this->headScript()->appendFile($this->assetUrl('js/siema.min.js', 'SimpleCarousel'));
+
+			$title = false;
+
+
+		$caret = sprintf('<img class="caret" id="left" src="%s">', $this->assetUrl('caret.png', 'SimpleCarousel'));
+		$caret_r = sprintf('<img class="caret" id="right" src="%s">', $this->assetUrl('caret.png', 'SimpleCarousel'));
+	?>
+
+<div class="archive-carousel">
+
+	<?php if ($renderSourceLink) { ?>
+		<div class="source-link">
+			<a href="<?= $item_url ?>">Source</a>
+		</div>
+	<?php } ?>
+
+	<div class="siema">
+	<?php
+		foreach ($urls as $url) {
+			$html = sprintf('<div class="siema-wrap" style="%s"><img class="siema-img" style="%s" src="%s"></div>', $wrapStyle, $imgStyle, $url);
+			echo $html;
+		}
+	?>
+	</div>
+	<div id="siema-ui"></div>
+</div>
+<?php if ($subTitle) { ?>
+	<div class="item_title">
+		<?= $subTitle ?>
+	</div>
+<?php } ?>
+
+	<style>
+		.siema-wrap { height: <?php echo $height ?>; }
+		.siema-img { width: 100%; }
+		#siema-ui { background-color: <?php echo $ui_background ?>; }
+	</style>
+	<script>
+	$(document).ready(function() {
+		let siema = new Siema({
+			selector: '.siema',
+			easing: 'ease-out',
+			duration: <?php echo $duration ?>,
+			perPage: <?php echo $perPage ?>,
+			loop: <?php echo $loop ?>,
+			draggable: <?php echo $draggable ?>
+		});
+
+		let caret = '<?php echo $caret;?>';
+		let caret_r = '<?php echo $caret_r;?>';
+
+
+		$('#siema-ui').append(caret);
+	<?php if ($title !== false): ?>
+		$('#siema-ui').append('<?php echo $title;?>');
+	<?php endif ?>
+		$('#siema-ui').append(caret_r);
+
+		$('.caret#left').click(function () {siema.prev()});
+		$('.caret#right').click(function () {siema.next()});
+
+	<?php if ($autoSlide == true): ?>
+		window.setInterval(() => {
+			siema.next();
+		}, <?php echo $autoSlideInt; ?>);
+	<?php endif ?>
+	});
+	</script>
+</div>