#24 - Timeline

modules/boonex/timeline/classes/BxTimelineConfig.php

@@ -25,6 +25,7 @@ class BxTimelineConfig extends BxDolModuleConfig
     protected $_iPerPageProfile;
     protected $_iPerPageAccount;
     protected $_iRssLength;
+    protected $_iCharsDisplayMax;
 
     protected $_aHandlers;
     protected $_aHandlersHidden;
@@ -79,13 +80,13 @@ class BxTimelineConfig extends BxDolModuleConfig
 
         $this->_bAllowDelete = $this->_oDb->getParam('bx_timeline_enable_delete') == 'on';
         $this->_bAllowGuestComments = $this->_oDb->getParam('bx_timeline_enable_guest_comments') == 'on';
-        
-        
-        
+
         $this->_iPerPageProfile = (int)$this->_oDb->getParam('bx_timeline_events_per_page_profile');
         $this->_iPerPageAccount = (int)$this->_oDb->getParam('bx_timeline_events_per_page_account');
         $this->_iRssLength = (int)$this->_oDb->getParam('bx_timeline_rss_length');
 
+        $this->_iCharsDisplayMax = (int)$this->_oDb->getParam('bx_timeline_chars_display_max');        
+
 		$aHandlers = $this->_oDb->getHandlers();
         foreach($aHandlers as $aHandler) {
         	if($aHandler['type'] === BX_TIMELINE_HANDLER_TYPE_INSERT && !empty($aHandler['content'])) {
@@ -162,6 +163,11 @@ class BxTimelineConfig extends BxDolModuleConfig
         return $this->_iRssLength;
     }
 
+    public function getCharsDisplayMax()
+    {
+    	return $this->_iCharsDisplayMax;
+    }
+
 	public function isHandler($sKey = '')
     {
         return isset($this->_aHandlers[$sKey]);

modules/boonex/timeline/classes/BxTimelineTemplate.php

@@ -93,7 +93,7 @@ class BxTimelineTemplate extends BxDolModuleTemplate
 		list($sContent, $sLoadMore) = $this->getPosts($iOwnerId, 'desc', $iStart, $iPerPage, $sFilter, $iTimeline, $aModules);
 
     	$this->addCss(array('plugins/jquery/themes/|jquery-ui.css', 'view.css'));
-        $this->addJs(array('jquery.ui.all.min.js', 'jquery.masonry.min.js', 'common_anim.js', 'main.js', 'view.js'));
+        $this->addJs(array('jquery.ui.all.min.js', 'plugins/|masonry.pkgd.min.js', 'common_anim.js', 'main.js', 'view.js'));
     	return $this->parseHtmlByName('view.html', array(
     		'style_prefix' => $this->_oConfig->getPrefix('style'),
             'timeline' => $this->getTimeline($iOwnerId, $iStart, $iPerPage, $sFilter, $iTimeline, $aModules),
@@ -283,10 +283,25 @@ class BxTimelineTemplate extends BxDolModuleTemplate
         		'condition' => !empty($aTmplVarsTimelineOwner),
         		'content' => $aTmplVarsTimelineOwner
         	),
+        	'item_date' => bx_time_js($aEvent['date'])
         );
 
         switch(str_replace($sPrefix, '', $aEvent['type'])) {
             case 'text':
+            	$sContent = $aContent['content'];
+				$sContentMore = '';
+
+				$iMaxLength = $this->_oConfig->getCharsDisplayMax();
+				if(strlen($sContent) > $iMaxLength) {
+					$iLength = strpos($sContent, ' ', $iMaxLength);
+					
+					$sContentMore = trim(substr($sContent, $iLength));
+					$sContent = trim(substr($sContent, 0, $iLength));
+				}
+
+				$sContent = $this->_prepareTextForOutput($sContent);
+				$sContentMore = $this->_prepareTextForOutput($sContentMore);
+		
             	$aTmplVars = array_merge($aTmplVars, array(
             		'bx_if:show_title' => array(
 		        		'condition' => false,
@@ -296,7 +311,15 @@ class BxTimelineTemplate extends BxDolModuleTemplate
 		        		'condition' => !empty($aContent['content']),
 		        		'content' => array(
 		        			'style_prefix' => $sStylePrefix,
-		        			'item_content' => $aContent['content']
+		        			'item_content' => $sContent,
+				        	'bx_if:show_more' => array(
+				        		'condition' => !empty($sContentMore),
+				        		'content' => array(
+				        			'style_prefix' => $sStylePrefix,
+				        			'js_object' => $sJsObject,
+				        			'item_content_more' => $sContentMore
+				        		)
+				        	),
 		        		)
 		        	)
             	));
@@ -334,12 +357,19 @@ class BxTimelineTemplate extends BxDolModuleTemplate
 
         return $this->parseHtmlByName(str_replace($sPrefix, '', $aEvent['type']) . '.html', $aTmplVars);
     }
-    
-    
-    
 
-    
-    
+	protected function _prepareTextForOutput($s)
+    {
+		$s = bx_process_output($s, BX_DATA_TEXT);
+		$s = preg_replace("/((https?|ftp|news):\/\/)?([a-z]([a-z0-9\-]*\.)+(aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel|[a-z]{2})|(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&amp;]*)?)?(#[a-z][a-z0-9_]*)?/", '<a href="$0" target="_blank">$0</a>', $s);
+
+		return $s; 
+    }
+
+
+
+
+
     /*
 
 	function getDividerToday(&$aEvent)

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

@@ -41,7 +41,7 @@
 	<string name="_bx_timeline_page_block_title_post"><![CDATA[Post to Timeline]]></string>
 	<string name="_bx_timeline_page_block_title_view"><![CDATA[View Timeline]]></string>
 	<string name="_bx_timeline_page_block_title_post_profile"><![CDATA[Post to Timeline]]></string>
-	<string name="_bx_timeline_page_block_title_view_profile"><![CDATA[View Timeline]]></string>
+	<string name="_bx_timeline_page_block_title_view_profile"><![CDATA[Timeline]]></string>
 
 	<!--
     <string name="_bx_timeline_menu_set_title_XXX"><![CDATA[Notes Submenu]]></string>

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

@@ -29,7 +29,8 @@ INSERT INTO `sys_options` (`name`, `value`, `category_id`, `caption`, `type`, `c
 ('bx_timeline_events_per_page_profile', '10', @iCategId, 'Number of events are displayed on Profile page', 'digit', '', '', '', 3),
 ('bx_timeline_events_per_page_account', '20', @iCategId, 'Number of events are displayed on Account page', 'digit', '', '', '', 4),
 ('bx_timeline_rss_length', '5', @iCategId, 'The length of RSS feed', 'digit', '', '', '', 5),
-('bx_timeline_events_hide', '', @iCategId, 'Hide events from Timeline', 'list', '', '', 'PHP:return BxDolService::call(\'bx_timeline\', \'get_actions_checklist\');', 6);
+('bx_timeline_events_hide', '', @iCategId, 'Hide events from Timeline', 'list', '', '', 'PHP:return BxDolService::call(\'bx_timeline\', \'get_actions_checklist\');', 6),
+('bx_timeline_chars_display_max', '300', @iCategId, 'Max number of displayed character in text post', 'digit', '', '', '', 7);
 
 
 -- ACL

modules/boonex/timeline/js/main.js

@@ -1,20 +1,45 @@
 function BxTimelineMain() {
 	this.sIdView = '#bx-timeline';
 	this.sIdItem = '#bx-timeline-item-';
+
+	this.sClassMasonry = "bx-tl-masonry";
 }
 
+BxTimelineMain.prototype.isMasonry = function() {
+	return $(this.sIdView + ' .bx-tl-items').hasClass(this.sClassMasonry);
+};
+
+BxTimelineMain.prototype.isMasonryEmpty = function() {
+	return $(this.sIdView + ' .bx-tl-items .bx-tl-item').length == 0;
+};
+
 BxTimelineMain.prototype.initMasonry = function() {
 	var oItems = $(this.sIdView + ' .bx-tl-items');
 
 	if(oItems.find('.bx-tl-item').length > 0)
-		oItems.masonry({
-		  itemSelector: '.bx-tl-item',
-		  columnWidth: 183,
-		  gutterWidth: 20,
-		  isAnimated: false
+		oItems.addClass(this.sClassMasonry).masonry({
+		  itemSelector: '.bx-tl-item'
 		});
 };
 
+BxTimelineMain.prototype.destroyMasonry = function() {
+	$(this.sIdView + ' .bx-tl-items').removeClass(this.sClassMasonry).masonry('destroy');
+};
+
+BxTimelineMain.prototype.appendMasonry = function(oItems) {
+	var oItems = $(oItems);        			
+	$(this.sIdView + ' .bx-tl-items').append(oItems).masonry('appended', oItems);
+};
+
+BxTimelineMain.prototype.prependMasonry = function(oItems) {
+	var oItems = $(oItems);        			
+	$(this.sIdView + ' .bx-tl-items').prepend(oItems).masonry('prepended', oItems);
+};
+
+BxTimelineMain.prototype.reloadMasonry = function() {
+	$(this.sIdView + ' .bx-tl-items').masonry('reloadItems').masonry('layout');
+};
+
 BxTimelineMain.prototype.loadingInButton = function(e, bShow) {
 	if($(e).length)
 		bx_loading_btn($(e), bShow);

modules/boonex/timeline/js/post.js

@@ -120,11 +120,10 @@ BxTimelinePost.prototype._getPost = function(oElement, iPostId) {
         		if(oView.find('.bx-tl-empty').is(':visible'))
         			oView.find('.bx-tl-empty').hide();
 
-        		var oItems = oView.find('.bx-tl-items');
-        		if(oItems.prepend(oData.item).hasClass('masonry'))
-        			oItems.masonry('reload');
-        		else
+        		if(!$this.isMasonry())
         			$this.initMasonry();
+
+        		$this.prependMasonry(oData.item);
         	}
         },
         'json'

modules/boonex/timeline/js/view.js

@@ -77,11 +77,11 @@ BxTimelineView.prototype.deletePost = function(oLink, iId) {
                     $(this).remove();
 
                     if(oView.find('.bx-tl-item').length != 0) {
-                    	oView.find('.bx-tl-items').masonry('reload');
+                    	$this.reloadMasonry();
                     	return;
                     } 
 
-                    oView.find('.bx-tl-items').masonry('destroy');
+                    $this.destroyMasonry();
                     oView.find('.bx-tl-load-more').hide();
                     oView.find('.bx-tl-empty').show();
                 });                        
@@ -90,6 +90,11 @@ BxTimelineView.prototype.deletePost = function(oLink, iId) {
     );
 };
 
+BxTimelineView.prototype.showMoreContent = function(oLink) {
+	$(oLink).parent('span').next('span').show().prev('span').remove();
+	this.reloadMasonry();
+};
+
 BxTimelineView.prototype.showPostMenu = function(oLink) {
 	var sId = $(oLink).parents('.bx-tl-item-menu:first').children('.bx-db-menu-popup:hidden').attr('id');
 	bx_menu_popup_inline('#' + sId, oLink);
@@ -120,9 +125,7 @@ BxTimelineView.prototype._getPosts = function(oElement, sAction) {
 	        	switch(sAction) { 
 	        		case 'page':
 	        			$this.loadingInButton(oElement, false);
-
-	        			var oItems = $(oData.items);        			
-	        			oView.find('.bx-tl-items').append(oItems).masonry('appended', oItems);
+	        			$this.appendMasonry(oData.items);
 			            break;
 
 	        		default:
@@ -131,13 +134,13 @@ BxTimelineView.prototype._getPosts = function(oElement, sAction) {
 	        			oView.find('.bx-tl-items').bx_anim('hide', $this._sAnimationEffect, $this._iAnimationSpeed, function() {
 			                $(this).html(oData.items).show();
 
-			                if($(this).find('.bx-tl-item').length == 0) {
-			                	$(this).masonry('destroy');
+			                if($this.isMasonryEmpty()) {
+			                	$this.destroyMasonry();
 			                	return;
 			                }
 
-			                if($(this).hasClass('masonry'))
-			                	$(this).masonry('reload');
+			                if($this.isMasonry())
+			                	$this.reloadMasonry();
 			        		else
 			        			$this.initMasonry();
 			            });

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

@@ -6,7 +6,10 @@ div.bx-tl-view {
 	position: relative;
 }
 div.bx-tl-cnt {}
-div.bx-tl-items {}
+div.bx-tl-items {
+	margin-left: -10px;
+	margin-right: -10px;
+}
 
 /*--- Load More Style ---*/
 div.bx-tl-load-more .bx-btn {
@@ -16,7 +19,10 @@ div.bx-tl-load-more .bx-btn {
 /*--- Item Style ---*/
 div.bx-tl-item {
 	position: relative;
-	width: 183px;
+	width: 33.3%;
+}
+div.bx-tl-item-ind {
+	position: relative;
 }
 div.bx-tl-item-cnt {
 	position: relative;
@@ -25,8 +31,8 @@ div.bx-tl-item-cnt {
 }
 div.bx-tl-item-menu {
 	position: absolute;
-	top: 0px;
-	right: -10px;
+	top: 20px;
+	right: 20px;
 }
 div.bx-tl-item-menu-button {
 	width: 20px;
@@ -34,6 +40,9 @@ div.bx-tl-item-menu-button {
 	line-height: 20px;
 	text-align: center;
 }
+div.bx-tl-item-menu-button a:hover {
+	text-decoration: none;
+}
 div.bx-tl-item-menu .bx-menu-verlit li {
 	white-space: nowrap;
 }
@@ -47,9 +56,12 @@ div.bx-tl-owner-icon {
 	left: 0px;
 }
 div.bx-tl-owner-name,
-div.bx-tl-title {
+div.bx-tl-date {
 	margin-left: 42px;
 }
+span.bx-tl-content-see-more a {
+	font-weight: bold;
+}
 
 /*--- Empty Style ---*/
 div.bx-tl-empty div.bx-msg-box-container {

modules/boonex/timeline/template/text.html

@@ -1,46 +1,51 @@
-<div id="bx-timeline-item-__post_id__" class="__style_prefix__-item bx-def-padding-sec-topbottom">
-    <div class="__style_prefix__-item-cnt bx-def-padding-sec bx-def-round-corners bx-def-shadow">
-    	<div class="__style_prefix__-owner bx-def-icon-size-min-height"> 
-	       	<div class="__style_prefix__-owner-icon bx-def-icon bx-def-icon-size">
-				<bx_if:show_icon>
-					<img src="__author_icon__" />
-				</bx_if:show_icon>
-				<bx_if:show_icon_empty>
-					<i class="sys-icon user"></i>
-				</bx_if:show_icon_empty>
-			</div>
-			<div class="__style_prefix__-owner-name">
-				<a href="__item_owner_url__" class="__style_prefix__-owner-name">__item_owner_name__</a>
-	            <bx_if:show_timeline_owner>
-		        	<i class="sys-icon caret-right"></i>
-		        	<a href="__owner_url__" class="__style_prefix__-timeline-owner-name">__owner_username__</a>
-		        </bx_if:show_timeline_owner>
+<div id="bx-timeline-item-__post_id__" class="__style_prefix__-item">
+	<div class="__style_prefix__-item-ind bx-def-padding-sec">
+	    <div class="__style_prefix__-item-cnt bx-def-padding bx-def-round-corners bx-def-shadow">
+	    	<div class="__style_prefix__-owner bx-def-icon-size-min-height"> 
+		       	<div class="__style_prefix__-owner-icon bx-def-icon bx-def-icon-size">
+					<bx_if:show_icon>
+						<img src="__author_icon__" />
+					</bx_if:show_icon>
+					<bx_if:show_icon_empty>
+						<i class="sys-icon user"></i>
+					</bx_if:show_icon_empty>
+				</div>
+				<div class="__style_prefix__-owner-name">
+					<a href="__item_owner_url__" class="__style_prefix__-owner-name">__item_owner_name__</a>
+		            <bx_if:show_timeline_owner>
+			        	<i class="sys-icon caret-right"></i>
+			        	<a href="__owner_url__" class="__style_prefix__-timeline-owner-name">__owner_username__</a>
+			        </bx_if:show_timeline_owner>
+				</div>
+				<div class="__style_prefix__-date bx-def-font-small bx-def-font-grayed">__item_date__</div>
 			</div>
 			<bx_if:show_title>
-				<div class="__style_prefix__-title bx-def-font-large">
+				<div class="__style_prefix__-title bx-def-margin-sec-top bx-def-font-large">
 					<a href="__item_url__">__item_title__</a>
 				</div>
 			</bx_if:show_title>
-		</div>
-		<bx_if:show_content>
-			<div class="__style_prefix__-content bx-def-margin-sec-top bx-def-font-grayed">__item_content__</div>
-		</bx_if:show_content>
-
-		<!--
-		<div class="__style_prefix__-comments bx-def-margin-sec-top bx-def-border bx-def-round-corners">
-			<i class="sys-icon comment-alt"></i>
-			<a href="__item_comments_link__">__item_comments__</a>
-		</div>
-		-->
-	</div>
-	<bx_if:show_menu>
-		<div class="__style_prefix__-item-menu">
-			__menu__
-			<div class="__style_prefix__-item-menu-button bx-def-circle">
-	   			<a href="javascript:void(0)" onclick="javascript:__js_object__.showPostMenu(this);">
-					<i class="sys-icon reorder"></i>
-				</a>
+			<bx_if:show_content>
+				<div class="__style_prefix__-content bx-def-margin-sec-top bx-def-font-grayed">
+				__item_content__<bx_if:show_more><span class="__style_prefix__-content-see-more">... <a class="bx-def-font-small" href="javascript:void(0)" onclick="__js_object__.showMoreContent(this);"><bx_text:_see_more /></a></span><span style="display:none;"> __item_content_more__</span></bx_if:show_more>
+				</div>
+			</bx_if:show_content>
+	
+			<!--
+			<div class="__style_prefix__-comments bx-def-margin-sec-top bx-def-border bx-def-round-corners">
+				<i class="sys-icon comment-alt"></i>
+				<a href="__item_comments_link__">__item_comments__</a>
 			</div>
+			-->
 		</div>
-   	</bx_if:show_menu>
+		<bx_if:show_menu>
+			<div class="__style_prefix__-item-menu">
+				__menu__
+				<div class="__style_prefix__-item-menu-button">
+		   			<a href="javascript:void(0)" onclick="javascript:__js_object__.showPostMenu(this);">
+						<i class="sys-icon chevron-down"></i>
+					</a>
+				</div>
+			</div>
+	   	</bx_if:show_menu>
+	</div>
 </div>