skins/common/preview.js

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