fixes #47. added paging functionality, default 10k messages per page

src/background.js

@@ -2,6 +2,7 @@ var aceTopScroll = 0
 var aceCurRow = 0
 var Status  // 'working' or 'ready'
 var last_request_time
+var pageNo
 
 function bg_notify(status){
   Status = status

src/content_script.js

@@ -25,25 +25,31 @@ function scrollUp(){
   }
 }*/
 dateFormat = null
+pageLimit = null
 
 chrome.runtime.onMessage.addListener(function (request_msg, sender, sendResponse) {
     console.log('content script received request '+request_msg.text)
     if (request_msg.text === 'stch_check_conn') {
-      dateFormat = request_msg.dateFormat
+      dateFormat = request_msg.dateFormat,
+      pageLimit = request_msg.pageLimit
     }
     document.dispatchEvent(new CustomEvent('to_injected_status', {}))
     if (request_msg.text === 'stch_check_conn') {
       sendResponse({text : "OK"})
     }
     if (request_msg.text === 'stch_load_current_history') {
         document.dispatchEvent(new CustomEvent('to_injected_current', {'detail': {
-          dateFormat: dateFormat
+          dateFormat: dateFormat,
+          pageLimit: pageLimit,
+          pageNo: request_msg.pageNo,
         }}));
     }
     if (request_msg.text === 'stch_load_more_history') {
         document.dispatchEvent(new CustomEvent('to_injected_get_more', {'detail': {
           value: request_msg.value,
-          dateFormat: dateFormat
+          dateFormat: dateFormat,
+          pageLimit: pageLimit,
+          pageNo: request_msg.pageNo,
         }}));
     }
     if (request_msg.text === 'stch_open_photos') {

src/generic_tools.js

@@ -9,6 +9,8 @@ defaultFormatSettings = {
   formatDate2:"Y/M/D h:m:s a",
   formatDateCustom:"",
   formatDateSelected: "formatDate1",
+
+  pageLimit: 10000,
 }
 
 
@@ -84,6 +86,10 @@ function formatDate(d, dateFormat){
   return s
 }
 
+function formatDateInt(date_int, dateFormat){
+  return formatDate(new Date(date_int * 1000), dateFormat)
+}
+
 function formatDateForFileName(d){
   return d.getFullYear() + '_' +lead(d.getMonth()+1)+'_' + lead(d.getDate()) +'--'
     + lead(d.getHours()) + '-' + lead(d.getMinutes()) + '-' + lead(d.getSeconds())
@@ -106,7 +112,7 @@ function friendlySize(size){
 }
 
 function formatCallDuration(time){
-  var hrs = ~~(time / 3600);
+  var hrs = ~~(time / 3600)
   var mins = ~~((time % 3600) / 60)
   var secs = time % 60
   // Output like "1:01" or "4:03:59" or "123:03:59"

src/inject.js

@@ -16,6 +16,8 @@ var Ready
 
 var dateFormat
 var updateDateBeforeSending
+var pageNo
+var pageLimit
 
 function notify_status(){
 	document.dispatchEvent(new CustomEvent('from_injected', {
@@ -42,6 +44,8 @@ function clear(){
 	photosData = []
 	updateDateBeforeSending = false
 	setReady(true)
+	pageNo = 1
+	//pageLimit = 0
 	console.log('cleared')
 }
 
@@ -82,14 +86,38 @@ function sendHistory(){
 		}
 		updateDateBeforeSending = false
 	}
+	var pages = 0
+	var historyMessagesView = null
+	if (pageLimit<=0){
+		pages = 1
+		pageNo = 1
+		historyMessagesView = historyMessages
+	}else{
+		pages = ~~(historyMessages.length / pageLimit)
+		if (pages * pageLimit < historyMessages.length){
+			pages += 1
+		}
+		pageNo = Math.min(pageNo, pages)
+		historyMessagesView = historyMessages.slice(
+			(pageNo-1)*pageLimit, pageNo*pageLimit)
+	}
+	var firstMessageDate = 'not available'
+	if (historyMessages.length>0){
+		firstMessageDate = historyMessages[historyMessages.length-1].date
+	}
+	console.log('message view has '+historyMessagesView.length+' messages')
 	document.dispatchEvent(new CustomEvent('from_injected', {
 		detail:{
 			myID: myID,
 			peerID: historyForPeerID,
-			historyMessages: historyMessages,
+			historyMessages: historyMessagesView,
+			firstMessageDate: historyMessages[historyMessages.length-1].date,
 			peerIDs: peerIDs,
 			countMessages: countMessages,
+			countMessagesFetched: historyMessages.length,
 			countPhotos: photosData && photosData.count ? photosData.count : 0,
+			pages: pages,
+			pageNo: pageNo,
 		}
 	}))
 	setReady(true)
@@ -380,25 +408,27 @@ document.addEventListener ("to_injected_status", function(e){
 	notify_status()
 }, false);
 
-function retrieveDateFormat(detail){
+function retrieveMetaData(detail){
 	var dateFormatNew = detail.dateFormat
 	if (dateFormat != dateFormatNew){
 		dateFormat = dateFormatNew
 		updateDateBeforeSending = true
 	}
+	pageLimit = detail.pageLimit
+	pageNo = detail.pageNo
 }
 
 document.addEventListener ("to_injected_get_more", function(e){	
 	if (!Ready)
 		return
-	retrieveDateFormat(e.detail)
+	retrieveMetaData(e.detail)
 	handleMoreHistoryRequest(e.detail.value)
 }, false);
 
 document.addEventListener ("to_injected_current", function(e){
 	if (!Ready)
 		return
-	retrieveDateFormat(e.detail)
+	retrieveMetaData(e.detail)
 	if (countMessages>=0)
 		handleCurrentHistoryRequest()
 	else

src/options.html

@@ -23,14 +23,30 @@
       max-height: 100px;
       background-color: lightgrey;
     }
+    #save{
+      min-height: 50px
+    }
   </style>
   <script src="../lib/jquery-1.12.0.min.js"></script>
   <script src="generic_tools.js"></script>
   <script src="options.js"></script>
 </head>
 <body>
 <h2>Save Telegram Chat History Options</h2>
+<h3>Page limit</h3>
+<div>
+How many messages should be displayed at once
+<form action="">
+  <input type="radio" name="limit" value="1000"/><label>1k</label>
+  <input type="radio" name="limit" value="3000"/><label>3k</label>
+  <input type="radio" name="limit" value="10000"/><label>10k</label>
+  <input type="radio" name="limit" value="30000"/><label>30k</label>
+  <input type="radio" name="limit" value="100000"/><label>100k</label>
+  <input type="radio" name="limit" value="0"/><label>all</label>
+</form>
+</div>
 
+<h3>Format Settings</h3>
 <table>
 <tr>
   <td>
@@ -52,7 +68,7 @@ <h2>Save Telegram Chat History Options</h2>
  </tr>
  <tr>
   <td>	
-	<button id="save">Save Preferences</button>	
+	<button id="save" title="Save page limit and format settings">Save Preferences</button>	
   </td>
   <td><div id="status"></div></td>
 </tr>

src/options.js

@@ -33,7 +33,13 @@ function extract_options_from_UI(tableId, keySelected){
 function save_options() {
   var a = extract_options_from_UI('tableFormat', 'formatSelected')
   var b = extract_options_from_UI('tableFormatDate', 'formatDateSelected')
-  var mapFormatOptions = Object.assign({}, a, b)
+
+  var pageLimit = 0
+  var selectedPageLimit = $('input[name="limit"]:checked')
+  if (selectedPageLimit.length>0)
+    pageLimit = selectedPageLimit.val()
+
+  var mapFormatOptions = Object.assign({}, a, b, {'pageLimit':pageLimit})
 
   chrome.storage.sync.set(mapFormatOptions, function() {
     // Update status to let user know options were saved.
@@ -50,6 +56,9 @@ function render(mapFormats) {
     ['formatCompact', 'formatLarge'],'formatCustom', mapFormats['formatSelected'])
   renderMap(mapFormats, 'tableFormatDate', 
     ['formatDate1', 'formatDate2'],'formatDateCustom', mapFormats['formatDateSelected'])
+
+  var pageLimit = mapFormats['pageLimit']
+  $("input[name='limit'][value="+pageLimit+"]").attr('checked','checked')
 }
 
 function renderMap(mapValues, tableId, keysToDisplay, customKey, selectedKey, ){

src/page_control.js

@@ -0,0 +1,92 @@
+MAX_INP_SIZE = 9
+
+INP_ID = 'inpPageNo'
+DIV_PAGES = 'divPages'
+DEFAULT_PAGE_NO = '1'
+
+function page_control_init(div_id, action_handler){
+  var div = $(div_id)
+  div.text('')
+  var table = $('<table/>').appendTo(div)
+  var tr = $('<tr/>').appendTo(table)
+
+  var btnLeft = $('<button/>').attr('title','Navigate to more recent messages')
+    .text('<')
+  append_to_tr(btnLeft, tr)
+
+  var divPage = $('<div/>').text('Page')
+  append_to_tr(divPage, tr)
+
+  var inpCurPage = $('<input/>').attr('id',INP_ID).on('input', function(e){
+    var cur_val = $(this).val()
+    if (cur_val.length > MAX_INP_SIZE){
+      var trim_val = cur_val.substring(0,MAX_INP_SIZE)
+      page_control_set_page(trim_val)
+    }else if (cur_val.length < 1){
+      page_control_set_page(DEFAULT_PAGE_NO)
+    }else{
+      page_control_set_page($(this).val())
+    }
+  }).keypress(function(e){
+    if (e.keyCode == 13){
+      action_handler && action_handler()
+    }
+  })
+  // initialization
+  append_to_tr(inpCurPage, tr)
+  page_control_set_page(1)
+
+  var divOf = $('<div/>').text('of')
+  append_to_tr(divOf, tr)
+
+  var divPages = $('<div/>').attr('id',DIV_PAGES).text('?')
+  append_to_tr(divPages, tr)
+
+  var btnRight = $('<button/>').attr('title','Navigate to older messages')
+    .text('>')
+
+  btnLeft.click(function(){
+    var p = page_control_get_pageNo()
+    var p2 = parseInt(p) - 1
+    page_control_set_page(p2)
+    action_handler()
+  })
+  btnRight.click(function (){
+    var p = page_control_get_pageNo()
+    var p2 = parseInt(p) + 1
+    page_control_set_page(p2)
+    action_handler()
+  })
+  append_to_tr(btnRight, tr)
+}
+
+
+function page_control_set_page(pageNo){
+  // validate input before set
+  var s = null
+  var num = parseInt(''+pageNo)
+  if (isNaN(num)){
+    s = '1'
+  }else{
+    if (num < 1)
+      num = 1
+    s = '' + num
+  }
+  var el = $('#'+INP_ID)
+  el.val(s)
+  var size = (s && s.length) || 0
+  el.width((size+1)*8)
+}
+
+function page_control_get_pageNo(){
+  return $('#'+INP_ID).val()
+}
+
+function page_control_set_total_pages(total_pages){
+  $('#'+DIV_PAGES).text(''+total_pages)
+}
+
+function append_to_tr(el, tr){
+  var td = $('<td/>').appendTo(tr)
+  el.appendTo(td)
+}