Search preview modal more dynamic and responsive

var/www/Flask_server.py

@@ -92,7 +92,7 @@ def search():
             content = Paste.Paste(x.items()[0][1]).get_p_content().decode('utf8', 'ignore')
             content_range = max_preview_char if len(content)>max_preview_char else len(content)-1
             c.append(content[0:content_range]) 
-    return render_template("search.html", r=r, c=c)
+    return render_template("search.html", r=r, c=c, char_to_display=max_preview_modal)
 
 @app.route("/")
 def index():
@@ -145,21 +145,26 @@ def showpreviewpaste():
     p_size = paste.p_size
     p_mime = paste.p_mime
     p_lineinfo = paste.get_lines_info()
-    p_content = paste.get_p_content()[0:max_preview_modal].decode('utf-8', 'ignore')
-    return render_template("show_saved_paste.html", date=p_date, source=p_source, encoding=p_encoding, language=p_language, size=p_size, mime=p_mime, lineinfo=p_lineinfo, content=p_content)
+    #p_content = paste.get_p_content()[0:max_preview_modal].decode('utf-8', 'ignore')
+    p_content = paste.get_p_content().decode('utf-8', 'ignore')
+    p_content = p_content[0:max_preview_modal]
+    p_initsize = len(p_content)
+    return render_template("show_saved_paste.html", date=p_date, source=p_source, encoding=p_encoding, language=p_language, size=p_size, mime=p_mime, lineinfo=p_lineinfo, content=p_content, initsize=p_initsize)
 
 @app.route("/getmoredata/")
 def getmoredata():
     requested_path = request.args.get('paste', '')
-    index_prev = int(request.args.get('index', ''))
     paste = Paste.Paste(requested_path)
-    
     p_content = paste.get_p_content().decode('utf-8', 'ignore')
-    final_index = (index_prev+1)*max_preview_modal
+    '''final_index = (index_prev+1)*max_preview_modal
     if final_index > len(p_content)-1: # prevent out of bound
         final_index = len(p_content)-1
+   ''' 
+    #to_return = p_content[index_prev*max_preview_modal:final_index]
 
-    to_return = p_content[index_prev*max_preview_modal:final_index]
+    #correct_index = len(p_content) if max_preview_modal > len(p_content) else max_preview_modal
+    #to_return = str(p_content[correct_index:])
+    to_return = p_content[max_preview_modal:]
     return to_return 
 
 if __name__ == "__main__":

var/www/templates/search.html

@@ -124,17 +124,19 @@
 
 <!-- enable tooltip -->
 <script>
-$(document).ready(function(){
+    $(document).ready(function(){
         $('[data-toggle="tooltip"]').tooltip();
         $("#button_show_path").hide();
-});
+    });
 </script>
 
 <!-- Dynamically update the modal -->
 <script type="text/javascript">
     // static data
-    var alert_message = '<div class="alert alert-info alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><strong>No more data.</strong>The full paste is displayed.</div>';
-   
+    var alert_message = '<div class="alert alert-info alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><strong>No more data.</strong> Full paste displayed.</div>';
+    var complete_paste = null;
+    var char_to_display = {{ char_to_display }};
+    var current_index = 0;
 
     // On click, get html content from url and update the corresponding modal
     $("[data-toggle='modal']").on("click", function (event) {
@@ -143,29 +145,25 @@ $(document).ready(function(){
         var url = " {{ url_for('showpreviewpaste')  }}?paste=" + $(this).attr('data-path') + "&num=" + $(this).attr('data-num');
         $.get(url, function (data) {
             $("#mymodalbody").html(data);
-            var button = '<button type="button" id="load-more-button" class="btn btn-info btn-xs center-block" data-url="' + $(modal).attr('data-path') +'" data-toggle="tooltip" data-placement="bottom" title="Load more content"><span class="glyphicon glyphicon-download"></span></button>';
+            var button = $('<button type="button" id="load-more-button" class="btn btn-info btn-xs center-block" data-url="' + $(modal).attr('data-path') +'" data-toggle="tooltip" data-placement="bottom" title="Load more content"><span class="glyphicon glyphicon-download"></span></button>');
+            button.tooltip();
             $("#mymodalbody").children(".panel-default").append(button);
 
             $("#button_show_path").attr('href', $(modal).attr('data-url'));
             $("#button_show_path").show('fast');
-            
-            var index_preview = 1 // used for load more preview
-            
+            if ($("[data-initsize]").attr('data-initsize') < char_to_display) {
+                nothing_to_display();
+            }
             // On load more content click, replace paste content
             $("#load-more-button").on("click", function (event) {
-                $.get("{{ url_for('getmoredata') }}"+"?paste="+$(modal).attr('data-path')+"&index="+index_preview, function(data, status){
-                    index_preview++;
-                    if (data != "") {
-                        var new_content = $('<p><xmp>'+data+'</xmp></p>').hide();
-                        $("#mymodalbody").find("#panel-body").append(new_content);
-                        new_content.show('fast');
-                    } else { // no more data
-                        var new_content = $(alert_message).hide();
-                        $("#mymodalbody").find("#panel-body").append(new_content);
-                        new_content.show('fast');
-                        $("#load-more-button").hide();
-                    }
+                if (complete_paste == null) {
+                    $.get("{{ url_for('getmoredata') }}"+"?paste="+$(modal).attr('data-path'), function(data, status){
+                        complete_paste = data;
+                        update_preview();
                     });
+                } else {
+                    update_preview();
+                }               
             });
         });
     });
@@ -175,8 +173,33 @@ $(document).ready(function(){
         $("#mymodalbody").html("<p>Loading paste information...</p>");
         $("#button_show_path").attr('href', '');
         $("#button_show_path").hide();
+        complete_paste = null;
+        current_index = 0;
     });
     
-    
+   // Update the paste preview in the modal
+   function update_preview() {
+       if (current_index + char_to_display > complete_paste.length-1){
+           var final_index = complete_paste.length-1;
+           var flag_stop = true;	// if there is no more data.
+       } else {
+           var final_index = current_index + char_to_display;
+       }
+       if (final_index != current_index){
+           $("#mymodalbody").find("#paste-holder").append(complete_paste.substring(current_index+1, final_index+1));
+           current_index = final_index; 
+           if (flag_stop)
+               nothing_to_display();
+       } else {
+          nothing_to_display(); 
+      }
+   } 
+   // Update the modal when there is no more data
+   function nothing_to_display() {
+       var new_content = $(alert_message).hide();
+       $("#mymodalbody").find("#panel-body").append(new_content);
+       new_content.show('fast');
+       $("#load-more-button").hide();
+   }
 </script>
 </html>

var/www/templates/show_saved_paste.html

@@ -43,7 +43,7 @@
   </div>
   <div class="panel-body" id="panel-body">
   <h4> Content: </h4>
-  <p> <xmp> {{ content }} </xmp> </p>
+  <p data-initsize="{{ initsize }}"> <xmp id="paste-holder"> {{ content }} </xmp> </p>
   </div>
 </div>