Initial import
This commit is contained in:
Admin Nasledstvo
@@ -0,0 +1,82 @@
|
||||
<?php
|
||||
|
||||
use app\models\register\Collections;
|
||||
|
||||
/**
|
||||
* @var Collections[] $articles
|
||||
*/
|
||||
|
||||
list($slideGroups, $index, $i) = [[], 0, 0];
|
||||
foreach ($articles as $position) {
|
||||
$slideGroups[$index][] = $position;
|
||||
$i++;
|
||||
if ($i == 5) {
|
||||
$i = 0;
|
||||
$index++;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<?php foreach ($slideGroups as $num => $group): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<div class="cw4 relative">
|
||||
<a href="<?= $group[0]->getUrl() ?>" class="article main cell">
|
||||
<div class="cell-img" style="background-image: url('<?= $group[0]->getImg() ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $group[0]->title() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php
|
||||
$sp = array_slice($group, 1, 4);
|
||||
if (sizeof($sp) > 0):
|
||||
$cell = [
|
||||
4 => [[8, 0], [4, 1], [4, 2], [8, 3]],
|
||||
3 => [[4, 0], [[12, 1], [12, 2]]],
|
||||
2 => [[8, 0], [4, 1]],
|
||||
1 => [[12, 0]]
|
||||
];
|
||||
$frames = $cell[sizeof($sp)];
|
||||
?>
|
||||
<?php foreach ($frames as $p): ?>
|
||||
<?php if (!is_array($p[0])): ?>
|
||||
<div class="cw<?= $p[0] ?>">
|
||||
<?php if (isset($sp[$p[1]])): ?>
|
||||
<a href="<?= $sp[$p[1]]->getUrl() ?>" class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$p[1]]->getImg() ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $sp[$p[1]]->title() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php foreach ($p as $art): ?>
|
||||
<div class="cw<?= $art[0] ?? '' ?>">
|
||||
<?php if (isset($sp[$art[1]])): ?>
|
||||
<a href="<?= $sp[$art[1]]->getUrl() ?>" class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$art[1]]->getImg() ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast text-limit">
|
||||
<?= $sp[$art[1]]->title() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
|
||||
use app\models\register\Collections;
|
||||
|
||||
/**
|
||||
* @var Collections[] $articles
|
||||
*/
|
||||
|
||||
?>
|
||||
|
||||
<?php foreach ($articles as $num => $article): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<div class="cw12 relative">
|
||||
<a href="<?= $article->getUrl() ?>" class="article main cell">
|
||||
<div class="cell-img" style="background-image: url('<?= $article->getImg() ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast" style="bottom: 100px">
|
||||
<?= $article->title() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
@@ -0,0 +1,84 @@
|
||||
<?php
|
||||
|
||||
use app\models\Articles;
|
||||
use app\models\Positions;
|
||||
use app\services\ViewReg;
|
||||
|
||||
/**
|
||||
* @var Positions[] $articles
|
||||
*/
|
||||
|
||||
list($slideGroups, $index, $i) = [[], 0, 0];
|
||||
foreach ($articles as $position) {
|
||||
$slideGroups[$index][] = $position;
|
||||
$i++;
|
||||
if ($i == 5) {
|
||||
$i = 0;
|
||||
$index++;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<?php foreach ($slideGroups as $num => $group): ?>
|
||||
<div class="splide__slide article-model mobile-hide">
|
||||
<div class="cw4 relative">
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($group[0]->articleModel) ?>" class="article main cell">
|
||||
<div class="cell-img" style="background-image: url('<?= $group[0]->article->image("16:11") ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $group[0]->article->textShort() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php
|
||||
$sp = array_slice($group, 1, 4);
|
||||
if (sizeof($sp) > 0):
|
||||
$cell = [
|
||||
4 => [[8, 0], [4, 1], [4, 2], [8, 3]],
|
||||
3 => [[4, 0], [[12, 1], [12, 2]]],
|
||||
2 => [[8, 0], [4, 1]],
|
||||
1 => [[12, 0]]
|
||||
];
|
||||
$frames = $cell[sizeof($sp)];
|
||||
?>
|
||||
<?php foreach ($frames as $p): ?>
|
||||
<?php if (!is_array($p[0])): ?>
|
||||
<div class="cw<?= $p[0] ?>">
|
||||
<?php if (isset($sp[$p[1]])): ?>
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($sp[$p[1]]->articleModel) ?>" class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$p[1]]->article->image("16:11") ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $sp[$p[1]]->article->textShort() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php foreach ($p as $art): ?>
|
||||
<div class="cw<?= $art[0] ?? '' ?>">
|
||||
<?php if (isset($sp[$art[1]])): ?>
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($sp[$art[1]]->articleModel)?>" class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$art[1]]->article->image("16:11") ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast text-limit">
|
||||
<?= $sp[$art[1]]->article->textShort() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
@@ -0,0 +1,82 @@
|
||||
<?php
|
||||
|
||||
use app\models\Expositions;
|
||||
|
||||
/**
|
||||
* @var Expositions[] $articles
|
||||
*/
|
||||
|
||||
list($slideGroups, $index, $i) = [[], 0, 0];
|
||||
foreach ($articles as $position) {
|
||||
$slideGroups[$index][] = $position;
|
||||
$i++;
|
||||
if ($i == 5) {
|
||||
$i = 0;
|
||||
$index++;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<?php foreach ($slideGroups as $num => $group): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<div class="cw4 relative">
|
||||
<a href="<?= $group[0]->getUrl() ?>" class="article main cell">
|
||||
<div class="cell-img" style="background-image: url('<?= $group[0]->getImg() ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $group[0]->title() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php
|
||||
$sp = array_slice($group, 1, 4);
|
||||
if (sizeof($sp) > 0):
|
||||
$cell = [
|
||||
4 => [[8, 0], [4, 1], [4, 2], [8, 3]],
|
||||
3 => [[4, 0], [[12, 1], [12, 2]]],
|
||||
2 => [[8, 0], [4, 1]],
|
||||
1 => [[12, 0]]
|
||||
];
|
||||
$frames = $cell[sizeof($sp)];
|
||||
?>
|
||||
<?php foreach ($frames as $p): ?>
|
||||
<?php if (!is_array($p[0])): ?>
|
||||
<div class="cw<?= $p[0] ?>">
|
||||
<?php if (isset($sp[$p[1]])): ?>
|
||||
<a href="<?= $sp[$p[1]]->getUrl() ?>" class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$p[1]]->getImg() ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $sp[$p[1]]->title() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php foreach ($p as $art): ?>
|
||||
<div class="cw<?= $art[0] ?? '' ?>">
|
||||
<?php if (isset($sp[$art[1]])): ?>
|
||||
<a href="<?= $sp[$art[1]]->getUrl() ?>" class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$art[1]]->getImg() ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast text-limit">
|
||||
<?= $sp[$art[1]]->title() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
@@ -0,0 +1,83 @@
|
||||
<?php
|
||||
|
||||
use app\models\Articles;
|
||||
use app\models\Positions;
|
||||
use app\services\ViewReg;
|
||||
|
||||
/**
|
||||
* @var Positions[] $articles
|
||||
*/
|
||||
|
||||
list($slideGroups, $index, $i) = [[], 0, 0];
|
||||
foreach ($articles as $position) {
|
||||
$slideGroups[$index][] = $position;
|
||||
$i++;
|
||||
if ($i == 5) {
|
||||
$i = 0;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<?php foreach ($slideGroups as $num => $group): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<div class="cw4 relative">
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($group[0]->articleModel) ?>" class="article main cell">
|
||||
<div class="cell-img" style="background-image: url('<?= $group[0]->article->image("16:11") ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $group[0]->article->textShort() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php
|
||||
$sp = array_slice($group, 1, 4);
|
||||
if (sizeof($sp) > 0):
|
||||
$cell = [
|
||||
4 => [[8, 0], [4, 1], [4, 2], [8, 3]],
|
||||
3 => [[4, 0], [[12, 1], [12, 2]]],
|
||||
2 => [[8, 0], [4, 1]],
|
||||
1 => [[12, 0]]
|
||||
];
|
||||
$frames = $cell[sizeof($sp)];
|
||||
?>
|
||||
<?php foreach ($frames as $p): ?>
|
||||
<?php if (!is_array($p[0])): ?>
|
||||
<div class="cw<?= $p[0] ?>">
|
||||
<?php if (isset($sp[$p[1]])): ?>
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($sp[$p[1]]->articleModel) ?>" class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$p[1]]->article->image("16:11") ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $sp[$p[1]]->article->textShort() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php foreach ($p as $art): ?>
|
||||
<div class="cw<?= $art[0] ?? '' ?>">
|
||||
<?php if (isset($sp[$art[1]])): ?>
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($sp[$art[1]]->articleModel)?>" class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$art[1]]->article->image("16:11") ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast text-limit">
|
||||
<?= $sp[$art[1]]->article->textShort() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
@@ -0,0 +1,25 @@
|
||||
<?php
|
||||
|
||||
use app\models\Articles;
|
||||
use app\models\Positions;
|
||||
use app\services\ViewReg;
|
||||
|
||||
/**
|
||||
* @var Positions[] $articles
|
||||
*/
|
||||
?>
|
||||
|
||||
<?php foreach ($articles as $num => $article): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<div class="cw12 relative">
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($article->articleModel) ?>" class="article main cell">
|
||||
<div class="cell-img" style="background-image: url('<?= $article->article->image("16:11") ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $article->article->textShort() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
@@ -0,0 +1,83 @@
|
||||
<?php
|
||||
|
||||
use app\models\register\Collections;
|
||||
use app\services\ViewReg;
|
||||
|
||||
/**
|
||||
* @var Collections[] $articles
|
||||
*/
|
||||
|
||||
list($slideGroups, $index, $i) = [[], 0, 0];
|
||||
foreach ($articles as $position) {
|
||||
$slideGroups[$index][] = $position;
|
||||
$i++;
|
||||
if ($i == 5) {
|
||||
$i = 0;
|
||||
$index++;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<?php foreach ($slideGroups as $num => $group): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<div class="cw4 relative">
|
||||
<a href="<?= $group[0]->getUrl() ?>" class="article main cell">
|
||||
<div class="cell-img" style="background-image: url('<?= $group[0]->getImg() ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $group[0]->title() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php
|
||||
$sp = array_slice($group, 1, 4);
|
||||
if (sizeof($sp) > 0):
|
||||
$cell = [
|
||||
4 => [[8, 0], [4, 1], [4, 2], [8, 3]],
|
||||
3 => [[4, 0], [[12, 1], [12, 2]]],
|
||||
2 => [[8, 0], [4, 1]],
|
||||
1 => [[12, 0]]
|
||||
];
|
||||
$frames = $cell[sizeof($sp)];
|
||||
?>
|
||||
<?php foreach ($frames as $p): ?>
|
||||
<?php if (!is_array($p[0])): ?>
|
||||
<div class="cw<?= $p[0] ?>">
|
||||
<?php if (isset($sp[$p[1]])): ?>
|
||||
<a href="<?= $sp[$p[1]]->getUrl() ?>" class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$p[1]]->getImg() ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $sp[$p[1]]->title() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php foreach ($p as $art): ?>
|
||||
<div class="cw<?= $art[0] ?? '' ?>">
|
||||
<?php if (isset($sp[$art[1]])): ?>
|
||||
<a href="<?= $sp[$art[1]]->getUrl() ?>" class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$art[1]]->getImg() ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast text-limit">
|
||||
<?= $sp[$art[1]]->title() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
@@ -0,0 +1,34 @@
|
||||
<?php
|
||||
|
||||
use app\models\register\Collections;
|
||||
use app\services\ViewReg;
|
||||
|
||||
/**
|
||||
* @var Collections[] $articles
|
||||
*/
|
||||
|
||||
list($slideGroups, $index, $i) = [[], 0, 0];
|
||||
foreach ($articles as $position) {
|
||||
$slideGroups[$index][] = $position;
|
||||
$i++;
|
||||
if ($i == 5) {
|
||||
$i = 0;
|
||||
$index++;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<?php foreach ($articles as $article): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<div class="cw12 relative">
|
||||
<a href="<?= $article->getUrl() ?>" class="article main cell">
|
||||
<div class="cell-img" style="background-image: url('<?= $article->getImg() ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $article->title() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
@@ -0,0 +1,88 @@
|
||||
<?php
|
||||
|
||||
use app\models\Articles;
|
||||
use app\services\ViewReg;
|
||||
|
||||
/**
|
||||
* @var Articles[] $articles
|
||||
* @var $partner_id
|
||||
*/
|
||||
|
||||
list($slideGroups, $index, $i) = [[], 0, 0];
|
||||
foreach ($articles as $position) {
|
||||
$slideGroups[$index][] = $position;
|
||||
$i++;
|
||||
if ($i == 5) {
|
||||
$i = 0;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<?php foreach ($slideGroups as $num => $group): ?>
|
||||
<?php if ($group[0]->article): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<div class="cw4 relative">
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($group[0], $partner_id) ?>" class="article main cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $group[0]->article->image("16:11") ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $group[0]->article->textShort() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php
|
||||
$sp = array_slice($group, 1, 4);
|
||||
if (sizeof($sp) > 0):
|
||||
$cell = [
|
||||
4 => [[8, 0], [4, 1], [4, 2], [8, 3]],
|
||||
3 => [[4, 0], [[12, 1], [12, 2]]],
|
||||
2 => [[8, 0], [4, 1]],
|
||||
1 => [[12, 0]]
|
||||
];
|
||||
$frames = $cell[sizeof($sp)];
|
||||
?>
|
||||
<?php foreach ($frames as $p): ?>
|
||||
<?php if (!is_array($p[0])): ?>
|
||||
<div class="cw<?= $p[0] ?>">
|
||||
<?php if (isset($sp[$p[1]]) && $sp[$p[1]]->article): ?>
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($sp[$p[1]], $partner_id) ?>"
|
||||
class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$p[1]]->article->image("16:11") ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast">
|
||||
<?= $sp[$p[1]]->article->textShort() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="cw8 flex-wrap">
|
||||
<?php foreach ($p as $art): ?>
|
||||
<div class="cw<?= $art[0] ?? '' ?>">
|
||||
<?php if (isset($sp[$art[1]]) && $sp[$art[1]]->article): ?>
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($sp[$art[1]]->articleModel) ?>"
|
||||
class="article cell">
|
||||
<div class="cell-img"
|
||||
style="background-image: url('<?= $sp[$art[1]]->article->image("16:11") ?>')"></div>
|
||||
<div class="padding15">
|
||||
<div class="ast text-limit">
|
||||
<?= $sp[$art[1]]->article->textShort() ?>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
@@ -0,0 +1,56 @@
|
||||
<?php
|
||||
|
||||
|
||||
/* @var $this \yii\web\View */
|
||||
/* @var \app\models\parsed\ArticleParsedInterface $article */
|
||||
|
||||
?>
|
||||
<style>
|
||||
.splide__slide img {
|
||||
}
|
||||
|
||||
.is-next img, .is-prev img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="splide">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<div class="splide__slide article-model">
|
||||
<img src="<?= $article->image() ?>" class="content-inner">
|
||||
</div>
|
||||
<?php foreach ($article->images() as $image): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<img src="<?= $image ?>" class="content-inner">
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php if (sizeof($article->images()) > 0): ?>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<link href="/_public/plugins/splitejs/css/splide.min.css" rel="stylesheet">
|
||||
<script src="/_public/plugins/splitejs/js/splide.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const splide = new Splide('.splide', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false,
|
||||
perPage: 1,
|
||||
gap: '1rem',
|
||||
arrows: false,
|
||||
speed: 0
|
||||
});
|
||||
|
||||
|
||||
splide.mount();
|
||||
})
|
||||
</script>
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
<?php
|
||||
|
||||
|
||||
/* @var $this \yii\web\View */
|
||||
/* @var \app\models\parsed\ArticleParsedInterface $article */
|
||||
|
||||
?>
|
||||
|
||||
|
||||
<div class="splide">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<div class="splide__slide article-model">
|
||||
<img src="<?= $article->image('21:11') ?>">
|
||||
</div>
|
||||
<?php foreach ($article->images('21:11') as $image): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<img src="<?= $image ?>" class="content">
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<link href="/_public/plugins/splitejs/css/splide.min.css" rel="stylesheet">
|
||||
<script src="/_public/plugins/splitejs/js/splide.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const splide = new Splide('.splide', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splide.mount();
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,68 @@
|
||||
<?php
|
||||
|
||||
use app\models\Navigation;
|
||||
use app\models\Positions;
|
||||
use app\models\Ts;
|
||||
|
||||
/**
|
||||
* @var Positions[] $positions
|
||||
* @var $this \yii\web\View;
|
||||
*/
|
||||
?>
|
||||
<?php if (!empty($positions)): ?>
|
||||
<div class="content-out mobile-hide">
|
||||
<div class="top50"></div>
|
||||
<div class="cw4 relative">
|
||||
<div class="top-care small-title font-bold text-uppercase top10"><a href="<?= \app\services\ViewReg::goToPage(2) ?>"><?= Ts::get(19) ?></a></div>
|
||||
</div>
|
||||
<div class="new-collection splide-collection">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_collection_home_page', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cw4 relative">
|
||||
<a href="<?= \app\services\ViewReg::goToPage(2) ?>" class="bottom-care link"><?= Ts::get(2) ?></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-show">
|
||||
<div class="top-care small-title font-bold text-uppercase" style="margin-left: 10px"><?= Ts::get(19) ?></div>
|
||||
<div class="new-collection-mobile splide-collection">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_collection_home_page_mobile', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cw12 relative">
|
||||
<a href="<?= \app\services\ViewReg::goToPage(2) ?>"
|
||||
class="bottom-care link all-collection-home"><?= Ts::get(2) ?></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const newCollection = new Splide('.new-collection', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
newCollection.mount();
|
||||
|
||||
const newCollectionMobile = new Splide('.new-collection-mobile', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
newCollectionMobile.mount();
|
||||
})
|
||||
</script>
|
||||
<?php endif ?>
|
||||
@@ -0,0 +1,53 @@
|
||||
<?php
|
||||
|
||||
|
||||
/* @var $this \yii\web\View */
|
||||
/* @var \app\models\Expositions $article */
|
||||
|
||||
?>
|
||||
<style>
|
||||
.splide__slide img {
|
||||
}
|
||||
|
||||
.is-next img, .is-prev img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="splide-detail">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?php foreach ($article->images() as $image): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<img src="<?= $image ?>" class="content-inner">
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php if (sizeof($article->images()) > 1): ?>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<link href="/_public/plugins/splitejs/css/splide.min.css" rel="stylesheet">
|
||||
<script src="/_public/plugins/splitejs/js/splide.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const splide = new Splide('.splide-detail', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: false,
|
||||
pagination: false,
|
||||
perPage: 1,
|
||||
arrows: false,
|
||||
autoWidth: true,
|
||||
speed: 0
|
||||
});
|
||||
|
||||
|
||||
splide.mount();
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,69 @@
|
||||
<?php
|
||||
|
||||
use app\models\register\Collections;
|
||||
use app\models\Ts;
|
||||
|
||||
/**
|
||||
* @var \app\models\Expositions[] $positions
|
||||
* @var $this \yii\web\View;
|
||||
*/
|
||||
?>
|
||||
<?php if(!empty($positions)): ?>
|
||||
<div class="content-out mobile-hide">
|
||||
<div class="top50"></div>
|
||||
|
||||
<div class="splide exposition-home-page">
|
||||
<div class="cw4 relative">
|
||||
<div class="top-care small-title font-bold text-uppercase top10"><a href="<?= Ts::get(2) ?>"><?= Ts::get(18) ?></a></div>
|
||||
</div>
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_collection', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
<div class="cw4 relative">
|
||||
<a href="<?= \app\services\ViewReg::goToPage(3) ?>" class="bottom-care link"><?= Ts::get(2) ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-show">
|
||||
<div class="splide exposition-home-page exp-mobile">
|
||||
<div class="cw12 relative">
|
||||
<div class="top-care small-title font-bold text-uppercase top10"><?= Ts::get(18) ?></div>
|
||||
</div>
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_collection_mobile', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cw12 relative">
|
||||
<a href="<?= \app\services\ViewReg::goToPage(3) ?>" class="bottom-care link expositions-home-all"><?= Ts::get(2) ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const splide = new Splide('.exposition-home-page', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splide.mount();
|
||||
|
||||
const exp = new Splide('.exp-mobile', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false,
|
||||
arrow: false
|
||||
});
|
||||
exp.mount();
|
||||
})
|
||||
</script>
|
||||
<?php endif ?>
|
||||
@@ -0,0 +1,72 @@
|
||||
<?php
|
||||
|
||||
use app\models\Navigation;
|
||||
use app\models\Articles;
|
||||
use app\models\Ts;
|
||||
|
||||
/**
|
||||
* @var \app\models\Expositions[] $expositions
|
||||
* @var $this \yii\web\View;
|
||||
*/
|
||||
?>
|
||||
<?php if (!empty($expositions)): ?>
|
||||
<div class="content-out mobile-hide">
|
||||
<div class="top50"></div>
|
||||
<div class="cw4 relative">
|
||||
<div class="top-care small-title font-bold text-uppercase top10"><?= Ts::get(18) ?></div>
|
||||
</div>
|
||||
<div class="splide exposition-home-page ">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_collection', ['articles' => $expositions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cw4 relative">
|
||||
<a href="<?= \app\services\ViewReg::goToPage(3) ?>" class="bottom-care link"><?= Ts::get(2) ?></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-show">
|
||||
<div class="top50"></div>
|
||||
<div class="c12 relative">
|
||||
<div class="top-care small-title font-bold top10" style="margin-left: 10px"><?= Ts::get(18) ?></div>
|
||||
</div>
|
||||
<div class="splide exposition-home-page exp-mobile mobile-show">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_collection_mobile', ['articles' => $expositions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cw12 relative">
|
||||
<a href="<?= \app\services\ViewReg::goToPage(3) ?>" class="bottom-care link"><?= Ts::get(2) ?></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const splide = new Splide('.exposition-home-page', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splide.mount();
|
||||
|
||||
const exp = new Splide('.exp-mobile', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false,
|
||||
arrow: false
|
||||
});
|
||||
exp.mount();
|
||||
})
|
||||
</script>
|
||||
<?php endif ?>
|
||||
@@ -0,0 +1,146 @@
|
||||
<?php
|
||||
|
||||
use app\models\Navigation;
|
||||
use app\models\Positions;
|
||||
use app\models\Ts;
|
||||
use app\services\ViewReg;
|
||||
|
||||
/**
|
||||
* @var Positions[] $positions
|
||||
*/
|
||||
?>
|
||||
|
||||
<link href="/_public/assets/css/zoom-carousel.css" rel="stylesheet">
|
||||
|
||||
<div class="top-care top50"><a href="<?= Navigation::getLinkById(1) ?>"><?= Ts::get(1) ?></a></div>
|
||||
<?php if (!empty($positions)): ?>
|
||||
<div class="zc wn">
|
||||
<img src="<?= $positions[0]->article->image() ?>" class="zci-hidden mobile-hide">
|
||||
<div class="zc-container mobile-hide">
|
||||
<?php foreach ($positions as $i => $position): ?>
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($position->articleModel) ?>"
|
||||
class="zci <?= $i == floor(sizeof($positions) / 2) ? 'active' : '' ?>">
|
||||
<img src="<?= $position->article->image('16:11') ?>">
|
||||
<div class="zci-filter"></div>
|
||||
<div class="title"><?= $position->article->title() ?></div>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<div class="zc-slider mobil-slider mobile-show">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?php foreach ($positions as $i => $position): ?>
|
||||
<div class="splide__slide">
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($position->articleModel) ?>">
|
||||
<img src="<?= $position->article->image('16:11') ?>">
|
||||
<div class="zci-filter"></div>
|
||||
<div class="title"><?= $position->article->title() ?></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev" aria-controls="splide03-track" aria-label="Go to last slide"><i class="la la-angle-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next" aria-controls="splide03-track" aria-label="Next slide"><i class="la la-angle-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?= Navigation::getLinkById(1) ?>" class="bottom-care link">
|
||||
<?= Ts::get(2) ?>
|
||||
</a>
|
||||
</div>
|
||||
<div class="top50"></div>
|
||||
<script>
|
||||
class ZCI {
|
||||
constructor(selector) {
|
||||
this.cards = document.querySelectorAll('.wn .zci')
|
||||
this.count = this.cards.length
|
||||
this.active = Math.floor(this.cards.length / 2)
|
||||
this.setActive(this.cards[this.active], 0)
|
||||
this.setEvent()
|
||||
document.querySelectorAll('.wn .zci img').forEach(img => {
|
||||
//img.addEventListener('load', () => {
|
||||
img.parentNode.classList.add('loaded')
|
||||
//})
|
||||
})
|
||||
}
|
||||
|
||||
setEvent(e, c) {
|
||||
this.cards.forEach(c => {
|
||||
c.addEventListener('click', () => {
|
||||
if (!c.classList.contains('active')) {
|
||||
event.preventDefault();
|
||||
let currentActive = document.querySelector('.wn .zci.active'),
|
||||
s1 = currentActive.getAttribute('style'),
|
||||
s2 = c.getAttribute('style');
|
||||
//c2 = c.innerHTML
|
||||
currentActive.setAttribute('style', s2);
|
||||
c.setAttribute('style', s1)
|
||||
currentActive.classList.remove('active')
|
||||
c.classList.add('active')
|
||||
//c.innerHTML = currentActive.innerHTML;
|
||||
//currentActive.innerHTML = c2;
|
||||
//c.mouseleave()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
setActive(elem, move) {
|
||||
elem.classList.add('active')
|
||||
elem.setAttribute('style', `z-index: ${this.count}; transform: scale(1) translateX(${move})`)
|
||||
}
|
||||
|
||||
beforeActive(elem, i, l) {
|
||||
let
|
||||
step = i + 1,
|
||||
move = (step) * (100 / l),
|
||||
zIndex = l - step,
|
||||
scale = 1 - step * 0.1
|
||||
console.log(move)
|
||||
elem.setAttribute('style', `z-index: ${zIndex}; transform: scale(${scale}) translateX(${move * -1}%)`)
|
||||
}
|
||||
|
||||
afterActive(elem, i, l) {
|
||||
let
|
||||
step = i + 1,
|
||||
move = (step) * (100 / l),
|
||||
zIndex = l - step,
|
||||
scale = 1 - step * 0.1
|
||||
console.log(move)
|
||||
elem.setAttribute('style', `z-index: ${zIndex}; transform: scale(${scale}) translateX(${move}%)`)
|
||||
}
|
||||
|
||||
load() {
|
||||
let [ba, aa] = [
|
||||
document.querySelectorAll(`.wn .zci:not(.active ~ *, .active)`),
|
||||
document.querySelectorAll(`.wn .zci.active ~ *`)
|
||||
];
|
||||
[].concat(ba).reverse()[0].forEach((e, i) => {
|
||||
this.beforeActive(e, i, ba.length)
|
||||
})
|
||||
aa.forEach((e, i) => {
|
||||
this.afterActive(e, i, aa.length)
|
||||
})
|
||||
//console.log(aa)
|
||||
}
|
||||
}
|
||||
|
||||
const zci = new ZCI();
|
||||
zci.load()
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const zcSlider = new Splide('.zc-slider', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
perPage: 1,
|
||||
gap: 10,
|
||||
pagination: false,
|
||||
arrow: true
|
||||
});
|
||||
zcSlider.mount();
|
||||
})
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
@@ -0,0 +1,69 @@
|
||||
<?php
|
||||
|
||||
|
||||
|
||||
/* @var $this \yii\web\View */
|
||||
/* @var $positions array */
|
||||
|
||||
?>
|
||||
<link href="/_public/assets/css/carousel.css" rel="stylesheet">
|
||||
<div class="carousel">
|
||||
<ul class="carousel__list">
|
||||
<li class="carousel__item" data-pos="-3"></li>
|
||||
<li class="carousel__item" data-pos="-2"></li>
|
||||
<li class="carousel__item" data-pos="-1"></li>
|
||||
<li class="carousel__item" data-pos="0"></li>
|
||||
<li class="carousel__item" data-pos="1"></li>
|
||||
<li class="carousel__item" data-pos="2"></li>
|
||||
<li class="carousel__item" data-pos="3"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const state = {};
|
||||
const carouselList = document.querySelector('.carousel__list');
|
||||
const carouselItems = document.querySelectorAll('.carousel__item');
|
||||
const elems = Array.from(carouselItems);
|
||||
|
||||
carouselList.addEventListener('click', function (event) {
|
||||
var newActive = event.target;
|
||||
var isItem = newActive.closest('.carousel__item');
|
||||
|
||||
if (!isItem || newActive.classList.contains('carousel__item_active')) {
|
||||
return;
|
||||
}
|
||||
|
||||
update(newActive);
|
||||
});
|
||||
|
||||
const update = function(newActive) {
|
||||
const newActivePos = newActive.dataset.pos;
|
||||
|
||||
const current = elems.find((elem) => elem.dataset.pos === '0');
|
||||
const prev = elems.find((elem) => elem.dataset.pos === '-1');
|
||||
const next = elems.find((elem) => elem.dataset.pos === '1');
|
||||
const first = elems.find((elem) => elem.dataset.pos === '-2');
|
||||
const last = elems.find((elem) => elem.dataset.pos === '2');
|
||||
|
||||
current.classList.remove('carousel__item_active');
|
||||
|
||||
[current, prev, next, first, last].forEach(item => {
|
||||
var itemPos = item.dataset.pos;
|
||||
|
||||
item.dataset.pos = getPos(itemPos, newActivePos)
|
||||
});
|
||||
};
|
||||
|
||||
const getPos = function (current, active) {
|
||||
const diff = current - active;
|
||||
|
||||
if (Math.abs(current - active) > 2) {
|
||||
return -current
|
||||
}
|
||||
|
||||
return diff;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
<?php
|
||||
|
||||
use app\models\Positions;
|
||||
|
||||
/**
|
||||
* @var Positions[] $positions
|
||||
*/
|
||||
|
||||
?>
|
||||
<?php if (!empty($_GET['carousel'])): ?>
|
||||
|
||||
<link href="/_public/assets/css/zoom-carousel.css" rel="stylesheet">
|
||||
<?php else: ?>
|
||||
<link href="/_public/assets/css/zoom-carousel-2.css" rel="stylesheet">
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="top-care text-uppercase top50">Какво ново</div>
|
||||
|
||||
<div class="zc">
|
||||
<img src="<?= $positions[0]->article->image() ?>" class="zci-hidden">
|
||||
<div class="zc-container">
|
||||
<?php foreach ($positions as $i => $position): ?>
|
||||
<a href="<?= $position->article->relation() ?>"
|
||||
class="zci <?= $i == floor(sizeof($positions) / 2) ? 'active' : '' ?>">
|
||||
<img src="<?= $position->article->image() ?>">
|
||||
<div class="zci-filter"></div>
|
||||
<div class="title"><?= $position->article->title() ?></div>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<a href="#" class="bottom-care">
|
||||
Виж всички
|
||||
</a>
|
||||
</div>
|
||||
<div class="top50"></div>
|
||||
|
||||
<?php if (!empty($_GET['carousel'])): ?>
|
||||
<script>
|
||||
class ZCI {
|
||||
constructor(selector) {
|
||||
this.cards = document.querySelectorAll('.zci')
|
||||
this.count = this.cards.length
|
||||
this.active = Math.floor(this.cards.length / 2)
|
||||
this.setActive(this.cards[this.active], 0)
|
||||
this.setEvent()
|
||||
document.querySelectorAll('.zci img').forEach(img => {
|
||||
img.addEventListener('load', () => {
|
||||
img.parentNode.classList.add('loaded')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
setEvent(e, c) {
|
||||
this.cards.forEach(c => {
|
||||
c.addEventListener('click', () => {
|
||||
if (!c.classList.contains('active')) {
|
||||
event.preventDefault();
|
||||
let currentActive = document.querySelector('.zci.active'),
|
||||
s1 = currentActive.getAttribute('style'),
|
||||
s2 = c.getAttribute('style');
|
||||
//c2 = c.innerHTML
|
||||
currentActive.setAttribute('style', s2);
|
||||
c.setAttribute('style', s1)
|
||||
currentActive.classList.remove('active')
|
||||
c.classList.add('active')
|
||||
//c.innerHTML = currentActive.innerHTML;
|
||||
//currentActive.innerHTML = c2;
|
||||
//c.mouseleave()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
setActive(elem, move) {
|
||||
elem.classList.add('active')
|
||||
elem.setAttribute('style', `z-index: ${this.count}; transform: scale(1) translateX(${move})`)
|
||||
}
|
||||
|
||||
beforeActive(elem, i, l) {
|
||||
let
|
||||
step = i + 1,
|
||||
move = (step) * (100 / l),
|
||||
zIndex = l - step,
|
||||
scale = 1 - step * 0.1
|
||||
console.log(move)
|
||||
elem.setAttribute('style', `z-index: ${zIndex}; transform: scale(${scale}) translateX(${move * -1}%)`)
|
||||
}
|
||||
|
||||
afterActive(elem, i, l) {
|
||||
let
|
||||
step = i + 1,
|
||||
move = (step) * (100 / l),
|
||||
zIndex = l - step,
|
||||
scale = 1 - step * 0.1
|
||||
console.log(move)
|
||||
elem.setAttribute('style', `z-index: ${zIndex}; transform: scale(${scale}) translateX(${move}%)`)
|
||||
}
|
||||
|
||||
load() {
|
||||
let [ba, aa] = [
|
||||
document.querySelectorAll(`.zci:not(.active ~ *, .active)`),
|
||||
document.querySelectorAll(`.zci.active ~ *`)
|
||||
];
|
||||
[].concat(ba).reverse()[0].forEach((e, i) => {
|
||||
this.beforeActive(e, i, ba.length)
|
||||
})
|
||||
aa.forEach((e, i) => {
|
||||
this.afterActive(e, i, aa.length)
|
||||
})
|
||||
//console.log(aa)
|
||||
}
|
||||
}
|
||||
|
||||
const zci = new ZCI();
|
||||
zci.load()
|
||||
</script>
|
||||
<?php else: ?>
|
||||
<script>
|
||||
function load() {
|
||||
const cards = document.querySelectorAll('.zci');
|
||||
const active = Math.ceil(cards.length / 2)
|
||||
cards.forEach((e, i) => {
|
||||
e.querySelector('img').addEventListener('load', () => {
|
||||
e.classList.add('loaded')
|
||||
})
|
||||
e.addEventListener('mouseenter', function () {
|
||||
if (!e.classList.contains('active')) {
|
||||
let active = document.querySelector('.zci.active');
|
||||
active.classList.remove('active')
|
||||
e.classList.add('active')
|
||||
}
|
||||
})
|
||||
})
|
||||
document.documentElement.style.setProperty('--items-count', cards.length);
|
||||
}
|
||||
|
||||
load()
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
@@ -0,0 +1,148 @@
|
||||
<?php
|
||||
|
||||
use app\models\Navigation;
|
||||
use app\models\Ts;
|
||||
use app\services\ViewReg;
|
||||
|
||||
/**
|
||||
* @var \app\models\Articles[] $articles
|
||||
*/
|
||||
|
||||
?>
|
||||
|
||||
|
||||
<?php if(!empty($articles)): ?>
|
||||
<link href="/_public/assets/css/zoom-carousel.css" rel="stylesheet">
|
||||
|
||||
<div class="top-care text-uppercase top50"><a href="<?= Navigation::getLinkById(1) ?>"><?= Ts::get(1) ?></a></div>
|
||||
<div class="zc wn mobile-hide">
|
||||
<img src="<?= $articles[0]->article->image() ?>" class="zci-hidden">
|
||||
<div class="zc-container">
|
||||
<?php foreach ($articles as $i => $article): ?>
|
||||
<?php if($article->article): ?>
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($article) ?>"
|
||||
class="zci <?= $i == floor(sizeof($articles) / 2) ? 'active' : '' ?>">
|
||||
<img src="<?= $article->article->image('16:11') ?>">
|
||||
<div class="zci-filter"></div>
|
||||
<div class="title"><?= $article->article->title() ?></div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<a href="<?= Navigation::getLinkById(1) ?>" class="bottom-care link">
|
||||
<?= Ts::get(2) ?>
|
||||
</a>
|
||||
</div>
|
||||
<div class="zc-slider mobil-slider mobile-show">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?php foreach ($articles as $i => $position): ?>
|
||||
<div class="splide__slide">
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($article) ?>">
|
||||
<img src="<?= $position->article->image('16:11') ?>">
|
||||
<div class="zci-filter"></div>
|
||||
<div class="title"><?= $position->article->title() ?></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top50"></div>
|
||||
<script>
|
||||
class ZCI {
|
||||
constructor(selector) {
|
||||
this.cards = document.querySelectorAll('.wn .zci')
|
||||
this.count = this.cards.length
|
||||
this.active = Math.floor(this.cards.length / 2)
|
||||
this.setActive(this.cards[this.active], 0)
|
||||
this.setEvent()
|
||||
document.querySelectorAll('.wn .zci img').forEach(img => {
|
||||
//img.addEventListener('load', () => {
|
||||
img.parentNode.classList.add('loaded')
|
||||
//})
|
||||
})
|
||||
}
|
||||
|
||||
setEvent(e, c) {
|
||||
this.cards.forEach(c => {
|
||||
c.addEventListener('click', () => {
|
||||
if (!c.classList.contains('active')) {
|
||||
event.preventDefault();
|
||||
let currentActive = document.querySelector('.wn .zci.active'),
|
||||
s1 = currentActive.getAttribute('style'),
|
||||
s2 = c.getAttribute('style');
|
||||
//c2 = c.innerHTML
|
||||
currentActive.setAttribute('style', s2);
|
||||
c.setAttribute('style', s1)
|
||||
currentActive.classList.remove('active')
|
||||
c.classList.add('active')
|
||||
//c.innerHTML = currentActive.innerHTML;
|
||||
//currentActive.innerHTML = c2;
|
||||
//c.mouseleave()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
setActive(elem, move) {
|
||||
elem.classList.add('active')
|
||||
elem.setAttribute('style', `z-index: ${this.count}; transform: scale(1) translateX(${move})`)
|
||||
}
|
||||
|
||||
beforeActive(elem, i, l) {
|
||||
let
|
||||
step = i + 1,
|
||||
move = (step) * (100 / l),
|
||||
zIndex = l - step,
|
||||
scale = 1 - step * 0.1
|
||||
console.log(move)
|
||||
elem.setAttribute('style', `z-index: ${zIndex}; transform: scale(${scale}) translateX(${move * -1}%)`)
|
||||
}
|
||||
|
||||
afterActive(elem, i, l) {
|
||||
let
|
||||
step = i + 1,
|
||||
move = (step) * (100 / l),
|
||||
zIndex = l - step,
|
||||
scale = 1 - step * 0.1
|
||||
console.log(move)
|
||||
elem.setAttribute('style', `z-index: ${zIndex}; transform: scale(${scale}) translateX(${move}%)`)
|
||||
}
|
||||
|
||||
load() {
|
||||
let [ba, aa] = [
|
||||
document.querySelectorAll(`.wn .zci:not(.active ~ *, .active)`),
|
||||
document.querySelectorAll(`.wn .zci.active ~ *`)
|
||||
];
|
||||
[].concat(ba).reverse()[0].forEach((e, i) => {
|
||||
this.beforeActive(e, i, ba.length)
|
||||
})
|
||||
aa.forEach((e, i) => {
|
||||
this.afterActive(e, i, aa.length)
|
||||
})
|
||||
//console.log(aa)
|
||||
}
|
||||
}
|
||||
|
||||
const zci = new ZCI();
|
||||
zci.load()
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const zcSlider = new Splide('.zc-slider', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
perPage: 1,
|
||||
gap: 10,
|
||||
pagination: false,
|
||||
arrow: true
|
||||
});
|
||||
zcSlider.mount();
|
||||
})
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
@@ -0,0 +1,69 @@
|
||||
<?php
|
||||
|
||||
use app\models\Navigation;
|
||||
use app\models\Positions;
|
||||
use app\models\Ts;
|
||||
|
||||
/**
|
||||
* @var Positions[] $positions
|
||||
* @var $this \yii\web\View;
|
||||
*/
|
||||
?>
|
||||
<?php if (!empty($positions)): ?>
|
||||
<div class="content-out mobile-hide">
|
||||
<div class="top50"></div>
|
||||
<div class="cw4 relative">
|
||||
<div class="top-care small-title font-bold text-uppercase top10"><?= Ts::get(3) ?></div>
|
||||
</div>
|
||||
<div class="splide-akcenti">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_article', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-out mobile-show">
|
||||
<div class="top50"></div>
|
||||
<div class="cw12 relative">
|
||||
<div class="top-care small-title font-bold text-uppercase top10 left-10"><?= Ts::get(3) ?></div>
|
||||
</div>
|
||||
<div class="splide-akcenti-mobile">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_article_mobile', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<link href="/_public/plugins/splitejs/css/splide.min.css" rel="stylesheet">
|
||||
<script src="/_public/plugins/splitejs/js/splide.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const splideAkcenti = new Splide('.splide-akcenti', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splideAkcenti.mount();
|
||||
|
||||
const splideAkcentiMobile = new Splide('.splide-akcenti-mobile', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splideAkcentiMobile.mount();
|
||||
})
|
||||
</script>
|
||||
<?php endif ?>
|
||||
@@ -0,0 +1,70 @@
|
||||
<?php
|
||||
|
||||
use app\models\register\Collections;
|
||||
use app\models\Ts;
|
||||
|
||||
/**
|
||||
* @var Collections[] $positions
|
||||
* @var $this \yii\web\View;
|
||||
*/
|
||||
?>
|
||||
<?php if (!empty($positions)): ?>
|
||||
<div class="content-out mobile-hide">
|
||||
<div class="top50"></div>
|
||||
<div class="cw4 relative">
|
||||
<div class="top-care small-title font-bold text-uppercase top10"><?= Ts::get(15) ?></div>
|
||||
</div>
|
||||
<div class="splide splide-collection">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_collection', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-out mobile-show">
|
||||
<div class="top50"></div>
|
||||
<div class="cw12 relative">
|
||||
<div class="top-care small-title font-bold text-uppercase top10 left-10"><?= Ts::get(15) ?></div>
|
||||
</div>
|
||||
<div class="splide splide-collection-mobile">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_collection_mobile', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<link href="/_public/plugins/splitejs/css/splide.min.css" rel="stylesheet">
|
||||
<script src="/_public/plugins/splitejs/js/splide.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const splideCollection = new Splide('.splide-collection', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splideCollection.mount();
|
||||
|
||||
const splideCollectionMobile = new Splide('.splide-collection-mobile', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splideCollectionMobile.mount();
|
||||
|
||||
})
|
||||
</script>
|
||||
<?php endif ?>
|
||||
@@ -0,0 +1,66 @@
|
||||
<?php
|
||||
|
||||
use app\models\register\Collections;
|
||||
use app\models\Ts;
|
||||
|
||||
/**
|
||||
* @var \app\models\Expositions[] $positions
|
||||
* @var $this \yii\web\View;
|
||||
*/
|
||||
?>
|
||||
<?php if (!empty($positions)): ?>
|
||||
<div class="content-out mobile-hide">
|
||||
<div class="top50"></div>
|
||||
<div class="cw4 relative">
|
||||
<div class="top-care small-title font-bold text-uppercase top10"><?= Ts::get(45) ?></div>
|
||||
</div>
|
||||
<div class="splide-expositions">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_collection', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-out mobile-show">
|
||||
<div class="top25"></div>
|
||||
<div class="cw12 relative">
|
||||
<div class="top-care small-title font-bold text-uppercase top10 left-10"><?= Ts::get(45) ?></div>
|
||||
</div>
|
||||
<div class="splide-expositions-mobile" style="width: calc(100% - 10px)">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_collection_mobile', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const splideExpositions = new Splide('.splide-expositions', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splideExpositions.mount();
|
||||
const splideExpositionsMobile = new Splide('.splide-expositions-mobile', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splideExpositionsMobile.mount();
|
||||
})
|
||||
</script>
|
||||
<?php endif ?>
|
||||
@@ -0,0 +1,60 @@
|
||||
<?php
|
||||
|
||||
use app\models\Navigation;
|
||||
use app\models\Positions;
|
||||
use app\models\Ts;
|
||||
|
||||
/**
|
||||
* @var Positions[] $positions
|
||||
* @var $this \yii\web\View;
|
||||
*/
|
||||
?>
|
||||
<?php if(!empty($positions)): ?>
|
||||
<div class="content-out">
|
||||
<div class="title" style="font-size: 20px"><?= Ts::get(43) ?></div>
|
||||
<div class="splide more-articles splide-more-articles mobile-hide">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_article', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide more-articles splide-more-articles-mobile mobile-show">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_page_article_mobile', ['articles' => $positions]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<link href="/_public/plugins/splitejs/css/splide.min.css" rel="stylesheet">
|
||||
<script src="/_public/plugins/splitejs/js/splide.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const splide = new Splide('.splide-more-articles', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splide.mount();
|
||||
|
||||
const splideMobile = new Splide('.splide-more-articles-mobile', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splideMobile.mount();
|
||||
})
|
||||
</script>
|
||||
<?php endif ?>
|
||||
@@ -0,0 +1,53 @@
|
||||
<?php
|
||||
|
||||
|
||||
/* @var $this \yii\web\View */
|
||||
/* @var \app\models\RegisterObjects $article */
|
||||
|
||||
?>
|
||||
<style>
|
||||
.splide__slide img {
|
||||
}
|
||||
|
||||
.is-next img, .is-prev img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="splide">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?php if($article->getMainImgFile()): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<img src="<?= $article->getMainImgFile() ?>" class="content-inner">
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php foreach ($article->images() as $image): ?>
|
||||
<div class="splide__slide article-model">
|
||||
<img src="<?= $image ?>" class="content-inner">
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php if (sizeof($article->images()) > 1): ?>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<link href="/_public/plugins/splitejs/css/splide.min.css" rel="stylesheet">
|
||||
<script src="/_public/plugins/splitejs/js/splide.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const splide = new Splide('.splide', {
|
||||
type: 'loop',
|
||||
autoplay: true,
|
||||
pagination: false,
|
||||
perPage: 1,
|
||||
arrows: false
|
||||
});
|
||||
splide.mount();
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<?php
|
||||
|
||||
use app\models\Navigation;
|
||||
use app\models\Positions;
|
||||
use app\models\Ts;
|
||||
|
||||
/**
|
||||
* @var \app\models\Articles[] $positions
|
||||
* @var $this \yii\web\View;
|
||||
* @var $partner_id;
|
||||
*/
|
||||
?>
|
||||
<?php if(!empty($positions)): ?>
|
||||
<div class="content-out">
|
||||
<div class="title" style="font-size: 20px"><?= Ts::get(43) ?></div>
|
||||
<div class="splide more-articles">
|
||||
<div class="splide__track">
|
||||
<div class="splide__list">
|
||||
<?= $this->render('_inner_partner_page_article', ['articles' => $positions, 'partner_id' => $partner_id]) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splide__arrows">
|
||||
<button class="splide__arrow splide__arrow--prev"><i class="la la-chevron-left"></i></button>
|
||||
<button class="splide__arrow splide__arrow--next"><i class="la la-chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const splide = new Splide('.more-articles', {
|
||||
type: 'loop',
|
||||
lazyLoad: 'nearby',
|
||||
autoplay: true,
|
||||
pagination: false
|
||||
});
|
||||
splide.mount();
|
||||
})
|
||||
</script>
|
||||
<?php endif ?>
|
||||
@@ -0,0 +1,111 @@
|
||||
<?php
|
||||
|
||||
use app\models\Navigation;
|
||||
use app\models\Positions;
|
||||
use app\models\Ts;
|
||||
use app\services\ViewReg;
|
||||
|
||||
/**
|
||||
* @var Positions[] $positions
|
||||
*/
|
||||
?>
|
||||
|
||||
|
||||
<div class="top-care lines-2 top50"><?= Ts::get(20) ?></div>
|
||||
<?php if(!empty($positions)): ?>
|
||||
<div class="zc vw">
|
||||
<img src="<?= $positions[0]->article->image() ?>" class="zci-hidden">
|
||||
<div class="zc-container">
|
||||
<?php foreach ($positions as $i => $position): ?>
|
||||
<a href="<?= ViewReg::generateDetailPageUrl($position->articleModel) ?>"
|
||||
class="zci <?= $i == floor(sizeof($positions) / 2) ? 'active' : '' ?>">
|
||||
<img src="<?= $position->article->image('16:11') ?>">
|
||||
<div class="zci-filter"></div>
|
||||
<div class="title"><?= $position->article->title() ?></div>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<a href="<?= ViewReg::goToPage(4) ?>" class="bottom-care link">
|
||||
<?= Ts::get(2) ?>
|
||||
</a>
|
||||
</div>
|
||||
<div class="top50"></div>
|
||||
<script>
|
||||
class ZCI_VW {
|
||||
constructor(selector) {
|
||||
this.cards = document.querySelectorAll('.vw .zci')
|
||||
this.count = this.cards.length
|
||||
this.active = Math.floor(this.cards.length / 2)
|
||||
this.setActive(this.cards[this.active], 0)
|
||||
this.setEvent()
|
||||
document.querySelectorAll('.vw .zci img').forEach(img => {
|
||||
//img.addEventListener('load', () => {
|
||||
img.parentNode.classList.add('loaded')
|
||||
//})
|
||||
})
|
||||
}
|
||||
|
||||
setEvent(e, c) {
|
||||
this.cards.forEach(c => {
|
||||
c.addEventListener('click', () => {
|
||||
if (!c.classList.contains('active')) {
|
||||
event.preventDefault();
|
||||
let currentActive = document.querySelector('.vw .zci.active'),
|
||||
s1 = currentActive.getAttribute('style'),
|
||||
s2 = c.getAttribute('style');
|
||||
//c2 = c.innerHTML
|
||||
currentActive.setAttribute('style', s2);
|
||||
c.setAttribute('style', s1)
|
||||
currentActive.classList.remove('active')
|
||||
c.classList.add('active')
|
||||
//c.innerHTML = currentActive.innerHTML;
|
||||
//currentActive.innerHTML = c2;
|
||||
//c.mouseleave()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
setActive(elem, move) {
|
||||
elem.classList.add('active')
|
||||
elem.setAttribute('style', `z-index: ${this.count}; transform: scale(1) translateX(${move})`)
|
||||
}
|
||||
|
||||
beforeActive(elem, i, l) {
|
||||
let
|
||||
step = i + 1,
|
||||
move = (step) * (100 / l),
|
||||
zIndex = l - step,
|
||||
scale = 1 - step * 0.1
|
||||
console.log(move)
|
||||
elem.setAttribute('style', `z-index: ${zIndex}; transform: scale(${scale}) translateX(${move * -1}%)`)
|
||||
}
|
||||
|
||||
afterActive(elem, i, l) {
|
||||
let
|
||||
step = i + 1,
|
||||
move = (step) * (100 / l),
|
||||
zIndex = l - step,
|
||||
scale = 1 - step * 0.1
|
||||
console.log(move)
|
||||
elem.setAttribute('style', `z-index: ${zIndex}; transform: scale(${scale}) translateX(${move}%)`)
|
||||
}
|
||||
|
||||
load() {
|
||||
let [ba, aa] = [
|
||||
document.querySelectorAll(`.vw .zci:not(.active ~ *, .active)`),
|
||||
document.querySelectorAll(`.vw .zci.active ~ *`)
|
||||
];
|
||||
[].concat(ba).reverse()[0].forEach((e, i) => {
|
||||
this.beforeActive(e, i, ba.length)
|
||||
})
|
||||
aa.forEach((e, i) => {
|
||||
this.afterActive(e, i, aa.length)
|
||||
})
|
||||
//console.log(aa)
|
||||
}
|
||||
}
|
||||
const zci2 = new ZCI_VW();
|
||||
zci2.load()
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
Reference in New Issue
Block a user