Ticket #3445 - Add Files to Timeline form like in Posts: View attached files.

modules/boonex/artificer/data/template/bx_timeline/css/view.css

@@ -28,6 +28,11 @@ div.bx-tl-view-item div.bx-tl-items {
     display: none;
 }
 
+/*--- Item Content Style ---*/
+div.bx-tl-item-content form {
+    padding: 1rem 1rem 0 1rem;
+}
+
 /*--- Item Activity (Actions and Manage are different menus) ---*/
 div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-custom-hor {
     flex-wrap: wrap;
@@ -167,6 +172,13 @@ div.bx-tl-item-attachment .bx-tl-iv-duration {
     background-color: rgba(255, 255, 255, 0.8);
 }
 
+/*+++ Files +++*/
+div.bx-tl-view-timeline div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment,
+div.bx-tl-view-item div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment,
+div.bx-tl-view-search div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment {
+    width: auto;
+}
+
 /*+++ Showcase Layout +++*/
 div.bx-tl-item-attachments.bx-tl-ia-showcase {
     display: -webkit-flex;

modules/boonex/artificer/data/template/bx_timeline/type_post.html

@@ -15,7 +15,7 @@
         </bx_repeat:items>
     </div>
 </bx_if:show_videos>
-<div class="__style_prefix__-item-text group px-3 md:px-3 lg:px-4 pt-0">
+<div class="__style_prefix__-item-text group px-3 lg:px-4 pt-0">
     <bx_if:show_title>
         <div class="__style_prefix__-title text-lg lg:text-xl font-semibold text-gray-700 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-white mb-1 lg:mb-2 ">__title__</div>
     </bx_if:show_title>
@@ -31,14 +31,14 @@
     </div>
 </bx_if:show_attachments>
 <bx_if:show_links>
-    <div class="__style_prefix__-item-links mx-3 md:mx-4 lg:mx-6">
+    <div class="__style_prefix__-item-links px-3 lg:px-4">
         <bx_repeat:links>
             <div class="__style_prefix__-item-link mt-3 md:mt-4 lg:mt-6">__link__</div>
         </bx_repeat:links>
     </div>
 </bx_if:show_links>
 <bx_if:show_attachments_files>
-    <div class="__style_prefix__-item-attachments __style_prefix__-iaf-__display__ __style_prefix__-iaf-i__count__ mx-1 mt-3 md:mt-4 lg:mt-6">
+    <div class="__style_prefix__-item-attachments __style_prefix__-iaf-__display__ __style_prefix__-iaf-i__count__ flex justify-start px-3 lg:px-4 mt-3 md:mt-4 lg:mt-6 space-x-2">
         <bx_repeat:items>
             <div class="__style_prefix__-item-attachment__class__">__item__</div>
         </bx_repeat:items>

modules/boonex/timeline/classes/BxTimelineModule.php

@@ -4295,29 +4295,30 @@ class BxTimelineModule extends BxBaseModNotificationsModule implements iBxDolCon
         return $aResult;
     }
 	
-	public function getEventFiles($iEventId)
+    public function getEventFiles($iEventId)
     {
         $CNF = &$this->_oConfig->CNF;
 
         $aFiles = $this->_oDb->getMedia($CNF['FIELD_FILE'], $iEventId);
 		
         if(empty($aFiles) || !is_array($aFiles))
-            return array();
+            return [];
 
         $oStorage = BxDolStorage::getObjectInstance($this->_oConfig->getObject('storage_files'));
 		
-        $aResult = array();
+        $aResult = [];
         foreach($aFiles as $iFileId) {
             $sFileUrl = $oStorage->getFileUrlById($iFileId);
             $aFileFile = $oStorage->getFile($iFileId);
 
-            $aResult[$iFileId] = array(
+            $aResult[$iFileId] = [
                 'id' => $iFileId,
                 'src' => $this->_oTemplate->getIconUrl($oStorage->getIconNameByFileName($aFileFile['file_name'])),
                 'src_medium' => '',
                 'src_orig' => '',
-                'url' => $sFileUrl
-            );
+                'url' => $sFileUrl,
+                'title' => $aFileFile['file_name']
+            ];
         }
 
         return $aResult;

modules/boonex/timeline/classes/BxTimelineTemplate.php

@@ -2662,23 +2662,28 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
             if(empty($sFileSrc))
                 continue;
 
-            $sImage = $this->parseImage($sFileSrc, array(
-                'class' => $sStylePrefix . '-item-file'
-            ));
-
-            $aAttrs = array();
+            $aAttrs = ['target' => '_blank'];
             if(isset($aFile['onclick']))
                 $aAttrs['onclick'] = $aFile['onclick'];
             else if(!$bViewItem && !empty($aFile['src_orig']))
                 $aAttrs['onclick'] = 'return ' . $sJsObject . '.showItem(this, \'' . $aEvent['id'] . '\', \'photo\', ' . json_encode(array('src' => base64_encode($aFile['src_orig']))) . ')'; 
+            if(isset($aFile['title']))
+                $aAttrs['title'] = $aFile['title'];
 
-            $sImage = $this->parseLinkByName('file_link.html', isset($aFile['url']) ? $aFile['url'] : 'javascript:void(0)', $sImage, $aAttrs);
+            $sAttrs = '';
+            foreach($aAttrs as $sKey => $sValue)
+                $sAttrs .= ' ' . $sKey . '="' . bx_html_attribute($sValue) . '"';
 
-            $aTmplVarsFiles[] = array(
+            $aTmplVarsFiles[] = [
                 'style_prefix' => $sStylePrefix,
                 'class' => '',
-                'item' => $sImage
-            );
+                'item' => $this->parseHtmlByName('file_link.html', [
+                    'href' => isset($aFile['url']) ? $aFile['url'] : 'javascript:void(0)',
+                    'attrs' => $sAttrs,
+                    'icon_src' => $sFileSrc,
+                    'icon_class' => $sStylePrefix . '-item-file'
+                ])
+            ];
         }
 
         return array(
@@ -2753,7 +2758,7 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
                 $aResult['content']['links'] = $oModule->getEventLinks($aEvent['id']);
                 $aResult['content']['images_attach'] = $oModule->getEventImages($aEvent['id']);
                 $aResult['content']['videos_attach'] = $oModule->getEventVideos($aEvent['id']);
-				$aResult['content']['files_attach'] = $oModule->getEventFiles($aEvent['id']);
+                $aResult['content']['files_attach'] = $oModule->getEventFiles($aEvent['id']);
                 break;
 
             case BX_TIMELINE_PARSE_TYPE_REPOST:

modules/boonex/timeline/js/main.js

@@ -232,10 +232,12 @@ BxTimelineMain.prototype.initFlickity = function(oView) {
         $this.initFlickityAttachments($(this));
     });
 
-    //--- init Flickity for attachments (files in attachments seation)
-    oView.find('.' + this.sClassItem + ' .' + this.sClassItemAttachments + '.' + this.sSP + '-iaf-gallery').each(function() {
-        $this.initFlickityAttachments($(this));
-    });
+    //--- init Flickity for attachments (files in attachments seation) - DISABLED for now
+    if(this._bScrollForFiles) {
+        oView.find('.' + this.sClassItem + ' .' + this.sClassItemAttachments + '.' + this.sSP + '-iaf-gallery').each(function() {
+            $this.initFlickityAttachments($(this));
+        });
+    }
 };
 
 BxTimelineMain.prototype.initFlickityByItem = function(oItem) {

modules/boonex/timeline/js/view.js

@@ -47,6 +47,9 @@ function BxTimelineView(oOptions) {
     if(typeof window.glBxTimelineVapPlayers === 'undefined')
         window.glBxTimelineVapPlayers = [];
 
+    //--- Use Scroll for Attachments.
+    this._bScrollForFiles = false;
+
     //--- Get currently active 'view'.
     this.initView();
 

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

@@ -779,6 +779,15 @@ div.bx-tl-item-attachment .bx-tl-iv-duration {
     background-color: rgba(255, 255, 255, 0.8);
 }
 
+/*+++ Files +++*/
+div.bx-tl-view-timeline div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment,
+div.bx-tl-view-item div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment,
+div.bx-tl-view-search div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment {
+    display: inline-block;
+    width: auto;
+}
+
+
 /*+++ Showcase Layout +++*/
 div.bx-tl-item-attachments.bx-tl-ia-showcase {
     display: -webkit-flex;

modules/boonex/timeline/template/file_link.html

@@ -1 +1,3 @@
-<a href="__href__"__attrs__>__content__</a>
+<a href="__href__"__attrs__>
+    <img src="__icon_src__" class="__icon_class__ bx-def-round-corners" />
+</a>