| Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.toc.js |
| — | — | @@ -2,12 +2,6 @@ |
| 3 | 3 | ( function( $ ) { $.wikiEditor.modules.toc = { |
| 4 | 4 | |
| 5 | 5 | /** |
| 6 | | - * API accessible functions |
| 7 | | - */ |
| 8 | | -api: { |
| 9 | | - // |
| 10 | | -}, |
| 11 | | -/** |
| 12 | 6 | * Default width of table of contents |
| 13 | 7 | */ |
| 14 | 8 | defaultWidth: '166px', |
| — | — | @@ -17,6 +11,38 @@ |
| 18 | 12 | */ |
| 19 | 13 | minimumWidth: '70px', |
| 20 | 14 | /** |
| | 15 | + * API accessible functions |
| | 16 | + */ |
| | 17 | +api: { |
| | 18 | + // |
| | 19 | +}, |
| | 20 | +/** |
| | 21 | + * Event handlers |
| | 22 | + */ |
| | 23 | +evt: { |
| | 24 | + ready: function( context, event ) { |
| | 25 | + // Add the TOC to the document |
| | 26 | + $.wikiEditor.modules.toc.fn.build( context ); |
| | 27 | + context.$content.parent() |
| | 28 | + .delayedBind( 250, 'mouseup scrollToTop keyup change', |
| | 29 | + function() { |
| | 30 | + $(this).eachAsync( { |
| | 31 | + bulk: 0, |
| | 32 | + loop: function() { |
| | 33 | + $.wikiEditor.modules.toc.fn.build( context ); |
| | 34 | + $.wikiEditor.modules.toc.fn.update( context ); |
| | 35 | + } |
| | 36 | + } ); |
| | 37 | + } |
| | 38 | + ) |
| | 39 | + .blur( function( event ) { |
| | 40 | + var context = event.data.context; |
| | 41 | + context.$textarea.delayedBindCancel( 250, 'mouseup scrollToTop keyup change' ); |
| | 42 | + $.wikiEditor.modules.toc.fn.unhighlight( context ); |
| | 43 | + }); |
| | 44 | + } |
| | 45 | +}, |
| | 46 | +/** |
| 21 | 47 | * Internally used functions |
| 22 | 48 | */ |
| 23 | 49 | fn: { |
| — | — | @@ -45,27 +71,6 @@ |
| 46 | 72 | .css( 'marginRight', "-" + $.wikiEditor.modules.toc.defaultWidth ) |
| 47 | 73 | .children() |
| 48 | 74 | .css( 'marginRight', $.wikiEditor.modules.toc.defaultWidth ); |
| 49 | | - |
| 50 | | - // Add the TOC to the document |
| 51 | | - $.wikiEditor.modules.toc.fn.build( context, config ); |
| 52 | | - context.$content.parent() |
| 53 | | - .delayedBind( 250, 'mouseup scrollToTop keyup change', |
| 54 | | - function() { |
| 55 | | - $(this).eachAsync( { |
| 56 | | - bulk: 0, |
| 57 | | - loop: function() { |
| 58 | | - $.wikiEditor.modules.toc.fn.build( context ); |
| 59 | | - $.wikiEditor.modules.toc.fn.update( context ); |
| 60 | | - } |
| 61 | | - } ); |
| 62 | | - } |
| 63 | | - ) |
| 64 | | - .blur( function( event ) { |
| 65 | | - var context = event.data.context; |
| 66 | | - context.$textarea.delayedBindCancel( 250, 'mouseup scrollToTop keyup change' ); |
| 67 | | - $.wikiEditor.modules.toc.fn.unhighlight( context ); |
| 68 | | - }); |
| 69 | | - |
| 70 | 75 | }, |
| 71 | 76 | |
| 72 | 77 | unhighlight: function( context ) { |
| Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.html |
| — | — | @@ -1,5 +1,19 @@ |
| 2 | 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 3 | 3 | <html> |
| 4 | | -<head><title>WikiEditor</title></head> |
| 5 | | -<body style="margin:0;padding:0;width:100%;height:100%;white-space:pre-wrap;font-family:monospace"></body> |
| | 4 | +<head> |
| | 5 | + <title>WikiEditor</title> |
| | 6 | + <script src="../../../../js2/js2stopgap.js" type="text/javascript"></script> |
| | 7 | + <script type="text/javascript"> |
| | 8 | + function get( name ) { |
| | 9 | + var v = ( new RegExp( '[\\?&]' + name.replace( /[\[]/, '\\\[' ).replace( /[\]]/, '\\\]' ) + '=([^&#]*)' ) ) |
| | 10 | + .exec( window.location.href ); |
| | 11 | + return v == null ? '' : v[1]; |
| | 12 | + } |
| | 13 | + var context = window.parent.jQuery.wikiEditor.instances[get( 'instance' )].data( 'wikiEditor-context' ); |
| | 14 | + $j( document ).bind( "keydown keypress keyup mousedown mouseup cut paste", function( event ) { |
| | 15 | + context.fn.trigger( "change", event ) |
| | 16 | + } ); |
| | 17 | + </script> |
| | 18 | +</head> |
| | 19 | +<body style="margin:0;padding:0;width:100%;height:100%;white-space:pre-wrap;font-family:monospace;font-size:9.5pt;"></body> |
| 6 | 20 | </html> |
| \ No newline at end of file |
| Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.js |
| — | — | @@ -223,6 +223,7 @@ |
| 224 | 224 | |
| 225 | 225 | context.evt = { |
| 226 | 226 | 'change': function( event ) { |
| | 227 | + alert( event.type ); |
| 227 | 228 | // Event filtering |
| 228 | 229 | switch ( event.type ) { |
| 229 | 230 | case 'keypress': |
| — | — | @@ -324,21 +325,14 @@ |
| 325 | 326 | * Set up the magic iframe |
| 326 | 327 | */ |
| 327 | 328 | 'setup': function() { |
| 328 | | - // We need to properly escape any HTML entities like &, < and > so they end up as visible |
| 329 | | - // characters rather than actual HTML tags in the code editor container. |
| 330 | | - var contentHTML = $( '<div />' ).text( context.$textarea.val() ).html(); |
| 331 | | - |
| 332 | | - // Setup the iframe with a basic document |
| 333 | | - context.$iframe[0].contentWindow.document.open(); |
| 334 | | - context.$iframe[0].contentWindow.document.write( |
| 335 | | - // FIXME: Break this line |
| 336 | | - '<html><head><title>wikiEditor</title><script>var context = window.parent.jQuery.wikiEditor.instances[' + context.instance + '].data( "wikiEditor-context" ); window.parent.jQuery( document ).bind( "keydown keypress keyup mousedown mouseup cut paste", function( event ) { context.fn.trigger( "change", event ) } );</script></head><body style="margin:0;padding:0;width:100%;height:100%;white-space:pre-wrap;font-family:monospace">' + contentHTML + '</body></html>' |
| 337 | | - ); |
| 338 | | - context.$iframe[0].contentWindow.document.close(); |
| 339 | 329 | // Turn the document's design mode on |
| 340 | 330 | context.$iframe[0].contentWindow.document.designMode = 'on'; |
| 341 | 331 | // Get a reference to the content area of the iframe |
| 342 | 332 | context.$content = $( context.$iframe[0].contentWindow.document.body ); |
| | 333 | + // We need to properly escape any HTML entities like &, < and > so they end up as visible |
| | 334 | + // characters rather than actual HTML tags in the code editor container. |
| | 335 | + context.$content.html( $( '<div />' ).text( context.$textarea.val() ).html() ); |
| | 336 | + // Reflect direction of parent frame into child |
| 343 | 337 | if ( $( 'body' ).is( '.rtl' ) ) { |
| 344 | 338 | context.$content.addClass( 'rtl' ).attr( 'dir', 'rtl' ); |
| 345 | 339 | } |
| — | — | @@ -349,6 +343,8 @@ |
| 350 | 344 | context.$textarea.attr( 'disabled', true ); |
| 351 | 345 | context.$textarea.hide(); |
| 352 | 346 | context.$iframe.show(); |
| | 347 | + // Let modules know we're ready to start working with the content |
| | 348 | + context.fn.trigger( 'ready' ); |
| 353 | 349 | }, |
| 354 | 350 | /** |
| 355 | 351 | * Checks whether the magic iframe is properly set up |
| — | — | @@ -555,26 +551,25 @@ |
| 556 | 552 | /* Magic IFRAME Construction */ |
| 557 | 553 | |
| 558 | 554 | // Create an iframe in place of the text area |
| | 555 | + var ts = ( new Date() ).getTime(); |
| | 556 | + var instance = context.instance; |
| 559 | 557 | context.$iframe = $( '<iframe></iframe>' ) |
| 560 | | - .attr( 'frameborder', 0 ) |
| | 558 | + .attr( { |
| | 559 | + 'frameborder': 0, |
| | 560 | + 'src': wgScriptPath + '/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.html?' + |
| | 561 | + 'instance=' + context.instance + '&ts=' + ts |
| | 562 | + } ) |
| 561 | 563 | .css( { |
| 562 | 564 | 'backgroundColor': 'white', |
| 563 | 565 | 'width': '100%', |
| 564 | 566 | 'height': context.$textarea.height(), |
| 565 | 567 | 'display': 'none', |
| 566 | 568 | 'overflow-y': 'scroll', |
| 567 | | - 'overflow-x': 'hidden', |
| 568 | | - }) |
| 569 | | - .insertAfter( context.$textarea ); |
| | 569 | + 'overflow-x': 'hidden' |
| | 570 | + } ) |
| | 571 | + .insertAfter( context.$textarea ) |
| | 572 | + .load( context.fn.setup ); |
| 570 | 573 | |
| 571 | | - /* |
| 572 | | - * For whatever strange reason, this code needs to be within a timeout or it doesn't work - it seems to be that |
| 573 | | - * the DOM manipulation to add the iframe happens asynchronously and this code that depends on it actually being |
| 574 | | - * finished doesn't function on the right reference. |
| 575 | | - * FIXME: The fact that this calls a function that's defined below is ugly |
| 576 | | - */ |
| 577 | | - setTimeout( function() { context.fn.setup(); }, 1 ); |
| 578 | | - |
| 579 | 574 | // Attach a submit handler to the form so that when the form is submitted the content of the iframe gets decoded and |
| 580 | 575 | // copied over to the textarea |
| 581 | 576 | context.$textarea.closest( 'form' ).submit( function() { |