Fixed: Directory follow button, added AJAX support

protected/humhub/modules/directory/views/directory/members.php

@@ -44,12 +44,12 @@ use yii\helpers\Html;
 
                     <!-- Follow Handling -->
                     <div class="pull-right">
-                        <?php
-                        if (!Yii::$app->user->isGuest && !(Yii::$app->user->id === $user->id)) {
-                            $followed = $user->isFollowedByUser();
-                            echo Html::a(Yii::t('DirectoryModule.views_directory_members', 'Follow'), 'javascript:setFollow("' . Url::to(['/user/profile/follow']) . '", "' . $user->id . '")', array('class' => 'btn btn-info btn-sm ' . (($followed) ? 'hide' : ''), 'id' => 'button_follow_' . $user->id));
-                            echo Html::a(Yii::t('DirectoryModule.views_directory_members', 'Unfollow'), 'javascript:setUnfollow("' . Url::to(['/user/profile/unfollow']) . '", "' . $user->id . '")', array('class' => 'btn btn-primary btn-sm ' . (($followed) ? '' : 'hide'), 'id' => 'button_unfollow_' . $user->id));
-                        }
+                        <?=
+                        \humhub\modules\user\widgets\UserFollowButton::widget([
+                            'user' => $user,
+                            'followOptions' => ['class' => 'btn btn-primary btn-sm'],
+                            'unfollowOptions' => ['class' => 'btn btn-info btn-sm']
+                        ]);
                         ?>
                     </div>
 
@@ -97,29 +97,3 @@ use yii\helpers\Html;
 <div class="pagination-container">
     <?php echo \humhub\widgets\LinkPager::widget(['pagination' => $pagination]); ?>
 </div>
-
-<script type="text/javascript">
-
-    // ajax request to follow the user
-    function setFollow(url, id) {
-        jQuery.ajax({
-            url: url,
-            type: "POST",
-            'success': function () {
-                $("#button_follow_" + id).addClass('hide');
-                $("#button_unfollow_" + id).removeClass('hide');
-            }});
-    }
-
-    // ajax request to unfollow the user
-    function setUnfollow(url, id) {
-        jQuery.ajax({
-            url: url,
-            type: "POST",
-            'success': function () {
-                $("#button_follow_" + id).removeClass('hide');
-                $("#button_unfollow_" + id).addClass('hide');
-            }});
-    }
-
-</script>

protected/humhub/modules/user/controllers/ProfileController.php

@@ -2,12 +2,13 @@
 
 /**
  * @link https://www.humhub.org/
- * @copyright Copyright (c) 2015 HumHub GmbH & Co. KG
+ * @copyright Copyright (c) 2016 HumHub GmbH & Co. KG
  * @license https://www.humhub.com/licences
  */
 
 namespace humhub\modules\user\controllers;
 
+use Yii;
 use humhub\modules\content\components\ContentContainerController;
 
 /**
@@ -72,6 +73,11 @@ class ProfileController extends ContentContainerController
     {
         $this->forcePostRequest();
         $this->getUser()->follow();
+
+        if (Yii::$app->request->isAjax) {
+            return;
+        }
+
         return $this->redirect($this->getUser()->getUrl());
     }
 
@@ -82,6 +88,11 @@ class ProfileController extends ContentContainerController
     {
         $this->forcePostRequest();
         $this->getUser()->unfollow();
+
+        if (Yii::$app->request->isAjax) {
+            return;
+        }
+
         return $this->redirect($this->getUser()->getUrl());
     }
 

protected/humhub/modules/user/widgets/UserFollowButton.php

@@ -1,44 +1,106 @@
 <?php
 
 /**
- * HumHub
- * Copyright © 2014 The HumHub Project
- *
- * The texts of the GNU Affero General Public License with an additional
- * permission and of our proprietary license can be found at and
- * in the LICENSE file you have received along with this program.
- *
- * According to our dual licensing model, this program can be used either
- * under the terms of the GNU Affero General Public License, version 3,
- * or under a proprietary license.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2016 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
  */
 
 namespace humhub\modules\user\widgets;
 
+use Yii;
+use yii\bootstrap\Html;
+
 /**
- * UserFollowButtonWidget
+ * UserFollowButton
  *
  * @author luke
- * @package humhub.modules_core.user.widgets
  * @since 0.11
  */
 class UserFollowButton extends \yii\base\Widget
 {
 
+    /**
+     * @var \humhub\modules\user\models\User
+     */
     public $user;
 
+    /**
+     * @var string label for follow button (optional)
+     */
+    public $followLabel = null;
+
+    /**
+     * @var string label for unfollow button (optional)
+     */
+    public $unfollowLabel = null;
+
+    /**
+     * @var string options for follow button 
+     */
+    public $followOptions = ['class' => 'btn btn-primary'];
+
+    /**
+     * @var array options for unfollow button 
+     */
+    public $unfollowOptions = ['class' => 'btn btn-info'];
+
+    /**
+     * @inheritdoc
+     */
+    public function init()
+    {
+        if ($this->followLabel === null) {
+            $this->followLabel = Yii::t("UserModule.widgets_views_followButton", "Follow");
+        }
+        if ($this->unfollowLabel === null) {
+            $this->unfollowLabel = Yii::t("UserModule.widgets_views_followButton", "Unfollow");
+        }
+
+        if (!isset($this->followOptions['class'])) {
+            $this->followOptions['class'] = "";
+        }
+        if (!isset($this->unfollowOptions['class'])) {
+            $this->unfollowOptions['class'] = "";
+        }
+
+        if (!isset($this->followOptions['style'])) {
+            $this->followOptions['style'] = "";
+        }
+        if (!isset($this->unfollowOptions['style'])) {
+            $this->unfollowOptions['style'] = "";
+        }
+    }
+
+    /**
+     * @inheritdoc
+     */
     public function run()
     {
         if ($this->user->isCurrentUser() || \Yii::$app->user->isGuest) {
             return;
         }
 
-        return $this->render('followButton', array('user' => $this->user));
+        // Add class for javascript handling
+        $this->followOptions['class'] .= ' followButton';
+        $this->unfollowOptions['class'] .= ' unfollowButton';
+
+        // Hide inactive button
+        if ($this->user->isFollowedByUser()) {
+            $this->followOptions['style'] .= ' display:none;';
+        } else {
+            $this->unfollowOptions['style'] .= ' display:none;';
+        }
+
+        // Add UserId Buttons
+        $this->followOptions['data-userid'] = $this->user->id;
+        $this->unfollowOptions['data-userid'] = $this->user->id;
+
+
+        $this->view->registerJsFile('@web/resources/user/followButton.js');
+
+        return Html::a($this->unfollowLabel, $this->user->createUrl('/user/profile/unfollow'), $this->unfollowOptions) .
+                Html::a($this->followLabel, $this->user->createUrl('/user/profile/follow'), $this->followOptions);
     }
 
 }

protected/humhub/modules/user/widgets/views/followButton.php

@@ -1,9 +0,0 @@
-<?php
-
-use yii\helpers\Html;
-
-if ($user->isFollowedByUser()) {
-    print Html::a(Yii::t("UserModule.widgets_views_followButton", "Unfollow"), $user->createUrl('/user/profile/unfollow'), array('class' => 'btn btn-primary', 'data-method'=>'POST'));
-} else {
-    print Html::a(Yii::t("UserModule.widgets_views_followButton", "Follow"), $user->createUrl('/user/profile/follow'), array('class' => 'btn btn-info', 'data-method'=>'POST'));
-}

resources/user/followButton.js

@@ -0,0 +1,25 @@
+$(document).on('click', '.unfollowButton', function (event) {
+    var userId = $(this).data("userid");
+    $.ajax({
+        url: $(this).attr("href"),
+        type: "POST",
+        success: function () {
+            $(".unfollowButton[data-userid='" + userId + "']").hide();
+            $(".followButton[data-userid='" + userId + "']").show();
+        }
+    });
+    event.preventDefault();
+});
+
+$(document).on('click', '.followButton', function (event) {
+    var userId = $(this).data("userid");
+    $.ajax({
+        url: $(this).attr("href"),
+        type: "POST",
+        success: function () {
+            $(".unfollowButton[data-userid='" + userId + "']").show();
+            $(".followButton[data-userid='" + userId + "']").hide();
+        }
+    });
+    event.preventDefault();
+});