[Summary view] [Print] [Text view]

   1  // Use the bp global.
   2  window.bp = window.bp || {};
   3  
   4  /**
   5   * Clears the checked/selected options of a radio button or a multiple select.
   6   *
   7   * @since 10.0.0
   8   * @param {HTMLElement} container The HTMLElement containing the options to clear.
   9   * @returns {void}
  10   */
  11  bp.clear = ( container ) => {
  12      const optionsContainer = document.getElementById( container );
  13  
  14      if ( ! optionsContainer ) {
  15          return;
  16      }
  17  
  18      const checkedRadio = optionsContainer.querySelector( 'input:checked' );
  19      const allOptions = optionsContainer.querySelectorAll( 'option' );
  20  
  21      if ( checkedRadio ) {
  22          checkedRadio.checked = '';
  23      }
  24  
  25      if ( allOptions ) {
  26          allOptions.forEach( ( option ) => {
  27              option.selected = false;
  28          } );
  29      }
  30  };
  31  
  32  document.querySelectorAll( '.visibility-toggle-link' ).forEach( ( button ) => {
  33      button.addEventListener( 'click', ( event ) => {
  34          event.preventDefault();
  35  
  36          const changeButton = event.target;
  37          const changeButtonContainer = changeButton.closest( '.field-visibility-settings-toggle' );
  38          const settingsContainer = changeButtonContainer.nextElementSibling;
  39  
  40          // Hides the "Change" button.
  41          changeButton.setAttribute( 'aria-expanded', true );
  42          changeButtonContainer.style.display = 'none';
  43  
  44          // Displays the settings visibility container.
  45          settingsContainer.style.display = 'block';
  46      } );
  47  } );
  48  
  49  document.querySelectorAll( '.field-visibility-settings-close' ).forEach( ( button ) => {
  50      button.addEventListener( 'click', ( event ) => {
  51          event.preventDefault();
  52  
  53          const closeButton = event.target;
  54          const settingsContainer = closeButton.closest( '.field-visibility-settings' );
  55          const changeButtonContainer = settingsContainer.previousElementSibling;
  56          const currentVisibility = settingsContainer.querySelector( 'input:checked' ).nextElementSibling.innerHTML;
  57  
  58          // Closes the visibility settings options.
  59          settingsContainer.style.display = 'none';
  60  
  61          // Displays the current visibility.
  62          changeButtonContainer.querySelector( '.visibility-toggle-link' ).setAttribute( 'aria-expanded', false );
  63          changeButtonContainer.querySelector( '.current-visibility-level' ).innerHTML = currentVisibility;
  64          changeButtonContainer.style.display = 'block';
  65      } );
  66  } );