[ Index ]

PHP Cross Reference of BuddyPress

title

Body

[close]

/src/bp-xprofile/admin/js/ -> admin.js (source)

   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( 'Default Value' ),
  19          toDeleteText = document.createTextNode( 'Delete' ),
  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      jQuery( document ).trigger( 'bp-xprofile-show-options', forWhat );
  99  }
 100  
 101  function hide( id ) {
 102      if ( !document.getElementById( id ) ) {
 103          return false;
 104      }
 105  
 106      document.getElementById( id ).style.display = 'none';
 107      // the field id is [fieldtype]option[iterator] and not [fieldtype]div[iterator]
 108      var field_id = id.replace( 'div', 'option' );
 109      document.getElementById( field_id ).value = '';
 110  }
 111  
 112  /**
 113   * @summary Toggles "no member type" notice.
 114   *
 115   * @since 2.4.0
 116   */
 117  function toggle_no_member_type_notice() {
 118      var $member_type_checkboxes = jQuery( 'input.member-type-selector' );
 119  
 120      // No checkboxes? Nothing to do.
 121      if ( ! $member_type_checkboxes.length ) {
 122          return;
 123      }
 124  
 125      var has_checked = false;
 126      $member_type_checkboxes.each( function() {
 127          if ( jQuery( this ).is( ':checked' ) ) {
 128              has_checked = true;
 129              return false;
 130          }
 131      } );
 132  
 133      if ( has_checked ) {
 134          jQuery( 'p.member-type-none-notice' ).addClass( 'hide' );
 135      } else {
 136          jQuery( 'p.member-type-none-notice' ).removeClass( 'hide' );
 137      }
 138  }
 139  
 140  var fixHelper = function(e, ui) {
 141      ui.children().each(function() {
 142          jQuery(this).width( jQuery(this).width() );
 143      });
 144      return ui;
 145  };
 146  
 147  function enableSortableFieldOptions() {
 148      jQuery( '.bp-options-box' ).sortable( {
 149          cursor: 'move',
 150          items: 'div.sortable',
 151          tolerance: 'intersect',
 152          axis: 'y'
 153      });
 154  
 155      jQuery( '.sortable, .sortable span' ).css( 'cursor', 'move' );
 156  }
 157  
 158  function destroySortableFieldOptions() {
 159      jQuery( '.bp-options-box' ).sortable( 'destroy' );
 160      jQuery( '.sortable, .sortable span' ).css( 'cursor', 'default' );
 161  }
 162  
 163  function titleHint( id ) {
 164      id = id || 'title';
 165  
 166      var title = jQuery('#' + id), titleprompt = jQuery('#' + id + '-prompt-text');
 167  
 168      if ( '' === title.val() ) {
 169          titleprompt.removeClass('screen-reader-text');
 170      } else {
 171          titleprompt.addClass('screen-reader-text');
 172      }
 173  
 174      titleprompt.click(function(){
 175          jQuery(this).addClass('screen-reader-text');
 176          title.focus();
 177      });
 178  
 179      title.blur(function(){
 180          if ( '' === this.value ) {
 181              titleprompt.removeClass('screen-reader-text');
 182          }
 183      }).focus(function(){
 184          titleprompt.addClass('screen-reader-text');
 185      }).keydown(function(e){
 186          titleprompt.addClass('screen-reader-text');
 187          jQuery(this).unbind(e);
 188      });
 189  }
 190  
 191  jQuery( document ).ready( function() {
 192  
 193      // Set focus in Field Title, if we're on the right page
 194      jQuery( '#bp-xprofile-add-field #title' ).focus();
 195  
 196      // Set up the notice that shows when no member types are selected for a field.
 197      toggle_no_member_type_notice();
 198      jQuery( 'input.member-type-selector' ).on( 'change', function() {
 199          toggle_no_member_type_notice();
 200      } );
 201  
 202      // Set up deleting options ajax
 203      jQuery( 'a.ajax-option-delete' ).on( 'click', function() {
 204          var theId = this.id.split( '-' );
 205          theId = theId[1];
 206  
 207          jQuery.post( ajaxurl, {
 208              action: 'xprofile_delete_option',
 209              'cookie': encodeURIComponent( document.cookie ),
 210              '_wpnonce': jQuery('input#_wpnonce').val(),
 211              'option_id': theId
 212          },
 213          function() {} );
 214      } );
 215  
 216      // Set up the sort order change actions
 217      jQuery( '[id^="sort_order_"]' ).change(function() {
 218          if ( jQuery( this ).val() !== 'custom' ) {
 219              destroySortableFieldOptions();
 220          } else {
 221              enableSortableFieldOptions( jQuery('#fieldtype :selected').val() );
 222          }
 223      });
 224  
 225      // Show object if JS is enabled
 226      jQuery( 'ul#field-group-tabs' ).show();
 227  
 228      // Allow reordering of field group tabs
 229      jQuery( 'ul#field-group-tabs' ).sortable( {
 230          cursor: 'move',
 231          axis: 'x',
 232          opacity: 1,
 233          items: 'li',
 234          tolerance: 'intersect',
 235  
 236          update: function() {
 237              jQuery.post( ajaxurl, {
 238                  action: 'xprofile_reorder_groups',
 239                  'cookie': encodeURIComponent( document.cookie ),
 240                  '_wpnonce_reorder_groups': jQuery( 'input#_wpnonce_reorder_groups' ).val(),
 241                  'group_order': jQuery( this ).sortable( 'serialize' )
 242              },
 243              function() {} );
 244          }
 245      }).disableSelection();
 246  
 247      // Allow reordering of fields within groups
 248      jQuery( 'fieldset.field-group' ).sortable({
 249          cursor: 'move',
 250          opacity: 0.7,
 251          items: 'fieldset',
 252          tolerance: 'pointer',
 253  
 254          update: function() {
 255              jQuery.post( ajaxurl, {
 256                  action: 'xprofile_reorder_fields',
 257                  'cookie': encodeURIComponent(document.cookie),
 258                  '_wpnonce_reorder_fields': jQuery( 'input#_wpnonce_reorder_fields' ).val(),
 259                  'field_order': jQuery(this).sortable( 'serialize' ),
 260                  'field_group_id': jQuery(this).attr( 'id' )
 261              },
 262              function() {} );
 263          }
 264      })
 265  
 266      // Disallow text selection
 267      .disableSelection();
 268  
 269      // Allow reordering of field options
 270      enableSortableFieldOptions( jQuery('#fieldtype :selected').val() );
 271  
 272      // Handle title placeholder text the WordPress way
 273      titleHint( 'title' );
 274  
 275      // On Date fields, selecting a date_format radio button should change the Custom value.
 276      var $date_format = jQuery( 'input[name="date_format"]' );
 277      var $date_format_custom_value = jQuery( '#date-format-custom-value' );
 278      var $date_format_sample = jQuery( '#date-format-custom-sample' );
 279      $date_format.click( function( e ) {
 280          switch ( e.target.value ) {
 281              case 'elapsed' :
 282                  $date_format_custom_value.val( '' );
 283                  $date_format_sample.html( '' );
 284              break;
 285  
 286              case 'custom' :
 287              break;
 288  
 289              default :
 290                  $date_format_custom_value.val( e.target.value );
 291                  $date_format_sample.html( jQuery( e.target ).siblings( '.date-format-label' ).html() );
 292              break;
 293          }
 294      } );
 295  
 296      // Clicking into the custom date format field should select the Custom radio button.
 297      var $date_format_custom = jQuery( '#date-format-custom' );
 298      $date_format_custom_value.focus( function() {
 299          $date_format_custom.prop( 'checked', 'checked' );
 300      } );
 301  
 302      // Validate custom date field.
 303      var $date_format_spinner = jQuery( '#date-format-custom-spinner' );
 304      $date_format_custom_value.change( function( e ) {
 305          $date_format_spinner.addClass( 'is-active' );
 306          jQuery.post( ajaxurl, {
 307              action: 'date_format',
 308              date: e.target.value
 309          },
 310          function( response ) {
 311              $date_format_spinner.removeClass( 'is-active' );
 312              $date_format_sample.html( response );
 313          } );
 314      } );
 315  
 316      // tabs init with a custom tab template and an "add" callback filling in the content
 317      var $tab_items,
 318          $tabs = jQuery( '#tabs' ).tabs();
 319  
 320      set_tab_items( $tabs );
 321  
 322  	function set_tab_items( $tabs ) {
 323          $tab_items = jQuery( 'ul:first li', $tabs ).droppable({
 324              accept: '.connectedSortable fieldset',
 325              hoverClass: 'ui-state-hover',
 326              activeClass: 'ui-state-acceptable',
 327              touch: 'pointer',
 328              tolerance: 'pointer',
 329  
 330              // When field is dropped on tab
 331              drop: function( ev, ui ) {
 332                  var $item = jQuery(this), // The tab
 333                      $list = jQuery( $item.find( 'a' ).attr( 'href' ) ).find( '.connectedSortable' ); // The tab body
 334  
 335                  // Remove helper class
 336                  jQuery($item).removeClass( 'drop-candidate' );
 337  
 338                  // Hide field, change selected tab, and show new placement
 339                  ui.draggable.hide( 'slow', function() {
 340  
 341                      // Select new tab as current
 342                      $tabs.tabs( 'option', 'active', $tab_items.index( $item ) );
 343  
 344                      // Show new placement
 345                      jQuery(this).appendTo($list).show( 'slow' ).animate( {opacity: '1'}, 500 );
 346  
 347                      // Refresh $list variable
 348                      $list = jQuery( $item.find( 'a' ).attr( 'href' ) ).find( '.connectedSortable' );
 349                      jQuery($list).find( 'p.nofields' ).hide( 'slow' );
 350  
 351                      // Ajax update field locations and orders
 352                      jQuery.post( ajaxurl, {
 353                          action: 'xprofile_reorder_fields',
 354                          'cookie': encodeURIComponent(document.cookie),
 355                          '_wpnonce_reorder_fields': jQuery( 'input#_wpnonce_reorder_fields' ).val(),
 356                          'field_order': jQuery( $list ).sortable( 'serialize' ),
 357                          'field_group_id': jQuery( $list ).attr( 'id' )
 358                      },
 359                      function() {} );
 360                  });
 361              },
 362              over: function() {
 363                  jQuery(this).addClass( 'drop-candidate' );
 364              },
 365              out: function() {
 366                  jQuery(this).removeClass( 'drop-candidate' );
 367              }
 368          });
 369      }
 370  });


Generated: Tue Nov 12 01:01:38 2019 Cross-referenced by PHPXref 0.7.1