resources/src/mediawiki.htmlform/cloner.js

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