From b153645f2b141dcfa066510be24409432a5e8d25 Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Fri, 14 Jul 2017 18:36:09 +0800
Subject: [PATCH] feat(forums): thumbs up css effect

---
 .../chat/client/views/chat.client.view.html   |  4 +--
 .../mt-rotate-by-mouse.client.directive.js    | 34 +++++++++++++++++++
 ... => mt-scale-by-mouse.client.directive.js} |  8 ++---
 .../forums-topic.client.controller.js         | 17 +++++++---
 modules/forums/client/less/forum.less         |  1 +
 .../client/views/topic.client.view.html       | 27 ++++++++++-----
 .../controllers/forums.server.controller.js   | 32 +++++++++--------
 7 files changed, 89 insertions(+), 34 deletions(-)
 create mode 100644 modules/core/client/directives/mt-rotate-by-mouse.client.directive.js
 rename modules/core/client/directives/{mt-scale.client.directive.js => mt-scale-by-mouse.client.directive.js} (82%)

diff --git a/modules/chat/client/views/chat.client.view.html b/modules/chat/client/views/chat.client.view.html
index f6578f78..da19dad9 100644
--- a/modules/chat/client/views/chat.client.view.html
+++ b/modules/chat/client/views/chat.client.view.html
@@ -76,7 +76,7 @@
                 <div class="user-body">
                     <ul class="list-unstyled">
                         <li ng-repeat="u in vm.users | orderBy:['-isAdmin', '-isOper', '-isVip', 'username']">
-                            <div class="user-item-wrapper" mt-scale="{scale: 1.1, duration: '.5s'}" ng-dblclick="vm.onUserListItemDblClicked(u);">
+                            <div class="user-item-wrapper" mt-scale-by-mouse="{scale: 1.1, duration: '.5s'}" ng-dblclick="vm.onUserListItemDblClicked(u);">
                                 <a class="user-item-avatar">
                                     <img title="@{{u.displayName}}" ng-src="/{{u.profileImageURL}}">
                                 </a>
@@ -101,7 +101,7 @@
     <script type="text/ng-template" id="fontColor.html">
         <div class="color-list">
             <label ng-repeat="c in vm.colorList">
-                <div style="background-color: {{c}}" class="color-item" mt-scale="{scale: 1.2, duration: '.5s'}"
+                <div style="background-color: {{c}}" class="color-item" mt-scale-by-mouse="{scale: 1.2, duration: '.5s'}"
                      ng-click="vm.onColorItemClicked(c);"
                      ng-mouseenter="vm.onColorItemMouseEnter(c);"
                      ng-mouseleave="vm.onColorItemMouseLeave(c);"></div>
diff --git a/modules/core/client/directives/mt-rotate-by-mouse.client.directive.js b/modules/core/client/directives/mt-rotate-by-mouse.client.directive.js
new file mode 100644
index 00000000..2817363d
--- /dev/null
+++ b/modules/core/client/directives/mt-rotate-by-mouse.client.directive.js
@@ -0,0 +1,34 @@
+(function () {
+  'use strict';
+
+  angular.module('core')
+    .directive('mtRotateByMouse', mtRotateByMouse);
+
+  function mtRotateByMouse() {
+    var directive = {
+      restrict: 'A',
+      link: link
+    };
+
+    return directive;
+
+    function link(scope, element, attrs) {
+      scope.$watch(attrs.mtRotateByMouse, function (s) {
+
+        var mtRotate = JSON.parse(JSON.stringify(eval('(' + attrs.mtRotateByMouse + ')')));
+
+        element.css('transition-property', 'transform, opacity');
+        element.css('transition-duration', mtRotate.duration || '.5s');
+        element.css('transition-timing-function', mtRotate.function || 'ease');
+
+        element.on('mouseenter', function () {
+          element.css('transform', 'rotate(360deg)');
+        });
+        element.on('mouseleave', function () {
+          element.css('transform', 'rotate(0deg)');
+        });
+
+      });
+    }
+  }
+}());
diff --git a/modules/core/client/directives/mt-scale.client.directive.js b/modules/core/client/directives/mt-scale-by-mouse.client.directive.js
similarity index 82%
rename from modules/core/client/directives/mt-scale.client.directive.js
rename to modules/core/client/directives/mt-scale-by-mouse.client.directive.js
index b41ac13c..bae6368d 100644
--- a/modules/core/client/directives/mt-scale.client.directive.js
+++ b/modules/core/client/directives/mt-scale-by-mouse.client.directive.js
@@ -2,9 +2,9 @@
   'use strict';
 
   angular.module('core')
-    .directive('mtScale', mtScale);
+    .directive('mtScaleByMouse', mtScaleByMouse);
 
-  function mtScale() {
+  function mtScaleByMouse() {
     var directive = {
       restrict: 'A',
       link: link
@@ -13,9 +13,9 @@
     return directive;
 
     function link(scope, element, attrs) {
-      scope.$watch(attrs.mtScale, function (s) {
+      scope.$watch(attrs.mtScaleByMouse, function (s) {
 
-        var mtScale = JSON.parse(JSON.stringify(eval('(' + attrs.mtScale + ')')));
+        var mtScale = JSON.parse(JSON.stringify(eval('(' + attrs.mtScaleByMouse + ')')));
 
         element.css('transition-property', 'transform, opacity');
         element.css('transition-duration', mtScale.duration || '.5s');
diff --git a/modules/forums/client/controllers/forums-topic.client.controller.js b/modules/forums/client/controllers/forums-topic.client.controller.js
index 01b7e012..8672f3e3 100644
--- a/modules/forums/client/controllers/forums-topic.client.controller.js
+++ b/modules/forums/client/controllers/forums-topic.client.controller.js
@@ -397,11 +397,12 @@
     };
 
     /**
-     * beginThumbsUp
-     * @param t,topic
-     * @param r,reply
+     * function
+     * @param evt
+     * @param t
+     * @param r
      */
-    vm.beginThumbsUp = function (t, r) {
+    vm.beginThumbsUp = function (evt, t, r) {
       var topic = new TopicsService({
         forum: vm.forum._id,
         _id: t._id,
@@ -410,7 +411,13 @@
 
       topic.$thumbsUp(function (res) {
         vm.topic = res;
-      }, function(res){
+
+        $timeout(function () {
+          var ele = angular.element($('#thumbs_' + (r ? r._id : t._id)));
+          ele.attr('mt-scale-start', true);
+          $compile(ele)($scope);
+        }, 10);
+      }, function (res) {
         NotifycationService.showErrorNotify(res.data.message, 'ERROR');
       });
     };
diff --git a/modules/forums/client/less/forum.less b/modules/forums/client/less/forum.less
index 3ad92cdd..0df43474 100644
--- a/modules/forums/client/less/forum.less
+++ b/modules/forums/client/less/forum.less
@@ -382,6 +382,7 @@
                     padding: 4px;
                 }
                 .reply-comment-header-command {
+                    position: relative;
                     margin-right: 30px;
                     @media (max-width: @screen-xs-max) {
                         float: none !important;
diff --git a/modules/forums/client/views/topic.client.view.html b/modules/forums/client/views/topic.client.view.html
index 5f81d93b..a6428bc1 100644
--- a/modules/forums/client/views/topic.client.view.html
+++ b/modules/forums/client/views/topic.client.view.html
@@ -115,9 +115,13 @@
                                                        title="{{'FORUMS.TITLES.TOPIC_DELETE' | translate}}"
                                                        ng-show="vm.canEdit(vm.topic);"
                                                        ng-click="vm.beginDeleteTopic(vm.topic);"></i>
-                                                    <i class="fa fa-thumbs-up" aria-hidden="true"
-                                                       title="{{'FORUMS.TITLES.TOPIC_THUMBS_UP' | translate}}"
-                                                       ng-click="vm.beginThumbsUp(vm.topic, null);">({{vm.topic._scoreList.length}})</i>
+                                                    <span ng-click="vm.beginThumbsUp($event, vm.topic, null);">
+                                                        <i id="thumbs_{{vm.topic._id}}" class="fa fa-thumbs-up" aria-hidden="true"
+                                                           mt-scale-by-param="{scale: 3, duration: '.5s'}"
+                                                           mt-scale-start="false"
+                                                           title="{{'FORUMS.TITLES.TOPIC_THUMBS_UP' | translate}}"
+                                                                >({{vm.topic._scoreList.length}})</i>
+                                                    </span>
                                                 </div>
 
                                                 <div class="reply-floor">F1</div>
@@ -131,7 +135,8 @@
                                                 <div class="attach-header" translate="FORUMS.ATTACH_LIST_HEADER"></div>
                                                 <ol>
                                                     <li ng-repeat="af in vm.topic._attach track by $index">
-                                                        <span><a ng-href="#" ng-click="vm.downloadAttach(vm.topic, null, af);">{{af.filename}}</a></span> (
+                                                        <span><a ng-href="#"
+                                                                 ng-click="vm.downloadAttach(vm.topic, null, af);">{{af.filename}}</a></span> (
                                                         <span>{{'FORUMS.ATTACH_FILE_SIZE' | translate}} {{af.filesize | bytes}}</span>
                                                         <span>{{'FORUMS.ATTACH_DOWN_COUNT' | translate}} {{af.downCount}}</span> )
                                                     </li>
@@ -175,11 +180,14 @@
                                                        title="{{'FORUMS.TITLES.REPLY_DELETE' | translate}}"
                                                        ng-show="vm.canEdit(rep);"
                                                        ng-click="vm.beginDeleteReply(rep);"></i>
-                                                    <i class="fa fa-thumbs-up" aria-hidden="true"
-                                                       title="{{'FORUMS.TITLES.TOPIC_THUMBS_UP' | translate}}"
-                                                       ng-click="vm.beginThumbsUp(vm.topic, rep);">({{rep._scoreList.length}})</i>
+                                                    <span ng-click="vm.beginThumbsUp($event, vm.topic, rep);">
+                                                        <i id="thumbs_{{rep._id}}" class="fa fa-thumbs-up" aria-hidden="true"
+                                                           mt-scale-by-param="{scale: 3, duration: '.5s'}"
+                                                           mt-scale-start="false"
+                                                           title="{{'FORUMS.TITLES.TOPIC_THUMBS_UP' | translate}}"
+                                                                >({{rep._scoreList.length}})</i>
+                                                    </span>
                                                 </div>
-
                                                 <div class="reply-floor">F{{$index+2}}</div>
                                             </div>
                                         </div>
@@ -191,7 +199,8 @@
                                                 <div class="attach-header" translate="FORUMS.ATTACH_LIST_HEADER"></div>
                                                 <ol>
                                                     <li ng-repeat="af in rep._attach track by $index">
-                                                        <span><a ng-href="#" ng-click="vm.downloadAttach(vm.topic, rep, af);">{{af.filename}}</a></span> (
+                                                        <span><a ng-href="#"
+                                                                 ng-click="vm.downloadAttach(vm.topic, rep, af);">{{af.filename}}</a></span> (
                                                         <span>{{'FORUMS.ATTACH_FILE_SIZE' | translate}} {{af.filesize | bytes}}</span>
                                                         <span>{{'FORUMS.ATTACH_DOWN_COUNT' | translate}} {{af.downCount}}</span> )
                                                     </li>
diff --git a/modules/forums/server/controllers/forums.server.controller.js b/modules/forums/server/controllers/forums.server.controller.js
index 796c6516..9d21e024 100644
--- a/modules/forums/server/controllers/forums.server.controller.js
+++ b/modules/forums/server/controllers/forums.server.controller.js
@@ -320,11 +320,12 @@ exports.thumbsUp = function (req, res) {
             message: 'ALREADY_THUMBS_UP'
           });
         } else {
-          if (r.user.score >= forumsConfig.thumbs_up_score) {
+          if (req.user.score >= forumsConfig.thumbs_up_score) {
             r._scoreList.push(thumb);
             r.user.update({
               $inc: {score: forumsConfig.thumbs_up_score}
             }).exec();
+            save();
           } else {
             return res.status(422).send({
               message: 'SCORE_NOT_ENOUGH'
@@ -346,11 +347,12 @@ exports.thumbsUp = function (req, res) {
         message: 'ALREADY_THUMBS_UP'
       });
     } else {
-      if (topic.user.score >= forumsConfig.thumbs_up_score) {
+      if (req.user.score >= forumsConfig.thumbs_up_score) {
         topic._scoreList.push(thumb);
         topic.user.update({
           $inc: {score: forumsConfig.thumbs_up_score}
         }).exec();
+        save();
       } else {
         return res.status(422).send({
           message: 'SCORE_NOT_ENOUGH'
@@ -359,19 +361,21 @@ exports.thumbsUp = function (req, res) {
     }
   }
 
-  topic.save(function (err) {
-    if (err) {
-      return res.status(422).send({
-        message: errorHandler.getErrorMessage(err)
-      });
-    } else {
-      res.json(topic);
-    }
-  });
+  function save() {
+    topic.save(function (err) {
+      if (err) {
+        return res.status(422).send({
+          message: errorHandler.getErrorMessage(err)
+        });
+      } else {
+        res.json(topic);
+      }
+    });
 
-  user.update({
-    $inc: {score: -forumsConfig.thumbs_up_score}
-  }).exec();
+    user.update({
+      $inc: {score: -forumsConfig.thumbs_up_score}
+    }).exec();
+  }
 };
 
 /**