Ticket #4226 - Likes: Allow to switch between Icon/Emoji/Image based controls.

inc/classes/BxDolVote.php

@@ -348,18 +348,20 @@ class BxDolVote extends BxDolObject
     {
         $bUndo = $this->isUndo();
         $aVote = $this->_getVote($iObjectId, true);
-
-        return array(
+        
+        return [
             'code' => 0,
             'rate' => $aVote['rate'],
             'count' => $aVote['count'],
             'countf' => (int)$aVote['count'] > 0 ? $this->_getCounterLabel($aVote['count'], $aParams) : '',
+            'label_use' => $this->_useIconAs($aParams),
             'label_icon' => $this->_getIconDo($bVoted),
             'label_emoji' => $this->_getEmojiDo($bVoted),
+            'label_image' => $this->_getImageDo($bVoted),
             'label_title' => _t($this->_getTitleDo($bVoted)),
             'voted' => $bVoted,
             'disabled' => $bVoted && !$bUndo,
-        );
+        ];
     }
 
     protected function _prepareRequestParamsData($aParams, $aParamsAdd = array())
@@ -404,10 +406,15 @@ class BxDolVote extends BxDolObject
     	return '';
     }
 
-    protected function _getTitleDoBy($aParams = array())
+    protected function _getTitleDoBy($aParams = [])
     {
     	return _t('_vote_do_by');
     }
+
+    protected function _useIconAs($aParams = [])
+    {
+    	return 'emoji';
+    }
 }
 
 /** @} */

inc/classes/BxDolVoteLikes.php

@@ -38,7 +38,7 @@ class BxDolVoteLikes extends BxTemplVote
 
     protected function _getIconDo($bVoted)
     {
-    	return $bVoted && $this->isUndo() ? 'thumbs-up' : 'thumbs-up';
+    	return $bVoted && $this->isUndo() ? 'fas thumbs-up' : 'far thumbs-up';
     }
 
     protected function _getEmojiDo($bVoted)
@@ -46,10 +46,26 @@ class BxDolVoteLikes extends BxTemplVote
     	return $bVoted && $this->isUndo() ? '👍' : '👍';
     }
 
+    protected function _getImageDo($bVoted)
+    {
+        $sImageDo = '<svg aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+        $sImageUndo = '<svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z"></path></svg>';
+
+        return $bVoted && $this->isUndo() ? $sImageUndo : $sImageDo;
+    }
+
     protected function _getTitleDo($bVoted)
     {
     	return $bVoted && $this->isUndo() ? '_vote_do_unlike' : '_vote_do_like';
     }
+    
+    protected function _useIconAs($aParams = [])
+    {
+        if(!empty($aParams['use_icon_as']) && in_array($aParams['use_icon_as'], ['icon', 'emoji', 'image']))
+            return $aParams['use_icon_as'];
+
+        return parent::_useIconAs($aParams);
+    }
 }
 
 /** @} */

inc/js/classes/BxDolVoteLikes.js

@@ -19,8 +19,20 @@ BxDolVoteLikes.prototype.onVote = function (oLink, oData, onComplete)
     if(oData && oData.code != 0)
         return;
 
-    if(oData && oData.label_icon)
-        $(oLink).find('.sys-action-do-icon .sys-icon').attr('class', 'sys-icon ' + oData.label_icon);
+    if(oData && oData.label_use)
+        switch(oData.label_use) {
+            case 'icon':
+                $(oLink).find('.sys-action-do-icon .sys-icon').attr('class', 'sys-icon ' + oData.label_icon);
+                break;
+
+            case 'emoji':
+                $(oLink).find('.sys-action-do-icon .sys-icon').html(oData.label_emoji);
+                break;
+
+            case 'image':
+                $(oLink).find('.sys-action-do-icon').html(oData.label_image);
+                break;
+        }
 
     if(oData && oData.label_title) {
         $(oLink).attr('title', oData.label_title);

template/scripts/BxBaseVoteLikes.php

@@ -24,6 +24,7 @@ class BxBaseVoteLikes extends BxDolVoteLikes
         ));
 
         $this->_aElementDefaults = [
+            'use_icon_as' => 'icon',
             'show_do_vote_as_button' => false,
             'show_do_vote_as_button_small' => false,
             'show_do_vote_icon' => true,
@@ -140,7 +141,7 @@ class BxBaseVoteLikes extends BxDolVoteLikes
                 'condition' => isset($aParams['show_do_vote_icon']) && (bool)$aParams['show_do_vote_icon'] === true,
                 'content' => array(
                     'style_prefix' => $this->_sStylePrefix,
-                    'icon' => $this->_oTemplate->getImageAuto($this->_getIconDo($bVoted))
+                    'icon' => $this->_oTemplate->getImageAuto($this->{'_get' . bx_gen_method_name($this->_useIconAs($aParams)) . 'Do'}($bVoted))
                 )
             ),
             'bx_if:show_text' => array(