rref #5392. Add load_more_top directive to load messages history to current conversation window

app/components/messaging/messaging.js

@@ -66,6 +66,10 @@ angular.module("ulakbus.messaging")
                     })
                 }
 
+                function getMessageElementByKey(key){
+                    return $("#msg-"+key);
+                }
+
                 function updateLastMessage(message){
                     if (!message && iScope.selectedChannel && iScope.selectedChannel.messages.length > 0){
                         var last = iScope.selectedChannel.messages.length - 1;
@@ -91,6 +95,11 @@ angular.module("ulakbus.messaging")
                     var storedMessage = Utils.findWhere(iScope.selectedChannel.messages, {key: message.key})
                     if (storedMessage){
                         angular.extend(storedMessage, message)
+                        var msgElement = getMessageElementByKey(message.key);
+                        // use manual update because of 'bind-once' for messages list
+                        if (msgElement) {
+                            msgElement.text(message.content);
+                        }
                     }
                 }
 
@@ -324,7 +333,7 @@ angular.module("ulakbus.messaging")
 
                         case "_zops_edit_message":
                             // find message content container
-                            var messageContainer = $("#msg-"+message.key);
+                            var messageContainer = getMessageElementByKey(message.key);
                             MessagingPopup.show({
                                 templateUrl: "components/messaging/templates/edit_message.html",
                                 rootElement: messageContainer,
@@ -357,6 +366,16 @@ angular.module("ulakbus.messaging")
                     })
                 };
 
+                iScope.loadMore = function(){
+                    if (iScope.selectedChannel.messages.length > 0){
+                        var first = iScope.selectedChannel.messages[0];
+                        return MessagingService.channel_history(iScope.selectedChannel, first.timestamp)
+                            .then(function(result){
+                                console.error("RES: ", result);
+                            });
+                    }
+                };
+
                 // listen to new messages and add them to selected channel if any
                 $rootScope.$on("message", function(e, message){
                     if (message.is_update){
@@ -399,12 +418,9 @@ angular.module("ulakbus.messaging")
 
     .directive("scrollDownWhenUpdate", function($timeout){
         return {
-            scope: {
-                changesWatcher: "&scrollDownWhenUpdate"
-            },
             link: function(iScope, iElem, iAttrs){
                 var elem = $(iElem);
-                iScope.$watch(iScope.changesWatcher, function(value){
+                iAttrs.$observe("scrollDownWhenUpdate", function(value){
                     if (value){
                         // update on next digest
                         $timeout(function(){
@@ -416,6 +432,32 @@ angular.module("ulakbus.messaging")
         }
     })
 
+    .directive("loadMoreTop", function($compile, $timeout, $q) {
+        var loaderTpl = $compile('<div class="loader" style="float: none; margin: auto; margin-top: 10px;" ng-show="loading"></div>');
+        return {
+            scope: {
+                loadMoreCallback: "&loadMoreTop"
+            },
+            link: function(iScope, iElem, iAttrs){
+                var elem = $(iElem);
+                iElem.prepend(angular.element(loaderTpl(iScope)));
+                iScope.loading = false;
+                elem.scroll(function(e){
+                    var scrollTop = elem.scrollTop();
+                    if (scrollTop <= 0 && !iScope.loading){
+                        if (iScope.loadMoreCallback){
+                            $timeout(function(){iScope.loading = true});
+                            $q.when(iScope.loadMoreCallback())
+                                .finally(function(){
+                                    $timeout(function(){iScope.loading = false});
+                                })
+                        }
+                    }
+                });
+            }
+        }
+    })
+
     .directive("contenteditable", function(){
         return {
             require: "?ngModel",

app/components/messaging/templates/conversation.html

@@ -31,10 +31,10 @@
         </div>
     </div>
 
-    <div class="conversation-body" ng-class="{readonly: selectedChannel.read_only}" scroll-down-when-update="lastMessage">
+    <div class="conversation-body" ng-class="{readonly: selectedChannel.read_only}" scroll-down-when-update="{{lastMessage}}" load-more-top="loadMore()">
         <div class="conversation-body-inner">
 
-            <div class="beginning-of-conversation">
+            <div class="beginning-of-conversation" ng-show="allMessagesLoaded">
                 Burası yazışmanın başı!
             </div>
 
@@ -49,7 +49,7 @@
                 </div>
 
                 <div class="user-photo">
-                    <img ng-src="{{msg.avatar_url}}" ng-show="msg.avatar_url">
+                    <img ng-src="{{::msg.avatar_url}}" ng-if="msg.avatar_url">
                 </div>
                 <div class="user-message">
                     <div class="message-header clearfix">
@@ -57,8 +57,8 @@
                         <div class="message-time">{{::msg.moment|fromNow}}</div>
                     </div>
                     <div class="message-content">
-                        <div class="editable-message-content" id="msg-{{msg.key}}">{{msg.content}}</div>
-                        <a class="message-content-url" href="{{::msg.url}}" ng-click="hideApp()" ng-if="msg.url">{{msg.url}}</a>
+                        <div class="editable-message-content" id="msg-{{::msg.key}}">{{::msg.content}}</div>
+                        <a class="message-content-url" href="{{::msg.url}}" ng-click="hideApp()" ng-if="msg.url">{{::msg.url}}</a>
                     </div>
                 </div>
             </div>