Added new unread

2014-06-13 12:40:14 +04:00 · 2014-06-13 12:40:14 +04:00 · 4d04810428
commit 4d04810428
parent 8556d03d9f
6 changed files with 119 additions and 68 deletions
--- a/app/css/app.css
+++ b/app/css/app.css
@ -956,6 +956,18 @@ a.tg_radio_on:hover i.icon-radio {
  opacity: 1;
 }

+.im_dialogs_tabs_wrap {
+  overflow: hidden;
+  height: 0;
+  -webkit-transition    : height ease-out 0.3s;
+  -moz-transition       : height ease-out 0.3s;
+  -o-transition         : height ease-out 0.3s;
+  transition            : height ease-out 0.3s;
+}
+.im_dialogs_tabs_wrap.shown {
+  height: 38px;
+}
+
 .im_dialogs_tabs {
  padding: 4px 0;
  position: relative;
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@ -216,7 +216,7 @@ angular.module('myApp.controllers', [])

    $scope.$on('history_focus', function (e, peerData) {
      $modalStack.dismissAll();
-      if (peerData.peerString == $scope.curDialog.peer && !peerData.messageID) {
+      if (peerData.peerString == $scope.curDialog.peer && peerData.messageID == $scope.curDialog.messageID) {
        $scope.$broadcast('ui_history_focus');
      } else {
        $location.url('/im?p=' + peerData.peerString + (peerData.messageID ? '&m=' + peerData.messageID : ''));
@ -543,6 +543,7 @@ angular.module('myApp.controllers', [])

    $scope.history = [];
    $scope.mediaType = false;
+    $scope.skippedHistory = false;
    $scope.selectedMsgs = {};
    $scope.selectedCount = 0;
    $scope.selectActions = false;
@ -557,6 +558,7 @@ angular.module('myApp.controllers', [])
    $scope.selectedFlush = selectedFlush;
    $scope.toggleEdit = toggleEdit;
    $scope.toggleMedia = toggleMedia;
+    $scope.returnToRecent = returnToRecent;
    $scope.showPeerInfo = showPeerInfo;

    var peerID,
@ -703,7 +705,7 @@ angular.module('myApp.controllers', [])
        } else {
          minID = 0;
        }
-        hasLess = minID > 0;
+        $scope.skippedHistory = hasLess = minID > 0;
      });
    }

@ -737,9 +739,11 @@ angular.module('myApp.controllers', [])
      });
    };

-    function loadHistory () {
+    function loadHistory (forceRecent) {
+      $scope.missedCount = 0;
+
      hasMore = false;
-      hasLess = false;
+      $scope.skippedHistory = hasLess = false;
      maxID = 0;
      minID = 0;

@ -750,6 +754,9 @@ angular.module('myApp.controllers', [])
        limit = 5;
        backLimit = 5;
      }
+      else if (forceRecent) {
+        limit = 10;
+      }

      var curJump = ++jump,
          inputMediaFilter = $scope.mediaType && {_: inputMediaFilters[$scope.mediaType]},
@ -762,12 +769,12 @@ angular.module('myApp.controllers', [])
      getMessagesPromise.then(function (historyResult) {
        if (curJump != jump) return;

-        minID = maxID && historyResult.history.indexOf(maxID)>= backLimit - 1
+        minID = (historyResult.unreadSkip || maxID && historyResult.history.indexOf(maxID) >= backLimit - 1)
                  ? historyResult.history[0]
                  : 0;
        maxID = historyResult.history[historyResult.history.length - 1];

-        hasLess = minID > 0;
+        $scope.skippedHistory = hasLess = minID > 0;
        hasMore = historyResult.count === null ||
                  historyResult.history.length && historyResult.history.length < historyResult.count;

@ -782,13 +789,10 @@ angular.module('myApp.controllers', [])

        updateHistoryGroups();

-        if (historyResult.unreadLimit) {
-          $scope.historyUnread = {
-            beforeID: historyResult.history[historyResult.unreadLimit - 1],
-            count: historyResult.unreadLimit
-          };
+        if (historyResult.unreadOffset) {
+          $scope.historyUnreadAfter = historyResult.history[historyResult.unreadOffset - 1];
        } else {
-          $scope.historyUnread = {};
+          $scope.historyUnreadAfter = {};
        }

        $scope.historyFocus = $scope.curDialog.messageID || 0;
@ -924,14 +928,23 @@ angular.module('myApp.controllers', [])
    }

    function toggleMedia (mediaType) {
-      if (mediaType) {
-        $scope.missedCount = 0;
-      }
      $scope.mediaType = mediaType || false;
      $scope.history = [];
      loadHistory();
    }

+    function returnToRecent () {
+      if ($scope.mediaType) {
+        toggleMedia();
+      } else {
+        if ($scope.curDialog.messageID) {
+          $rootScope.$broadcast('history_focus', {peerString: $scope.curDialog.peer});
+        } else {
+          loadHistory(true);
+        }
+      }
+    }
+
    function showPeerInfo () {
      if ($scope.curDialog.peerID > 0) {
        $rootScope.openUser($scope.curDialog.peerID)
@ -947,17 +960,9 @@ angular.module('myApp.controllers', [])

    $scope.$on('history_append', function (e, addedMessage) {
      if (addedMessage.peerID == $scope.curDialog.peerID) {
-        if (minID) {
+        if ($scope.mediaType || $scope.skippedHistory) {
          if (addedMessage.my) {
-            $rootScope.$broadcast('history_focus', {peerString: $scope.curDialog.peer});
-          } else {
-            $scope.missedCount++;
-          }
-          return;
-        }
-        if ($scope.mediaType) {
-          if (addedMessage.my) {
-            toggleMedia();
+            returnToRecent();
          } else {
            $scope.missedCount++;
          }
@ -973,8 +978,6 @@ angular.module('myApp.controllers', [])
          $scope.historyUnread = {};
        }

-        offset++;
-
        // console.log('append check', $rootScope.idle.isIDLE, addedMessage.peerID, $scope.curDialog.peerID);
        if (!$rootScope.idle.isIDLE) {
          $timeout(function () {
--- a/app/js/directives.js
+++ b/app/js/directives.js
@ -29,7 +29,7 @@ angular.module('myApp.directives', ['myApp.filters'])
    };
  })

-  .directive('myDialogs', function ($modalStack) {
+  .directive('myDialogs', function ($modalStack, $transition) {

    return {
      link: link
@ -40,6 +40,7 @@ angular.module('myApp.directives', ['myApp.filters'])
      var dialogsWrap = $('.im_dialogs_wrap', element)[0],
          scrollableWrap = $('.im_dialogs_scrollable_wrap', element)[0],
          searchField = $('.im_dialogs_search_field', element)[0],
+          tabsWrap = $('.im_dialogs_tabs_wrap', element)[0],
          searchFocused = false;


@ -51,6 +52,28 @@ angular.module('myApp.directives', ['myApp.filters'])
        }
      });

+      attrs.$observe('hasTabs', function (newValue) {
+        newValue = newValue == 'true';
+        if (newValue) {
+          $scope.$broadcast('ui_dialogs_tabs', true);
+        }
+        var trigger = function () {
+          $(tabsWrap)[newValue ? 'addClass' : 'removeClass']('shown');
+        }
+        $transition($(tabsWrap), trigger).then(function () {
+          if (!newValue) {
+            $scope.$broadcast('ui_dialogs_tabs', false);
+          }
+        });
+      });
+
+      $(document).on('keydown', onKeyDown);
+
+      $scope.$on('$destroy', function () {
+        $(document).off('keydown', onKeyDown);
+      });
+
+
      function onKeyDown(e) {
        if (!searchFocused && $modalStack.getTop()) {
          return true;
@ -149,12 +172,6 @@ angular.module('myApp.directives', ['myApp.filters'])
        }
      }

-      $(document).on('keydown', onKeyDown);
-
-      $scope.$on('$destroy', function () {
-        $(document).off('keydown', onKeyDown);
-      });
-
    }


@ -163,7 +180,8 @@ angular.module('myApp.directives', ['myApp.filters'])
  .directive('myDialogsList', function($window, $timeout) {

    return {
-      link: link
+      link: link,
+      scope: true
    };


@ -172,6 +190,7 @@ angular.module('myApp.directives', ['myApp.filters'])
          scrollableWrap = $('.im_dialogs_scrollable_wrap', element)[0],
          headWrap = $('.tg_page_head')[0],
          footer = $('.im_page_footer')[0],
+          hasTabs = false,
          moreNotified = false;

      onContentLoaded(function () {
@ -186,6 +205,11 @@ angular.module('myApp.directives', ['myApp.filters'])

      $scope.$on('ui_dialogs_prepend', updateScroller);

+      $scope.$on('ui_dialogs_tabs', function (e, newHasTabs) {
+        hasTabs = newHasTabs;
+        updateSizes();
+      })
+

      $scope.$on('ui_dialogs_append', function () {
        onContentLoaded(function () {
@ -235,7 +259,7 @@ angular.module('myApp.directives', ['myApp.filters'])
          footer = $('.im_page_footer')[0];
        }
        $(element).css({
-          height: $($window).height() - footer.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - 72
+          height: $($window).height() - footer.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - (hasTabs ? 38 : 0) - 68
        });

        updateScroller();
@ -398,7 +422,7 @@ angular.module('myApp.directives', ['myApp.filters'])
        var unreadSplit, focusMessage;

        if (focusMessage = $('.im_message_focus', scrollableWrap)[0]) {
-          scrollableWrap.scrollTop = Math.max(0, focusMessage.offsetTop - 52);
+          scrollableWrap.scrollTop = Math.max(0, focusMessage.offsetTop - Math.floor(scrollableWrap.clientHeight / 2) + 26);
          atBottom = false;
        } else if (unreadSplit = $('.im_message_unread_split', scrollableWrap)[0]) {
          scrollableWrap.scrollTop = Math.max(0, unreadSplit.offsetTop - 52);
--- a/app/js/services.js
+++ b/app/js/services.js
@ -900,15 +900,11 @@ angular.module('myApp.services', [])
    });
  }

-  function requestHistory (inputPeer, maxID, limit, backLimit) {
-    maxID = maxID || 0;
-    limit = limit || 0;
-    backLimit = backLimit || 0;
-
+  function requestHistory (inputPeer, maxID, limit, offset) {
    return MtpApiManager.invokeApi('messages.getHistory', {
      peer: inputPeer,
-      offset: -backLimit,
-      limit: limit + backLimit,
+      offset: offset || 0,
+      limit: limit || 0,
      max_id: maxID || 0
    }).then(function (historyResult) {
      AppUsersManager.saveApiUsers(historyResult.users);
@ -920,7 +916,7 @@ angular.module('myApp.services', [])
  }

  function fillHistoryStorage (inputPeer, maxID, fullLimit, historyStorage) {
-    console.log('fill history storage', inputPeer, maxID, fullLimit, angular.copy(historyStorage));
+    // console.log('fill history storage', inputPeer, maxID, fullLimit, angular.copy(historyStorage));
    return requestHistory (inputPeer, maxID, fullLimit).then(function (historyResult) {
      historyStorage.count = historyResult.count || historyResult.messages.length;

@ -953,6 +949,9 @@ angular.module('myApp.services', [])
    var peerID = AppPeersManager.getPeerID(inputPeer),
        historyStorage = historiesStorage[peerID],
        offset = 0,
+        offsetNotFound = false,
+        unreadOffset = false,
+        unreadSkip = false,
        resultPending = [];

    if (historyStorage === undefined) {
@ -962,24 +961,31 @@ angular.module('myApp.services', [])
      resultPending = historyStorage.pending.slice();
    }

-    var unreadLimit = false;
    if (!limit && !maxID) {
      var foundDialog = getDialogByPeerID(peerID);
      if (foundDialog && foundDialog[0] && foundDialog[0].unread_count > 1) {
-        unreadLimit = Math.min(1000, foundDialog[0].unread_count);
-        limit = unreadLimit;
+        var unreadCount = foundDialog[0].unread_count;
+        if (unreadSkip = (unreadCount > 50)) {
+          limit = 10;
+          unreadOffset = 6;
+          offset = unreadCount - unreadOffset;
+        } else {
+          limit = Math.max(10, unreadCount + 2);
+          unreadOffset = unreadCount;
+        }
      }
    }
-
-    if (maxID > 0) {
+    else if (maxID > 0) {
+      offsetNotFound = true;
      for (offset = 0; offset < historyStorage.history.length; offset++) {
        if (maxID > historyStorage.history[offset]) {
+          offsetNotFound = false;
          break;
        }
      }
    }

-    if (historyStorage.count !== null && historyStorage.history.length == historyStorage.count ||
+    if (!offsetNotFound && historyStorage.count !== null && historyStorage.history.length == historyStorage.count ||
      historyStorage.history.length >= offset + (limit || 1)
    ) {
      if (backLimit) {
@ -993,19 +999,24 @@ angular.module('myApp.services', [])
      return $q.when({
        count: historyStorage.count,
        history: resultPending.concat(historyStorage.history.slice(offset, offset + limit)),
-        unreadLimit: unreadLimit
+        unreadOffset: unreadOffset,
+        unreadSkip: unreadSkip
      });
    }

-    if (unreadLimit) {
-      limit = Math.max(20, unreadLimit + 2);
-    }
-    else if (!backLimit && !limit) {
+    if (!backLimit && !limit) {
      limit = 20;
    }
+    if (offsetNotFound) {
+      offset = 0;
+    }

-    if (backLimit || maxID && historyStorage.history.indexOf(maxID) == -1) {
-      return requestHistory(inputPeer, maxID, limit, backLimit).then(function (historyResult) {
+    if (backLimit || unreadSkip || maxID && historyStorage.history.indexOf(maxID) == -1) {
+      if (backLimit) {
+        offset = -backLimit;
+        limit += backLimit;
+      }
+      return requestHistory(inputPeer, maxID, limit, offset).then(function (historyResult) {
        historyStorage.count = historyResult.count || historyResult.messages.length;

        var history = [];
@ -1016,7 +1027,8 @@ angular.module('myApp.services', [])
        return {
          count: historyStorage.count,
          history: resultPending.concat(history),
-          unreadLimit: unreadLimit
+          unreadOffset: unreadOffset,
+          unreadSkip: unreadSkip
        };
      })
    }
@ -1034,7 +1046,8 @@ angular.module('myApp.services', [])
      return {
        count: historyStorage.count,
        history: resultPending.concat(historyStorage.history.slice(offset, offset + limit)),
-        unreadLimit: unreadLimit
+        unreadOffset: unreadOffset,
+        unreadSkip: unreadSkip
      };
    });
  }
--- a/app/partials/im.html
+++ b/app/partials/im.html
@ -4,7 +4,7 @@

  <div class="im_page_split clearfix">

-    <div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController" my-dialogs>
+    <div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController" my-dialogs has-tabs="{{search.query.length > 0}}">
      <div class="im_dialogs_panel">
        <div class="dropdown im_dialogs_panel_dropdown pull-right">
          <a class="dropdown-toggle">
@ -24,7 +24,7 @@
          <a class="im_dialogs_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
        </div>

-        <div class="im_dialogs_tabs_wrap" ng-show="search.query.length">
+        <div class="im_dialogs_tabs_wrap">
          <div class="im_dialogs_tabs clearfix">
            <a href="" class="im_dialogs_tab" ng-class="{active: !search.messages}" ng-click="search.messages = false">Conversations</a>
            <a href="" class="im_dialogs_tab" ng-class="{active: search.messages}" ng-click="search.messages = true">Messages</a>
@ -117,8 +117,9 @@
                    <li><a ng-click="toggleMedia('audio')">Voice messages</a></li>
                  </ul>
                </div>
-                <a ng-show="mediaType !== false" class="im_history_panel_return_link pull-right" ng-click="toggleMedia()">
-                  Show all messages
+                <a ng-show="mediaType !== false || skippedHistory" class="im_history_panel_return_link pull-right" ng-click="returnToRecent()" ng-switch="skippedHistory">
+                  <span ng-switch-when="true">Show recent messages</span>
+                  <span ng-switch-default>Show all messages</span>
                  <strong class="im_history_panel_return_count" ng-show="missedCount > 0" ng-bind="'+' + missedCount"></strong>
                </a>

--- a/app/partials/message.html
+++ b/app/partials/message.html
@ -1,7 +1,5 @@
-<div class="im_message_unread_split" bo-if="historyUnread.beforeID == historyMessage.id" ng-show="historyUnread.beforeID == historyMessage.id">
-  <ng-pluralize count="historyUnread.count"
-                   when="{'one': '1 unread message', 'other': '{} unread messages'}">
-  </ng-pluralize>
+<div class="im_message_unread_split" bo-if="historyUnreadAfter == historyMessage.id" ng-show="historyUnreadAfter == historyMessage.id">
+  Unread messages
 </div>

 <div class="im_message_outer_wrap" ng-class="[ selectedMsgs[historyMessage.id] &amp;&amp; 'im_message_selected', historyMessage.grouped &amp;&amp; ('im_message_grouped' + historyMessage.grouped) , historyFocus == historyMessage.id &amp;&amp; 'im_message_focus']" ng-click="toggleMessage(historyMessage.id, $event)">