renders source link and subtitle
This commit is contained in:
commit
436c05ae05
|
|
@ -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.
|
||||
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
|
|
@ -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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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)',
|
||||
]
|
||||
]
|
||||
];
|
||||
|
|
@ -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"
|
||||
|
|
@ -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',
|
||||
]
|
||||
]);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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']
|
||||
);
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
|
@ -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'),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue