Compare commits

..

No commits in common. "main" and "fix/height-window-load" have entirely different histories.

3 changed files with 33 additions and 47 deletions

View File

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

View File

@ -34,7 +34,7 @@ class Carousel extends AbstractBlockLayout
}
public function getLabel() {
return 'Carousel';
return 'Image Carrousel';
}
public function form(PhpRenderer $view, SiteRepresentation $site,
@ -92,9 +92,10 @@ 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'),
@ -103,7 +104,7 @@ class Carousel extends AbstractBlockLayout
'images' => $images,
'autoSlide' => $block->dataValue('autoSlide'),
'autoSlideInt' => $block->dataValue('autoSlideInt'),
'wrapStyle' => $wrap,
'wrapStyle' => $block->dataValue('wrapStyle'),
'imgStyle' => $block->dataValue('imgStyle'),
'ui_background' => $block->dataValue('ui_background'),
'renderSourceLink' => $block->dataValue('renderSourceLink'),

View File

@ -7,9 +7,7 @@
?>
<style>
#siema-ui_<?= $carousel_id ?> {
background-color: <?= $ui_background ?>;
}
/* styles placed in carousel.css */
</style>
<div class="archive-item-block archive-carousel">
@ -20,66 +18,55 @@
</div>
<?php } ?>
<div style="position:relative;">
<div id="siema_<?= $carousel_id ?>"
class="siema">
<div class="archive-carousel-container">
<div class="siema_<?php $carousel_id ?> siema">
<?php foreach ($images as $image) { ?>
<div class="siema-wrap" style="<?= $wrapStyle ?>"
<div class="siema-wrap" style="<?php // $wrapStyle ?>"
>
<img class="siema-img"
style="<?= $imgStyle ?>"
src="<?= $image['media_url'] ?>"
style="<?php $imgStyle ?>"
src="<?php $image['media_url'] ?>"
/>
</div>
<?php } ?>
</div>
<div id="siema-ui_<?= $carousel_id ?>"
class="siema-ui">
</div>
<div id="siema-ui"></div>
</div>
<?php if ($title) { ?>
<div class="item_title">
<?= $title ?>
<?php $title ?>
</div>
<?php } ?>
</div>
<script>
var sourceURLs_<?= $carousel_id ?> = [];
var sourceURLs = [];
<?php foreach ($images as $image) { ?>
sourceURLs_<?= $carousel_id ?>.push("<?= $image['item_url'] ?>")
sourceURLs.push("<?php $image['item_url'] ?>")
<?php } ?>
$(document).ready(function() {
let siema_<?= $carousel_id ?> = new Siema({
selector: '#siema_<?= $carousel_id ?>',
let siema = new Siema({
selector: '.siema_<?php $carousel_id ?>',
easing: 'ease-out',
duration: <?php echo $duration ?>,
perPage: <?php echo $perPage ?>,
loop: <?php echo $loop ?>,
draggable: <?php echo $draggable ?>,
onInit: changeSourceURL_<?= $carousel_id ?>,
onChange: changeSourceURL_<?= $carousel_id ?>,
onInit: changeSourceURL,
onChange: changeSourceURL,
});
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');
let caret = '<?php echo $caret;?>';
let caret_r = '<?php echo $caret_r;?>';
$('#siema-ui_<?= $carousel_id ?>').append(caret);
$('#siema-ui_<?= $carousel_id ?>').append(caret_r);
$('#siema-ui').append(caret);
$('#siema-ui').append(caret_r);
$('#<?= $carousel_id ?>_left').click(function () {
siema_<?= $carousel_id ?>.prev()
});
$('#<?= $carousel_id ?>_right').click(function () {
siema_<?= $carousel_id ?>.next()
});
$('.caret#left').click(function () {siema.prev()});
$('.caret#right').click(function () {siema.next()});
<?php if ($autoSlide == true): ?>
window.setInterval(() => {
@ -88,18 +75,17 @@ $(document).ready(function() {
<?php endif ?>
});
function changeSourceURL_<?= $carousel_id ?>(){
function changeSourceURL(){
var slide_idx = this.currentSlide
if (slide_idx < 0) {
slide_idx = sourceURLs_<?= $carousel_id ?>.length -1;
slide_idx = sourceURLs.length -1;
}
var source_link = $("#siema_<?= $carousel_id ?>")
var source_link = $(".siema_<?php $carousel_id ?>")
.closest(".archive-carousel")
.find(".source-link")
.find('a');
if (source_link.length != 0) {
$(source_link).attr("href", sourceURLs_<?= $carousel_id ?>[slide_idx])
$(source_link).attr("href", sourceURLs[slide_idx])
}
}