| Index: trunk/extensions/LiquidThreads/jquery/jquery.thread_collapse.js |
| — | — | @@ -0,0 +1,107 @@ |
| | 2 | +( function( $ ) { |
| | 3 | + |
| | 4 | + $.fn.thread_collapse = function( $$options ) { |
| | 5 | + // return if the function is called on an empty jquery object |
| | 6 | + if( !this.length ) return this; |
| | 7 | + //merge options into the defaults |
| | 8 | + var $settings = $.extend( {}, $.thread_collapse.defaults, $$options ); |
| | 9 | + // run the initialization on each jquery object |
| | 10 | + this.each( function() { |
| | 11 | + $thread = $( this ); |
| | 12 | + // add collapse controls to this thread |
| | 13 | + $.thread_collapse.fn.init( $thread ); |
| | 14 | + // add collapse controls recursivly to the child threads |
| | 15 | + $thread.find( '.lqt_thread' ).each( function() { |
| | 16 | + $.thread_collapse.fn.init( this ); |
| | 17 | + } ); |
| | 18 | + } ); |
| | 19 | + return this; |
| | 20 | + }; |
| | 21 | + |
| | 22 | + $.thread_collapse = { |
| | 23 | + 'fn' : { |
| | 24 | + 'init': function( thread ) { |
| | 25 | + return $( thread ) |
| | 26 | + .bind( 'collapse.thread_collapse', $.thread_collapse.fn.toggleCollapse ) |
| | 27 | + .children( '.lqt-post-wrapper' ) |
| | 28 | + .prepend( $( $.thread_collapse.templates.collapseControl ) |
| | 29 | + .find( 'a' ) |
| | 30 | + .bind( 'click.thread_collapse', $.thread_collapse.fn.toggleCollapse ) |
| | 31 | + .end() ); |
| | 32 | + }, |
| | 33 | + 'getPreview': function( thread, depth ) { |
| | 34 | + var $out = $( '<ul />' ) |
| | 35 | + .addClass( 'thread-collapse-preview' ) |
| | 36 | + .addClass( 'thread-collapse-preview-depth-' + depth ) |
| | 37 | + .append( $( '<li />' ) |
| | 38 | + .append( thread.find( '.lqt-post-wrapper:first .lqt-thread-signature' ).clone() ) |
| | 39 | + ); |
| | 40 | + thread.find( '.lqt-thread-replies' ).children( '.lqt_thread' ).each( function() { |
| | 41 | + $out.append( $.thread_collapse.fn.getPreview( $( this ), depth + 1 ) ); |
| | 42 | + } ); |
| | 43 | + return $out; |
| | 44 | + }, |
| | 45 | + 'toggleCollapse': function() { |
| | 46 | + var $thread = $( this ).closest( '.lqt_thread' ); |
| | 47 | + if( $thread.is( '.collapsed_thread' ) ) { |
| | 48 | + // expand! |
| | 49 | + $thread |
| | 50 | + .removeClass( 'collapsed_thread' ) |
| | 51 | + .children() |
| | 52 | + .show() |
| | 53 | + .parent() |
| | 54 | + .children( '.thread-collapsed-preview' ) |
| | 55 | + .hide(); |
| | 56 | + } else { |
| | 57 | + // collapse! |
| | 58 | + // if the thread preview already exists, don't bother recreating it |
| | 59 | + if( $thread.children( '.thread-collapsed-preview' ).size() > 0 ) { |
| | 60 | + $thread |
| | 61 | + .addClass( 'collapsed_thread' ) |
| | 62 | + .children() |
| | 63 | + .hide() |
| | 64 | + .end() |
| | 65 | + .children( '.thread-collapsed-preview' ) |
| | 66 | + .show(); |
| | 67 | + } else { |
| | 68 | + // counter for the number of replies |
| | 69 | + var numReplies = $thread.find( '.lqt_thread' ).size() + 1; |
| | 70 | + // create the thread preview we'll use in the collapsed state |
| | 71 | + var $preview = $( '<div class="thread-collapsed-preview"></div>' ) |
| | 72 | + .addClass( 'lqt-post-wrapper' ) |
| | 73 | + .append( $( $.thread_collapse.templates.collapseControl ) |
| | 74 | + .find( 'a' ) |
| | 75 | + .text( 'Expand' ) |
| | 76 | + .addClass( 'thread-control-collapsed' ) |
| | 77 | + .bind( 'click.thread_collapse', $.thread_collapse.fn.toggleCollapse ) |
| | 78 | + .end() ) |
| | 79 | + .append( $( '<span />' ) |
| | 80 | + .addClass( 'thread-collapsed-num-replies' ) |
| | 81 | + .text( 'Show ' + numReplies + ' more replies' ) ) |
| | 82 | + .append( $.thread_collapse.fn.getPreview( $thread, 0 ) ); |
| | 83 | + // hide the other elements of the thread, and append the collapsed preview |
| | 84 | + $thread |
| | 85 | + .children() |
| | 86 | + .hide() |
| | 87 | + .end() |
| | 88 | + .addClass( 'collapsed_thread' ) |
| | 89 | + .append( $preview ); |
| | 90 | + } |
| | 91 | + } |
| | 92 | + return false; |
| | 93 | + } |
| | 94 | + }, |
| | 95 | + templates: { |
| | 96 | + 'collapseControl': '<span class="thread-collapse-control"> \ |
| | 97 | + <a href="#">Collapse</a> \ |
| | 98 | + </span>' |
| | 99 | + }, |
| | 100 | + defaults: { |
| | 101 | + |
| | 102 | + } |
| | 103 | + }; |
| | 104 | + // FIXME - this should be moved out of here |
| | 105 | + $( document ).ready( function () { |
| | 106 | + $( '.lqt-thread-topmost' ).thread_collapse(); |
| | 107 | + } ); //document ready |
| | 108 | +} )( jQuery ); |
| \ No newline at end of file |
| Property changes on: trunk/extensions/LiquidThreads/jquery/jquery.thread_collapse.js |
| ___________________________________________________________________ |
| Added: svn:eol-style |
| 1 | 109 | + native |
| Index: trunk/extensions/LiquidThreads/jquery/jquery.thread_collapse.css |
| — | — | @@ -0,0 +1,11 @@ |
| | 2 | +.thread-collapse-control a { |
| | 3 | + display: block; |
| | 4 | + outline: none; |
| | 5 | + width: 17px; |
| | 6 | + height: 17px; |
| | 7 | + background: url( ../images/thread_collapse_control_expanded.gif ) 0 0 no-repeat; |
| | 8 | + text-indent: -9999px; |
| | 9 | +} |
| | 10 | +.thread-collapse-control a.thread-control-collapsed { |
| | 11 | + background: url( ../images/thread_collapse_control_collapsed.gif ) 0 0 no-repeat; |
| | 12 | +} |
| \ No newline at end of file |
| Property changes on: trunk/extensions/LiquidThreads/jquery/jquery.thread_collapse.css |
| ___________________________________________________________________ |
| Added: svn:eol-style |
| 1 | 13 | + native |
| Index: trunk/extensions/LiquidThreads/lqt.css |
| — | — | @@ -317,9 +317,11 @@ |
| 318 | 318 | padding: 0.5em 1em; |
| 319 | 319 | padding-bottom: 1em; |
| 320 | 320 | padding-right: 1em; |
| 321 | | - overflow: auto; |
| | 321 | + overflow: hidden; |
| 322 | 322 | border: 0.2em solid silver; |
| | 323 | + background: #e8e8e8; |
| 323 | 324 | border-top: none; |
| | 325 | + position: relative; |
| 324 | 326 | } |
| 325 | 327 | |
| 326 | 328 | .lqt-thread-topmost > .lqt-post-wrapper { |
| — | — | @@ -335,9 +337,9 @@ |
| 336 | 338 | } |
| 337 | 339 | |
| 338 | 340 | .lqt-thread-toolbar { |
| 339 | | - right: 1.5em; |
| | 341 | + right: 0; |
| | 342 | + bottom: 0; |
| 340 | 343 | position: absolute; |
| 341 | | - clear: both; |
| 342 | 344 | } |
| 343 | 345 | |
| 344 | 346 | .lqt-post-sep { |
| — | — | @@ -352,7 +354,7 @@ |
| 353 | 355 | margin-top: 8px; |
| 354 | 356 | padding: 0; |
| 355 | 357 | } |
| 356 | | -.lqt-thread-toolbar .lqt-command > a { |
| | 358 | +.lqt-thread-toolbar .lqt-command a { |
| 357 | 359 | display: block; |
| 358 | 360 | } |
| 359 | 361 | |
| — | — | @@ -363,7 +365,7 @@ |
| 364 | 366 | background-position: left center !important; |
| 365 | 367 | } |
| 366 | 368 | |
| 367 | | -.lqt-thread-toolbar-commands > li.lqt-command { |
| | 369 | +.lqt-thread-toolbar-commands li.lqt-command { |
| 368 | 370 | margin-left: 0.5em; |
| 369 | 371 | margin-right: 0.5em; |
| 370 | 372 | line-height: 2em; |
| — | — | @@ -386,10 +388,8 @@ |
| 387 | 389 | list-style: none; |
| 388 | 390 | padding: 0; |
| 389 | 391 | margin: 0; |
| 390 | | - line-height: 1em; |
| 391 | | - height: 1em; |
| 392 | 392 | } |
| 393 | | -.lqt-thread-toolbar-commands > .lqt-command, |
| | 393 | +.lqt-thread-toolbar-commands .lqt-command, |
| 394 | 394 | .lqt-thread-toolbar-menu { |
| 395 | 395 | float: left; |
| 396 | 396 | } |
| — | — | @@ -432,7 +432,7 @@ |
| 433 | 433 | } |
| 434 | 434 | |
| 435 | 435 | .lqt-newmessages-left { |
| 436 | | - width: 10em ; |
| | 436 | + width: 10em; |
| 437 | 437 | } |
| 438 | 438 | |
| 439 | 439 | .lqt-thread-link-url, |
| — | — | @@ -493,7 +493,9 @@ |
| 494 | 494 | margin-right: 20px; |
| 495 | 495 | } |
| 496 | 496 | /* Float Clearing - If you confused, http://www.positioniseverything.net/easyclearing.html */ |
| 497 | | -.lqt_thread_heading:after |
| | 497 | +.lqt_thread_heading:after, |
| | 498 | +.lqt-thread-toolbar-commands:after, |
| | 499 | +.lqt-post-wrapper:after |
| 498 | 500 | { |
| 499 | 501 | content: "."; |
| 500 | 502 | display: block; |
| — | — | @@ -502,13 +504,19 @@ |
| 503 | 505 | visibility: hidden; |
| 504 | 506 | } |
| 505 | 507 | |
| 506 | | -.lqt_thread_heading |
| | 508 | +.lqt_thread_heading, |
| | 509 | +.lqt-thread-toolbar-commands, |
| | 510 | +.lqt-post-wrapper |
| 507 | 511 | {display: inline-block;} |
| 508 | 512 | |
| 509 | 513 | /* Hides from IE-mac */ |
| 510 | | -* html .lqt_thread_heading |
| | 514 | +* html .lqt_thread_heading, |
| | 515 | +* html .lqt-thread-toolbar-commands, |
| | 516 | +* html .lqt-post-wrapper |
| 511 | 517 | {height: 1%;} |
| 512 | 518 | |
| 513 | | -.lqt_thread_heading |
| | 519 | +.lqt_thread_heading, |
| | 520 | +.lqt-thread-toolbar-commands, |
| | 521 | +.lqt-post-wrapper |
| 514 | 522 | {display: block;} |
| 515 | 523 | /* End hide from IE-mac */ |
| Index: trunk/extensions/LiquidThreads/classes/View.php |
| — | — | @@ -1201,11 +1201,13 @@ |
| 1202 | 1202 | } |
| 1203 | 1203 | |
| 1204 | 1204 | $wgOut->addExtensionStyle( "$wgLiquidThreadsExtensionPath/jquery/jquery-ui-1.7.2.css" ); |
| 1205 | | - |
| 1206 | 1205 | $wgOut->addScriptFile( "$wgLiquidThreadsExtensionPath/jquery/jquery.autogrow.js" ); |
| 1207 | 1206 | |
| 1208 | 1207 | $wgOut->addScriptFile( "$wgLiquidThreadsExtensionPath/lqt.js" ); |
| 1209 | 1208 | $wgOut->addScriptFile( "$wgLiquidThreadsExtensionPath/js/lqt.toolbar.js" ); |
| | 1209 | + $wgOut->addScriptFile( "$wgLiquidThreadsExtensionPath/jquery/jquery.thread_collapse.js" ); |
| | 1210 | + $wgOut->addExtensionStyle( "$wgLiquidThreadsExtensionPath/jquery/jquery.thread_collapse.css" ); |
| | 1211 | + |
| 1210 | 1212 | $wgOut->addExtensionStyle( "$wgLiquidThreadsExtensionPath/lqt.css?{$wgStyleVersion}" ); |
| 1211 | 1213 | |
| 1212 | 1214 | self::$stylesAndScriptsDone = true; |
| — | — | @@ -1316,7 +1318,6 @@ |
| 1317 | 1319 | $html .= implode( ' ', $headerParts ); |
| 1318 | 1320 | |
| 1319 | 1321 | $html = Xml::tags( 'ul', array( 'class' => 'lqt-thread-toolbar-commands' ), $html ); |
| 1320 | | - $html .= Xml::tags( 'div', array( 'style' => 'clear: both; height: 0;' ), ' ' ); |
| 1321 | 1322 | |
| 1322 | 1323 | $html = Xml::tags( 'div', array( 'class' => 'lqt-thread-toolbar' ), $html ) . |
| 1323 | 1324 | $menuHTML; |
| — | — | @@ -1421,9 +1422,6 @@ |
| 1422 | 1423 | $html .= $this->showPostBody( $post, $oldid ); |
| 1423 | 1424 | } |
| 1424 | 1425 | $html .= Xml::closeElement( 'div' ); |
| 1425 | | - $html .= Xml::tags( 'div', array( 'style' => 'clear: both; height: 0' ), |
| 1426 | | - ' ' ); |
| 1427 | | - |
| 1428 | 1426 | wfRunHooks( 'LiquidThreadsShowPostThreadBody', |
| 1429 | 1427 | array( $thread, $this->request, &$html ) ); |
| 1430 | 1428 | |
| — | — | @@ -1752,7 +1750,6 @@ |
| 1753 | 1751 | } |
| 1754 | 1752 | |
| 1755 | 1753 | $div = Xml::openElement( 'div', array( 'class' => $repliesClass ) ); |
| 1756 | | - $sep = Xml::tags( 'div', array( 'class' => 'lqt-post-sep' ), ' ' ); |
| 1757 | 1754 | |
| 1758 | 1755 | $subthreadCount = count( $thread->subthreads() ); |
| 1759 | 1756 | $i = 0; |
| — | — | @@ -1785,7 +1782,7 @@ |
| 1786 | 1783 | if ( $showCount == 1 ) { |
| 1787 | 1784 | // There's a post sep before each reply group to |
| 1788 | 1785 | // separate from the parent thread. |
| 1789 | | - $this->output->addHTML( $sep . $div ); |
| | 1786 | + $this->output->addHTML( $div ); |
| 1790 | 1787 | } |
| 1791 | 1788 | |
| 1792 | 1789 | $this->showThread( $st, $i, $subthreadCount, $cascadeOptions ); |