preview.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. /**
  2. * Live preview script for MediaWiki
  3. */
  4. (function( $ ) {
  5. window.doLivePreview = function( e ) {
  6. e.preventDefault();
  7. $( mw ).trigger( 'LivePreviewPrepare' );
  8. var postData = $('#editform').formToArray();
  9. postData.push( { 'name' : 'wpPreview', 'value' : '1' } );
  10. // Hide active diff, used templates, old preview if shown
  11. var copyElements = ['#wikiPreview', '.templatesUsed', '.hiddencats',
  12. '#catlinks'];
  13. var copySelector = copyElements.join(',');
  14. $.each( copyElements, function(k,v) { $(v).fadeOut('fast'); } );
  15. // Display a loading graphic
  16. var loadSpinner = $('<div class="mw-ajax-loader"/>');
  17. $('#wikiPreview').before( loadSpinner );
  18. var page = $('<div/>');
  19. var target = $('#editform').attr('action');
  20. if ( !target ) {
  21. target = window.location.href;
  22. }
  23. page.load( target + ' ' + copySelector, postData,
  24. function() {
  25. for( var i=0; i<copyElements.length; ++i) {
  26. // For all the specified elements, find the elements in the loaded page
  27. // and the real page, empty the element in the real page, and fill it
  28. // with the content of the loaded page
  29. var copyContent = page.find( copyElements[i] ).contents();
  30. $(copyElements[i]).empty().append( copyContent );
  31. var newClasses = page.find( copyElements[i] ).prop('class');
  32. $(copyElements[i]).prop( 'class', newClasses );
  33. }
  34. $.each( copyElements, function(k,v) {
  35. // Don't belligerently show elements that are supposed to be hidden
  36. $(v).fadeIn( 'fast', function() { $(this).css('display', ''); } );
  37. } );
  38. loadSpinner.remove();
  39. $( mw ).trigger( 'LivePreviewDone', [copyElements] );
  40. } );
  41. };
  42. // Shamelessly stolen from the jQuery form plugin, which is licensed under the GPL.
  43. // http://jquery.malsup.com/form/#download
  44. $.fn.formToArray = function() {
  45. var a = [];
  46. if (this.length == 0) return a;
  47. var form = this[0];
  48. var els = form.elements;
  49. if (!els) return a;
  50. for(var i=0, max=els.length; i < max; i++) {
  51. var el = els[i];
  52. var n = el.name;
  53. if (!n) continue;
  54. var v = $.fieldValue(el, true);
  55. if (v && v.constructor == Array) {
  56. for(var j=0, jmax=v.length; j < jmax; j++)
  57. a.push({name: n, value: v[j]});
  58. }
  59. else if (v !== null && typeof v != 'undefined')
  60. a.push({name: n, value: v});
  61. }
  62. if (form.clk) {
  63. // input type=='image' are not found in elements array! handle it here
  64. var $input = $(form.clk), input = $input[0], n = input.name;
  65. if (n && !input.disabled && input.type == 'image') {
  66. a.push({name: n, value: $input.val()});
  67. a.push({name: n+'.x', value: form.clk_x}, {name: n+'.y', value: form.clk_y});
  68. }
  69. }
  70. return a;
  71. };
  72. /**
  73. * Returns the value of the field element.
  74. */
  75. $.fieldValue = function(el, successful) {
  76. var n = el.name, t = el.type, tag = el.tagName.toLowerCase();
  77. if (typeof successful == 'undefined') successful = true;
  78. if (successful && (!n || el.disabled || t == 'reset' || t == 'button' ||
  79. (t == 'checkbox' || t == 'radio') && !el.checked ||
  80. (t == 'submit' || t == 'image') && el.form && el.form.clk != el ||
  81. tag == 'select' && el.selectedIndex == -1))
  82. return null;
  83. if (tag == 'select') {
  84. var index = el.selectedIndex;
  85. if (index < 0) return null;
  86. var a = [], ops = el.options;
  87. var one = (t == 'select-one');
  88. var max = (one ? index+1 : ops.length);
  89. for(var i=(one ? index : 0); i < max; i++) {
  90. var op = ops[i];
  91. if (op.selected) {
  92. var v = op.value;
  93. if (!v) // extra pain for IE...
  94. v = (op.attributes && op.attributes['value'] &&
  95. !(op.attributes['value'].specified))
  96. ? op.text : op.value;
  97. if (one) return v;
  98. a.push(v);
  99. }
  100. }
  101. return a;
  102. }
  103. return el.value;
  104. };
  105. $(document).ready( function() {
  106. $('#wpPreview').click( doLivePreview );
  107. } );
  108. }) ( jQuery );