You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
230 lines
7.9 KiB
230 lines
7.9 KiB
7 years ago
|
<?php
|
||
|
|
|
||
|
|
use yii\helpers\Html;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @var $this \yii\web\View
|
||
|
|
* @var $slider \core\entities\Slider[]
|
||
|
|
* @var $tag string
|
||
|
|
* @var $classes string
|
||
|
|
* @var $attrs string
|
||
|
|
*/
|
||
|
|
|
||
|
|
$js = <<<JS
|
||
|
|
var s = $(".swiper-slider");
|
||
|
|
var pag = s.find(".swiper-pagination"),
|
||
|
|
next = s.find(".swiper-button-next"),
|
||
|
|
prev = s.find(".swiper-button-prev"),
|
||
|
|
bar = s.find(".swiper-scrollbar"),
|
||
|
|
swiperSlide = s.find(".swiper-slide"),
|
||
|
|
autoplay = false;
|
||
|
|
for (var j = 0; j < swiperSlide.length; j++) {
|
||
|
|
var sthis = $(swiperSlide[j]),
|
||
|
|
url;
|
||
|
|
|
||
|
|
if (url = sthis.attr("data-slide-bg")) {
|
||
|
|
sthis.css({
|
||
|
|
"background-image": "url(" + url + ")",
|
||
|
|
"background-size": "cover"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
swiperSlide.end()
|
||
|
|
.find("[data-caption-animate]")
|
||
|
|
.addClass("not-animated")
|
||
|
|
.end();
|
||
|
|
|
||
|
|
s.swiper({
|
||
|
|
autoplay: s.attr('data-autoplay') ? s.attr('data-autoplay') === "false" || s.attr('data-autoplay-hover') === "true" ? undefined : s.attr('data-autoplay') : 5000,
|
||
|
|
direction: s.attr('data-direction') ? s.attr('data-direction') : "horizontal",
|
||
|
|
effect: s.attr('data-slide-effect') ? s.attr('data-slide-effect') : "slide",
|
||
|
|
speed: s.attr('data-slide-speed') ? s.attr('data-slide-speed') : 600,
|
||
|
|
keyboardControl: s.attr('data-keyboard') === "true",
|
||
|
|
mousewheelControl: s.attr('data-mousewheel') === "true",
|
||
|
|
mousewheelReleaseOnEdges: s.attr('data-mousewheel-releaase') === "true",
|
||
|
|
lazyLoading: s.attr('data-lazy-loading') === "true",
|
||
|
|
nextButton: next.length ? next.get(0) : null,
|
||
|
|
prevButton: prev.length ? prev.get(0) : null,
|
||
|
|
pagination: pag.length ? pag.get(0) : null,
|
||
|
|
paginationClickable: pag.length ? pag.attr("data-clickable") !== "false" : false,
|
||
|
|
paginationBulletRender: pag.length ? pag.attr("data-index-bullet") === "true" ? function (swiper, index, className) {
|
||
|
|
return '<span class="' + className + '"><span>' + ((index + 1) < 10 ? ('0' + (index + 1) ): (index + 1)) + '</span></span>';
|
||
|
|
} : null : null,
|
||
|
|
scrollbar: bar.length ? bar.get(0) : null,
|
||
|
|
scrollbarDraggable: bar.length ? bar.attr("data-draggable") !== "false" : true,
|
||
|
|
scrollbarHide: bar.length ? bar.attr("data-draggable") === "false" : false,
|
||
|
|
//loop: isNoviBuilder ? false : s.attr('data-loop') !== "false",
|
||
|
|
loop: s.attr('data-loop') !== "false",
|
||
|
|
//simulateTouch: s.attr('data-simulate-touch') && !isNoviBuilder ? s.attr('data-simulate-touch') === "true" : false,
|
||
|
|
simulateTouch: s.attr('data-simulate-touch') ? s.attr('data-simulate-touch') === "true" : false,
|
||
|
|
onTransitionStart: function (swiper) {
|
||
|
|
toggleSwiperInnerVideos(swiper);
|
||
|
|
},
|
||
|
|
onTransitionEnd: function (swiper) {
|
||
|
|
toggleSwiperCaptionAnimation(swiper);
|
||
|
|
},
|
||
|
|
onInit: function (swiper) {
|
||
|
|
toggleSwiperInnerVideos(swiper);
|
||
|
|
toggleSwiperCaptionAnimation(swiper);
|
||
|
|
|
||
|
|
if (swiper.container.data('autoplay-hover') === true) {
|
||
|
|
var hoverEvent;
|
||
|
|
|
||
|
|
swiper.container.mouseenter(function (e) {
|
||
|
|
hoverEvent = setInterval(function () {
|
||
|
|
swiper.slideNext();
|
||
|
|
}, $(swiper.container).data('autoplay'));
|
||
|
|
});
|
||
|
|
|
||
|
|
swiper.container.mouseleave(function (e) {
|
||
|
|
clearInterval(hoverEvent);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//initLightGalleryItem(s.find('[data-lightgallery="item"]'), 'lightGallery-in-carousel');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
win.on("resize", (function (s) {
|
||
|
|
return function () {
|
||
|
|
var mh = getSwiperHeight(s, "min-height"),
|
||
|
|
h = getSwiperHeight(s, "height");
|
||
|
|
if (h) {
|
||
|
|
s.css("height", mh ? mh > h ? mh : h : h);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})(s)).trigger("resize");
|
||
|
|
|
||
|
|
window.setTimeout(function() {
|
||
|
|
win.trigger("resize");
|
||
|
|
}, 100);
|
||
|
|
JS;
|
||
|
|
$this->registerJs($js, $this::POS_READY);
|
||
|
|
|
||
|
|
|
||
|
|
$js2 = <<<JS2
|
||
|
|
var win = $(window);
|
||
|
|
|
||
|
|
function getSwiperHeight(object, attr) {
|
||
|
|
var val = object.attr("data-" + attr),
|
||
|
|
dim;
|
||
|
|
|
||
|
|
if (!val) {
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
dim = val.match(/(px)|(%)|(vh)|(vw)$/i);
|
||
|
|
|
||
|
|
if (dim.length) {
|
||
|
|
switch (dim[0]) {
|
||
|
|
case "px":
|
||
|
|
return parseFloat(val);
|
||
|
|
case "vh":
|
||
|
|
return win.height() * (parseFloat(val) / 100);
|
||
|
|
case "vw":
|
||
|
|
return win.width() * (parseFloat(val) / 100);
|
||
|
|
case "%":
|
||
|
|
return object.width() * (parseFloat(val) / 100);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleSwiperInnerVideos(swiper) {
|
||
|
|
var prevSlide = $(swiper.slides[swiper.previousIndex]),
|
||
|
|
nextSlide = $(swiper.slides[swiper.activeIndex]),
|
||
|
|
videos,
|
||
|
|
videoItems = prevSlide.find("video");
|
||
|
|
|
||
|
|
for (var i = 0; i < videoItems.length; i++) {
|
||
|
|
videoItems[i].pause();
|
||
|
|
}
|
||
|
|
|
||
|
|
videos = nextSlide.find("video");
|
||
|
|
if (videos.length) {
|
||
|
|
videos.get(0).play();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleSwiperCaptionAnimation(swiper) {
|
||
|
|
var prevSlide = $(swiper.container).find("[data-caption-animate]"),
|
||
|
|
nextSlide = $(swiper.slides[swiper.activeIndex]).find("[data-caption-animate]"),
|
||
|
|
delay,
|
||
|
|
duration,
|
||
|
|
nextSlideItem,
|
||
|
|
prevSlideItem;
|
||
|
|
|
||
|
|
for (var i = 0; i < prevSlide.length; i++) {
|
||
|
|
prevSlideItem = $(prevSlide[i]);
|
||
|
|
|
||
|
|
prevSlideItem.removeClass("animated")
|
||
|
|
.removeClass(prevSlideItem.attr("data-caption-animate"))
|
||
|
|
.addClass("not-animated");
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var tempFunction = function (nextSlideItem, duration) {
|
||
|
|
return function () {
|
||
|
|
nextSlideItem
|
||
|
|
.removeClass("not-animated")
|
||
|
|
.addClass(nextSlideItem.attr("data-caption-animate"))
|
||
|
|
.addClass("animated");
|
||
|
|
if (duration) {
|
||
|
|
nextSlideItem.css('animation-duration', duration + 'ms');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
for (var i = 0; i < nextSlide.length; i++) {
|
||
|
|
nextSlideItem = $(nextSlide[i]);
|
||
|
|
delay = nextSlideItem.attr("data-caption-delay");
|
||
|
|
duration = nextSlideItem.attr('data-caption-duration');
|
||
|
|
//if (!isNoviBuilder) {
|
||
|
|
setTimeout(tempFunction(nextSlideItem, duration), parseInt(delay, 10));
|
||
|
|
//} else {
|
||
|
|
// nextSlideItem.removeClass("not-animated")
|
||
|
|
//}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
JS2;
|
||
|
|
$this->registerJs($js2, $this::POS_END);
|
||
|
|
?>
|
||
|
|
|
||
|
|
<<?= $tag ?> class="<?= $classes ?>" <?= $attrs ?>>
|
||
|
|
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||
|
|
|
||
|
|
<?php foreach ($slider as $slide): ?>
|
||
|
|
|
||
|
|
<div class="swiper-slide swiper-slide-active"
|
||
|
|
data-slide-bg="<?= Html::encode($slide->getThumbFileUrl('image', '1920_671')) ?>"
|
||
|
|
style="background-image: url("<?= Html::encode($slide->getThumbFileUrl('image', '1920_671')) ?>"); background-size: cover; width: 1903px; transform: translate3d(-1903px, 0px, 0px); opacity: 1; transition-duration: 0ms;"
|
||
|
|
data-swiper-slide-index="0">
|
||
|
|
<div class="container">
|
||
|
|
<div class="swiper-slide-caption">
|
||
|
|
<h1 data-caption-animate="fadeInUp" data-caption-delay="100" class="fadeInUp animated">
|
||
|
|
<?= str_replace(PHP_EOL, "<br>", Html::encode($slide->title)) ?></h1>
|
||
|
|
<h4 data-caption-animate="fadeInUp" data-caption-delay="200" class="fadeInUp animated">
|
||
|
|
<?= str_replace(PHP_EOL, "<br>", Html::encode($slide->tagline)) ?>
|
||
|
|
</h4><a
|
||
|
|
class="button button-gray-outline fadeInUp animated" data-caption-animate="fadeInUp"
|
||
|
|
data-caption-delay="300" href="#"><?= Yii::t('slider', 'Read more') ?></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?php endforeach; ?>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="swiper-button swiper-button-prev"></div>
|
||
|
|
<div class="swiper-button swiper-button-next"></div>
|
||
|
|
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
|
||
|
|
<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
|
||
|
|
<span class="swiper-pagination-bullet"></span>
|
||
|
|
</div>
|
||
|
|
</<?= $tag ?>>
|