resources/src/mediawiki.htmlform/cloner.js

   1 /*
   2  * HTMLForm enhancements:
   3  * Add/remove cloner clones without having to resubmit the form.
   4  */
   5 ( function () {
   6
   7         var cloneCounter = 0;
   8
   9         /**
  10          * Appends a new row with fields to the cloner.
  11          *
  12          * @ignore
  13          * @param {jQuery} $createButton
  14          */
  15         function appendToCloner( $createButton ) {
  16                 var $li,
  17                         $ul = $createButton.prev( 'ul.mw-htmlform-cloner-ul' ),
  18                         html = $ul.data( 'template' ).replace(
  19                                 new RegExp( mw.RegExp.escape( $ul.data( 'uniqueId' ) ), 'g' ),
  20                                 'clone' + ( ++cloneCounter )
  21                         );
  22
  23                 $li = $( '<li>' )
  24                         .addClass( 'mw-htmlform-cloner-li' )
  25                         .html( html )
  26                         .appendTo( $ul );
  27
  28                 mw.hook( 'htmlform.enhance' ).fire( $li );
  29         }
  30
  31         mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
  32                 var $deleteElement = $root.find( '.mw-htmlform-cloner-delete-button' ),
  33                         $createElement = $root.find( '.mw-htmlform-cloner-create-button' ),
  34                         createButton;
  35
  36                 $deleteElement.each( function () {
  37                         var $element = $( this ),
  38                                 deleteButton;
  39
  40                         if ( $element.hasClass( 'oo-ui-widget' ) ) {
  41                                 deleteButton = OO.ui.infuse( $element );
  42                                 deleteButton.on( 'click', function () {
  43                                         deleteButton.$element.closest( 'li.mw-htmlform-cloner-li' ).remove();
  44                                 } );
  45                         } else {
  46                                 $element.filter( ':input' ).on( 'click', function ( e ) {
  47                                         e.preventDefault();
  48                                         $( this ).closest( 'li.mw-htmlform-cloner-li' ).remove();
  49                                 } );
  50                         }
  51                 } );
  52
  53                 if ( $createElement.hasClass( 'oo-ui-widget' ) ) {
  54                         createButton = OO.ui.infuse( $createElement );
  55                         createButton.on( 'click', function () {
  56                                 appendToCloner( createButton.$element );
  57                         } );
  58                 } else {
  59                         $createElement.filter( ':input' ).on( 'click', function ( e ) {
  60                                 e.preventDefault();
  61
  62                                 appendToCloner( $( this ) );
  63                         } );
  64                 }
  65         } );
  66
  67 }() );