From 9f86429a1252b45c95b7c62fbaa1b82de3723997 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Mon, 05 Jan 2026 18:16:07 +0000
Subject: [PATCH] =Complete TaxonomySelector.js and TaxonomyCreator.js refactor
---
inc/forms/TaxonomySelector.php | 224 ++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 147 insertions(+), 77 deletions(-)
diff --git a/inc/forms/TaxonomySelector.php b/inc/forms/TaxonomySelector.php
index 09ad27e..8156ebb 100644
--- a/inc/forms/TaxonomySelector.php
+++ b/inc/forms/TaxonomySelector.php
@@ -1,21 +1,14 @@
<?php
namespace JVBase\forms;
-use JVBase\managers\CacheManager;
-use WP_REST_Request;
-use WP_REST_Response;
use WP_Term;
-use WP_Query;
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly
}
/**
- * Single Modal Taxonomy Selector
- *
- * Complete replacement for individual taxonomy selector modals.
- * Uses one shared modal instance with intelligent prefetching.
+ * Taxonomy Selector
*
* @package TaxonomySelector
* @version 2.0.0
@@ -25,7 +18,6 @@
/**
* Track if any taxonomy selectors are present on the page
*/
- private static $hasSelectors = false;
protected string $id;
protected string $name;
@@ -33,48 +25,45 @@
protected string $plural;
protected string $taxonomy;
protected string $base;
+ protected string $title;
protected array $config;
public function __construct(string $id, string $taxonomy, array $config = []) {
$this->id = sanitize_key($id);
$this->taxonomy = jvbCheckBase($taxonomy);
$this->name = jvbNoBase($taxonomy);
+
+ $this->title = JVB_TAXONOMY[$this->name]['plural'];
$this->base = $config['base']??'';
$this->config = wp_parse_args($config, [
- 'types' => false, //for feed block implementation
- 'max' => 0,
+ 'types' => false, // for feed block implementation
+ 'max' => 0, // 0 = unlimited
'search' => true,
+ 'label' => $this->name,
+ 'icon' => false,
+ 'autocomplete' => false,
'createNew' => false,
'required' => false,
'hidden' => false,
- 'update' => false,
+ 'base' => '',
+ 'name' => $this->taxonomy,
+ 'update' => true, // Whether to update on close
]);
$this->plural = JVB_TAXONOMY[$taxonomy]['plural'];
$this->singular = JVB_TAXONOMY[$taxonomy]['singular'];
-
-
}
- /**
- * Mark that selectors are present (called when rendering toggles)
- */
- public static function markSelectorsPresent(): void {
- self::$hasSelectors = true;
- }
/**
* Get the full path for a term (for hierarchical taxonomies)
*
* @param WP_Term $term The term object
- * @return string The full term path
+ * @param bool $returnArray if true, returns the array. If false, a string of terms separated by ' → '
+ * @return string|array An array of terms or the full term path
*/
- public static function getTermPath($term): string {
- if (!$term || is_wp_error($term)) {
- return '';
- }
-
+ public static function getTermPath(WP_Term $term, bool $returnArray = false): string|array {
if (!is_taxonomy_hierarchical($term->taxonomy)) {
return $term->name;
}
@@ -94,22 +83,14 @@
break;
}
}
-
- return implode(' → ', $path);
+ return ($returnArray) ? $path : implode(' → ', $path);
}
- /**
- * Output the single modal dialog in footer
- */
- public static function outputSelector(): void {
- echo self::getSingleModalHTML();
- remove_action('wp_footer', [self::class, 'outputSelector']);
- }
/**
* Get the single modal HTML structure
*/
- public static function getSingleModalHTML(): string {
+ public static function outputSelectorModal(): string {
ob_start();
?>
<dialog id="jvb-selector" aria-labelledby="modal-title" aria-modal="true">
@@ -163,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>
@@ -181,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>
@@ -194,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">
@@ -207,13 +194,13 @@
</template>
<template class="termChildrenToggle">
<button type="button" class="toggle-children" aria-expanded="false">
- <?=jvbIcon('add')?>
+ <?=jvbIcon('plus-square')?>
</button>
</template>
<template class="selectedTerm">
<div class="selected-item row">
<span class="item-name"></span>
- <button type="button" class="remove-item row"><?=jvbIcon('close')?></button>
+ <button type="button" class="remove-item row"><?=jvbIcon('x')?></button>
</div>
</template>
<template class="termBreadcrumb">
@@ -223,53 +210,136 @@
return ob_get_clean();
}
- public function render(array $selected =[], string $extra = ''):string
- {
- // Mark that selectors are present for footer output
- self::markSelectorsPresent();
+ /**
+ * Render the taxonomy selector toggle and display
+ *
+ * @param array $selected Array of term IDs that are already selected
+ * @param string $extra Additional HTML to append (optional)
+ * @return string The rendered HTML
+ */
+ public function render(array $selected = [], string $extra = ''): string {
- $update = ($this->config['update']) ? '' : ' data-update="'.$this->config['update'].'"';
- $max = ($this->config['max'] === 0) ? '' : ' data-max="'.$this->config['max'];
- $search = ($this->config['search']) ? ' data-search' : '';
- $creatable = ($this->config['createNew']) ? ' data-creatable' : '';
- $required = ($this->config['required']) ? ' data-required' : '';
- $hidden = ($this->config['hidden']) ? ' hidden' : '';
- $for = ($this->config['types']) ? ' data-for="'.implode(',',$this->config['types']) : '';
- $dataSelected = ' data-selected="'.implode(',',$selected).'"';
+ if (array_key_exists('output', $this->config) && $this->config['output'] === 'minimal') {
+ return $this->renderTaxonomyToggle($selected, $extra);
+ }
+ // Build data attributes
+ $dataAttrs = $this->buildDataAttributes($selected);
+
+ $hasAutocomplete = ($this->config['autocomplete']) ? ' data-autocomplete' : '';
+
+ // Hidden attribute
+ $hidden = $this->config['hidden'] ? ' hidden' : '';
+
ob_start();
?>
-
- <div class="jvb-selector <?= $this->name ?>"
- id="<?= $this->id ?>"<?=$hidden?>>
- <button type="button"
+ <div class="jvb-selector <?= esc_attr($this->name) ?>"
+ id="<?= esc_attr($this->id) ?>"<?= $hidden ?>>
+ <div class="field-group-header row btw">
+ <label for="<?= $this->base ?><?= esc_attr($this->config['name']) ?>-autocomplete">
+ <?= ($this->config['icon']) ? jvbIcon($this->config['icon']) : '' ?>
+ <span><?= $this->config['label'] ?></span>
+ </label>
+ <button type="button"
class="filter-toggle row taxonomy-toggle"
- data-taxonomy="<?=$this->name?>"
- data-single="<?=$this->singular?>"
- data-plural="<?=$this->plural?>"
- <?= $max.$search.$creatable.$required.$for.$dataSelected?>
+ data-taxonomy="<?= esc_attr($this->name) ?>"
+ data-single="<?= esc_attr($this->singular) ?>"
+ data-plural="<?= esc_attr($this->plural) ?>"
+ <?= $dataAttrs ?>
+ <?= $hasAutocomplete ?>
+ title="Open <?= $this->singular ?> Selector"
aria-label="Select <?= esc_attr($this->plural) ?>">
- <span class="button-text">Select <?= esc_html($this->plural) ?></span>
- <?= jvbIcon('add') ?>
- </button>
- <div class="selected-items row" role="region" aria-label="Selected <?=$this->plural?>">
+ <?= jvbIcon('plus-square') ?>
+ </button>
+ <?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) ?>">
<?php if (!empty($selected)): ?>
- <?php foreach ($selected as $termId ):
- $term = get_term($termId, $this->taxonomy);
- $termData = [
- 'name' => $term->name,
- 'path' => $this->getTermPath($term)
- ]; ?>
- <div class="selected-item row" data-id="<?= esc_attr($termId) ?>">
- <span><?= esc_html(is_array($termData) ? ($termData['path'] ?? $termData['name']) : $termData) ?></span>
- <button type="button" class="remove-item row" aria-label="Remove term">×</button>
- </div>
+ <?php foreach ($selected as $termId): ?>
+ <?php $this->renderSelectedTerm($termId); ?>
<?php endforeach; ?>
<?php endif; ?>
</div>
+
<?= $extra ?>
</div>
-
<?php
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
+ */
+ private function buildDataAttributes(array $selected): string {
+ $attrs = [];
+
+ // Update behavior
+ if (!$this->config['update']) {
+ $attrs[] = 'data-update="false"';
+ }
+
+ // Max selection
+ if ($this->config['max'] > 0) {
+ $attrs[] = 'data-max="' . esc_attr($this->config['max']) . '"';
+ }
+
+ // Search capability
+ if ($this->config['search']) {
+ $attrs[] = 'data-search';
+ }
+
+ // Create new capability
+ if ($this->config['createNew']) {
+ $attrs[] = 'data-creatable';
+ }
+
+ // Required
+ if ($this->config['required']) {
+ $attrs[] = 'data-required';
+ }
+
+ // Post types filter (for feed blocks)
+ if ($this->config['types'] && is_array($this->config['types'])) {
+ $attrs[] = 'data-for="' . esc_attr(implode(',', $this->config['types'])) . '"';
+ }
+
+ // Selected items
+ if (!empty($selected)) {
+ $attrs[] = 'data-selected="' . esc_attr(implode(',', $selected)) . '"';
+ }
+
+ return implode(' ', $attrs);
+ }
+
+ /**
+ * Render a single selected term
+ */
+ private function renderSelectedTerm(int $termId): void {
+ $term = get_term($termId, $this->taxonomy);
+
+ if (!$term || is_wp_error($term)) {
+ return;
+ }
+
+ $termPath = self::getTermPath($term);
+ ?>
+ <div class="selected-item row" data-id="<?= esc_attr($termId) ?>">
+ <span><?= esc_html($termPath) ?></span>
+ <button type="button"
+ class="remove-item row"
+ aria-label="Remove <?= esc_attr($term->name) ?>">
+ <?= jvbIcon('x') ?>
+ </button>
+ </div>
+ <?php
+ }
}
--
Gitblit v1.10.0