Ticket #2948 - Reactions: Improve user experiance.

inc/classes/BxDolObject.php

@@ -233,7 +233,7 @@ class BxDolObject extends BxDolFactory implements iBxDolReplaceable
     /**
      * Internal functions
      */
-	protected function _getAuthorId ()
+    protected function _getAuthorId ()
     {
         return isMember() ? bx_get_logged_profile_id() : 0;
     }
@@ -276,7 +276,7 @@ class BxDolObject extends BxDolFactory implements iBxDolReplaceable
     /**
      * Update Trigger table using data which is automatically gotten from object's internal table.
      */
-	protected function _trigger()
+    protected function _trigger()
     {
         if(!$this->_aSystem['trigger_table'])
             return false;
@@ -313,14 +313,29 @@ class BxDolObject extends BxDolFactory implements iBxDolReplaceable
         return bx_replace_markers($mixed, $this->_aMarkers);
     }
 
-    
+    protected function _prepareParamsData($aParams)
+    {
+        $aParams = array_merge([
+            'sSystem' => $this->getSystemName(),
+            'iObjId' => $this->getId(),
+            'iAuthorId' => $this->_getAuthorId(),
+            'sRootUrl' => BX_DOL_URL_ROOT,
+        ], $aParams);
+
+        foreach($aParams as $sKey => $mixedValue)
+            if(is_bool($mixedValue))
+                $aParams[$sKey] = (int)$mixedValue;
+
+        return $aParams;
+    }
+
     protected function _getRequestParamsData($aKeys = array())
     {
         $sParams = bx_get('params');
         if($sParams === false)
-            return array();
+            return [];
 
-        $aParams = array();
+        $aParams = [];
         parse_str(bx_process_input($sParams), $aParams);
 
         return $aParams;

inc/classes/BxDolVoteReactions.php

@@ -23,6 +23,8 @@ class BxDolVoteReactions extends BxTemplVote
 
     protected $_sDefault; //--- Default reaction name.
 
+    protected $_bQuickMode; //--- Give 'default' reaction when clicked.
+
     public function __construct($sSystem, $iId, $iInit = true, $oTemplate = false)
     {
         parent::__construct($sSystem, $iId, $iInit, $oTemplate);
@@ -36,6 +38,8 @@ class BxDolVoteReactions extends BxTemplVote
         $this->_aDataList = array();
 
         $this->_sDefault = 'default';
+
+        $this->_bQuickMode = getParam('sys_vote_reactions_quick_mode') == 'on';
     }
 
     public function init($iId)

inc/js/classes/BxDolVoteReactions.js

@@ -9,6 +9,7 @@
 function BxDolVoteReactions(oOptions)
 {
     BxDolVote.call(this, oOptions);
+    this._bQuickMode = oOptions.bQuickMode === undefined ? 0 : oOptions.bQuickMode; // enable 'quick' mode - vote with default reaction when clicked.
 
     this._iTimeoutShowId = 0;
     this._iTimeoutShowDelay = 750;
@@ -34,16 +35,18 @@ BxDolVoteReactions.prototype.constructor = BxDolVoteReactions;
 BxDolVoteReactions.prototype.initVote = function()
 {
     var $this = this;
+    var bMobile = bx_check_mq() == 'mobile';
 
-    this._fOnVoteIn = function() {
-        $this.onVoteIn(this);
-    };
-
-    this._fOnVoteOut = function() {
-        $this.onVoteOut(this);
-    };
-
-    $('#' + this._aHtmlIds['main'] + ' .' + this._sClassDo).hover(this._fOnVoteIn, this._fOnVoteOut);
+    if(!this._bQuickMode || !bMobile)
+        $('#' + this._aHtmlIds['main'] + ' .' + this._sClassDo).hover(function() {
+            $this.onVoteIn(this);
+        }, function() {
+            $this.onVoteOut(this);
+        });
+    else
+        $('#' + this._aHtmlIds['main'] + ' .' + this._sClassDo).onLongTouch(function(oElement) {
+            $this.onTouch(oElement);
+        });
 };
 
 BxDolVoteReactions.prototype.vote = function(oLink, iValue, sReaction, onComplete)
@@ -54,6 +57,9 @@ BxDolVoteReactions.prototype.vote = function(oLink, iValue, sReaction, onComplet
     oParams['value'] = iValue;
     oParams['reaction'] = sReaction;
 
+    if(this._iTimeoutShowId)
+        clearTimeout(this._iTimeoutShowId);
+
     $('#' + this._aHtmlIds['do_popup']).dolPopupHide({});
 
     $.post(
@@ -80,7 +86,6 @@ BxDolVoteReactions.prototype.onVote = function (oLink, oData, onComplete)
 
     oLink = $('.' + this._aHtmlIds['main'] + ' .' + this._sClassDo);
 
-    console.log(oData);
     //--- Update Do button.
     oLink.each(function() {
         if(oData && oData.label_icon){
@@ -130,6 +135,8 @@ BxDolVoteReactions.prototype.onVote = function (oLink, oData, onComplete)
 
 BxDolVoteReactions.prototype.onVoteIn = function(oLink)
 {
+    var $this = this;
+
     if($(oLink).hasClass(this._sClassDoVoted))
         return;
 
@@ -141,7 +148,7 @@ BxDolVoteReactions.prototype.onVoteIn = function(oLink)
         return;
 
     this._iTimeoutShowId = setTimeout(function() {
-        $(oLink).click();
+        $this.toggleDoPopup(oLink, $(oLink).attr('bx-vote-value'));
     }, this._iTimeoutShowDelay);
 };
 
@@ -156,13 +163,24 @@ BxDolVoteReactions.prototype.onVoteOut = function(oLink)
     this.hideDoPopup();
 };
 
+BxDolVoteReactions.prototype.onTouch = function(oLink)
+{
+    var oPopup = this.getDoPopup();
+    if(oPopup !== false)
+        return;
+
+    this.toggleDoPopup(oLink, $(oLink).attr('bx-vote-value'), {
+        closeOnOuterClick: false
+    });
+};
+
 BxDolVoteReactions.prototype.getDoPopup = function()
 {
     var oPopup = $('#' + this._aHtmlIds['do_popup'] + ':visible');
     return oPopup.length > 0 && oPopup.hasClass('bx-popup-applied') ? oPopup : false;
 };
 
-BxDolVoteReactions.prototype.toggleDoPopup = function(oLink, iValue)
+BxDolVoteReactions.prototype.toggleDoPopup = function(oLink, iValue, oOptions)
 {
     var $this = this;
     var oParams = this._getDefaultParams();
@@ -171,7 +189,8 @@ BxDolVoteReactions.prototype.toggleDoPopup = function(oLink, iValue)
     if(this._iTimeoutShowId)
         clearTimeout(this._iTimeoutShowId);
 
-    $(oLink).dolPopupAjax({
+    oOptions = oOptions || {};
+    oOptions = $.extend({}, {
         id: {value: this._aHtmlIds['do_popup'], force: true}, 
         url: bx_append_url_params(this._sActionsUri, oParams),
         value: iValue,
@@ -181,7 +200,9 @@ BxDolVoteReactions.prototype.toggleDoPopup = function(oLink, iValue)
         onHide: function(oPopup) {
             $this.onDoPopupHide(oPopup);
         }
-    });
+    }, oOptions);
+
+    $(oLink).dolPopupAjax(oOptions);
 };
 
 BxDolVoteReactions.prototype.hideDoPopup = function()
@@ -256,4 +277,34 @@ BxDolVoteReactions.prototype._getCounter = function(oElement)
     return $('.' + this._aHtmlIds['counter']).find('.' + this._sSP + '-counter');
 };
 
+(function($) {
+    $.fn.onLongTouch = function(fCallback) {
+        return this.each(function() {
+            var iTimeoutId;
+
+            this.addEventListener('touchstart', function(e) {
+                iTimeoutId = setTimeout(function() {
+                    iTimeoutId = null;
+                    e.stopPropagation();
+                    fCallback(e.target);
+                }, 500);
+            });
+
+            this.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+            });
+
+            this.addEventListener('touchend', function () {
+                if(iTimeoutId) 
+                    clearTimeout(iTimeoutId);
+            });
+
+            this.addEventListener('touchmove', function () {
+                if(iTimeoutId) 
+                    clearTimeout(iTimeoutId);
+            });
+        });
+    };
+})(jQuery);
+
 /** @} */

install/sql/system.sql

@@ -500,7 +500,10 @@ INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `ex
 
 (@iCategoryId, 'sys_profile_bot', '_adm_stg_cpt_option_sys_profile_bot', '', 'select', 'a:3:{s:6:"module";s:6:"system";s:6:"method";s:23:"get_options_profile_bot";s:5:"class";s:13:"TemplServices";}', '', '', 40),
 
-(@iCategoryId, 'sys_hide_post_to_context_for_privacy', '_adm_stg_cpt_option_sys_hide_post_to_context_for_privacy', '', 'list', 'a:3:{s:6:"module";s:6:"system";s:6:"method";s:44:"get_options_module_list_for_privacy_selector";s:5:"class";s:13:"TemplServices";}', '', '', 50);
+(@iCategoryId, 'sys_hide_post_to_context_for_privacy', '_adm_stg_cpt_option_sys_hide_post_to_context_for_privacy', '', 'list', 'a:3:{s:6:"module";s:6:"system";s:6:"method";s:44:"get_options_module_list_for_privacy_selector";s:5:"class";s:13:"TemplServices";}', '', '', 50),
+
+(@iCategoryId, 'sys_vote_reactions_quick_mode', '_adm_stg_cpt_option_sys_vote_reactions_quick_mode', '', 'checkbox', '', '', '', 60);
+
 --
 -- CATEGORY: Storage
 --

modules/boonex/english/data/langs/system/en.xml

@@ -1618,18 +1618,19 @@
 	<string name="_adm_stg_cpt_option_sys_default_curl_timeout"><![CDATA[cURL - default timeout]]></string>
     <string name="_adm_stg_cpt_option_sys_ssl_allow_untrusted"><![CDATA[cURL - trust unsigned certificates or not verified hosts]]></string>
     <string name="_adm_stg_cpt_option_sys_csp_frame_ancestors"><![CDATA['Content-Security-Policy: frame-ancestors' header value]]></string>
-	<string name="_adm_stg_cpt_option_template"><![CDATA[Default Template]]></string>
-	<string name="_adm_stg_err_option_template"><![CDATA[Template cannot be empty and must have a valid name.]]></string>
+    <string name="_adm_stg_cpt_option_template"><![CDATA[Default Template]]></string>
+    <string name="_adm_stg_err_option_template"><![CDATA[Template cannot be empty and must have a valid name.]]></string>
     <string name="_adm_stg_cpt_option_use_like_operator"><![CDATA[Use operator LIKE for search (recommended for small content)]]></string>
     <string name="_adm_stg_cpt_option_sys_quill_toolbar_mini"><![CDATA[Quill buttons for mini editor]]></string>
     <string name="_adm_stg_cpt_option_sys_quill_toolbar_standard"><![CDATA[Quill buttons for standard editor]]></string>
     <string name="_adm_stg_cpt_option_sys_quill_toolbar_full"><![CDATA[Quill buttons for full editor]]></string>
     <string name="_adm_stg_cpt_option_sys_metatags_hashtags_max"><![CDATA[Max number of hashtags per post]]></string>
     <string name="_adm_stg_cpt_option_sys_metatags_mentions_max"><![CDATA[Max number of mentions per post]]></string>
-	<string name="_adm_stg_cpt_option_sys_hide_post_to_context_for_privacy"><![CDATA[Hide post to context for modules in Privacy field]]></string>
+    <string name="_adm_stg_cpt_option_sys_hide_post_to_context_for_privacy"><![CDATA[Hide post to context for modules in Privacy field]]></string>
     <string name="_adm_stg_cpt_option_sys_search_keyword_min_len"><![CDATA[Keyword min length in site search]]></string>
     <string name="_adm_stg_cpt_option_sys_profile_bot"><![CDATA[System bot profile]]></string>
     <string name="_adm_stg_cpt_option_sys_logs_storage_default"><![CDATA[Default logs storage]]></string>
+    <string name="_adm_stg_cpt_option_sys_vote_reactions_quick_mode"><![CDATA[Enable 'Quick Reactions' mode - vote with default reaction when clicked]]></string>
 	<string name="_adm_stg_cpt_type_system"><![CDATA[System]]></string>
 	<string name="_adm_stg_scs_save"><![CDATA[Settings were successfully saved]]></string>
 	<string name="_adm_stg_err_save_error_message"><![CDATA[Error in '{0}': {1}]]></string>

modules/boonex/russian/data/langs/system/ru.xml

@@ -1615,6 +1615,7 @@
     <string name="_adm_stg_cpt_option_sys_search_keyword_min_len"><![CDATA[Минимальная длина слова в поиске по сайту]]></string>
     <string name="_adm_stg_cpt_option_sys_profile_bot"><![CDATA[Профиль системного бота]]></string>
     <string name="_adm_stg_cpt_option_sys_logs_storage_default"><![CDATA[Система логирования по умолчанию]]></string>
+    <string name="_adm_stg_cpt_option_sys_vote_reactions_quick_mode"><![CDATA[Включить режим 'Быстрых реакций' - голосовать при клике, используя реакцию по умолчанию]]></string>
 	<string name="_adm_stg_cpt_type_system"><![CDATA[Система]]></string>
 	<string name="_adm_stg_scs_save"><![CDATA[Настройки удачно сохранены]]></string>
 	<string name="_adm_stg_err_save_error_message"><![CDATA[Ошибка в '{0}': {1}]]></string>

template/scripts/BxBaseVote.php

@@ -66,16 +66,9 @@ class BxBaseVote extends BxDolVote
 
         $bDynamicMode = isset($aParams['dynamic_mode']) && (bool)$aParams['dynamic_mode'] === true;
 
-        $sCode = "if(window['" . $sJsObjName . "'] == undefined) var " . $sJsObjName . " = new " . $sJsObjClass . "(" . json_encode(array(
-            'sObjName' => $sJsObjName,
-            'sSystem' => $this->getSystemName(),
-            'iAuthorId' => $this->_getAuthorId(),
-            'iObjId' => $this->getId(),
-            'sRootUrl' => BX_DOL_URL_ROOT,
-            'sStylePrefix' => $this->_sStylePrefix,
-            'aHtmlIds' => $this->_aHtmlIds,
+        $sCode = "if(window['" . $sJsObjName . "'] == undefined) var " . $sJsObjName . " = new " . $sJsObjClass . "(" . json_encode($this->_prepareParamsData([
             'aRequestParams' => $this->_prepareRequestParamsData($aParams)
-        )) . ");";
+        ])) . ");";
 
         return $this->_oTemplate->_wrapInTagJsCode($sCode);
     }
@@ -177,7 +170,17 @@ class BxBaseVote extends BxDolVote
 
     /**
      * Internal methods.
-     * 
+     */
+    protected function _prepareParamsData($aParams)
+    {
+        return parent::_prepareParamsData(array_merge([
+            'sObjName' => $this->getJsObjectName(),
+            'sStylePrefix' => $this->_sStylePrefix,
+            'aHtmlIds' => $this->_aHtmlIds,
+        ], $aParams));
+    }
+
+    /*
      * This method should be overwritten by subclass.
      */
     protected function _getTmplVarsElement($aParams = array())

template/scripts/BxBaseVoteReactions.php

@@ -53,7 +53,13 @@ class BxBaseVoteReactions extends BxDolVoteReactions
         if(empty($iValue))
             $iValue = $this->getValue();
 
-        return $this->getJsObjectName() . '.toggleDoPopup(this, ' . $iValue . ')';
+        $sResult = '';
+        if($this->_bQuickMode)
+            $sResult = $this->getJsClickDo($this->_aDataList[$this->_sDefault]['name'], $iValue);
+        else
+            $sResult = $this->getJsObjectName() . '.toggleDoPopup(this, ' . $iValue . ')';
+
+        return $sResult;
     }
 
     public function getJsClickDo($sReaction, $iValue = 0)
@@ -298,6 +304,13 @@ class BxBaseVoteReactions extends BxDolVoteReactions
     /**
      * Internal methods.
      */
+    protected function _prepareParamsData($aParams)
+    {
+        return parent::_prepareParamsData(array_merge([
+            'bQuickMode' => $this->_bQuickMode
+        ], $aParams));
+    }
+
     protected function _isShowDoVote($aParams, $isAllowedVote, $bCount)
     {
         $bResult = parent::_isShowDoVote($aParams, $isAllowedVote, $bCount);
@@ -321,14 +334,22 @@ class BxBaseVoteReactions extends BxDolVoteReactions
         else if ($bShowDoVoteAsButtonSmall)
             $sClass = ' bx-btn bx-btn-small';
 
+        $iValue = 0;
+        $sReaction = '';
         $sJsClick = '';
         if(!$bDisabled) {
             if($bVoted && $bUndo) {
                 $sClass = ' ' . $this->_sStylePrefix . '-voted' . $sClass;
-                $sJsClick = $this->getJsClickDo($aParams['track']['reaction']);
+
+                $iValue = $aParams['track']['value'];
+                $sReaction = $aParams['track']['reaction'];
+                $sJsClick = $this->getJsClickDo($sReaction, $iValue);
+            }
+            else {
+                $iValue = $this->getValue();
+                $sReaction = $this->_aDataList[$this->_sDefault]['name'];
+                $sJsClick = $this->getJsClick($iValue);
             }
-            else 
-                $sJsClick = $this->getJsClick();
         }
         else
             $sClass .= $bShowDoVoteAsButton || $bShowDoVoteAsButtonSmall ? ' bx-btn-disabled' : ' ' . $this->_sStylePrefix . '-disabled';
@@ -337,6 +358,8 @@ class BxBaseVoteReactions extends BxDolVoteReactions
             'class' => $this->_sStylePrefix . '-do-vote' . $sClass,
             'title' => _t($this->_getTitleDoWithTrack($bVoted, $aParams['track'])),
             'onclick' => $sJsClick,
+            'bx-vote-reaction' => $sReaction,
+            'bx-vote-value' => $iValue,
         ));
     }