聊天界面

dist/bower.json

@@ -19,7 +19,6 @@
     "angular-ui-router": "^0.3.1",
     "bootstrap": "^3.3.7",
     "angular": "^1.5.8",
-    "angular-scroll-glue": "^2.0.7",
     "angular-animate": "^1.5.8",
     "animate.css": "^3.5.2",
     "angular-bootstrap": "^2.2.0",
@@ -27,6 +26,8 @@
     "jquery-qrcode": "*",
     "zTree": "^3.5.26",
     "lodash": "^4.17.4",
-    "peerjs": "^0.3.14"
+    "peerjs": "^0.3.14",
+    "ngInfiniteScroll": "^1.3.4",
+    "jquery": "^3.2.1"
   }
 }

talkview/src/html/index.html

@@ -15,6 +15,7 @@
     <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
     <script src="../bower_components/jquery-qrcode/jquery.qrcode.min.js"></script>
     <script src="../bower_components/angular/angular.js"></script>
+    <script src="../bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js"></script>
     <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
     <script src="../bower_components/angular-animate/angular-animate.min.js"></script>
 

talkview/src/js/app.js

@@ -2,4 +2,6 @@
 var appMessage = angular.module('appMessage', [
     'ui.router',
     'templatescache',
-    'ngAnimate']);
+    'infinite-scroll',
+    'ngAnimate'
+]);

talkview/src/js/controller/messageController.js

@@ -2,6 +2,7 @@ angular.module('appMessage').controller('MessageController', ['$scope', '$filter
         lxtalkClient.Invoke('{15180DEF-D508-45F7-BAEB-6486CD8752C8}', '_Register', '', $scope);
         $scope.glued = true;
         $scope.count = true;
+        $scope.h = document.body.scrollHeight;
         $scope.appContent = {};
         $scope.sendmessages = [];
         $scope.historymessages = [];
@@ -49,21 +50,17 @@ angular.module('appMessage').controller('MessageController', ['$scope', '$filter
             $scope.count = false;
         };
 
-        // $scope.scrollWheel = function() {
-        //     console.log("1111111111");
-        //     if (document.body.scrollTop + document.body.clientHeight == document.body.scrollHeight && window.wheelDelta < 0) {
-        //         $scope.height = document.body.scrollHeight;
-        //         lxtalkClient.Invoke('{15180DEF-D508-45F7-BAEB-6486CD8752C8}', 'LoadHistoryMessages', '', $scope);
-        //         $scope.count = false;
-        //     }
-        // }
-
-        //document.getElementById("body").addEventListener("wheel", scrollWheel());
+        $scope.scrollWheel = function() {
+            if (document.body.scrollTop == 0) {
+                $scope.height = document.body.scrollHeight;
+                lxtalkClient.Invoke('{15180DEF-D508-45F7-BAEB-6486CD8752C8}', 'LoadHistoryMessages', '', $scope);
+                $scope.count = false;
+            }
+        };
 
         $scope.loadImages = function(data) {
-            console.log('11111111222');
             lxtalkClient.Invoke('{15180DEF-D508-45F7-BAEB-6486CD8752C8}', 'LoadImages', JSON.stringify(data), $scope);
-        }
+        };
 
         $scope.scrollHide = function() {
             angular.element("#body").addClass("scrollGlue");

talkview/src/js/controller/userController.js

@@ -20,16 +20,16 @@ angular.module('appMessage').controller('UserController', ['$scope', '$state', f
         shortL: 'lszhangzhangzhang'
     };
 
-    $scope.getSex = function(sex) {
-        if ($scope.user === undefined)
-            return '保密';
-        if ($scope.user.sex == 0)
-            return '男';
-        else if ($scope.user.sex == 1)
-            return '女';
-        else
-            return '保密';
-    }
+    // $scope.getSex = function(sex) {
+    //     if ($scope.user === undefined)
+    //         return '保密';
+    //     if ($scope.user.sex == 0)
+    //         return '男';
+    //     else if ($scope.user.sex == 1)
+    //         return '女';
+    //     else
+    //         return '保密';
+    // }
 
     $scope.update = function(userJson) {
         userJson = userJson.replace(/ /g, " ");

talkview/src/js/directive/currentmessage.js

@@ -119,6 +119,12 @@
 
             var replaceImage = function(content) {}
             var html = '';
+            scope.appContent.font = {
+                style: "normal",
+                weight: "normal",
+                size: 9,
+                family: '微软雅黑'
+            };
             //var message = document.getElementById("sendmessage");
             if (scope.msg.senderDisplayName === undefined || scope.msg.senderDisplayName == '')
                 scope.msg.senderDisplayName = scope.msg.sender;
@@ -131,31 +137,31 @@
                     var style = scope.msg.style === "" || scope.msg.style === undefined ? {
                         style: 'normal',
                         weight: 'normal',
-                        size: 10,
+                        size: 9,
                         family: '微软雅黑',
                         color: 16777215
                     } : _.assign({
                         style: 'normal',
                         weight: 'normal',
-                        size: 10,
+                        size: 9,
                         family: '微软雅黑',
                         color: 16777215
-                    }, JSON.parse(scope.msg.style));
+                    }, JSON.parse(scope.appContent.font));
                     style.color = 16777215;
                 } else {
                     var style = scope.msg.style === "" || scope.msg.style === undefined ? {
                         style: 'normal',
                         weight: 'normal',
-                        size: 10,
+                        size: 9,
                         family: '微软雅黑',
                         color: 0
                     } : _.assign({
                         style: 'normal',
                         weight: 'normal',
-                        size: 10,
+                        size: 9,
                         family: '微软雅黑',
                         color: 0
-                    }, JSON.parse(scope.msg.style));
+                    }, JSON.parse(scope.appContent.font));
                     style.color = 0;
                 }
                 html = '<span class="text-message"' + ' style="font:' + style.style + ' ' + style.weight + ' ' + style.size + 'pt' + ' ' + style.family + ';color:#' + _.padStart(style.color.toString(16), 6, '0') + '">' +

talkview/src/js/directive/historymessages.js

@@ -113,6 +113,12 @@
             };
             var replaceImage = function(content) {}
             var html = '';
+            scope.appContent.font = {
+                style: "normal",
+                weight: "normal",
+                size: 9,
+                family: '微软雅黑'
+            };
             //var message = document.getElementById("loadmore");
             if (scope.msg.senderDisplayName === undefined || scope.msg.senderDisplayName == '')
                 scope.msg.senderDisplayName = scope.msg.sender;
@@ -125,31 +131,31 @@
                     var style = scope.msg.style === "" || scope.msg.style === undefined ? {
                         style: 'normal',
                         weight: 'normal',
-                        size: 10,
+                        size: 9,
                         family: '微软雅黑',
                         color: 16777215
                     } : _.assign({
                         style: 'normal',
                         weight: 'normal',
-                        size: 10,
+                        size: 9,
                         family: '微软雅黑',
                         color: 16777215
-                    }, JSON.parse(scope.msg.style));
+                    }, JSON.parse(scope.appContent.font));
                     style.color = 16777215;
                 } else {
                     var style = scope.msg.style === "" || scope.msg.style === undefined ? {
                         style: 'normal',
                         weight: 'normal',
-                        size: 10,
+                        size: 9,
                         family: '微软雅黑',
                         color: 0
                     } : _.assign({
                         style: 'normal',
                         weight: 'normal',
-                        size: 10,
+                        size: 9,
                         family: '微软雅黑',
                         color: 0
-                    }, JSON.parse(scope.msg.style));
+                    }, JSON.parse(scope.appContent.font));
                     style.color = 0;
                 }
                 html = '<span class="text-message"' + ' style="font:' + style.style + ' ' + style.weight + ' ' + style.size + 'pt' + ' ' + style.family + ';color:#' + _.padStart(style.color.toString(16), 6, '0') + '">' +

talkview/src/js/directive/mousewheel .js

@@ -1,26 +0,0 @@
-(function() {
-    'use strict';
-
-    angular
-        .module('appMessage')
-        .directive('ngMouseWheelUp', function() {
-            return function(scope, element, attrs) {
-                element.bind("DOMMouseScroll mousewheel onmousewheel", function(event) {
-                    // cross-browser wheel delta
-                    var event = window.event || event; // old IE support
-                    var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
-                    if (delta > 0) {
-                        scope.$apply(function() {
-                            scope.$eval(attrs.ngMouseWheelUp);
-                        });
-                        // for IE
-                        event.returnValue = false;
-                        // for Chrome and Firefox
-                        if (event.preventDefault) {
-                            event.preventDefault();
-                        }
-                    }
-                });
-            };
-        });
-})();

talkview/src/templates/messages.html

@@ -1,4 +1,4 @@
-<div class="full-client" ng-mouseover="scrollShow()">
+<div class="full-client" ng-cloak ng-mouseover="scrollShow()" infinite-scroll="scrollWheel()" infinite-scroll-distance="500" infinite-scroll-immediate-check="false">
     <div class="getMore"><a role="button"><small ng-click="getMore()">加载更多消息</small></a></div>
 
     <div class="feed-activity-list p-l-xs p-t-xs p-r-xs loadmore" ng-cloak>
@@ -60,7 +60,7 @@
             </div>-->
 
         <!-- 文件提醒消息 -->
-        <div class="feed-element">
+        <!--<div class="feed-element">
             <div class="media-body">
                 <div class="well m-l-xs m-t-xs fit-content" id="file-error">
                     <div>
@@ -140,7 +140,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </div>-->
         <!-- 带截图 -->
         <!--<div class="feed-element">
             <div class="media-body">