Committer: dpetrov
LJSUP-7233: add loader icon and request caching to the new thread expanderU 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();