Ticket #4471 - Comments: Add 'See more' like Timeline has.

inc/js/classes/BxDolCmts.js

@@ -58,6 +58,11 @@ BxDolCmts.prototype.cmtInit = function()
 
         // blink (highlight) necessary comments
         $this._cmtsBlink($($this._sRootId));
+        
+        // check content to show 'See More'
+        $($this._sRootId + ' .cmt-body.bx-overflow-ready').bxCheckOverflowHeight('', function(oElement) {
+            $this.cmtOnFindOverflow(oElement);
+        });
     });
 };
 
@@ -461,11 +466,6 @@ BxDolCmts.prototype.showReplacement = function(iCmtId)
     });
 };
 
-BxDolCmts.prototype.showMore = function(oLink)
-{
-	$(oLink).parent('span').next('span').show().prev('span').remove();
-};
-
 BxDolCmts.prototype.showImage = function(eve, oLink)
 {
     var $this = this;
@@ -891,6 +891,18 @@ BxDolCmts.prototype.changeLiveUpdates = function(sAction, onLoad)
 	);
 };
 
+BxDolCmts.prototype.cmtShowMore = function(oLink)
+{
+    var sClassOverflow = 'bx-overflow';
+
+    $(oLink).parents('.' + this._sSP + ':first').find('.' + sClassOverflow).css('max-height', 'none').removeClass(sClassOverflow);
+    $(oLink).parents('.' + this._sSP + '-body-show-more:first').remove();
+};
+
+BxDolCmts.prototype.cmtOnFindOverflow = function(oElement) {
+    $(oElement).after($(oElement).parents(this._sRootId + ':first').find('.' + this._sSP + '-body-show-more:hidden:first').clone().show());
+};
+
 /*----------------------------------*/
 /*--- Methods for internal usage ---*/
 /*----------------------------------*/

inc/js/functions.js

@@ -1000,8 +1000,38 @@ function bx_time(sLang, isAutoupdate, sRootSel) {
         }
         
         return this;
-    }
+    };
+
+    $.fn.bxCheckOverflowHeight = function(sClass, onFind) {
+    	if(!sClass)
+    		sClass = 'bx-overflow';
 
+        return this.each(function() {
+            var oElement = $(this);
+            if(oElement.hasClass(sClass) || oElement.css('overflow') != 'hidden')
+            	return;
+            
+            if (oElement.find('img').length > 0){
+                var oImg = oElement.find('img').first();
+                var iRelImgY = oImg.offset().top - oElement.offset().top;
+                
+                const img = new Image();
+                img.src = oImg.prop('src');
+                img.onload = function() {
+                    if (iRelImgY < oElement.height() && iRelImgY + this.height > oElement.height()){
+                        oElement.css('max-height', (iRelImgY + this.height) +  50 + 'px');
+                    }
+                }
+            }
+
+            if(oElement.prop('scrollHeight') <= Math.ceil(oElement.height()))
+            	return;
+
+            oElement.addClass(sClass);
+            if(typeof onFind === 'function')
+            	onFind(oElement);
+        });
+    };
 } (jQuery));
 
 

modules/boonex/artificer/data/template/system/css/common.css

@@ -297,6 +297,9 @@ button.bx-btn:focus .bx-loading-ajax-btn {
     max-height: 16rem;
     overflow: hidden;
 }
+.bx-overflow-ready.bx-or-cmt {
+    max-height: 5rem;
+}
 .bx-overflow:before {
     position: absolute;
     bottom: 0;

modules/boonex/protean/data/template/system/css/default.less

@@ -1201,6 +1201,14 @@
         transition: background-color 0.2s ease-in-out;
     }
 
+    /* comments */
+    .cmt .cmt-body.bx-overflow .cmt-body-overflow {
+        background: -webkit-linear-gradient(top, @bx-color-box-transparent, @bx-color-box);
+        background: -moz-linear-gradient(top, @bx-color-box-transparent, @bx-color-box);
+        background: -o-linear-gradient(top, @bx-color-box-transparent, @bx-color-box);
+        background: linear-gradient(to bottom, @bx-color-box-transparent, @bx-color-box);
+    }
+
     /* grid */
     .bx-def-color-bg-page .bx-grid-table-wrapper2:before {
         background: @bx-color-page-gradient-left;

modules/boonex/timeline/js/main.js

@@ -84,7 +84,7 @@ BxTimelineMain.prototype.initMasonry = function(onComplete) {
 
     oItems.resize(function(){
             $this.reloadMasonry();
-    }).find('.bx-tl-item-text .bx-tl-content').checkOverflowHeight(this.sSP + '-overflow', function(oElement) {
+    }).find('.bx-tl-item-text .bx-tl-content').bxCheckOverflowHeight(this.sSP + '-overflow', function(oElement) {
             $this.onFindOverflow(oElement);
     });
 
@@ -565,37 +565,4 @@ BxTimelineMain.prototype._getPost = function(oView, iId, aParams) {
         },
         'json'
     );
-};
-
-(function($) {
-    $.fn.checkOverflowHeight = function(sClass, onFind) {
-    	if(!sClass)
-    		sClass = 'bx-overflow';
-
-        return this.each(function() {
-            var oElement = $(this);
-            if(oElement.hasClass(sClass) || oElement.css('overflow') != 'hidden')
-            	return;
-            
-            if (oElement.find('img').length > 0){
-                var oImg = oElement.find('img').first();
-                var iRelImgY = oImg.offset().top - oElement.offset().top;
-                
-                const img = new Image();
-                img.src = oImg.prop('src');
-                img.onload = function() {
-                    if (iRelImgY < oElement.height() && iRelImgY + this.height > oElement.height()){
-                        oElement.css('max-height', (iRelImgY + this.height) +  50 + 'px');
-                    }
-                }
-            }
-
-            if(oElement.prop('scrollHeight') <= Math.ceil(oElement.height()))
-            	return;
-
-            oElement.addClass(sClass);
-            if(typeof onFind === 'function')
-            	onFind(oElement);
-        });
-    };
-})(jQuery);
+};

modules/boonex/timeline/js/post.js

@@ -370,7 +370,7 @@ BxTimelinePost.prototype._onGetPost = function(oData)
 
                     var oItem = bDivider ? oDivider.after(oContent).next('.' + $this.sClassItem + ':hidden') : oContent.prependTo(oItems);
                     oItem.bx_anim('show', $this._sAnimationEffect, $this._iAnimationSpeed, function() {
-                        $(this).find('.bx-tl-item-text .bx-tl-content').checkOverflowHeight($this.sSP + '-overflow', function(oElement) {
+                        $(this).find('.bx-tl-item-text .bx-tl-content').bxCheckOverflowHeight($this.sSP + '-overflow', function(oElement) {
                             $this.onFindOverflow(oElement);
                         });
 
@@ -383,7 +383,7 @@ BxTimelinePost.prototype._onGetPost = function(oData)
 
                 case 'outline':
                     $this.prependMasonry(oContent, function(oItems) {
-                        $(oItems).find('.bx-tl-item-text .bx-tl-content').checkOverflowHeight($this.sSP + '-overflow', function(oElement) {
+                        $(oItems).find('.bx-tl-item-text .bx-tl-content').bxCheckOverflowHeight($this.sSP + '-overflow', function(oElement) {
                             $this.onFindOverflow(oElement);
                         });
 

modules/boonex/timeline/js/view.js

@@ -191,13 +191,13 @@ BxTimelineView.prototype.initSeeMore = function(oParent, bInItems)
     if(bInItems)
         oSubParent = oParent.find('.' + this.sClassItem);
 
-    oSubParent.find('.bx-tl-item-text .bx-tl-content').checkOverflowHeight(this.sSP + '-overflow', function(oElement) {
+    oSubParent.find('.bx-tl-item-text .bx-tl-content').bxCheckOverflowHeight(this.sSP + '-overflow', function(oElement) {
         $this.onFindOverflow(oElement);
     });
 
     if(oSubParent.find('.bx-tl-item-text .bx-tl-content .bx-embed-link').length != 0)
         setTimeout(function() {
-            oSubParent.find('.bx-tl-item-text .bx-tl-content:not(.' +  $this.sSP + '-overflow)').has('.bx-embed-link').checkOverflowHeight($this.sSP + '-overflow', function(oElement) {
+            oSubParent.find('.bx-tl-item-text .bx-tl-content:not(.' +  $this.sSP + '-overflow)').has('.bx-embed-link').bxCheckOverflowHeight($this.sSP + '-overflow', function(oElement) {
                 $this.onFindOverflow(oElement);
             });
         }, 4000);
@@ -1377,7 +1377,7 @@ BxTimelineView.prototype._onGetPost = function(oData)
     var $this = this;
     var sItem = this._getHtmlId('item', this._oRequestParams, {whole:false}) + oData.id;
     this.oView.find(sItem).replaceWith($(oData.item).bxProcessHtml());
-    this.oView.find(sItem).find('.bx-tl-item-text .bx-tl-content').checkOverflowHeight(this.sSP + '-overflow', function(oElement) {
+    this.oView.find(sItem).find('.bx-tl-item-text .bx-tl-content').bxCheckOverflowHeight(this.sSP + '-overflow', function(oElement) {
         $this.onFindOverflow(oElement);
     });
 

template/comment_content.html

@@ -1,4 +1,7 @@
-<div class="__style_prefix__-body bx-def-vanilla-html bx-def-vh-sm mt-2 max-w-none text-clip overflow-hidden">__text__<bx_if:show_more><span class="__style_prefix__-body-see-more">... <a class="bx-def-font-small" href="javascript:void(0)" onclick="__js_object__.showMore(this);"><bx_text:_see_more /></a></span><span style="display:none;"> __text_more__</span></bx_if:show_more></div>
+<div class="__style_prefix__-body bx-overflow-ready bx-or-cmt bx-def-vanilla-html bx-def-vh-sm relative mt-2 max-w-none text-clip">
+    __text__
+    <div class="__style_prefix__-body-overflow bx-def-color-bg-box-overflow absolute bottom-0 w-full h-1/5"></div>
+</div>
 <bx_if:show_attached>
     <div class="__style_prefix__-attached bx-clearfix -mx-1 -mb-1">__attached__</div>
 </bx_if:show_attached>

template/comments_block.html

@@ -6,6 +6,9 @@
         <ul class="cmts cmts-pinned">__comments_pinned__</ul>
         <div class="cmts-divider bx-def-hr mb-4" style="<bx_if:show_divider_hidden>display:none</bx_if:show_divider_hidden>"></div>
         <ul class="cmts cmts-all">__comments__</ul>
+        <div class="__style_prefix__-body-show-more bx-def-padding-thd-top bx-def-font-middle" style="display:none;">
+            <a class="bx-def-a-colored" href="javascript:void(0)" onclick="__js_object__.cmtShowMore(this);"><bx_text:_see_more /></a>
+        </div>
         __content_after__
     </div>
     __post_form_bottom__

template/css/cmts.css

@@ -39,6 +39,16 @@ span.cmt-reply-to a .bx-base-pofile-unit-wo-info .bx-base-pofile-unit-online {
 }
 
 /*--- Comment Body ---*/
+div.cmt-cont .cmt-body {
+    position: relative;
+}
+div.cmt-cont .cmt-body .cmt-body-overflow {
+    display: none;
+}
+div.cmt-cont .cmt-body.bx-overflow .cmt-body-overflow {
+    display: block;
+}
+
 div.cmt-cont .cmt-post-reply .bx-form-element-wrapper {
     margin-top: 0.5rem;
 }

template/css/common.css

@@ -897,6 +897,9 @@ svg .gray .outer .p2 {
     max-height: 250px;
     overflow: hidden;
 }
+.bx-overflow-ready.bx-or-cmt {
+    max-height: 80px;
+}
 .bx-overflow:before {
     position: absolute;
     bottom: 0;

template/scripts/BxBaseCmts.php

@@ -240,6 +240,8 @@ class BxBaseCmts extends BxDolCmts
         ]);
 
         $sContent = $this->_oTemplate->parseHtmlByName('comments_block.html', [
+            'style_prefix' => $this->_sStylePrefix,
+            'js_object' => $this->_sJsObjName,
             'system' => $this->_sSystem,
             'list_anchor' => $this->getListAnchor(),
             'id' => $this->getId(),
@@ -1674,33 +1676,10 @@ class BxBaseCmts extends BxDolCmts
 
     protected function _getTmplVarsText($aCmt)
     {
-    	$sText = $aCmt['cmt_text'];
-        $sTextMore = '';
-
-        if(!$this->isHtml()) {
-            $iMaxLength = (int)$this->_aSystem['chars_display_max'];
-            if(strlen($sText) > $iMaxLength) {
-                $iLength = strpos($sText, ' ', $iMaxLength);
-    
-                $sTextMore = trim(substr($sText, $iLength));
-                $sText = trim(substr($sText, 0, $iLength));
-            }
-        }
-
-        $sText = $this->_prepareTextForOutput($sText, $aCmt['cmt_id']);
-        $sTextMore = $this->_prepareTextForOutput($sTextMore, $aCmt['cmt_id']);
-
-        return array(
-			'text' => $sText,
-            'bx_if:show_more' => array(
-                'condition' => !empty($sTextMore),
-                'content' => array(
-                    'style_prefix' => $this->_sStylePrefix,
-                    'js_object' => $this->_sJsObjName,
-                    'text_more' => $sTextMore
-                )
-            ),
-        );
+        return [
+            'style_prefix' => $this->_sStylePrefix,
+            'text' => $this->_prepareTextForOutput($aCmt['cmt_text'], $aCmt['cmt_id'])
+        ];
     }
 
     protected function _getDoComment($aParams = [], $isAllowedComment = true)