=Complete TaxonomySelector.js and TaxonomyCreator.js refactor

Jake Vanderwerf

2026-01-05 9f86429a1252b45c95b7c62fbaa1b82de3723997

 inc/forms/TaxonomySelector.php

@@ -32,6 +32,7 @@
      $this->id = sanitize_key($id);
      $this->taxonomy = jvbCheckBase($taxonomy);
      $this->name = jvbNoBase($taxonomy);

      $this->title = JVB_TAXONOMY[$this->name]['plural'];
      $this->base = $config['base']??'';

@@ -143,10 +144,10 @@
            </div>

            <!-- Create new term section -->
            <details class="create-new-term" hidden>
            <details class="create-term" hidden>
               <summary class="row btw">Add New Term</summary>
               <div class="create-new-term-section">
                  <form class="create-term-form" data-nocache data-form-id="create-term" data-save="terms">
                  <form class="create-term" data-nocache data-form-id="create-term" data-save="terms">
                     <div class="form-group">
                        <label for="term_name">Term Name:</label>
                        <input type="text" name="term_name" id="term_name" required>
@@ -161,7 +162,7 @@

                     <button type="button" class="submit-term">Add Term</button>
                  </form>

                  <div class="term-suggestions" hidden><h4></h4><ul class="term-suggestion-list"></ul></div>
                  <div class="loading-message create-term" hidden>
                     <span id="typed-text"></span>
                     <span class="cursor">|</span>
@@ -174,7 +175,13 @@
      <template class="loadingItems">
         <p>{ <span>loading items</span> }</p>
      </template>
      <template class="noResults">
      <template class="autocompleteButton">
         <button class="autocomplete submit-term" type="button"><strong>Create: </strong><span></span></button>
      </template>
      <template class="autocompleteItem">
         <button class="autocomplete item" type="button" data-autocomplete-select></button>
      </template>
      <template class="noTermResults">
         <p>{ <span>nothing found</span> }</p>
      </template>
      <template class="termListItem">
@@ -211,6 +218,10 @@
    * @return string The rendered HTML
    */
   public function render(array $selected = [], string $extra = ''): string {

      if (array_key_exists('output', $this->config) && $this->config['output'] === 'minimal') {
         return $this->renderTaxonomyToggle($selected, $extra);
      }
      // Build data attributes
      $dataAttrs = $this->buildDataAttributes($selected);

@@ -237,12 +248,13 @@
               <?= $hasAutocomplete ?>
               title="Open <?= $this->singular ?> Selector"
               aria-label="Select <?= esc_attr($this->plural) ?>">
               <?= jvbIcon('plus-square', ['title' => 'Add ' . $this->title]) ?>
               <?= jvbIcon('plus-square') ?>
            </button>
            <input type="text" id="<?= $this->base ?><?= esc_attr($this->config['name']) ?>-autocomplete" autocomplete="off" data-ignore data-autocomplete>
            <ul class="autocomplete-dropdown" hidden>

            </ul>
            <?php if ($hasAutocomplete !== '') { ?>
               <input type="text" id="<?= $this->base ?><?= esc_attr($this->config['name']) ?>-autocomplete" autocomplete="off" data-ignore data-autocomplete>
               <ul class="search-results" hidden>
               </ul>
            <?php } ?>
         </div>

         <div class="selected-items row" role="region" aria-label="Selected <?= esc_attr($this->plural) ?>">
@@ -259,6 +271,11 @@
      return ob_get_clean();
   }

   protected function renderTaxonomyToggle(array $selected = [], string $extra = ''): string
   {
      return '<button type="button" data-filter="taxonomy" data-taxonomy="'.$this->name.'" title="Filter by '.$this->singular.'">'.jvbIcon($this->config['icon']).'<span class="label">'.$this->singular.'</span></button>';
   }

   /**
    * Build data attributes string for the toggle button
    */