resources/src/mediawiki/htmlform/hide-if.js

   1 /*
   2  * HTMLForm enhancements:
   3  * Set up 'hide-if' behaviors for form fields that have them.
   4  */
   5 ( function ( mw, $ ) {
   6
   7         /*jshint -W024*/
   8
   9         /**
  10          * Helper function for hide-if to find the nearby form field.
  11          *
  12          * Find the closest match for the given name, "closest" being the minimum
  13          * level of parents to go to find a form field matching the given name or
  14          * ending in array keys matching the given name (e.g. "baz" matches
  15          * "foo[bar][baz]").
  16          *
  17          * @ignore
  18          * @private
  19          * @param {jQuery} $el
  20          * @param {string} name
  21          * @return {jQuery|OO.ui.Widget|null}
  22          */
  23         function hideIfGetField( $el, name ) {
  24                 var $found, $p, $widget,
  25                         suffix = name.replace( /^([^\[]+)/, '[$1]' );
  26
  27                 function nameFilter() {
  28                         return this.name === name ||
  29                                 ( this.name === ( 'wp' + name ) ) ||
  30                                 this.name.slice( -suffix.length ) === suffix;
  31                 }
  32
  33                 for ( $p = $el.parent(); $p.length > 0; $p = $p.parent() ) {
  34                         $found = $p.find( '[name]' ).filter( nameFilter );
  35                         if ( $found.length ) {
  36                                 $widget = $found.closest( '.oo-ui-widget[data-ooui]' );
  37                                 if ( $widget.length ) {
  38                                         return OO.ui.Widget.static.infuse( $widget );
  39                                 }
  40                                 return $found;
  41                         }
  42                 }
  43                 return null;
  44         }
  45
  46         /**
  47          * Helper function for hide-if to return a test function and list of
  48          * dependent fields for a hide-if specification.
  49          *
  50          * @ignore
  51          * @private
  52          * @param {jQuery} $el
  53          * @param {Array} spec
  54          * @return {Array}
  55          * @return {Array} return.0 Dependent fields, array of jQuery objects or OO.ui.Widgets
  56          * @return {Function} return.1 Test function
  57          */
  58         function hideIfParse( $el, spec ) {
  59                 var op, i, l, v, field, $field, fields, func, funcs, getVal;
  60
  61                 op = spec[ 0 ];
  62                 l = spec.length;
  63                 switch ( op ) {
  64                         case 'AND':
  65                         case 'OR':
  66                         case 'NAND':
  67                         case 'NOR':
  68                                 funcs = [];
  69                                 fields = [];
  70                                 for ( i = 1; i < l; i++ ) {
  71                                         if ( !$.isArray( spec[ i ] ) ) {
  72                                                 throw new Error( op + ' parameters must be arrays' );
  73                                         }
  74                                         v = hideIfParse( $el, spec[ i ] );
  75                                         fields = fields.concat( v[ 0 ] );
  76                                         funcs.push( v[ 1 ] );
  77                                 }
  78
  79                                 l = funcs.length;
  80                                 switch ( op ) {
  81                                         case 'AND':
  82                                                 func = function () {
  83                                                         var i;
  84                                                         for ( i = 0; i < l; i++ ) {
  85                                                                 if ( !funcs[ i ]() ) {
  86                                                                         return false;
  87                                                                 }
  88                                                         }
  89                                                         return true;
  90                                                 };
  91                                                 break;
  92
  93                                         case 'OR':
  94                                                 func = function () {
  95                                                         var i;
  96                                                         for ( i = 0; i < l; i++ ) {
  97                                                                 if ( funcs[ i ]() ) {
  98                                                                         return true;
  99                                                                 }
 100                                                         }
 101                                                         return false;
 102                                                 };
 103                                                 break;
 104
 105                                         case 'NAND':
 106                                                 func = function () {
 107                                                         var i;
 108                                                         for ( i = 0; i < l; i++ ) {
 109                                                                 if ( !funcs[ i ]() ) {
 110                                                                         return true;
 111                                                                 }
 112                                                         }
 113                                                         return false;
 114                                                 };
 115                                                 break;
 116
 117                                         case 'NOR':
 118                                                 func = function () {
 119                                                         var i;
 120                                                         for ( i = 0; i < l; i++ ) {
 121                                                                 if ( funcs[ i ]() ) {
 122                                                                         return false;
 123                                                                 }
 124                                                         }
 125                                                         return true;
 126                                                 };
 127                                                 break;
 128                                 }
 129
 130                                 return [ fields, func ];
 131
 132                         case 'NOT':
 133                                 if ( l !== 2 ) {
 134                                         throw new Error( 'NOT takes exactly one parameter' );
 135                                 }
 136                                 if ( !$.isArray( spec[ 1 ] ) ) {
 137                                         throw new Error( 'NOT parameters must be arrays' );
 138                                 }
 139                                 v = hideIfParse( $el, spec[ 1 ] );
 140                                 fields = v[ 0 ];
 141                                 func = v[ 1 ];
 142                                 return [ fields, function () {
 143                                         return !func();
 144                                 } ];
 145
 146                         case '===':
 147                         case '!==':
 148                                 if ( l !== 3 ) {
 149                                         throw new Error( op + ' takes exactly two parameters' );
 150                                 }
 151                                 field = hideIfGetField( $el, spec[ 1 ] );
 152                                 if ( !field ) {
 153                                         return [ [], function () {
 154                                                 return false;
 155                                         } ];
 156                                 }
 157                                 v = spec[ 2 ];
 158
 159                                 if ( field instanceof OO.ui.Widget ) {
 160                                         if ( field.supports( 'isSelected' ) ) {
 161                                                 getVal = function () {
 162                                                         var selected = field.isSelected();
 163                                                         return selected ? field.getValue() : '';
 164                                                 };
 165                                         } else {
 166                                                 getVal = function () {
 167                                                         return field.getValue();
 168                                                 };
 169                                         }
 170                                 } else {
 171                                         $field = $( field );
 172                                         if ( $field.prop( 'type' ) === 'radio' || $field.prop( 'type' ) === 'checkbox' ) {
 173                                                 getVal = function () {
 174                                                         var $selected = $field.filter( ':checked' );
 175                                                         return $selected.length ? $selected.val() : '';
 176                                                 };
 177                                         } else {
 178                                                 getVal = function () {
 179                                                         return $field.val();
 180                                                 };
 181                                         }
 182                                 }
 183
 184                                 switch ( op ) {
 185                                         case '===':
 186                                                 func = function () {
 187                                                         return getVal() === v;
 188                                                 };
 189                                                 break;
 190                                         case '!==':
 191                                                 func = function () {
 192                                                         return getVal() !== v;
 193                                                 };
 194                                                 break;
 195                                 }
 196
 197                                 return [ [ field ], func ];
 198
 199                         default:
 200                                 throw new Error( 'Unrecognized operation \'' + op + '\'' );
 201                 }
 202         }
 203
 204         mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
 205                 $root.find( '.mw-htmlform-hide-if' ).each( function () {
 206                         var v, i, fields, test, func, spec, self, modules, data,extraModules,
 207                                 $el = $( this );
 208
 209                         modules = [];
 210                         if ( $el.is( '[data-ooui]' ) ) {
 211                                 modules.push( 'mediawiki.htmlform.ooui' );
 212                                 data = $el.data( 'mw-modules' );
 213                                 if ( data ) {
 214                                         // We can trust this value, 'data-mw-*' attributes are banned from user content in Sanitizer
 215                                         extraModules = data.split( ',' );
 216                                         modules.push.apply( modules, extraModules );
 217                                 }
 218                         }
 219
 220                         mw.loader.using( modules ).done( function () {
 221                                 if ( $el.is( '[data-ooui]' ) ) {
 222                                         // self should be a FieldLayout that mixes in mw.htmlform.Element
 223                                         self = OO.ui.FieldLayout.static.infuse( $el );
 224                                         spec = self.hideIf;
 225                                         // The original element has been replaced with infused one
 226                                         $el = self.$element;
 227                                 } else {
 228                                         self = $el;
 229                                         spec = $el.data( 'hideIf' );
 230                                 }
 231
 232                                 if ( !spec ) {
 233                                         return;
 234                                 }
 235
 236                                 v = hideIfParse( $el, spec );
 237                                 fields = v[ 0 ];
 238                                 test = v[ 1 ];
 239                                 // The .toggle() method works mostly the same for jQuery objects and OO.ui.Widget
 240                                 func = function () {
 241                                         self.toggle( !test() );
 242                                 };
 243                                 for ( i = 0; i < fields.length; i++ ) {
 244                                         // The .on() method works mostly the same for jQuery objects and OO.ui.Widget
 245                                         fields[ i ].on( 'change', func );
 246                                 }
 247                                 func();
 248                         } );
 249                 } );
 250         } );
 251
 252 }( mediaWiki, jQuery ) );