Ticket #2059 - Done for Comments.

inc/js/classes/BxDolCmts.js

@@ -383,34 +383,61 @@ BxDolCmts.prototype.toggleReply = function(e, iCmtParentId)
 
 BxDolCmts.prototype.goTo = function(oLink, sGoToId, sBlinkIds, onLoad)
 {
-	$(oLink).parents('.bx-popup-applied:first:visible').dolPopupHide();
+    $(oLink).parents('.bx-popup-applied:first:visible').dolPopupHide();
 
-	var $this = this;
-	this._getCmts(null, {
-		CmtParent: 0,
-		CmtBrowse: this._sBrowseType,
-		CmtFilter: this._sBrowseFilter,
-		CmtDisplay: this._sDisplayType,
-		CmtBlink: sBlinkIds
-	}, function(sListId, sContent) {
-		$this._cmtsReplaceContent($(sListId), sContent, function() {
-			location.hash = sGoToId;
+    var $this = this;
+    this._getCmts(null, {
+        CmtParent: 0,
+        CmtBrowse: this._sBrowseType,
+        CmtFilter: this._sBrowseFilter,
+        CmtDisplay: this._sDisplayType,
+        CmtBlink: sBlinkIds
+    }, function(sListId, sContent) {
+        $this._cmtsReplaceContent($(sListId), sContent, function() {
+            location.hash = sGoToId;
 
-			if(typeof onLoad == 'function')
-				onLoad();
-		});
-	});
+            if(typeof onLoad == 'function')
+                onLoad();
+        });
+    });
+};
+
+BxDolCmts.prototype.goToBtn = function(oLink, sGoToId, sBlinkIds, onLoad)
+{
+    var $this = this;
+
+    this._loadingInButton(oLink, true);
+
+    this._getCmts(null, {
+        CmtParent: 0,
+        CmtBrowse: this._sBrowseType,
+        CmtFilter: this._sBrowseFilter,
+        CmtDisplay: this._sDisplayType,
+        CmtBlink: sBlinkIds
+    }, function(sListId, sContent) {
+        $this._cmtsReplaceContent($(sListId), sContent, function() {
+            location.hash = sGoToId;
+
+            if(typeof onLoad == 'function')
+                onLoad();
+
+            $this._loadingInButton(oLink, false);
+            $(oLink).parents('.cmt-lu-button:first').remove();
+
+            $this.resumeLiveUpdates();
+        });
+    });
 };
 
 BxDolCmts.prototype.goToAndReply = function(oLink, sGoToId, sBlinkIds)
 {
-	var $this = this;
-	this.goTo(oLink, sGoToId, sBlinkIds, function() {
-		var aBlinkIds = sBlinkIds.split(",");
-		$.each(aBlinkIds, function(iIndex, iValue) {
-			$this.toggleReply(null, iValue);
-		});
-	});
+    var $this = this;
+    this.goTo(oLink, sGoToId, sBlinkIds, function() {
+        var aBlinkIds = sBlinkIds.split(",");
+        $.each(aBlinkIds, function(iIndex, iValue) {
+            $this.toggleReply(null, iValue);
+        });
+    });
 };
 
 /*----------------------------*/
@@ -418,36 +445,14 @@ BxDolCmts.prototype.goToAndReply = function(oLink, sGoToId, sBlinkIds)
 /*----------------------------*/
 BxDolCmts.prototype.showLiveUpdate = function(oData)
 {
-    /*
-     * Note. oData.count_old and oData.count_new are also available and can be checked or used in notification popup.  
-     */
     if(!oData.code)
         return;
 
-    var $this = this;
-
-    var oNotifs = $(oData.code);
-    var sId = oNotifs.attr('id');
+    var oButton = $(oData.code);
+    var sId = oButton.attr('id');
     $('#' + sId).remove();
 
-    oNotifs.prependTo('body').dolPopup({
-        position: 'fixed',
-        top: '5rem',
-        left: 'center',
-        fog: false,
-        onBeforeShow: function() {
-        },
-        onBeforeHide: function() {
-        },
-        onShow: function() {
-            setTimeout(function() {
-                $('.bx-popup-chain.bx-popup-applied:visible:first').dolPopupHide();
-            }, 5000);
-        },
-        onHide: function() {
-            $this.resumeLiveUpdates();
-        }
-    });
+    oButton.prependTo(this._sRootId);
 };
 
 BxDolCmts.prototype.showLiveUpdates = function(oData)
@@ -693,7 +698,7 @@ BxDolCmts.prototype._cmtsBlink = function(oParent)
 };
 
 BxDolCmts.prototype._getDefaultActions = function() {
-	var oDate = new Date();
+    var oDate = new Date();
     return {
         sys: this._sSystem,
         id: this._iObjId,
@@ -702,25 +707,25 @@ BxDolCmts.prototype._getDefaultActions = function() {
 };
 
 BxDolCmts.prototype._loading = function(e, bShow) {
-	var oParent = $(e).length ? $(e) : $('body'); 
-	bx_loading(oParent, bShow);
+    var oParent = $(e).length ? $(e) : $('body'); 
+    bx_loading(oParent, bShow);
 };
 
 BxDolCmts.prototype._loadingInBlock = function(e, bShow) {
-	var oParent = $(e).length ? $(e).parents('.bx-db-content:first') : $('body'); 
-	bx_loading(oParent, bShow);
+    var oParent = $(e).length ? $(e).parents('.bx-db-content:first') : $('body'); 
+    bx_loading(oParent, bShow);
 };
 
 BxDolCmts.prototype._loadingInContent = function(e, bShow) {
-	var oParent = $(e).length ? $(e).parents('li.cmt:first,.cmt-reply:first') : $('body'); 
-	bx_loading(oParent, bShow);
+    var oParent = $(e).length ? $(e).parents('li.cmt:first,.cmt-reply:first') : $('body'); 
+    bx_loading(oParent, bShow);
 };
 
 BxDolCmts.prototype._loadingInButton = function(e, bShow) {
-	if($(e).length)
-		bx_loading_btn($(e), bShow);
-	else
-		bx_loading($('body'), bShow);	
+    if($(e).length)
+        bx_loading_btn($(e), bShow);
+    else
+        bx_loading($('body'), bShow);
 };
 
 /** @} */

template/comments_lu_button.html

@@ -1,7 +1,5 @@
-<div id="__html_id__" class="__style_prefix__-alert-comment bx-def-round-corners" style="display:none;">
-    <a class="__style_prefix__-alert-comment bx-def-padding" href="javascript:void(0)" onclick="__onclick_show__" title="<bx_text_attribute:_cmt_txt_link_show />">
-        <div class="__style_prefix__-ac-cnt bx-def-font-contrasted bx-popup-width">
-            <i class="sys-icon sync-alt bx-def-font-contrasted"></i> <bx_text:_cmt_txt_new_content />
-        </div>
+<div id="__html_id__" class="__style_prefix__-lu-button bx-def-padding-bottom">
+    <a class="bx-btn" href="javascript:void(0)" onclick="__onclick_show__" title="<bx_text_attribute:_cmt_txt_link_show />">
+        <i class="sys-icon sync-alt bx-def-padding-right"></i> <bx_text:_cmt_txt_new_content />
     </a>
 </div>

template/comments_lu_notifications.html

@@ -1,9 +1,9 @@
-<div class="__style_prefix__-notif-comment">
-    <a class="__style_prefix__-notif-comment bx-def-padding" href="javascript:void(0)" onclick="__onclick_show__" title="<bx_text_attribute:_cmt_txt_link_show />">
-        <div class="__style_prefix__-notif-cnt">
-            <div class="__style_prefix__-notif-avatar bx-def-thumb-size">__author_unit__</div>
-            <div class="__style_prefix__-notif-info bx-def-thumb-size-min-height bx-def-thumb-size-left-indent bx-def-font-small">
-                <div class="__style_prefix__-notifi-username"><b class="__style_prefix__-notifi-username bx-def-font-color">__author_name__</b>: <span class="bx-def-font-small bx-def-font-grayed">__text__</span></div>
+<div class="__style_prefix__-lu-notif">
+    <a class="__style_prefix__-lu-notif bx-def-padding" href="javascript:void(0)" onclick="__onclick_show__" title="<bx_text_attribute:_cmt_txt_link_show />">
+        <div class="__style_prefix__-lu-notif-cnt">
+            <div class="__style_prefix__-lu-notif-avatar bx-def-thumb-size">__author_unit__</div>
+            <div class="__style_prefix__-lu-notif-info bx-def-thumb-size-min-height bx-def-thumb-size-left-indent bx-def-font-small">
+                <div class="__style_prefix__-lu-notifi-username"><b class="__style_prefix__-lu-notifi-username bx-def-font-color">__author_name__</b>: <span class="bx-def-font-small bx-def-font-grayed">__text__</span></div>
             </div>
         </div>
     </a>

template/css/cmts.css

@@ -272,40 +272,51 @@
     }
 
     /*--- Live Update Alert Styles ---*/
-    .cmt-alert-comment {
+    div.cmt-lu-button {
         position: relative;
-        display: block;
-    }
-    div.cmt-alert-comment {
-        background-color: rgba(0, 0, 255, 0.4);
         text-align: center;
     }
-    div.cmt-ac-cnt {
-        position: relative;
+    @supports(position:sticky) {
+        div.cmt-lu-button {
+            position: sticky;
+            top: 1rem;
+            z-index: 1;
+        }
+    }
+    @supports(position:-webkit-sticky) {
+        div.cmt-lu-button {
+            position: -webkit-sticky;
+            top: 1rem;
+            z-index: 1;
+        }
+    }
+    div.cmt-lu-button .bx-btn {
+        display: inline-block;
+        float: none;
     }
 
     /*--- Live Update Notifications Styles ---*/
-    .cmt-notif-comment {
+    .cmt-lu-notif {
         position: relative;
         display: block;
     }
-    div.cmt-notif-cnt {
+    div.cmt-lu-notif-cnt {
         position: relative;
     }
-    div.cmt-notif-avatar {
+    div.cmt-lu-notif-avatar {
         position: absolute;
         top: 0px;
         left: 0px;
         text-align: center;
     }
-    div.cmt-notif-info {
+    div.cmt-lu-notif-info {
         position: realtive;
         display: -webkit-flex;
         display: flex;
         -webkit-align-items: center;
         align-items: center;
     }
-    div.cmt-notifi-username {
+    div.cmt-lu-notifi-username {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;

template/scripts/BxBaseCmts.php

@@ -393,10 +393,10 @@ class BxBaseCmts extends BxDolCmts
             return '';
 
         $sJsObject = $this->getJsObjectName();
-        return $this->_oTemplate->parseHtmlByName('comments_notification.html', array(
+        return $this->_oTemplate->parseHtmlByName('comments_lu_button.html', array(
             'style_prefix' => $this->_sStylePrefix,
             'html_id' => $this->getNotificationId(),
-            'onclick_show' => "javascript:" . $sJsObject . ".goTo(this, '" . $this->getItemAnchor($aComment['cmt_id']) . "', '" . $aComment['cmt_id'] . "');",
+            'onclick_show' => "javascript:" . $sJsObject . ".goToBtn(this, '" . $this->getItemAnchor($aComment['cmt_id']) . "', '" . $aComment['cmt_id'] . "');",
         ));
     }
 
@@ -444,7 +444,7 @@ class BxBaseCmts extends BxDolCmts
                     'condition' => !$bShowAll && $iIndex < ($iComments - 1),
                     'content' => array(),
                 ),
-                'item' => $this->_oTemplate->parseHtmlByName('comments_notifications.html', array(
+                'item' => $this->_oTemplate->parseHtmlByName('comments_lu_notifications.html', array(
                     'style_prefix' => $this->_sStylePrefix,
                     'onclick_show' => $sShowOnClick,
                     'onclick_reply' => $sReplyOnClick,