Оптимизация сторисов

views/_etc/stories.php

@@ -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( '"',"&quot;",$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">&lsaquo;</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">&lsaquo;</span>
-                      <span class="next">&rsaquo;</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) => {});
 

views/_etc/stories_item.php

@@ -7,7 +7,7 @@
  */
 ?>
 <!-- story -->
-<div id="story-<?=$model->id?>" class="story" data-id="story-<?=$model->id?>" data-last-updated="<?=strtotime($model->dt_pub)?>" data-photo="<?=$model->preview->url?>">
+<div id="story-<?=$model->id?>" class="story" data-id="story-<?=$model->id?>"  data-story-id="<?=$model->id?>" data-last-updated="<?=strtotime($model->dt_pub)?>" data-photo="<?=$model->preview->url?>">
     <a class="item-link" href="<?=$model->url?>">
         <span class="item-preview">
             <img src="<?=$model->preview->getUrl(\app\models\base\Image::SIZE_320x180)?>" alt=""/>

web/js/zuck/dist/img/next.svg

@@ -0,0 +1,14 @@
+<svg width="570.68" height="570.68" xmlns="http://www.w3.org/2000/svg" fill="#000000" xml:space="preserve" version="1.1">
+
+ <g>
+  <title>Layer 1</title>
+  <g stroke-width="0" id="SVGRepo_bgCarrier">
+   <rect id="svg_1" strokewidth="0" fill="#000000" rx="285.34" height="570.68" width="570.68" y="0.44" x="0.44002"/>
+  </g>
+  <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"/>
+  <g transform="rotate(-180 285.779 285.779)" id="SVGRepo_iconCarrier">
+   <circle id="svg_2" fill="#ffffff" r="237.77901" cy="285.779" cx="285.77902"/>
+   <path id="svg_3" fill="#000000" d="m262.18103,288.332c29.42902,-29.42502 58.85699,-58.853 88.27802,-88.278c25.66595,-25.66301 -14.31604,-65.341 -40.039,-39.61501c-36.02905,36.02901 -72.05502,72.05501 -108.08403,108.08398c-10.888,10.88501 -10.588,29.02304 0.214,39.82901c36.02899,36.02902 72.05496,72.05801 108.08401,108.08701c25.66599,25.66602 65.345,-14.31601 39.61499,-40.043c-29.36099,-29.35699 -58.71402,-58.70999 -88.06799,-88.064z"/>
+  </g>
+ </g>
+</svg>

web/js/zuck/dist/img/previous.svg

@@ -0,0 +1,9 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-47.56 -47.56 570.68 570.68" xml:space="preserve" fill="#000000">
+
<g id="SVGRepo_bgCarrier" stroke-width="0">
+
<rect x="-47.56" y="-47.56" width="570.68" height="570.68" rx="285.34" fill="#000000" strokewidth="0"/>
+
</g>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <circle style="fill:#ffffff;" cx="237.779" cy="237.779" r="237.779"/> <path style="fill:#000000;" d="M214.181,240.332c29.429-29.425,58.857-58.853,88.278-88.278 c25.666-25.663-14.316-65.341-40.039-39.615c-36.029,36.029-72.055,72.055-108.084,108.084 c-10.888,10.885-10.588,29.023,0.214,39.829c36.029,36.029,72.055,72.058,108.084,108.087 c25.666,25.666,65.345-14.316,39.615-40.043C272.888,299.039,243.535,269.686,214.181,240.332z"/> </g>
+
</svg>