can3p (can3p) wrote in changelog,
can3p
can3p
changelog

[livejournal] r17607: LJSUP-7233: add loader icon and request ...

Committer: dpetrov
LJSUP-7233: add loader icon and request caching to the new thread expander
U   trunk/htdocs/js/commentmanage.js
U   trunk/htdocs/js/thread_expander.ex.js
Modified: trunk/htdocs/js/commentmanage.js
===================================================================
--- trunk/htdocs/js/commentmanage.js	2010-10-26 07:13:08 UTC (rev 17606)
+++ trunk/htdocs/js/commentmanage.js	2010-10-26 07:22:58 UTC (rev 17607)
@@ -454,7 +454,7 @@
 							for( var i = 0; i < result.length; ++i ){
 								if( LJ_cmtinfo[ result[i].thread ].full ){
 									setupAjax(
-										jQuery("#ljcmtxt" + result[i].thread).html(
+										jQuery("#ljcmtxt" + result[i].thread).replaceWith(
 											ExpanderEx.prepareCommentBlock(
 													result[i].html,
 													result[ i ].thread,
@@ -472,7 +472,7 @@
 						if( threadExpanded && LJ_cmtinfo[ threadId ].oldvars.full )
 						{
 							getThreadJSON( threadId, function(result2){
-								ExpanderEx.Collection[ threadId ] = ExpanderEx.prepareCommentBlock( result2[0].html, threadId, true );
+								ExpanderEx.Collection[ threadId ] = ExpanderEx.prepareCommentBlock( result2[0].html, threadId, true ).html();
 								populateComments( result );
 							}, true, true );
 						}

Modified: trunk/htdocs/js/thread_expander.ex.js
===================================================================
--- trunk/htdocs/js/thread_expander.ex.js	2010-10-26 07:13:08 UTC (rev 17606)
+++ trunk/htdocs/js/thread_expander.ex.js	2010-10-26 07:22:58 UTC (rev 17607)
@@ -2,6 +2,7 @@
  * ExpanderEx object is used in s1 style comment pages and provides
  * ajax functionality to expand comments instead of loading iframe page as it is
  * in old Expander
+ * expander object is also used in commentmanage.js
  */
 ExpanderEx = function(){
     this.__caller__;    // <a> HTML element from where ExpanderEx was called
@@ -11,6 +12,8 @@
     this.is_S1;         // bool flag, true == journal is in S1, false == in S2
 }
 ExpanderEx.Collection={};
+ExpanderEx.ReqCache = {};
+
 ExpanderEx.make = function(el,url,id,is_S1){
     var local = (new ExpanderEx).set({__caller__:el,url:url.replace(/#.*$/,''),id:id,is_S1:!!is_S1});
     local.get();
@@ -47,7 +50,31 @@
     return map;
 }
 
+ExpanderEx.preloadImg = function(){
+    (new Image()).src = Site.imgprefix + '/preloader-s.gif';
+}
+
+ExpanderEx.prototype.addPreloader = function(){
+    this.loader = new Image();
+    this.loader.src = Site.imgprefix + '/preloader-s.gif';
+    this.loader.className = 'i-exp-preloader';
+    this.__caller__.parentNode.appendChild( this.loader );
+}
+
+ExpanderEx.prototype.removePreloader = function(){
+    if( !this.loader ){
+        return;
+    }
+
+    if( this.loader.parentNode ){
+        this.loader.parentNode.removeChild( this.loader );
+    }
+    delete this.loader;
+};
+
 ExpanderEx.prototype.loadingStateOn = function(){
+    // turn on preloader there
+    this.addPreloader();
     this.stored_caller = this.__caller__.cloneNode(true);
     this.__caller__.setAttribute('already_clicked','already_clicked');
     this.__caller__.onclick = function(){return false}
@@ -75,17 +102,43 @@
 
 ExpanderEx.prototype.expandThread = function(json){
     this.loadingStateOff();
+
+    var fragment = document.createDocumentFragment();
+    var rowClone, row, threadId, cell, next;
     for( var i = 0; i < json.length; ++i ) {
-        if( json[ i ].thread in ExpanderEx.Collection )
+        threadId = json[ i ].thread;
+        if( threadId in ExpanderEx.Collection )
             continue; //this comment is already expanded
-        ExpanderEx.Collection[ json[ i ].thread ] = jQuery( '#ljcmtxt' + json[ i ].thread ).html();
-        jQuery( '#ljcmtxt' + json[ i ].thread )
-            .html( ExpanderEx.prepareCommentBlock( json[ i ].html, json[ i ].thread, false ) );
 
-        this.initCommentBlock( jQuery( '#ljcmt' + json[ i ].thread )[0], json[ i ].thread );
-        LJ_cmtinfo[ json[ i ].thread ].parent = this.id;
+        row = jQuery('#ljcmt' + threadId );
+        rowClone = row.clone( true );
+        cell = rowClone.find( '#ljcmtxt' + threadId );
+
+        //remove preloader from cloned node
+        if( threadId == this.id ) {
+            cell.find('img.i-exp-preloader').remove();
+        }
+
+        ExpanderEx.Collection[ threadId ] = cell.html();
+        cell.replaceWith( ExpanderEx.prepareCommentBlock( json[ i ].html, threadId, false ) );
+        fragment.appendChild( rowClone[ 0 ] );
+
+        if( i == ( json.length - 1 ) ) {
+            next = row.next()[0];
+        }
+        row.remove();
     }
+    //remove preloader if exist
+    this.removePreloader();
+    next.parentNode.insertBefore( fragment, next );
 
+    //duplicate cycle, because we do not know, that external scripts do with node
+    for( var i = 0; i < json.length; ++i ) {
+        threadId = json[ i ].thread;
+        this.initCommentBlock( jQuery( '#ljcmt' + threadId )[0] , threadId );
+        LJ_cmtinfo[ threadId ].parent = this.id;
+    }
+
     return true;
 }
 
@@ -103,7 +156,7 @@
     var expander = this;
     function updateBlock(id, html)
     {
-        var el_ =jQuery( '#ljcmtxt' + id )
+        var el_ = jQuery( '#ljcmtxt' + id )
             .html( html )[0];
         expander.initCommentBlock( el_, id, true );
     }
@@ -147,10 +200,18 @@
     }
     this.loadingStateOn();
 
-    var obj = this;
-    getThreadJSON( this.id, function(result) {
-        obj.expandThread(result);
-    }, false, false, true );
+    if( this.id in ExpanderEx.ReqCache ) {
+        this.expandThread( ExpanderEx.ReqCache[ this.id ] );
+    } else {
+        var obj = this;
+        //set timeout to allow browser to display image before request
+        setTimeout( function(){
+            getThreadJSON( obj.id, function(result) {
+                obj.expandThread(result);
+                ExpanderEx.ReqCache[ obj.id ] = result;
+            }, false, false, true );
+        }, 0 );
+    }
 
     return true;
 }
@@ -158,9 +219,13 @@
 //toggle visibility of expand and collapse links, if server returns
 //html with both of them ( with every ajax request)
 ExpanderEx.prepareCommentBlock = function(html, id, showExpand){
-    var block = jQuery("<div>" + html + "</div>"),
+    var block = jQuery("<td>" + html + "</td>").attr( {
+            id: 'ljcmtxt' + id,
+            width: '100%'
+        } ),
         selector = '';
 
+
     if( LJ_cmtinfo[ id ].has_link > 0 )
         selector = '#' + ((showExpand ? 'collapse_' : 'expand_' ) + id);
     else
@@ -169,5 +234,7 @@
     block.find(selector)
         .css('display', 'none');
 
-    return block.html();
+    return block;
 }
+
+ExpanderEx.preloadImg();

Tags: can3p, js, livejournal
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments