Ticket #2998

modules/boonex/russian/data/langs/bx_timeline/ru.xml

@@ -4,6 +4,12 @@
     <string name="_bx_timeline_cmts"><![CDATA[Лента - Комментарии]]></string>
     <string name="_bx_timeline_reactions"><![CDATA[Лента - Реакции]]></string>
 
+    <string name="_bx_timeline_options_category_general"><![CDATA[Общие]]></string>
+    <string name="_bx_timeline_options_category_browse"><![CDATA[Просмотр]]></string>
+    <string name="_bx_timeline_options_category_card"><![CDATA[Карточка]]></string>
+    <string name="_bx_timeline_options_category_cache"><![CDATA[Кэш]]></string>
+    <string name="_bx_timeline_options_category_post"><![CDATA[Создание сообщения]]></string>
+
     <string name="_bx_timeline_option_enable_edit"><![CDATA[Разрешить пользователю изменять собственные сообщения]]></string>
     <string name="_bx_timeline_option_enable_delete"><![CDATA[Разрешить владельцу ленты удалять сообщения]]></string>
     <string name="_bx_timeline_option_enable_show_all"><![CDATA[Показывать все сообщения в 'Общей хронике', включая те, что были написаны в персональных Хрониках]]></string>

modules/boonex/timeline/classes/BxTimelineConfig.php

@@ -34,6 +34,7 @@ class BxTimelineConfig extends BxBaseModNotificationsConfig
     protected $_iCharsDisplayMinTitle;
     protected $_iCharsDisplayMaxTitle;
 
+    protected $_bDynamicCards;
     protected $_sVideosAutoplay;
     protected $_iPreloadComments;
     protected $_iPreloadCommentsMax;
@@ -316,6 +317,8 @@ class BxTimelineConfig extends BxBaseModNotificationsConfig
         $this->_iCharsDisplayMinTitle = 32;
         $this->_iCharsDisplayMaxTitle = 64;
 
+        $this->_bDynamicCards = getParam($sOptionPrefix . 'enable_dynamic_cards') == 'on';
+
         $this->_sVideosAutoplay = getParam($sOptionPrefix . 'videos_autoplay');
 
         $this->_iPreloadCommentsMax = 7;
@@ -409,6 +412,11 @@ class BxTimelineConfig extends BxBaseModNotificationsConfig
         return $this->_bCountAllViews;
     }
 
+    public function isDynamicCards()
+    {
+        return $this->_bDynamicCards;
+    }
+
     public function isJumpTo()
     {
         return $this->_bJumpTo;

modules/boonex/timeline/classes/BxTimelineTemplate.php

@@ -17,7 +17,9 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
 
     protected static $_sTmplContentItemItem;
     protected static $_sTmplContentItemOutline;
+    protected static $_sTmplContentItemOutlineSample;
     protected static $_sTmplContentItemTimeline;
+    protected static $_sTmplContentItemTimelineSample;
     protected static $_sTmplContentItemSearch;
     protected static $_sTmplContentTypePost;
     protected static $_sTmplContentTypeRepost;
@@ -117,7 +119,8 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
 
         $aParams = array_merge(array(
             'bInfScroll' => $this->_oConfig->isInfiniteScroll(),
-            'iInfScrollAutoPreloads' => $this->_oConfig->getAutoPreloads()
+            'iInfScrollAutoPreloads' => $this->_oConfig->getAutoPreloads(),
+            'bDynamicCards' => $this->_oConfig->isDynamicCards(),
         ), $aParams);
 
         return parent::getJsCode($sType, $aParams, $bWrap, $bDynamic);
@@ -392,6 +395,57 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
         return $this->getPost($aEvent, $aBrowseParams);
     }
 
+    public function getPostSample($aEvent, $aBrowseParams = array())
+    {
+        $CNF = &$this->_oConfig->CNF;
+
+        $oModule = $this->getModule();
+        $sStylePrefix = $this->_oConfig->getPrefix('style');
+        $sJsObject = $this->_oConfig->getJsObjectView($aBrowseParams);
+
+        $bViewOutline = isset($aBrowseParams['view']) && $aBrowseParams['view'] == BX_TIMELINE_VIEW_OUTLINE;
+
+        $bPinned = (int)$aEvent['pinned'] > 0;
+        $bSticked = (int)$aEvent['sticked'] > 0;
+        $bPromoted = (int)$aEvent['promoted'] > 0;
+
+        $sClass = $aEvent['type'] . ' ' . (!empty($aEvent['action']) ? $aEvent['action'] . ' ' : '') . $sStylePrefix . '-view-sizer';
+        if($bViewOutline) {
+            $sClass = $sStylePrefix . '-grid-item-sizer';
+            if($bPinned || $bSticked || $bPromoted) {
+                $sClass .= ' ' . $sStylePrefix . '-gis';
+                if($bPinned)
+                    $sClass .= '-pnd';
+                if($bSticked)
+                    $sClass .= '-psd';
+                if($bPromoted)
+                    $sClass .= '-pmd';
+            }
+        }
+        if($bPinned)
+            $sClass .= ' ' . $sStylePrefix . '-pinned';
+        if($bSticked)
+            $sClass .= ' ' . $sStylePrefix . '-sticked';
+        if($bPromoted)
+            $sClass .= ' ' . $sStylePrefix . '-promoted';
+
+        $sVariable = '_sTmplContentItem' . bx_gen_method_name($aBrowseParams['view']) . 'Sample';
+        if(empty(self::$$sVariable))
+            self::$$sVariable = $this->getHtml('item_' . $aBrowseParams['view'] . '_sample.html');
+
+        $sTmplCode = self::$$sVariable;
+        $aTmplVars = array(
+            'style_prefix' => $sStylePrefix,
+            'js_object' => $sJsObject,
+            'html_id' => $this->_oConfig->getHtmlIdView('item', $aBrowseParams, array('whole' => false)) . $aEvent['id'],
+            'class' => $sClass,
+            'icon' => !empty($aEvent['icon']) ? $aEvent['icon'] : $CNF['ICON'],
+            'id' => $aEvent['id'],
+        );
+
+        return $this->parseHtmlByContent($sTmplCode, $aTmplVars);
+    }
+
     public function getPost(&$aEvent, $aBrowseParams = array())
     {
         $CNF = &$this->_oConfig->CNF;
@@ -552,12 +606,16 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
             }
         }
 
+        $sMethodGetPost = 'getPost';
+        if($this->_oConfig->isDynamicCards() && in_array($aParams['view'], array(BX_TIMELINE_VIEW_TIMELINE, BX_TIMELINE_VIEW_OUTLINE)) && !$aParams['dynamic_mode'])
+            $sMethodGetPost .=  'Sample';
+
         $bFirst = true;
         $mixedEvents = $bReturnArray ? array() : '';
         foreach($aEvents as $aEvent) {
             $iEvent = (int)$aEvent['id'];
 
-            $sEvent = $this->getPost($aEvent, $aParams);
+            $sEvent = $this->$sMethodGetPost($aEvent, $aParams);
             if(empty($sEvent))
                 continue;
 

modules/boonex/timeline/install/langs/en.xml

@@ -4,6 +4,12 @@
     <string name="_bx_timeline_cmts"><![CDATA[Timeline's Comments]]></string>
     <string name="_bx_timeline_reactions"><![CDATA[Timeline's Reactions]]></string>
 
+    <string name="_bx_timeline_options_category_general"><![CDATA[General]]></string>
+    <string name="_bx_timeline_options_category_browse"><![CDATA[Browse]]></string>
+    <string name="_bx_timeline_options_category_card"><![CDATA[Card]]></string>
+    <string name="_bx_timeline_options_category_cache"><![CDATA[Cache]]></string>
+    <string name="_bx_timeline_options_category_post"><![CDATA[Post]]></string>
+
     <string name="_bx_timeline_option_enable_edit"><![CDATA[Allow user to edit his items]]></string>
     <string name="_bx_timeline_option_enable_delete"><![CDATA[Allow Timeline owner to remove items]]></string>
     <string name="_bx_timeline_option_enable_show_all"><![CDATA[Show all items in Public Feed including ones which were posted in personal Feeds]]></string>

modules/boonex/timeline/install/sql/disable.sql

@@ -10,11 +10,7 @@ DELETE FROM `sys_menu_items` WHERE `module` = 'bx_timeline' OR `set_name` IN('bx
 
 
 -- SETTINGS
-SET @iTypeId = (SELECT `ID` FROM `sys_options_types` WHERE `name` = 'bx_timeline' LIMIT 1);
-SET @iCategId = (SELECT `ID` FROM `sys_options_categories` WHERE `type_id` = @iTypeId LIMIT 1);
-DELETE FROM `sys_options` WHERE `category_id` = @iCategId;
-DELETE FROM `sys_options_categories` WHERE `type_id` = @iTypeId;
-DELETE FROM `sys_options_types` WHERE `id` = @iTypeId;
+DELETE FROM `tot`, `toc`, `to` USING `sys_options_types` AS `tot` LEFT JOIN `sys_options_categories` AS `toc` ON `tot`.`id`=`toc`.`type_id` LEFT JOIN `sys_options` AS `to` ON `toc`.`id`=`to`.`category_id` WHERE `tot`.`name` = 'bx_timeline';
 
 
 -- PRIVACY 

modules/boonex/timeline/install/sql/enable.sql

@@ -224,38 +224,68 @@ INSERT INTO `sys_options_types`(`group`, `name`, `caption`, `icon`, `order`) VAL
 ('modules', 'bx_timeline', '_bx_timeline', 'bx_timeline@modules/boonex/timeline/|std-icon.svg', IF(ISNULL(@iTypeOrder), 1, @iTypeOrder + 1));
 SET @iTypeId = LAST_INSERT_ID();
 
+-- Category: General
 INSERT INTO `sys_options_categories` (`type_id`, `name`, `caption`, `order`)
-VALUES (@iTypeId, 'bx_timeline', '_bx_timeline', 1);
+VALUES (@iTypeId, 'bx_timeline_general', '_bx_timeline_options_category_general', 1);
 SET @iCategId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options` (`name`, `value`, `category_id`, `caption`, `type`, `check`, `check_params`, `check_error`, `extra`, `order`) VALUES
--- View/Browse related settings
-('bx_timeline_enable_edit', 'on', @iCategId, '_bx_timeline_option_enable_edit', 'checkbox', '', '', '', '', 0),
-('bx_timeline_enable_delete', 'on', @iCategId, '_bx_timeline_option_enable_delete', 'checkbox', '', '', '', '', 1),
-('bx_timeline_enable_show_all', '', @iCategId, '_bx_timeline_option_enable_show_all', 'checkbox', '', '', '', '', 5),
-('bx_timeline_enable_count_all_views', '', @iCategId, '_bx_timeline_option_enable_count_all_views', 'checkbox', '', '', '', '', 6),
+('bx_timeline_enable_edit', 'on', @iCategId, '_bx_timeline_option_enable_edit', 'checkbox', '', '', '', '', 1),
+('bx_timeline_enable_delete', 'on', @iCategId, '_bx_timeline_option_enable_delete', 'checkbox', '', '', '', '', 2),
+('bx_timeline_enable_count_all_views', '', @iCategId, '_bx_timeline_option_enable_count_all_views', 'checkbox', '', '', '', '', 3),
+('bx_timeline_events_hide', '', @iCategId, '_bx_timeline_option_events_hide', 'rlist', '', '', '', 'a:2:{s:6:"module";s:11:"bx_timeline";s:6:"method";s:21:"get_actions_checklist";}', 4);
+
+-- Category: Browse
+INSERT INTO `sys_options_categories` (`type_id`, `name`, `caption`, `order`)
+VALUES (@iTypeId, 'bx_timeline_browse', '_bx_timeline_options_category_browse', 2);
+SET @iCategId = LAST_INSERT_ID();
+
+INSERT INTO `sys_options` (`name`, `value`, `category_id`, `caption`, `type`, `check`, `check_params`, `check_error`, `extra`, `order`) VALUES
+('bx_timeline_enable_show_all', '', @iCategId, '_bx_timeline_option_enable_show_all', 'checkbox', '', '', '', '', 1),
+('bx_timeline_enable_jump_to_switcher', '', @iCategId, '_bx_timeline_option_enable_jump_to_switcher', 'checkbox', '', '', '', '', 2),
+
 ('bx_timeline_events_per_page_profile', '12', @iCategId, '_bx_timeline_option_events_per_page_profile', 'digit', '', '', '', '', 10),
 ('bx_timeline_events_per_page_account', '12', @iCategId, '_bx_timeline_option_events_per_page_account', 'digit', '', '', '', '', 11),
 ('bx_timeline_events_per_page_home', '24', @iCategId, '_bx_timeline_option_events_per_page_home', 'digit', '', '', '', '', 12),
 ('bx_timeline_events_per_page', '24', @iCategId, '_bx_timeline_option_events_per_page', 'digit', '', '', '', '', 13),
-('bx_timeline_enable_infinite_scroll', '', @iCategId, '_bx_timeline_option_enable_infinite_scroll', 'checkbox', '', '', '', '', 15),
-('bx_timeline_events_per_preload', '5', @iCategId, '_bx_timeline_option_events_per_preload', 'digit', '', '', '', '', 16),
-('bx_timeline_auto_preloads', '10', @iCategId, '_bx_timeline_option_auto_preloads', 'digit', '', '', '', '', 17),
-('bx_timeline_rss_length', '5', @iCategId, '_bx_timeline_option_rss_length', 'digit', '', '', '', '', 20),
-('bx_timeline_events_hide', '', @iCategId, '_bx_timeline_option_events_hide', 'rlist', '', '', '', 'a:2:{s:6:"module";s:11:"bx_timeline";s:6:"method";s:21:"get_actions_checklist";}', 30),
-('bx_timeline_videos_autoplay', 'off', @iCategId, '_bx_timeline_option_videos_autoplay', 'select', '', '', '', 'a:2:{s:6:"module";s:11:"bx_timeline";s:6:"method";s:27:"get_options_videos_autoplay";}', 50),
-('bx_timeline_preload_comments', '0', @iCategId, '_bx_timeline_option_preload_comments', 'digit', '', '', '', '', 51),
-('bx_timeline_enable_jump_to_switcher', '', @iCategId, '_bx_timeline_option_enable_jump_to_switcher', 'checkbox', '', '', '', '', 52),
-('bx_timeline_attachments_layout', 'gallery', @iCategId, '_bx_timeline_option_attachments_layout', 'select', '', '', '', 'a:2:{s:6:"module";s:11:"bx_timeline";s:6:"method";s:30:"get_options_attachments_layout";}', 53),
-('bx_timeline_enable_hot', 'on', @iCategId, '_bx_timeline_option_enable_hot', 'checkbox', '', '', '', '', 60),
-('bx_timeline_hot_interval', '48', @iCategId, '_bx_timeline_option_hot_interval', 'digit', '', '', '', '', 61),
-('bx_timeline_enable_cache_item', 'on', @iCategId, '_bx_timeline_option_enable_cache_item', 'checkbox', '', '', '', '', 70),
-('bx_timeline_cache_item_engine', 'File', @iCategId, '_bx_timeline_option_cache_item_engine', 'select', '', '', '', 'File,Memcache,APC,XCache', 71),
-('bx_timeline_cache_item_lifetime', '604800', @iCategId, '_bx_timeline_option_cache_item_lifetime', 'digit', '', '', '', '', 72),
-('bx_timeline_enable_cache_list', 'on', @iCategId, '_bx_timeline_option_enable_cache_list', 'checkbox', '', '', '', '', 73),
-
--- Post related settings
-('bx_timeline_enable_editor_toolbar', '', @iCategId, '_bx_timeline_option_enable_editor_toolbar', 'checkbox', '', '', '', '', 100);
+('bx_timeline_rss_length', '5', @iCategId, '_bx_timeline_option_rss_length', 'digit', '', '', '', '', 14),
+
+('bx_timeline_enable_infinite_scroll', '', @iCategId, '_bx_timeline_option_enable_infinite_scroll', 'checkbox', '', '', '', '', 20),
+('bx_timeline_events_per_preload', '5', @iCategId, '_bx_timeline_option_events_per_preload', 'digit', '', '', '', '', 21),
+('bx_timeline_auto_preloads', '10', @iCategId, '_bx_timeline_option_auto_preloads', 'digit', '', '', '', '', 22),
+
+('bx_timeline_enable_hot', 'on', @iCategId, '_bx_timeline_option_enable_hot', 'checkbox', '', '', '', '', 30),
+('bx_timeline_hot_interval', '48', @iCategId, '_bx_timeline_option_hot_interval', 'digit', '', '', '', '', 31);
+
+-- Category: Card
+INSERT INTO `sys_options_categories` (`type_id`, `name`, `caption`, `order`)
+VALUES (@iTypeId, 'bx_timeline_card', '_bx_timeline_options_category_card', 3);
+SET @iCategId = LAST_INSERT_ID();
+
+INSERT INTO `sys_options` (`name`, `value`, `category_id`, `caption`, `type`, `check`, `check_params`, `check_error`, `extra`, `order`) VALUES
+('bx_timeline_enable_dynamic_cards', 'on', @iCategId, '_bx_timeline_option_enable_dynamic_cards', 'checkbox', '', '', '', '', 1),
+('bx_timeline_videos_autoplay', 'off', @iCategId, '_bx_timeline_option_videos_autoplay', 'select', '', '', '', 'a:2:{s:6:"module";s:11:"bx_timeline";s:6:"method";s:27:"get_options_videos_autoplay";}', 2),
+('bx_timeline_preload_comments', '0', @iCategId, '_bx_timeline_option_preload_comments', 'digit', '', '', '', '', 3),
+('bx_timeline_attachments_layout', 'gallery', @iCategId, '_bx_timeline_option_attachments_layout', 'select', '', '', '', 'a:2:{s:6:"module";s:11:"bx_timeline";s:6:"method";s:30:"get_options_attachments_layout";}', 4);
+
+-- Category: Cache
+INSERT INTO `sys_options_categories` (`type_id`, `name`, `caption`, `order`)
+VALUES (@iTypeId, 'bx_timeline_cache', '_bx_timeline_options_category_cache', 4);
+SET @iCategId = LAST_INSERT_ID();
+
+INSERT INTO `sys_options` (`name`, `value`, `category_id`, `caption`, `type`, `check`, `check_params`, `check_error`, `extra`, `order`) VALUES
+('bx_timeline_enable_cache_item', 'on', @iCategId, '_bx_timeline_option_enable_cache_item', 'checkbox', '', '', '', '', 1),
+('bx_timeline_cache_item_engine', 'File', @iCategId, '_bx_timeline_option_cache_item_engine', 'select', '', '', '', 'File,Memcache,APC,XCache', 2),
+('bx_timeline_cache_item_lifetime', '604800', @iCategId, '_bx_timeline_option_cache_item_lifetime', 'digit', '', '', '', '', 3),
+('bx_timeline_enable_cache_list', 'on', @iCategId, '_bx_timeline_option_enable_cache_list', 'checkbox', '', '', '', '', 4);
+
+-- Category: Post form
+INSERT INTO `sys_options_categories` (`type_id`, `name`, `caption`, `order`)
+VALUES (@iTypeId, 'bx_timeline_post', '_bx_timeline_options_category_post', 5);
+SET @iCategId = LAST_INSERT_ID();
+
+INSERT INTO `sys_options` (`name`, `value`, `category_id`, `caption`, `type`, `check`, `check_params`, `check_error`, `extra`, `order`) VALUES
+('bx_timeline_enable_editor_toolbar', '', @iCategId, '_bx_timeline_option_enable_editor_toolbar', 'checkbox', '', '', '', '', 1);
 
 
 -- PRIVACY 

modules/boonex/timeline/js/main.js

@@ -19,6 +19,7 @@ function BxTimelineMain() {
     this.sClassMasonry = this.sSP + '-masonry';
     this.sClassItems = this.sSP + '-items';
     this.sClassItem = this.sSP + '-item';
+    this.sClassItemCnt = this.sSP + '-item-cnt';
     this.sClassDividerToday = this.sSP + '-divider-today';
     this.sClassItemContent = this.sSP + '-item-content';
     this.sClassItemComments = this.sSP + '-item-comments-holder';
@@ -28,6 +29,7 @@ function BxTimelineMain() {
     this.sClassItemVideo = this.sSP + '-item-video';
     this.sClassItemAttachments = this.sSP + '-item-attachments';
     this.sClassItemAttachment = this.sSP + '-item-attachment';
+    this.sClassSample = this.sSP + '-sample';
     this.sClassBlink = this.sSP + '-blink';
     this.sClassJumpTo = this.sSP + '-jump-to';
 
@@ -37,6 +39,11 @@ function BxTimelineMain() {
     this.bViewItem = false;
 }
 
+BxTimelineMain.prototype.initView = function() 
+{
+    //Do some basic initialization here.
+};
+
 BxTimelineMain.prototype.initVideos = function(oParent) {
     oParent.find('iframe').load(function() {
         $(this).height(($(this).contents().find('video').height()) + 'px');
@@ -135,83 +142,112 @@ BxTimelineMain.prototype.reloadMasonry = function() {
     this.oView.find('.' + this.sClassItems).masonry('reloadItems').masonry('layout');
 };
 
+BxTimelineMain.prototype.initFlickityImages = function(oParent) {
+    var sItem = 'div.' + this.sClassItemImage;
+    if(oParent.find(sItem).length <= 1)
+        return;
+
+    var oCarousel = oParent;
+
+    oCarousel.flickity({
+        cellSelector: sItem,
+        cellAlign: 'left',
+        imagesLoaded: true,
+        wrapAround: true,
+        pageDots: false
+    });
+
+    oCarousel.find(sItem + ' img').each(function() {
+        oParent.load(function() {
+            oCarousel.flickity('resize');
+        });
+    });
+};
+
+BxTimelineMain.prototype.initFlickityVideos = function(oParent) {
+    var sItem = 'div.' + this.sClassItemVideo;
+    if(oParent.find(sItem).length <= 1)
+        return;
+
+    var oCarousel = oParent;
+
+    oCarousel.flickity({
+        cellSelector: sItem,
+        cellAlign: 'left',
+        imagesLoaded: true,
+        wrapAround: true,
+        pageDots: false
+    });
+
+   oCarousel.find(sItem + ' video').each(function() {
+       this.addEventListener('loadedmetadata', function() {
+           oCarousel.flickity('resize');
+       }, true);
+   });
+};
+
+BxTimelineMain.prototype.initFlickityAttachments = function(oParent) {
+    var sItem = 'div.' + this.sClassItemAttachment;
+    if(oParent.find(sItem).length <= 1)
+        return;
+
+    var oCarousel = oParent;
+
+    oCarousel.flickity({
+        cellSelector: sItem,
+        cellAlign: 'left',
+        imagesLoaded: true,
+        wrapAround: true,
+        pageDots: false
+    });
+
+    oCarousel.find(sItem + ' img').each(function() {
+        oParent.load(function() {
+            oCarousel.flickity('resize');
+        });
+    });
+
+   oCarousel.find(sItem + ' video').each(function() {
+       this.addEventListener('loadedmetadata', function() {
+           oCarousel.flickity('resize');
+       }, true);
+   });
+};
+
 BxTimelineMain.prototype.initFlickity = function() {
     var $this = this;
 
     //--- init Flickity for images (may be used in header section)
     $('.' + this.sClassItem + ' .' + this.sClassItemImages + '.' + this.sSP + '-ii-gallery').each(function() {
-        var sItem = 'div.' + $this.sClassItemImage;
-        if($(this).find(sItem).length <= 1)
-            return;
-
-        var oCarousel = $(this);
-
-        oCarousel.flickity({
-            cellSelector: sItem,
-            cellAlign: 'left',
-            imagesLoaded: true,
-            wrapAround: true,
-            pageDots: false
-        });
-
-        oCarousel.find(sItem + ' img').each(function() {
-            $(this).load(function() {
-                oCarousel.flickity('resize');
-            });
-        });
+        $this.initFlickityImages($(this));
     });
 
     //--- init Flickity for videos (may be used in header section)
     $('.' + this.sClassItem + ' .' + this.sClassItemVideos + '.' + this.sSP + '-iv-gallery').each(function() {
-        var sItem = 'div.' + $this.sClassItemVideo;
-        if($(this).find(sItem).length <= 1)
-            return;
-
-        var oCarousel = $(this);
-
-        oCarousel.flickity({
-            cellSelector: sItem,
-            cellAlign: 'left',
-            imagesLoaded: true,
-            wrapAround: true,
-            pageDots: false
-        });
-
-       oCarousel.find(sItem + ' video').each(function() {
-           this.addEventListener('loadedmetadata', function() {
-               oCarousel.flickity('resize');
-           }, true);
-       });
+        $this.initFlickityVideos($(this));
     });
 
     //--- init Flickity for attachments (images and video in attachments seation)
     $('.' + this.sClassItem + ' .' + this.sClassItemAttachments + '.' + this.sSP + '-ia-gallery').each(function() {
-        var sItem = 'div.' + $this.sClassItemAttachment;
-        if($(this).find(sItem).length <= 1)
-            return;
-
-        var oCarousel = $(this);
-
-        oCarousel.flickity({
-            cellSelector: sItem,
-            cellAlign: 'left',
-            imagesLoaded: true,
-            wrapAround: true,
-            pageDots: false
-        });
+        $this.initFlickityAttachments($(this));
+    });
+};
 
-        oCarousel.find(sItem + ' img').each(function() {
-            $(this).load(function() {
-                oCarousel.flickity('resize');
-            });
-        });
+BxTimelineMain.prototype.initFlickityByItem = function(oItem) {
+    //--- init Flickity for images (may be used in header section)
+    var oGalleryImages = $(oItem).find('.' + this.sClassItemImages + '.' + this.sSP + '-ii-gallery');
+    if(oGalleryImages.length > 0)
+        this.initFlickityImages(oGalleryImages);
 
-       oCarousel.find(sItem + ' video').each(function() {
-           this.addEventListener('loadedmetadata', function() {
-               oCarousel.flickity('resize');
-           }, true);
-       });
-    });
+    //--- init Flickity for videos (may be used in header section)
+    var oGalleryVideos = $(oItem).find('.' + this.sClassItemVideos + '.' + this.sSP + '-iv-gallery');
+    if(oGalleryVideos.length > 0)
+        this.initFlickityVideos(oGalleryVideos);
+
+    //--- init Flickity for attachments (images and video in attachments seation)
+    var oGalleryAttachments = $(oItem).find('.' + this.sClassItemAttachments + '.' + this.sSP + '-ia-gallery');
+    if(oGalleryAttachments.length > 0)
+        this.initFlickityAttachments(oGalleryAttachments);
 };
 
 BxTimelineMain.prototype.onFindOverflow = function(oElement) {
@@ -230,7 +266,7 @@ BxTimelineMain.prototype.loadingInItem = function(e, bShow) {
     if($(e).length)
         oParent = !$(e).hasClass(this.sClassItem) ? $(e).parents('.' + this.sClassItem + ':first') : $(e);
 
-    bx_loading(oParent, bShow);
+    bx_loading(oParent.find('.' + this.sClassItemCnt), bShow);
 };
 
 BxTimelineMain.prototype.loadingInBlock = function(e, bShow) {

modules/boonex/timeline/js/view.js

@@ -9,6 +9,8 @@
  */
 
 function BxTimelineView(oOptions) {
+    BxTimelineMain.call(this, oOptions);
+
     this._sActionsUri = oOptions.sActionUri;
     this._sActionsUrl = oOptions.sActionUrl;
     this._sObjName = oOptions.sObjName == undefined ? 'oTimelineView' : oOptions.sObjName;
@@ -29,6 +31,8 @@ function BxTimelineView(oOptions) {
     this._bInfScrollBusy = false;
     this._iInfScrollPreloads = 1; //--- First portion is loaded with page loading or 'Load More' button click.
 
+    this._bDynamicCards = oOptions.bDynamicCards == undefined ? false : oOptions.bDynamicCards;
+
     this._fOutsideOffset = 0.8;
     this._oSaved = {};
 
@@ -40,29 +44,25 @@ function BxTimelineView(oOptions) {
     if(typeof window.glBxTimelineVapPlayers === 'undefined')
         window.glBxTimelineVapPlayers = [];
 
+    this.initView();
+    if(this._bDynamicCards) 
+        this.loadCards();
+
     var $this = this;
     $(document).ready(function() {
     	$this.init();
     });
-
-    
 }
 
-BxTimelineView.prototype = new BxTimelineMain();
+BxTimelineView.prototype = Object.create(BxTimelineMain.prototype);
+BxTimelineView.prototype.constructor = BxTimelineView;
 
 BxTimelineView.prototype.init = function()
 {
     var $this = this;
 
-    this.oView = $(this._getHtmlId('main', this._oRequestParams));
-    if(this.oView.length > 0) {
-        if(this.oView.hasClass(this.sClassView + '-timeline'))
-            this.bViewTimeline = true;
-        else if(this.oView.hasClass(this.sClassView + '-outline'))
-            this.bViewOutline = true;
-        else if(this.oView.hasClass(this.sClassView + '-item'))
-            this.bViewItem = true;
-    }
+    if(!this.oView)
+        this.initView();
 
     if(this.bViewTimeline) {
         var oItems = this.oView.find('.' + this.sClassItem);
@@ -150,6 +150,22 @@ BxTimelineView.prototype.init = function()
     this.initFlickity();
 };
 
+BxTimelineView.prototype.initView = function() 
+{   
+    BxTimelineMain.prototype.initView.call(this);
+
+    this.oView = $(this._getHtmlId('main', this._oRequestParams));
+    if(!this.oView.length) 
+        return;
+
+    if(this.oView.hasClass(this.sClassView + '-timeline'))
+        this.bViewTimeline = true;
+    else if(this.oView.hasClass(this.sClassView + '-outline'))
+        this.bViewOutline = true;
+    else if(this.oView.hasClass(this.sClassView + '-item'))
+        this.bViewItem = true;
+};
+
 BxTimelineView.prototype.initJumpTo = function(oParent)
 {
     var oJumpTo = $(oParent).find('.' + this.sClassJumpTo);
@@ -245,6 +261,63 @@ BxTimelineView.prototype.initVideosAutoplay = function(oParent)
     });
 };
 
+BxTimelineView.prototype.loadCards = function()
+{
+    var $this = this;
+    var oData = this._getDefaultData();
+
+    this.oView.find('.' + this.sClassItem + '.' + this.sClassSample).each(function() {
+        var oItem = $(this);
+        var sItemId = oItem.attr('id');
+
+        oData['id'] = parseInt(oItem.attr('bx-id'));
+
+        $this.loadingInItem(oItem, true);
+
+        jQuery.get (
+            $this._sActionsUrl + 'get_post',
+            oData,
+            function(oData) {
+                $this.loadingInItem(oItem, false);
+
+                if(!oData.item) {
+                    oItem.remove();
+                    return;
+                }
+
+                oItem.replaceWith($(oData.item).bxProcessHtml());
+
+                oItem = $this.oView.find('#' + sItemId);
+
+                if($this.bViewTimeline) {
+                    oItem.find('.bx-tl-item-text .bx-tl-content').checkOverflowHeight($this.sSP + '-overflow', function(oElement) {
+                        $this.onFindOverflow(oElement);
+                    });
+
+                    $this.initFlickityByItem(oItem);
+
+                    //--- Init Video Autoplay
+                    $this.initVideosAutoplay(oItem);
+                }
+
+                if($this.bViewOutline)
+                    $this.appendMasonry(oItem, function(oItem) {
+                        oItem.find('.bx-tl-item-text .bx-tl-content').checkOverflowHeight($this.sSP + '-overflow', function(oElement) {
+                            $this.onFindOverflow(oElement);
+                        });
+
+                        $this.initFlickityByItem(oItem);
+
+                        //--- Init Video Layout
+                        if($this._sVideosAutoplay != 'off') 
+                            $this.initVideos(oItem);
+                    });
+            },
+            'json'
+        );
+    });
+};
+
 BxTimelineView.prototype.hideEvents = function(oEvents, fOffset)
 {
     oEvents.each(function(iIndex, oElement) {

modules/boonex/timeline/template/css/view.css

@@ -228,6 +228,10 @@ div.bx-tl-item-cnt {
     position: relative;
 }
 
+div.bx-tl-item.bx-tl-sample div.bx-tl-item-cnt {
+    min-height: 5rem;
+}
+
 div.bx-tl-blink-plate {
     position: absolute;
     display: none;

modules/boonex/timeline/template/item_outline_sample.html

@@ -0,0 +1,6 @@
+<div id="__html_id__" class="__style_prefix__-item __style_prefix__-sample __class__" bx-id="__id__">
+    <a name="timeline-event-__id__"></a>
+    <div class="__style_prefix__-item-ind bx-def-padding-sec">
+        <div class="__style_prefix__-item-cnt bx-def-box bx-def-padding-topbottom bx-def-round-corners bx-def-color-bg-box"></div>
+    </div>
+</div>

modules/boonex/timeline/template/item_timeline_sample.html

@@ -0,0 +1,9 @@
+<div id="__html_id__" class="__style_prefix__-item __style_prefix__-sample __class__ bx-def-thumb-size-min-height bx-def-padding-bottom bx-clearfix" bx-id="__id__">
+    <a name="timeline-event-__id__"></a>
+    <div class="__style_prefix__-item-type bx-def-media-phone-hide">
+        <div class="__style_prefix__-item-circle">
+            <i class="sys-icon __icon__"></i>
+        </div>
+    </div>
+    <div class="__style_prefix__-item-cnt bx-def-box bx-def-box-sizing bx-def-padding-topbottom bx-def-round-corners bx-def-color-bg-box"></div>
+</div>