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                         // eslint-disable-next-line no-jquery/no-class-state
  41                         if ( $element.hasClass( 'oo-ui-widget' ) ) {
  42                                 deleteButton = OO.ui.infuse( $element );
  43                                 deleteButton.on( 'click', function () {
  44                                         deleteButton.$element.closest( 'li.mw-htmlform-cloner-li' ).remove();
  45                                 } );
  46                         } else {
  47                                 // eslint-disable-next-line no-jquery/no-sizzle
  48                                 $element.filter( ':input' ).on( 'click', function ( e ) {
  49                                         e.preventDefault();
  50                                         $( this ).closest( 'li.mw-htmlform-cloner-li' ).remove();
  51                                 } );
  52                         }
  53                 } );
  54
  55                 // eslint-disable-next-line no-jquery/no-class-state
  56                 if ( $createElement.hasClass( 'oo-ui-widget' ) ) {
  57                         createButton = OO.ui.infuse( $createElement );
  58                         createButton.on( 'click', function () {
  59                                 appendToCloner( createButton.$element );
  60                         } );
  61                 } else {
  62                         // eslint-disable-next-line no-jquery/no-sizzle
  63                         $createElement.filter( ':input' ).on( 'click', function ( e ) {
  64                                 e.preventDefault();
  65
  66                                 appendToCloner( $( this ) );
  67                         } );
  68                 }
  69         } );
  70
  71 }() );