Jake Vanderwerf
2026-02-17 a24a06002081ad71a78ffeff9072725ba39cf121
inc/helpers/ui.php
@@ -1,5 +1,6 @@
<?php
use JVBase\meta\Form;
use JVBase\utility\Features;
use JVBase\utility\Image;
@@ -17,7 +18,7 @@
    }
    ?>
    <aside id="queue" class="left col start btw main" aria-expanded="false" hidden>
    <aside id="queue" class="left col start btw main" aria-expanded="false" >
        <div class="status-actions row start nowrap">
         <div class="refresh row btw">
                <span class="countdown row" title="Will refresh again...">5</span>
@@ -46,7 +47,8 @@
            foreach($filters as $filter => $title) {
               $active = ($i === 0) ? ' active': '';
               ?>
               <button class="filter<?=$active?>" data-filter="<?=$filter?>" data-count="0"><span class="count row"></span><?=$title?></button>
               <input type="radio" id="qfilter-<?=$filter?>" name="qfilter" class="btn filter<?=$active?>" data-filter="<?=$filter?>">
               <label for="qfilter-<?=$filter?>" data-count="0"><span class="count row"></span><?=$title?></label>
               <?php
               $i++;
            }
@@ -61,7 +63,7 @@
         <button class="retry-all">Retry Failed</button>
      </div>
    </aside>
   <button class="qtoggle row" title="Show Queue" aria-controls="queue" hidden>
   <button class="qtoggle row" title="Show Queue" aria-controls="queue" >
      <?= jvbIcon('floppy-disk') ?>
      <span class="screen-reader-text"></span>
      <span class="indicator"></span>
@@ -71,18 +73,22 @@
      <div class="item">
         <div class="header row btw">
            <span class="type"></span>
            <span class="status row"><span class="screen-reader-text"></span></span>
            <span class="status row"><?= jvbIcon('arrows-clockwise') ?><span class="screen-reader-text"></span></span>
         </div>
         <?php jvbRenderProgressBar() ?>
         <?php jvbRenderProgressBar('',false,false) ?>
         <div class="info">
            <div class="details"></div>
            <div class="time row start">
               <?= jvbIcon('clock') ?>
               <span class="started">Started: <span class="time"></span>
               <span class="completed"></span>
               <span class="started">Started: <time></time></span>
               <span class="completed" hidden><span>Completed: </span><time></time></span>
            </div>
         </div>
         <div class="actions row end">
            <button class="retry" data-action="retry"><span>Retry</span><?= jvbIcon('arrows-clockwise')?></button>
            <button class="cancel" data-action="cancel"><span>Cancel</span><?= jvbIcon('x-square')?></button>
            <button class="refresh" data-action="refresh" title="Refresh to see changes"><span>Refresh</span><?= jvbIcon('arrows-clockwise')?></button>
            <button class="dismiss" data-action="dismiss"><span>Dismiss</span><?= jvbIcon('eye-closed')?></button>
         </div>
      </div>
   </template>
@@ -152,6 +158,9 @@
 */
function jvbHelpMenu():string
{
   if (!Features::forSite()->has('helpMenu')) {
      return '';
   }
    $out = get_option(BASE.'help_menu');
    if ($out === false) {
@@ -202,19 +211,9 @@
 * Outputs the search bar (likely don't need anymore)
 * @return string
 */
function jvbSearch(string $placeholder = 'Search...'):string
function jvbSearch(string $placeholder = 'Search...', string $id = 'search'):string
{
    return '<div class="search-container row start nowrap">
  <input type="search" id="search" placeholder="'.$placeholder.'">
  <button
    title="Clear Search"
    type="button"
    class="clear-search"
    aria-label="Clear search"
    onclick="this.previousElementSibling.value = \'\'; this.previousElementSibling.focus();"
  >'.jvbIcon('x', ['title'=> 'Clear Search']).'</button>
  <button type="button" title="Search" class="toggle search" aria-label="Toggles search input visually" onclick="this.parentNode.classList.toggle(\'open\');this.previousElementSibling.previousElementSibling.focus();">'.jvbIcon('magnifying-glass').'</button>
</div>';
   return Form::search($placeholder, $id);
}
@@ -251,6 +250,13 @@
    return $image->formatImage($imgID, $start, $end, $addLink, $postSlug);
}
function jvbImageCaption(int $imgID, string $start = 'tiny', string $end = 'large', bool $addLink = true, ?string $postSlug = null):string
{
   $caption = wp_get_attachment_caption($imgID);
   $caption = ($caption && $caption !== '') ? '<figcaption>'.jvb_filter_content( $caption).'</figcaption>' : '';
   return '<figure>'.jvbFormatImage($imgID, $start, $end, $addLink, $postSlug).$caption.'</figure>';
}
/**
 * Outputs the notification container in the footer
 * @return void
@@ -388,13 +394,13 @@
         <h2>'.$config['title'].'</h2>';
         if ( array_key_exists('description', $config)) {
            if (!is_array($config['description'])) {
               $content .= apply_filters('the_content', $config['description']);
               $content .= jvb_filter_content( $config['description']);
            } else {
//             foreach ($config['description'] as $desc) {
//                $content .= apply_filters('the_content', $desc);
//                $content .= jvb_filter_content( $desc);
//             }
               $content .= implode('',array_map(function ($paragraph) {
                  return apply_filters('the_content', $paragraph);
                  return jvb_filter_content( $paragraph);
               }, $config['description']));
            }
@@ -414,19 +420,30 @@
   return $out;
}
function jvbRenderProgressBar(string $inside ='', $top = false)
function jvbRenderProgressBar(string $inside ='', $top = false, $icon = true, $return = false):string
{
   $top = $top ? ' abs top' : '';
   ?>
   <div class="progress<?=$top?>">
   $bar = sprintf(
      '<div class="progress%s">
      <div class="bar">
         <div class="fill"></div>
      </div>
      <div class="details row btw">
         <?=$inside?>
      <div class="row btw">
         %s
         <div class="details">
            %s
         </div>
      </div>
   </div>
   <?php
   </div>',
      $top,
      ($icon) ? '<i class="icon"></i>': '',
      $inside
   );
   if (!$return) {
      echo $bar;
   }
   return $bar;
}
function jvbFormStatus(string $message = '') {
@@ -446,6 +463,7 @@
      </div>
      <div class="fstatus row" hidden>
         <div class="spinner"></div>
         <i class="icon"></i>
         <p class="message">'.$message.'</p>
      </div>';
}