skins/common/preview.js

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