[Summary view] [Print] [Text view]

   1  /* exported add_option, show_options, hide, fixHelper */
   2  /* jshint scripturl: true */
   3  /* global XProfileAdmin, ajaxurl */
   4  
   5  /**
   6   * Add option for the forWhat type.
   7   *
   8   * @param {string} forWhat Value of the field to show options for
   9   */
  10  function add_option(forWhat) {
  11      var holder       = document.getElementById(forWhat + '_more'),
  12          theId        = document.getElementById(forWhat + '_option_number').value,
  13          newDiv       = document.createElement( 'div' ),
  14          grabber      = document.createElement( 'span' ),
  15          newOption    = document.createElement( 'input' ),
  16          label        = document.createElement( 'label' ),
  17          isDefault    = document.createElement( 'input' ),
  18          txt1         = document.createTextNode( XProfileAdmin.text.defaultValue ),
  19          toDeleteText = document.createTextNode( XProfileAdmin.text.deleteLabel ),
  20          toDeleteWrap = document.createElement( 'div' ),
  21          toDelete     = document.createElement( 'a' );
  22  
  23      newDiv.setAttribute('id', forWhat + '_div' + theId);
  24      newDiv.setAttribute('class', 'bp-option sortable');
  25  
  26      grabber.setAttribute( 'class', 'bp-option-icon grabber');
  27  
  28      newOption.setAttribute( 'type', 'text' );
  29      newOption.setAttribute( 'name', forWhat + '_option[' + theId + ']' );
  30      newOption.setAttribute( 'id', forWhat + '_option' + theId );
  31  
  32      if ( forWhat === 'checkbox' || forWhat === 'multiselectbox' ) {
  33          isDefault.setAttribute( 'type', 'checkbox' );
  34          isDefault.setAttribute( 'name', 'isDefault_' + forWhat + '_option[' + theId + ']' );
  35      } else {
  36          isDefault.setAttribute( 'type', 'radio' );
  37          isDefault.setAttribute( 'name', 'isDefault_' + forWhat + '_option' );
  38      }
  39  
  40      isDefault.setAttribute( 'value', theId );
  41  
  42      toDelete.setAttribute( 'href', 'javascript:hide("' + forWhat + '_div' + theId + '")' );
  43      toDelete.setAttribute( 'class', 'delete' );
  44      toDelete.appendChild( toDeleteText );
  45  
  46      toDeleteWrap.setAttribute( 'class', 'delete-button' );
  47      toDeleteWrap.appendChild( toDelete );
  48  
  49      label.appendChild( document.createTextNode( ' ' ) );
  50      label.appendChild( isDefault );
  51      label.appendChild( document.createTextNode( ' ' ) );
  52      label.appendChild( txt1 );
  53      label.appendChild( document.createTextNode( ' ' ) );
  54  
  55      newDiv.appendChild( grabber );
  56      newDiv.appendChild( document.createTextNode( ' ' ) );
  57      newDiv.appendChild( newOption );
  58      newDiv.appendChild( label );
  59      newDiv.appendChild( toDeleteWrap );
  60      holder.appendChild( newDiv );
  61  
  62      // Re-initialize the sortable ui.
  63      enableSortableFieldOptions( forWhat );
  64  
  65      // Set focus on newly created element.
  66      document.getElementById(forWhat + '_option' + theId).focus();
  67  
  68      theId++;
  69  
  70      document.getElementById(forWhat + '_option_number').value = theId;
  71  }
  72  
  73  /**
  74   * Hide all "options" sections, and show the options section for the forWhat type.
  75   *
  76   * @param {string} forWhat Value of the field to show options for
  77   */
  78  function show_options( forWhat ) {
  79      var do_autolink;
  80  
  81      for ( var i = 0; i < XProfileAdmin.do_settings_section_field_types.length; i++ ) {
  82          document.getElementById( XProfileAdmin.do_settings_section_field_types[i] ).style.display = 'none';
  83      }
  84  
  85      if ( XProfileAdmin.do_settings_section_field_types.indexOf( forWhat ) >= 0 ) {
  86          document.getElementById( forWhat ).style.display = '';
  87          do_autolink = 'on';
  88      } else {
  89          jQuery( '#do-autolink' ).val( '' );
  90          do_autolink = '';
  91      }
  92  
  93      // Only overwrite the do_autolink setting if no setting is saved in the database.
  94      if ( '' === XProfileAdmin.do_autolink ) {
  95          jQuery( '#do-autolink' ).val( do_autolink );
  96      }
  97  
  98      // Show/hides metaboxes according to selected field type supports.
  99      jQuery( '#field-type-visibiliy-metabox, #field-type-required-metabox, #field-type-autolink-metabox, #field-type-member-types, #field-signup-position-metabox' ).show();
 100      if ( -1 !== XProfileAdmin.hide_required_metabox.indexOf( forWhat ) ) {
 101          jQuery( '#field-type-required-metabox' ).hide();
 102      }
 103  
 104      if ( -1 !== XProfileAdmin.hide_signup_position_metabox.indexOf( forWhat ) ) {
 105          jQuery( '#field-signup-position-metabox' ).hide();
 106      }
 107  
 108      if ( -1 !== XProfileAdmin.hide_allow_custom_visibility_metabox.indexOf( forWhat ) ) {
 109          jQuery( '#field-type-visibiliy-metabox' ).hide();
 110      }
 111  
 112      if ( -1 !== XProfileAdmin.hide_do_autolink_metabox.indexOf( forWhat ) ) {
 113          jQuery( '#field-type-autolink-metabox' ).hide();
 114      }
 115  
 116      if ( -1 !== XProfileAdmin.hide_member_types_metabox.indexOf( forWhat ) ) {
 117          jQuery( '#field-type-member-types' ).hide();
 118      }
 119  
 120      jQuery( document ).trigger( 'bp-xprofile-show-options', forWhat );
 121  }
 122  
 123  function hide( id ) {
 124      if ( !document.getElementById( id ) ) {
 125          return false;
 126      }
 127  
 128      document.getElementById( id ).style.display = 'none';
 129      // The field id is [fieldtype]option[iterator] and not [fieldtype]div[iterator].
 130      var field_id = id.replace( 'div', 'option' );
 131      document.getElementById( field_id ).value = '';
 132  }
 133  
 134  /**
 135   * @summary Toggles "no member type" notice.
 136   *
 137   * @since 2.4.0
 138   */
 139  function toggle_no_member_type_notice() {
 140      var $member_type_checkboxes = jQuery( 'input.member-type-selector' );
 141  
 142      // No checkboxes? Nothing to do.
 143      if ( ! $member_type_checkboxes.length ) {
 144          return;
 145      }
 146  
 147      var has_checked = false;
 148      $member_type_checkboxes.each( function() {
 149          if ( jQuery( this ).is( ':checked' ) ) {
 150              has_checked = true;
 151              return false;
 152          }
 153      } );
 154  
 155      if ( has_checked ) {
 156          jQuery( 'p.member-type-none-notice' ).addClass( 'hide' );
 157      } else {
 158          jQuery( 'p.member-type-none-notice' ).removeClass( 'hide' );
 159      }
 160  }
 161  
 162  var fixHelper = function(e, ui) {
 163      ui.children().each(function() {
 164          jQuery(this).width( jQuery(this).width() );
 165      });
 166      return ui;
 167  };
 168  
 169  function enableSortableFieldOptions() {
 170      jQuery( '.bp-options-box' ).sortable( {
 171          cursor: 'move',
 172          items: 'div.sortable',
 173          tolerance: 'intersect',
 174          axis: 'y'
 175      });
 176  
 177      jQuery( '.sortable, .sortable span' ).css( 'cursor', 'move' );
 178  }
 179  
 180  function destroySortableFieldOptions() {
 181      jQuery( '.bp-options-box' ).sortable( 'destroy' );
 182      jQuery( '.sortable, .sortable span' ).css( 'cursor', 'default' );
 183  }
 184  
 185  function titleHint( id ) {
 186      id = id || 'title';
 187  
 188      var title = jQuery('#' + id), titleprompt = jQuery('#' + id + '-prompt-text');
 189  
 190      if ( '' === title.val() ) {
 191          titleprompt.removeClass('screen-reader-text');
 192      } else {
 193          titleprompt.addClass('screen-reader-text');
 194      }
 195  
 196      titleprompt.on( 'click', function(){
 197          jQuery(this).addClass('screen-reader-text');
 198          title.trigger( 'focus' );
 199      });
 200  
 201      title.on( 'blur', function(){
 202          if ( '' === this.value ) {
 203              titleprompt.removeClass('screen-reader-text');
 204          }
 205      }).on( 'focus', function(){
 206          titleprompt.addClass('screen-reader-text');
 207      }).on( 'keydown', function(e){
 208          titleprompt.addClass('screen-reader-text');
 209          jQuery(this).off( e );
 210      });
 211  }
 212  
 213  jQuery( function() {
 214      var isMovingToSignups = false;
 215  
 216      // Set focus in Field Title, if we're on the right page.
 217      jQuery( '#bp-xprofile-add-field #title' ).trigger( 'focus' );
 218  
 219      // Set up the notice that shows when no member types are selected for a field.
 220      toggle_no_member_type_notice();
 221      jQuery( 'input.member-type-selector' ).on( 'change', function() {
 222          toggle_no_member_type_notice();
 223      } );
 224  
 225      // Set up deleting options ajax.
 226      jQuery( 'a.ajax-option-delete' ).on( 'click', function() {
 227          var theId = this.id.split( '-' );
 228          theId = theId[1];
 229  
 230          jQuery.post( ajaxurl, {
 231              action: 'xprofile_delete_option',
 232              'cookie': encodeURIComponent( document.cookie ),
 233              '_wpnonce': jQuery('input#_wpnonce').val(),
 234              'option_id': theId
 235          },
 236          function() {} );
 237      } );
 238  
 239      // Set up the sort order change actions.
 240      jQuery( '[id^="sort_order_"]' ).on( 'change', function() {
 241          if ( jQuery( this ).val() !== 'custom' ) {
 242              destroySortableFieldOptions();
 243          } else {
 244              enableSortableFieldOptions( jQuery('#fieldtype :selected').val() );
 245          }
 246      } );
 247  
 248      // Show object if JS is enabled.
 249      jQuery( 'ul#field-group-tabs' ).show();
 250  
 251      // Allow reordering of field group tabs.
 252      jQuery( 'ul#field-group-tabs' ).sortable( {
 253          cursor: 'move',
 254          axis: 'x',
 255          opacity: 1,
 256          items: 'li:not(.not-sortable)',
 257          tolerance: 'intersect',
 258  
 259          update: function() {
 260              jQuery.post( ajaxurl, {
 261                  action: 'xprofile_reorder_groups',
 262                  'cookie': encodeURIComponent( document.cookie ),
 263                  '_wpnonce_reorder_groups': jQuery( 'input#_wpnonce_reorder_groups' ).val(),
 264                  'group_order': jQuery( this ).sortable( 'serialize' )
 265              },
 266              function() {} );
 267          }
 268      }).disableSelection();
 269  
 270      // Allow reordering of fields within groups.
 271      jQuery( 'fieldset.field-group' ).sortable({
 272          cursor: 'move',
 273          opacity: 0.7,
 274          items: 'fieldset',
 275          tolerance: 'pointer',
 276  
 277          update: function() {
 278              if ( isMovingToSignups ) {
 279                  return false;
 280              }
 281  
 282              jQuery.post( ajaxurl, {
 283                  action: 'xprofile_reorder_fields',
 284                  'cookie': encodeURIComponent(document.cookie),
 285                  '_wpnonce_reorder_fields': jQuery( 'input#_wpnonce_reorder_fields' ).val(),
 286                  'field_order': jQuery(this).sortable( 'serialize' ),
 287                  'field_group_id': jQuery(this).attr( 'id' )
 288              },
 289              function() {} );
 290          }
 291      })
 292  
 293      // Disallow text selection.
 294      .disableSelection();
 295  
 296      // Allow reordering of field options.
 297      enableSortableFieldOptions( jQuery('#fieldtype :selected').val() );
 298  
 299      // Handle title placeholder text the WordPress way.
 300      titleHint( 'title' );
 301  
 302      // On Date fields, selecting a date_format radio button should change the Custom value.
 303      var $date_format = jQuery( 'input[name="date_format"]' );
 304      var $date_format_custom_value = jQuery( '#date-format-custom-value' );
 305      var $date_format_sample = jQuery( '#date-format-custom-sample' );
 306      $date_format.on( 'click', function( e ) {
 307          switch ( e.target.value ) {
 308              case 'elapsed' :
 309                  $date_format_custom_value.val( '' );
 310                  $date_format_sample.html( '' );
 311              break;
 312  
 313              case 'custom' :
 314              break;
 315  
 316              default :
 317                  $date_format_custom_value.val( e.target.value );
 318                  $date_format_sample.html( jQuery( e.target ).siblings( '.date-format-label' ).html() );
 319              break;
 320          }
 321      } );
 322  
 323      // Clicking into the custom date format field should select the Custom radio button.
 324      var $date_format_custom = jQuery( '#date-format-custom' );
 325      $date_format_custom_value.on( 'focus', function() {
 326          $date_format_custom.prop( 'checked', 'checked' );
 327      } );
 328  
 329      // Validate custom date field.
 330      var $date_format_spinner = jQuery( '#date-format-custom-spinner' );
 331      $date_format_custom_value.on( 'change', function( e ) {
 332          $date_format_spinner.addClass( 'is-active' );
 333          jQuery.post( ajaxurl, {
 334              action: 'date_format',
 335              date: e.target.value
 336          },
 337          function( response ) {
 338              $date_format_spinner.removeClass( 'is-active' );
 339              $date_format_sample.html( response );
 340          } );
 341      } );
 342  
 343      // tabs init with a custom tab template and an "add" callback filling in the content.
 344      var $tab_items,
 345          $tabs = jQuery( '#tabs' ).tabs();
 346  
 347      set_tab_items( $tabs );
 348  
 349  	function set_tab_items( $tabs ) {
 350          $tab_items = jQuery( 'ul:first li', $tabs ).droppable({
 351              accept: '.connectedSortable fieldset',
 352              hoverClass: 'ui-state-hover',
 353              activeClass: 'ui-state-acceptable',
 354              touch: 'pointer',
 355              tolerance: 'pointer',
 356  
 357              // When field is dropped on tab.
 358              drop: function( ev, ui ) {
 359                  var $item = jQuery(this), // The tab
 360                      $list = jQuery( $item.find( 'a' ).attr( 'href' ) ).find( '.connectedSortable' ), // The tab body
 361                      dropInGroup = function( fieldId ) {
 362                          var fieldOrder, postData = {
 363                              action: 'xprofile_reorder_fields',
 364                              'cookie': encodeURIComponent(document.cookie),
 365                              '_wpnonce_reorder_fields': jQuery( 'input#_wpnonce_reorder_fields' ).val()
 366                          };
 367  
 368                          // Select new tab as current.
 369                          $tabs.tabs( 'option', 'active', $tab_items.index( $item ) );
 370  
 371                          // Refresh $list variable.
 372                          $list = jQuery( $item.find( 'a' ).attr( 'href' ) ).find( '.connectedSortable' );
 373                          jQuery($list).find( 'p.nofields' ).hide( 'slow' );
 374  
 375                          jQuery.extend( postData, {
 376                              'field_group_id': jQuery( $list ).attr( 'id' ),
 377                              'group_tab': jQuery( $item ).prop( 'id' )
 378                          } );
 379  
 380                          // Set serialized data
 381                          fieldOrder = jQuery( $list ).sortable( 'serialize' );
 382  
 383                          if ( fieldId ) {
 384                              var serializedField = fieldId.replace( 'draggable_field_', 'draggable_signup_field[]=' );
 385                              if ( fieldOrder ) {
 386                                  fieldOrder += '&' + serializedField;
 387                              } else {
 388                                  fieldOrder = serializedField;
 389                              }
 390  
 391                              jQuery.extend( postData, {
 392                                  'new_signup_field_id': serializedField
 393                              } );
 394                          } else {
 395                              // Show new placement.
 396                              jQuery( this ).appendTo( $list ).show( 'slow' ).animate( { opacity: '1' }, 500 );
 397  
 398                              // Refresh $list variable.
 399                              $list = jQuery( $item.find( 'a' ).attr( 'href' ) ).find( '.connectedSortable' );
 400  
 401                              // Reset serialized data.
 402                              fieldOrder = jQuery( $list ).sortable( 'serialize' );
 403  
 404                              jQuery.extend( postData, {
 405                                  'field_group_id': jQuery( $list ).attr( 'id' )
 406                              } );
 407                          }
 408  
 409                          jQuery.extend( postData, {
 410                              'field_order': fieldOrder
 411                          } );
 412  
 413                          // Ajax update field locations and orders.
 414                          jQuery.post( ajaxurl, postData, function( response ) {
 415                              if ( response.data && response.data.signup_field ) {
 416                                  jQuery( $list ).append( response.data.signup_field );
 417  
 418                                  if ( response.data.field_id ) {
 419                                      jQuery( '#draggable_field_' + response.data.field_id + ' legend' ).append(
 420                                          jQuery( '<span></span>' ).addClass( 'bp-signup-field-label' ).html( XProfileAdmin.signup_info )
 421                                      );
 422                                  }
 423                              }
 424                          }, 'json' ).always( function() {
 425                              isMovingToSignups = false;
 426                          } );
 427                      };
 428  
 429                  // Remove helper class.
 430                  jQuery($item).removeClass( 'drop-candidate' );
 431  
 432                  if ( 'signup-group' === jQuery( $item ).prop( 'id' ) ) {
 433                      // Simply add the field to signup ones.
 434                      dropInGroup( ui.draggable.prop( 'id' ) );
 435  
 436                  } else if ( ! ui.draggable.prop( 'id' ).match( /draggable_signup_field_([0-9]+)/ ) ) {
 437                      // Hide field, change selected tab, and show new placement.
 438                      ui.draggable.hide( 'slow', dropInGroup );
 439                  }
 440              },
 441              over: function() {
 442                  isMovingToSignups = true;
 443                  jQuery(this).addClass( 'drop-candidate' );
 444              },
 445              out: function() {
 446                  jQuery(this).removeClass( 'drop-candidate' );
 447                  isMovingToSignups = false;
 448              }
 449          });
 450      }
 451  
 452      jQuery( '#signup-fields' ).on( 'click', '.removal', function( e ) {
 453          e.preventDefault();
 454  
 455          var fieldId = jQuery( e.target ).attr( 'href' ).replace( '#remove_field-', '' ),
 456              container = jQuery( e.target ).closest( '#draggable_signup_field_' + fieldId );
 457  
 458          if ( ! fieldId ) {
 459              return false;
 460          }
 461  
 462          // Ajax update field locations and orders.
 463          jQuery.post( ajaxurl, {
 464              action: 'xprofile_remove_signup_field',
 465              'cookie': encodeURIComponent(document.cookie),
 466              '_wpnonce_reorder_fields': jQuery( 'input#_wpnonce_reorder_fields' ).val(),
 467              'signup_field_id': fieldId
 468          }, function( response ) {
 469              if ( response.success ) {
 470                  jQuery( container ).remove();
 471                  jQuery( '#draggable_field_' + fieldId + ' .bp-signup-field-label' ).remove();
 472              }
 473          }, 'json' );
 474      } );
 475  });