|
|
@@ -11,7 +11,7 @@ $this->registerCssFile("/js/zuck/dist/skins/snapgram.min.css");
|
|
|
<div id="stories"></div>
|
|
|
</div>
|
|
|
<?php use app\models\News;
|
|
|
-$stories = Yii::$app->cache->getOrSet("site-stories",function (){
|
|
|
+$stories = Yii::$app->cache->getOrSet("site-stories-",function (){
|
|
|
$data = [];
|
|
|
$news = \app\models\front\News::find()->alias('news')
|
|
|
->joinWith('topics t')
|
|
|
@@ -34,7 +34,7 @@ $stories = Yii::$app->cache->getOrSet("site-stories",function (){
|
|
|
];
|
|
|
}
|
|
|
$data[]=[
|
|
|
- "id"=>$news_item->uid,
|
|
|
+ "id"=>$news_item->id,
|
|
|
"index"=>$index,
|
|
|
"photo"=>$news_item->preview->getUrl(\app\models\base\Image::SIZE_680x383),
|
|
|
"name"=>str_replace( '"',""",$news_item->title),
|
|
|
@@ -44,7 +44,7 @@ $stories = Yii::$app->cache->getOrSet("site-stories",function (){
|
|
|
"published_at"=>$news_item->publishedAt,
|
|
|
"items"=>[
|
|
|
[
|
|
|
- "id"=>$news_item->preview->getUrl(\app\models\base\Image::SIZE_680x383),
|
|
|
+ "id"=>$news_item->id,
|
|
|
"type"=>"photo",
|
|
|
"length"=>100,
|
|
|
"lastUpdated"=>strtotime($news_item->dt_pub),
|
|
|
@@ -55,6 +55,7 @@ $stories = Yii::$app->cache->getOrSet("site-stories",function (){
|
|
|
"seen"=> false,
|
|
|
"lid"=>str_replace( '"',"'",$news_item->lid),
|
|
|
"post_title"=>str_replace( '"',"'",$news_item->title),
|
|
|
+ "internal_id"=>$news_item->id,
|
|
|
"comments"=>base64_encode(json_encode($comments))
|
|
|
]
|
|
|
]
|
|
|
@@ -98,7 +99,7 @@ $stories = Yii::$app->cache->getOrSet("site-stories",function (){
|
|
|
skin: 'snapgram',
|
|
|
avatars: false, // shows user photo instead of last story item preview
|
|
|
list: false, // displays a timeline instead of carousel
|
|
|
- openEffect: true, // enables effect when opening story
|
|
|
+ openEffect: false, // enables effect when opening story
|
|
|
cubeEffect: false, // enables the 3d cube effect when sliding story
|
|
|
autoFullScreen: false, // enables fullscreen on mobile browsers
|
|
|
backButton: true, // adds a back button to close the story viewer
|
|
|
@@ -108,28 +109,20 @@ $stories = Yii::$app->cache->getOrSet("site-stories",function (){
|
|
|
reactive: false, // set true if you use frameworks like React to control the timeline (see react.sample.html)
|
|
|
rtl: false, // enable/disable RTL
|
|
|
paginationArrows:false,
|
|
|
- "stories": <?=$stories?>,
|
|
|
+ stories: <?=$stories?>,
|
|
|
template: {
|
|
|
viewerItemBody: function (index, currentIndex, item) {
|
|
|
+ console.log(item);
|
|
|
return `<div
|
|
|
class="item ${get(item, 'seen') === true ? 'seen' : ''} ${currentIndex === index ? 'active' : ''}"
|
|
|
- data-time="${get(item, 'time')}" data-type="${get(item, 'type')}" data-index="${index}" data-item-id="${get(item, 'id')}">
|
|
|
+ data-time="${get(item, 'time')}" data-type="${get(item, 'type')}" data-index="${index}" data-item-id="${get(item, 'internal_id')}" data-story-id="${get(item, 'internal_id')}">
|
|
|
<div class="title"><h2><a href="${item.link}">${item.post_title}</a></h2></div>
|
|
|
${renderComments(item.comments)}
|
|
|
- ${
|
|
|
- get(item, 'type') === 'video'
|
|
|
- ? `<video class="media" muted webkit-playsinline playsinline preload="auto" src="${get(item, 'src')}" ${get(item, 'type')}></video>
|
|
|
- <b class="tip muted">${option('language', 'unmute')}</b>`
|
|
|
- : `<div class="blur-bg" style="background-image: url('${get(item, 'src')}') "></div><div class="image-container" ><img loading="auto" class="media" src="${get(item, 'src')}" ${get(item, 'type')} alt=""/></div>
|
|
|
- `}
|
|
|
+ <div class="blur-bg" style="background-image: url('${get(item, 'src')}') "></div><div class="image-container" ><img loading="auto" class="media" src="${get(item, 'src')}" ${get(item, 'type')} alt=""/></div>
|
|
|
|
|
|
- ${
|
|
|
- get(item, 'link')
|
|
|
- ? `<a class="tip link" href="${get(item, 'link')}" rel="noopener" target="_blank">
|
|
|
- ${!get(item, 'linkText') || get(item, 'linkText') === '' ? option('language', 'visitLink') : get(item, 'linkText')}
|
|
|
- </a>`
|
|
|
- : ''
|
|
|
- }
|
|
|
+ <a class="tip link" href="${get(item, 'link')}" rel="noopener" target="_blank">
|
|
|
+ ${!get(item, 'linkText') || get(item, 'linkText') === '' ? option('language', 'visitLink') : get(item, 'linkText')}
|
|
|
+ </a>
|
|
|
</div>`;
|
|
|
},
|
|
|
timelineItem: function(itemData) {
|
|
|
@@ -154,7 +147,7 @@ $stories = Yii::$app->cache->getOrSet("site-stories",function (){
|
|
|
},
|
|
|
viewerItem: function (storyData, currentStoryItem) {
|
|
|
var date = new Date(storyData.lastUpdated*1000);
|
|
|
- return `<div class="story-viewer">
|
|
|
+ return `<div class="story-viewer" data-story-id="${get(currentStoryItem, 'internal_id')}">
|
|
|
<div class="head">
|
|
|
<div class="left">
|
|
|
<a class="back">‹</a>
|
|
|
@@ -180,13 +173,26 @@ $stories = Yii::$app->cache->getOrSet("site-stories",function (){
|
|
|
<div class="wrap"></div>
|
|
|
</div>
|
|
|
<div class="slides-pagination">
|
|
|
- <span class="previous">‹</span>
|
|
|
- <span class="next">›</span>
|
|
|
+ <span class="previous"><img src="/js/zuck/dist/img/previous.svg" alt="previous" width="50" height="50"></span>
|
|
|
+ <span class="next"><img src="/js/zuck/dist/img/next.svg" alt="next" width="50" height="50"></span>
|
|
|
</div>
|
|
|
</div>`;
|
|
|
},
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ const getCurrentIndex = function ()
|
|
|
+ {
|
|
|
+ return stories.data.filter((story) => story.id==stories.internalData.currentStory)[0].index;
|
|
|
+ }
|
|
|
+
|
|
|
+ stories.back = function ()
|
|
|
+ {
|
|
|
+ let previousIndex = getCurrentIndex() - 1;
|
|
|
+ if( previousIndex < 0) previousIndex = stories.data.length -1;
|
|
|
+ stories.navigateItem(previousIndex)
|
|
|
+ }
|
|
|
+
|
|
|
var stories_container = document.getElementById("stories");
|
|
|
addEventListener('wheel', (event) => {});
|
|
|
|
vadimcesnokov
