Repeatable Option Fields

repeatable.php

if( !class_exists( 'OU_Settings' ) ) {
  class OU_Settings {
    /**
     * Option
     *
     * @since  0.0.1
     * @var    array $ordered_uploads_options The settings option array
     */
    private $ordered_uploads_options;

    /**
     * Media Types
     *
     * @since  0.0.1
     * @var    array $media_types the media types
     */
    protected $media_types;

    /**
     * Initialize the class
     *
     * @since 0.0.1
     */
    public function __construct() {
      $this->ordered_uploads_options = get_option( OU_PL_OPTIONS . '_settings' );
      $this->media_types = array(
        'images',
        'video',
        'audio',
        'documents',
        'applications',
        'miscellaneous'
      );
      add_action( 'admin_menu', array( $this, 'settings_page' ) );
      add_action( 'admin_init', array( $this, 'settings_init' ) );
    }

    /**
     * Settings Page
     *
     * @since      0.0.1
     * @return     Void
     */
    public function settings_page() {
      $this->options_page = add_options_page(
        'Ordered Uploads Settings', // page_title
        'Ordered Uploads', // menu_title
        'manage_options', // capability
        'ordered-uploads', // menu_slug
        array( $this, 'render_settings_page' ) // function
      );
    }

    /**
     * Render Settings Page
     *
     * @since      0.0.1
     * @return     void
     */
    public function render_settings_page() {
      ?>
      <div class="wrap">
        <h2><?php echo esc_html( get_admin_page_title() ); ?></h2>
        <?php
        echo '<pre>';
          print_r( $this->ordered_uploads_options );
        echo '</pre>';
        ?>
        <form method="post" action="options.php">
          <?php
            settings_fields( OU_PL_OPTIONS . '_option_group' );
            do_settings_sections( OU_PL_OPTIONS . '_folder_names_settings_section_page' );
            do_settings_sections( OU_PL_OPTIONS . '_add_mimes_settings_section_page' );
            submit_button();
          ?>
        </form>
      </div>
    <?php 
    }

    /**
     * Settings Init
     *
     * @since      0.0.1
     * @return     void
     */
    public function settings_init() {
      register_setting(
        OU_PL_OPTIONS . '_option_group', // option_group
        OU_PL_OPTIONS . '_settings', // option_name
        array( $this, 'sanitize_values' ) // sanitize_callback
      );
      add_settings_section(
        OU_PL_OPTIONS . '_folder_names_setting_section', // id
        __( 'Folder Names', OU_PL_TEXTDOMAIN ), // title
        array( $this, 'folder_names_info' ), // callback
        OU_PL_OPTIONS . '_folder_names_settings_section_page' // page
      );
      $this->folder_names_fields(); 

      add_settings_section(
        OU_PL_OPTIONS . '_add_mimes_setting_section', // id
        __( 'Add Mime Types', OU_PL_TEXTDOMAIN ), // title
        array( $this, 'add_mimes_info' ), // callback
        OU_PL_OPTIONS . '_add_mimes_settings_section_page' // page
      );
      $this->add_mimes_fields(); 
    }

    /**
     * Folder Names Callback
     *
     * @since      0.0.1
     * @return     void
     */
    public function folder_names_info() {
      ?><p><?php _e( 'Customize the folder\'s names for each media type', OU_PL_TEXTDOMAIN ); ?></p><?php
    }

    /**
     * Add Mimes Callback
     *
     * @since      0.0.1
     * @return     void
     */
    public function add_mimes_info() {
      ?><p><?php _e( 'Add additional mime types', OU_PL_TEXTDOMAIN ); ?></p><?php
    }

    /**
     * Folder Names Fields
     *
     * @since      0.0.1 
     * @return     void
     */
    public function folder_names_fields() {
      foreach( $this->media_types as $media_type ) {
        add_settings_field(
          OU_PL_PREFIX . '_' . $media_type . '_dir', // id
          __( ucwords( $media_type ), OU_PL_TEXTDOMAIN ), // title
          array( $this, 'folder_names_callback' ), // callback
          OU_PL_OPTIONS . '_folder_names_settings_section_page', // page
          OU_PL_OPTIONS . '_folder_names_setting_section', // section
          array(
            'label_for' => OU_PL_PREFIX . '_' . $media_type . '_dir',
            'name'      => OU_PL_OPTIONS . '_settings[' . OU_PL_PREFIX . '_' . $media_type . '_dir]',
            'value'     => ( isset( $this->ordered_uploads_options[OU_PL_PREFIX . '_' . $media_type . '_dir'] ) ? esc_attr( $this->ordered_uploads_options[OU_PL_PREFIX . '_' . $media_type . '_dir'] ) : $media_type ),
          ) // args
        );
      }
    }

    /**
     * Folder Names Callback
     *
     * @since      0.0.1
     * @return     void
     */
    public function folder_names_callback( $args ) {
      printf( '<input type="text" name="%2$s" id="%1$s" value="%3$s" class="all-options">', $args['label_for'], $args['name'], $args['value'] );
    } // end folder_names_callback

    /**
     * Add Mimes Fields
     *
     * @since      0.0.1 
     * @return     void
     */
    public function add_mimes_fields() {
      add_settings_field(
        OU_PL_PREFIX . '_mimes',
        '',
        array( $this, 'add_mimes_callback' ),
        OU_PL_OPTIONS . '_add_mimes_settings_section_page', 
        OU_PL_OPTIONS . '_add_mimes_setting_section'
      );
    }

    /**
     * Add Mimes
     *
     * @since      0.0.1
     * @return     void
     */
    public function add_mimes_callback() {
      $option       = $this->ordered_uploads_options;
      $mimes        = $option[OU_PL_PREFIX . '_mimes']; 
      $mime_folders = $this->mime_folders(); 
      ?>
      <script type="text/javascript">
        jQuery(document).ready(function($){
          $('#add-row').on('click', function() {
            var row = $('.empty-row.screen-reader-text').clone(true);
            row.removeClass('empty-row screen-reader-text');
            row.insertBefore('#repeatable-fieldset-one tbody>tr:last');
            jQuery('input, select', row).val('').attr('name', function(index, name) {
              return name.replace(/(\d+)/, function(fullMatch, n) {
                return Number(n) + 1;
              });
            });
            return false;
          });
          $('.remove-row').on('click', function() {
            $(this).parent().parent().remove();
            return false;
          });
        });
      </script>
      <table id="repeatable-fieldset-one" width="100%">
        <thead>
          <tr>
            <th>Extention</th>
            <th>Filetype</th>
            <th>Folder</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
        <?php
          $counter = 1;
          if( $mimes ) {
            foreach( $mimes as $mime ) {
              $counter++;
              $extention = $option[$mimes]['ou_mime_extention_' . $counter];
              $filetype  = $option[$mimes]['ou_mime_file_type_' . $counter];
              $folder    = $option[$mimes]['ou_mime_folder_' . $counter];
              ?>
              <tr>
                <td>
                  <input type="text" name="ou_options_settings['ou_mimes']['ou_mime_extention_<?php echo $counter; ?>']" value="<?php echo $extention; ?>" class="all-options">
                </td>
                <td>
                  <input type="text" name="ou_options_settings['ou_mimes']['ou_mime_file_type_<?php echo $counter; ?>']" class="all-options">
                </td>
                <td>
                  <select name="ou_options_settings['ou_mimes']['ou_mime_folder_<?php echo $counter; ?>']">
                    <?php foreach ( $mime_folders as $label => $value ) : ?>
                      <option value="<?php echo $value; ?>"<?php selected( $field['select'], $value ); ?>><?php echo $label; ?></option>
                    <?php endforeach; ?>
                  </select>
                </td>
                <td>
                  <a class="button remove-row" href="#">Remove</a>
                </td>
              </tr>
              <?php
            }
          } else {
            ?>
            <tr>
              <td>
                <input type="text" name="ou_options_settings['ou_mimes']['ou_mime_extention_1']" class="all-options">
              </td>
              <td>
                <input type="text" name="ou_options_settings['ou_mimes']['ou_mime_file_type_1']" class="all-options">
              </td>
              <td>
                <select name="ou_options_settings['ou_mimes']['ou_mime_folder_1']">
                  <?php foreach ( $mime_folders as $label => $value ) : ?>
                    <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
                  <?php endforeach; ?>
                </select>
              </td>
              <td>
                <a class="button remove-row" href="#">Remove</a>
              </td>
            </tr>
            <?php
          }
          ?>
          <tr class="empty-row screen-reader-text">
            <td>
              <input type="text" name="ou_options_settings['ou_mimes']['ou_mime_extention_1']" class="all-options">
            </td>
            <td>
              <input type="text" name="ou_options_settings['ou_mimes']['ou_mime_file_type_1']" class="all-options">
            </td>
            <td>
              <select name="ou_options_settings['ou_mimes']['ou_mime_folder_1']">
                <?php foreach ( $mime_folders as $label => $value ) : ?>
                  <option value="<?php echo $value; ?>"><?php echo $label; ?></option>
                <?php endforeach; ?>
              </select>
            </td>
            <td>
              <a class="button remove-row" href="#">Remove</a>
            </td>
          </tr>
          <?php
        ?> 
        </tbody>
      </table>
      <p><a id="add-row" class="button" href="#">Add Mime</a></p>
      <?php
    } // end mime_repeater

    /**
     * Mime Folder
     *
     * @since      0.0.1
     * @return     $array
     */
    public function mime_folders() {
      $images        = esc_attr( $this->ordered_uploads_options[OU_PL_PREFIX . '_images_dir'] );
      $video         = esc_attr( $this->ordered_uploads_options[OU_PL_PREFIX . '_video_dir'] );
      $audio         = esc_attr( $this->ordered_uploads_options[OU_PL_PREFIX . '_audio_dir'] );
      $documents     = esc_attr( $this->ordered_uploads_options[OU_PL_PREFIX . '_documents_dir'] );
      $applications  = esc_attr( $this->ordered_uploads_options[OU_PL_PREFIX . '_applications_dir'] );
      $miscellaneous = esc_attr( $this->ordered_uploads_options[OU_PL_PREFIX . '_miscellaneous_dir'] );
      $array         = array(
        $images        => ucwords($images),
        $video         => ucwords($video),
        $audio         => ucwords($audio),
        $documents     => ucwords($documents),
        $applications  => ucwords($applications),
        $miscellaneous => ucwords($miscellaneous),
      );
      return $array;
    } // end mime_folders

    /**
     * Sanitize input values
     *
     * @since  0.0.1
     * @param  string $input the input value
     * @return array  $sanitary_values the sanitized values
     */
    public function sanitize_values($input) {
      $sanitary_values = array();
      foreach( $this->media_types as $media_type ) {
        if ( isset( $input[OU_PL_PREFIX . '_' . $media_type . '_dir'] ) ) {
          $sanitary_values[OU_PL_PREFIX . '_' . $media_type . '_dir'] = sanitize_text_field( $input[OU_PL_PREFIX . '_' . $media_type . '_dir'] );
        }
      }

      return $sanitary_values;
    }

  }
} // end OU_Settings