#24 - Timeline.

1. Fixes and improvements.
2. Photo viewer with paginate.

inc/classes/BxDolModuleTemplate.php

@@ -38,6 +38,10 @@ class BxDolModuleTemplate extends BxDolTemplate {
         return $this->_addFiles(BxDolTemplate::getInstance(), 'addJs', 'addLocationJs', 'removeLocationJs', 'js/', $mixedFiles, $bDynamic, true);
     }
 
+    function addJsTranslation($mixedKey) {
+    	BxDolTemplate::getInstance()->addJsTranslation($mixedKey);
+    }
+
     function addStudioCss($mixedFiles, $bDynamic = false, $bSearchInModule = true) {
         bx_import('BxDolStudioTemplate');
         return $this->_addFiles(BxDolStudioTemplate::getInstance(), 'addCss', 'addLocation', 'removeLocation', '', $mixedFiles, $bDynamic, $bSearchInModule);

modules/boonex/timeline/classes/BxTimelineDb.php

@@ -340,15 +340,19 @@ class BxTimelineDb extends BxDolModuleDb
 		return (int)$this->query($sQuery) > 0;
 	}
 
-	public function getPhotos($iEventId)
+	public function getPhotos($iEventId, $iOffset = 0)
 	{
+		$sLimitAddon = '';
+		if($iOffset != 0)
+			$sLimitAddon = $this->prepare(" OFFSET ?", $iOffset);
+
 		$sQuery = $this->prepare("SELECT
 				 `tpe`.`photo_id` AS `id`
 			FROM `" . $this->_sPrefix . "photos2events` AS `tpe` 
 			LEFT JOIN `" . $this->_sPrefix . "photos` AS `tp` ON `tpe`.`photo_id` = `tp`.`id` 
-			WHERE `tpe`.`event_id` = ?", $iEventId);
+			WHERE `tpe`.`event_id` = ?" . $sLimitAddon, $iEventId);
 
-		return $this->getAll($sQuery);
+		return $this->getColumn($sQuery);
 	}
 
 	//--- Link attach related methods ---//

modules/boonex/timeline/classes/BxTimelineModule.php

@@ -207,11 +207,13 @@ class BxTimelineModule extends BxDolModule
 
 	public function actionGetPhotoPopup()
     {
-    	$iPhotoId = bx_process_input(bx_get('id'), BX_DATA_INT);
-    	if(!$iPhotoId)
+    	$iEventId = bx_process_input(bx_get('event_id'), BX_DATA_INT);
+    	$iStart = bx_process_input(bx_get('start'), BX_DATA_INT);
+
+    	if(!$iEventId)
 			return;
 
-    	echo $this->_oTemplate->getViewPhotoPopup($iPhotoId);
+    	echo $this->_oTemplate->getPhotoPopup($iEventId, $iStart);
     }
 
     public function actionAddAttachLink()
@@ -403,7 +405,7 @@ class BxTimelineModule extends BxDolModule
     	if(!$iItemId)
     		return array();
 
-    	return array('content' => $this->_oTemplate->getViewItemBlock($iItemId));
+    	return array('content' => $this->_oTemplate->getItemBlock($iItemId));
     }
 
     public function serviceGetShareElementBlock($iOwnerId, $sType, $sAction, $iObjectId, $aParams = array())
@@ -740,12 +742,12 @@ class BxTimelineModule extends BxDolModule
     public function onDelete($aEvent)
     {
 		$aPhotos = $this->_oDb->getPhotos($aEvent['id']);
-		if(is_array($aPhotos) && !empty($aPhotos)) {
+		if(!empty($aPhotos) && is_array($aPhotos)) {
 			bx_import('BxDolStorage');
 			$oStorage = BxDolStorage::getObjectInstance($this->_oConfig->getObject('storage'));
 
-			foreach($aPhotos as $aPhoto)
-				$oStorage->deleteFile($aPhoto['id']);
+			foreach($aPhotos as $iPhotoId)
+				$oStorage->deleteFile($iPhotoId);
 
 			$this->_oDb->deletePhotos($aEvent['id']);
 		}

modules/boonex/timeline/classes/BxTimelineTemplate.php

@@ -94,7 +94,7 @@ class BxTimelineTemplate extends BxDolModuleTemplate
         ));
     }
 
-    public function getViewItemBlock($iId)
+    public function getItemBlock($iId)
     {
     	$aEvent = $this->_oDb->getEvents(array('browse' => 'id', 'value' => $iId));
     	if(empty($aEvent))
@@ -105,24 +105,44 @@ class BxTimelineTemplate extends BxDolModuleTemplate
     	return $sContent;
     }
 
-    public function getViewItemPopup($iId)
+    public function getItemPopup($iId)
     {
-    	return $this->getViewItemBlock($iId);
+    	return $this->getItemBlock($iId);
     }
-    
-    public function getViewPhotoPopup($iId)
+
+    public function getPhotoPopup($iEventId, $iStart)
     {
     	$sStylePrefix = $this->_oConfig->getPrefix('style');
     	$sJsObject = $this->_oConfig->getJsObject('view');
 
-    	bx_import('BxDolStorage');
-		$oStorage = BxDolStorage::getObjectInstance($this->_oConfig->getObject('storage'));
+    	$aPhotos = $this->_oDb->getPhotos($iEventId);
+    	$iPhotos = count($aPhotos);
 
-		return $this->parseHtmlByName('bx_img.html', array(
-    		'src' => $oStorage->getFileUrlById($iId),
-        	'bx_repeat:attrs' => array(
-        		array('key' => 'onclick', 'value' => $sJsObject . '.hidePhoto(this)'),
-        		array('key' => 'class', 'value' => $sStylePrefix . '-attached-image')
+		if(empty($aPhotos[$iStart]))
+    		return MsgBox(_t('_Empty'));
+
+    	$sPaginate = '';
+    	if($iPhotos > 1) {
+			bx_import('BxTemplPaginate');
+	    	$oPaginate = new BxTemplPaginate(array(
+				'start' => $iStart,
+	    		'num' => (isset($aPhotos[$iStart + 1]) ? 2 : 1),
+				'per_page' => 1,
+				'on_change_page' => $sJsObject . '.showPhoto(this, ' . $iEventId . ', {start})'
+	    	));
+
+	    	$sPaginate = $oPaginate->getSimplePaginate();
+    	}
+
+		return $this->parseHtmlByName('attach_photo_popup.html', array(
+			'style_prefix' => $sStylePrefix,
+			'photo' => $this->_getPhoto($aPhotos[$iStart]),
+        	'bx_if:show_paginate' => array(
+        		'condition' => !empty($sPaginate),
+        		'content' => array(
+        			'style_prefix' => $sStylePrefix,
+        			'paginate' => $sPaginate
+        		)
         	)
     	));
     }
@@ -256,13 +276,13 @@ class BxTimelineTemplate extends BxDolModuleTemplate
     				),
     				'content' => $i
     			)) : $i) . ', ';
-    		
+
     		$sYears = substr($sYears, 0, -2);
     	}
     	
         $aTmplVars = array(
         	'style_prefix' => $sStylePrefix,
-            'visible' => $bVisible ? 'block' : 'none',
+            'visible' => $bEnabled && $bVisible ? 'block' : 'none',
             'bx_if:is_disabled' => array(
                 'condition' => !$bEnabled,
                 'content' => array()
@@ -526,7 +546,7 @@ class BxTimelineTemplate extends BxDolModuleTemplate
         if(!method_exists($this, $sMethod)) 
         	return '';
 
-       	$aTmplVars = $this->$sMethod($aContent);
+       	$aTmplVars = $this->$sMethod($aContent, $aBrowseParams);
        	return $this->parseHtmlByName('type_' . $sType . '.html', $aTmplVars);
     }
 
@@ -556,6 +576,23 @@ class BxTimelineTemplate extends BxDolModuleTemplate
 		return $oVote->getJsScript();
     }
 
+	protected function _getPhoto($iPhotoId)
+    {
+		$sStylePrefix = $this->_oConfig->getPrefix('style');
+    	$sJsObject = $this->_oConfig->getJsObject('view');
+
+    	bx_import('BxDolStorage');
+		$oStorage = BxDolStorage::getObjectInstance($this->_oConfig->getObject('storage'));
+
+		return $this->parsePageByName('bx_img.html', array(
+			'src' => $oStorage->getFileUrlById($iPhotoId),
+        	'bx_repeat:attrs' => array(
+        		array('key' => 'onclick', 'value' => $sJsObject . '.hidePhoto(this)'),
+        		array('key' => 'class', 'value' => $sStylePrefix . '-attached-image')
+        	),
+		));
+    }
+
     protected function _getTmplVarsMenuItemManage(&$aEvent) {
     	$oModule = $this->getModule();
 
@@ -610,7 +647,7 @@ class BxTimelineTemplate extends BxDolModuleTemplate
         return $aTmplVarsTimelineOwner;
     }
 
-	protected function _getTmplVarsContentPost($aContent)
+	protected function _getTmplVarsContentPost($aContent, $aBrowseParams = array())
     {
     	$sStylePrefix = $this->_oConfig->getPrefix('style');
 		$sJsObject = $this->_oConfig->getJsObject('view');
@@ -661,17 +698,19 @@ class BxTimelineTemplate extends BxDolModuleTemplate
 
 		//--- Process Photos ---//
 		$aTmplVarsImages = array();
-		if(!empty($aContent['images']))
+		if(!empty($aContent['images'])) {
+			$bBrowseItem = isset($aBrowseParams['type']) && $aBrowseParams['type'] == BX_TIMELINE_TYPE_ITEM;
+
 			foreach($aContent['images'] as $aImage) {
 				$sImage = '';
-				if(isset($aImage['src']) && !empty($aImage['src']))
+				if(!empty($aImage['src']))
 					$sImage = $this->parseHtmlByName('bx_img.html', array(
-						'src' => $aImage['src'],
+						'src' => $bBrowseItem && !empty($aImage['src_orig']) ? $aImage['src_orig'] : $aImage['src'],
 						'bx_repeat:attrs' => array(
 							array('key' => 'class', 'value' => $sStylePrefix . '-item-image')
 						)
 					));
-	
+
 				if(!empty($sImage) && (isset($aImage['url']) || isset($aImage['onclick']))) {
 					$aAttrs = array();
 					if(isset($aImage['onclick']))
@@ -684,12 +723,13 @@ class BxTimelineTemplate extends BxDolModuleTemplate
 						'content' => $sImage
 					));
 				}
-	
+
 				$aTmplVarsImages[] = array(
 					'style_prefix' => $sStylePrefix,
 					'image' => $sImage
 				);
 			}
+		}
 
 		return array(
 			'style_prefix' => $sStylePrefix,
@@ -732,7 +772,7 @@ class BxTimelineTemplate extends BxDolModuleTemplate
 		);
     }
 
-	protected function _getTmplVarsContentShare($aContent)
+	protected function _getTmplVarsContentShare($aContent, $aBrowseParams = array())
     {
     	$sStylePrefix = $this->_oConfig->getPrefix('style');
     	$sCommonPrefix = $this->_oConfig->getPrefix('common_post');
@@ -834,15 +874,22 @@ class BxTimelineTemplate extends BxDolModuleTemplate
 
 				$aPhotos = $this->_oDb->getPhotos($aEvent['id']);
 				if(!empty($aPhotos) && is_array($aPhotos)) {
+					bx_import('BxDolStorage');
+					$oStorage = BxDolStorage::getObjectInstance($this->_oConfig->getObject('storage'));
+
 					bx_import('BxDolImageTranscoder');
 		        	$oTranscoder = BxDolImageTranscoder::getObjectInstance($this->_oConfig->getObject('transcoder_view'));
 
-					foreach($aPhotos as $aPhoto)
+					foreach($aPhotos as $iPhotoId) {
+						$iPhotoIndex = array_search($iPhotoId, $aPhotos);
+
 						$aResult['content']['images'][] = array(
-							'src' => $oTranscoder->getImageUrl($aPhoto['id']),
+							'src' => $oTranscoder->getImageUrl($iPhotoId),
+							'src_orig' => $oStorage->getFileUrlById($iPhotoId),
 							'title' => '',
-							'onclick' => $sJsObject . '.showPhoto(this, ' . $aPhoto['id'] . ')'
+							'onclick' => $sJsObject . '.showPhoto(this, ' . $aEvent['id'] . ', ' . $iPhotoIndex . ')'
 						);
+					}
 				}
 				break;
 

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

@@ -11,17 +11,19 @@
 	<string name="_bx_timeline_form_post_input_sys_text"><![CDATA[Content]]></string>
 	<string name="_bx_timeline_form_post_input_text"><![CDATA[]]></string>
 	<string name="_bx_timeline_form_post_input_sys_link"><![CDATA[Link]]></string>
+	<string name="_bx_timeline_form_post_input_link_alt"><![CDATA[Add Link]]></string>
 	<string name="_bx_timeline_form_post_input_link_err_delete"><![CDATA[Cannot remove the link. Please report.]]></string>
 	<string name="_bx_timeline_form_post_input_sys_photo"><![CDATA[Content]]></string>
 	<string name="_bx_timeline_form_post_input_photo"><![CDATA[]]></string>
+	<string name="_bx_timeline_form_post_input_photo_alt"><![CDATA[Add Photo]]></string>
 	<string name="_bx_timeline_form_post_input_sys_do_submit"><![CDATA[Post]]></string>
 	<string name="_bx_timeline_form_post_input_do_submit"><![CDATA[Post]]></string>
 
 	<string name="_bx_timeline_form_attach_link"><![CDATA[Attach Link]]></string>
 	<string name="_bx_timeline_form_attach_link_display_add"><![CDATA[Attach Link]]></string>
 	<string name="_bx_timeline_form_attach_link_input_sys_url"><![CDATA[Url]]></string>
-	<string name="_bx_timeline_form_attach_link_input_url"><![CDATA[Url]]></string>
-	<string name="_bx_timeline_form_attach_link_input_url_err"><![CDATA[Correct Url is essential. Please, fill in this field.]]></string>
+	<string name="_bx_timeline_form_attach_link_input_url"><![CDATA[Add Link]]></string>
+	<string name="_bx_timeline_form_attach_link_input_url_err"><![CDATA[Correct Link is essential. Please, fill in this field.]]></string>
 	<string name="_bx_timeline_form_attach_link_input_sys_do_submit"><![CDATA[Add]]></string>
 	<string name="_bx_timeline_form_attach_link_input_do_submit"><![CDATA[Add]]></string>
 	<string name="_bx_timeline_form_attach_link_input_sys_do_cancel"><![CDATA[Close]]></string>

modules/boonex/timeline/js/main.js

@@ -71,6 +71,11 @@ BxTimelineMain.prototype.loadingInBlock = function(e, bShow) {
 	bx_loading(oParent, bShow);
 };
 
+BxTimelineMain.prototype.loadingInPopup = function(e, bShow) {
+	var oParent = $(e).length ? $(e).parents('.bx-popup-content:first') : $('body'); 
+	bx_loading(oParent, bShow);
+};
+
 BxTimelineMain.prototype._loading = function(e, bShow) {
 	var oParent = $(e).length ? $(e) : $('body'); 
 	bx_loading(oParent, bShow);
@@ -78,6 +83,5 @@ BxTimelineMain.prototype._loading = function(e, bShow) {
 
 BxTimelineMain.prototype._getDefaultData = function () {
 	var oDate = new Date();
-	this._oRequestParams._t = oDate.getTime();
-    return this._oRequestParams;
+    return jQuery.extend({}, this._oRequestParams, {_t:oDate.getTime()});
 };

modules/boonex/timeline/js/post.js

@@ -116,7 +116,7 @@ BxTimelinePost.prototype.afterFormAttachLinkSubmit = function (oForm, oData)
 
 BxTimelinePost.prototype.deleteAttachLink = function(oLink, iId) {
 	var $this = this;
-    var oData = this._getDefaultData();    
+    var oData = this._getDefaultData();
     oData['id'] = iId;
 
     var oAttachLink = $('#' + this._aHtmlIds['attach_link_item'] + iId);

modules/boonex/timeline/js/view.js

@@ -103,12 +103,19 @@ BxTimelineView.prototype.showItem = function(oLink, iId) {
 	return false;
 };
 
-BxTimelineView.prototype.showPhoto = function(oLink, iId) {
-    var oData = this._getDefaultData();    
-    oData['id'] = iId;
+BxTimelineView.prototype.showPhoto = function(oLink, iEventId, iStart) {
+    var oData = this._getDefaultData();
+    oData['event_id'] = iEventId;
+    oData['start'] = iStart;
+
+    var sId = this._aHtmlIds['photo_popup'] + iEventId;
+    if($('#' + sId).length != 0)
+    	$('#' + sId).bx_anim('hide', this._sAnimationEffect, 0, function() {
+    		$(this).remove();    		
+    	});
 
     $(window).dolPopupAjax({
-		id: this._aHtmlIds['photo_popup'] + iId,
+		id: {value: this._aHtmlIds['photo_popup'] + iEventId, force: true},
 		url: bx_append_url_params(this._sActionsUri + 'get_photo_popup/', oData)
 	});
 

modules/boonex/timeline/template/attach_photo_popup.html

@@ -0,0 +1,6 @@
+<div class="__style_prefix__-attach-photo-popup">
+	__photo__
+	<bx_if:show_paginate>
+	<div class="__style_prefix__-paginate bx-def-margin-top bx-clearfix">__paginate__</div>
+	</bx_if:show_paginate>
+</div>

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

@@ -107,6 +107,10 @@ div.bx-tl-item-image img {
 	max-width: 318px;
 	max-height: 318px;
 }
+.bx-tl-view-sizer div.bx-tl-item-image img {
+	max-width: 100%;
+	max-height: 100%;
+}
 
 
 /*+++ Item Shared +++*/
@@ -130,6 +134,11 @@ div.bx-tl-item-actions {}
 
 
 /*--- View Image Style ---*/
+div.bx-tl-attach-photo-popup {}
+div.bx-tl-paginate div.bx-paginate {
+	position: relative;
+	float: right;
+}
 img.bx-tl-attached-image {
 	max-width: 640px;
 	max-width: 40rem;

modules/boonex/timeline/template/uploader_bs.html

@@ -1,8 +1,8 @@
 <div class="bx-tl-uploader-buttons">
-	<a href="javascript:void(0);" onclick="__js_object__.showAttachLink(this);" class="bx-btn bx-def-margin-top bx-def-margin-sec-left-auto bx-tl-uploader-button">
+	<a href="javascript:void(0);" onclick="__js_object__.showAttachLink(this);" class="bx-btn bx-def-margin-top bx-def-margin-sec-left-auto bx-tl-uploader-button" title="<bx_text:_bx_timeline_form_post_input_link_alt />">
 	    <i class="sys-icon link"></i>
 	</a>
-	<a href="javascript:void(0);" onclick="__uploader_instance_name__.showUploaderForm();" class="bx-btn bx-def-margin-top bx-def-margin-sec-left-auto bx-tl-uploader-button">
+	<a href="javascript:void(0);" onclick="__uploader_instance_name__.showUploaderForm();" class="bx-btn bx-def-margin-top bx-def-margin-sec-left-auto bx-tl-uploader-button" title="<bx_text:_bx_timeline_form_post_input_photo_alt />">
 	    <i class="sys-icon __button_title__"></i>
 	</a>
 </div>

template/css/common.css

@@ -301,7 +301,6 @@ input.bx-btn {
 }
 .bx-btn.bx-btn-symbol-small {
     font-size:1rem;
-    line-height:16px; 
 }
 
 .bx-btn-group .bx-btn {

template/paginate.html

@@ -1,6 +1,6 @@
 <div class="bx-paginate __paginate_class__">
 
-    <div class="bx-paginate-btns bx-def-margin-sec-left bx-btn-group">
+    <div class="bx-paginate-btns bx-def-margin-sec-left bx-btn-group bx-clearfix">
         __btn_prev__
         __btn_next__
     </div>