Jake Vanderwerf
10 days ago de317675a8069b747cb253ba3e2b5dc394ca36ef
inc/helpers/ui.php
@@ -19,8 +19,8 @@
    }
    ?>
    <aside id="queue" class="left col start btw main" aria-expanded="false" >
        <div class="m-actions row start nowrap">
    <aside id="queue" class="left col top main" aria-expanded="false" >
        <div class="m-actions row left nowrap">
         <button class="refresh row" title="Check now">
            <?= jvbIcon('arrows-clockwise', ['title'=> 'Check now']) ?>
            <span class="countdown row indicator" title="Will refresh again...">5</span>
@@ -28,7 +28,7 @@
            <div class="popup row"><span></span></div>
        </div>
      <div class="header col start">
      <div class="header col top">
         <h2>Queue Status</h2>
         <nav class="filters">
            <?php
@@ -55,9 +55,9 @@
            ?>
         </nav>
      </div>
      <div class="qitems item-grid col a-start nowrap">
      <div class="qitems item-grid col top left nowrap">
      </div>
      <div class="queue-actions row btw nowrap">
      <div class="queue-actions row x-btw nowrap">
         <button class="dismiss-all">Clear Completed</button>
         <button class="retry-all">Retry Failed</button>
      </div>
@@ -70,20 +70,20 @@
   </button>
   <template class="queueItem">
      <div class="item">
         <div class="header row btw">
         <div class="header row x-btw">
            <span class="type"></span>
            <span class="status row"><?= jvbIcon('arrows-clockwise') ?><span class="screen-reader-text"></span></span>
         </div>
         <?php jvbRenderProgressBar('',false,false) ?>
         <div class="info">
            <div class="details"></div>
            <div class="time row start">
            <div class="time row left">
               <?= jvbIcon('clock') ?>
               <span class="started">Started: <time></time></span>
               <span class="completed" hidden><span>Completed: </span><time></time></span>
            </div>
         </div>
         <div class="actions row end">
         <div class="actions row right">
            <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>
@@ -212,29 +212,39 @@
 * Outputs the search bar (likely don't need anymore)
 * @return string
 */
function jvbSearch(string $placeholder = 'Search...', string $id = 'search'):string
function jvbSearch(string $placeholder = 'Search...', string $id = 'search', string $label = '', string $buttonText = '', bool $buttonInside = false, bool $hideSearch = false):string
{
   return Form::search($placeholder, $id);
   return Form::search($placeholder, $id, $label, $buttonText, $buttonInside, $hideSearch);
}
function jvbModalActions()
function jvbModalActions():string
{
    return '<div class="m-actions row">
        <button type="button" class="cancel">'.jvbIcon('x').'<span class="screen-reader-text">Cancel</span></button>
        <button type="submit" class="save">'.jvbIcon('floppy-disk').'<span class="screen-reader-text">Save</span></button>
    </div>';
    return sprintf(
   '<div class="m-actions row">
            <button type="button" class="cancel">%s<span class="screen-reader-text">Cancel</span></button>
            <button type="submit" class="save">%s<span class="screen-reader-text">Save</span></button>
         </div>',
      jvbIcon('x'),
      jvbIcon('floppy-disk')
   );
}
function jvbNewModal(string $class, string $title, string $form)
function jvbNewModal(string $class, string $id, string $title, string $form):string
{
    return '<dialog class="'.$class.'">
    return sprintf(
      '<dialog class="%s" id="%s">
        <div class="wrap">
            <h2>'.$title.'</h2>
            '.str_replace('</form>', jvbModalActions().'</form>', $form).'
            <h2>%s</h2>
            %s
        </div>
    </dialog>';
    </dialog>',
      $class,
      sanitize_title($id),
      $title,
      str_replace('</form>', jvbModalActions().'</form>', $form)
   );
}
/**
@@ -271,7 +281,7 @@
    </aside>
    <template class="notificationPopup">
        <div class="toast" role="status" aria-live="polite">
            <div class="toast-content row btw">
            <div class="toast-content row x-btw">
                <p></p>
                <button type="button" class="close-toast" aria-label="Close">
                    <?= jvbIcon('x') ?>
@@ -302,11 +312,7 @@
         <span>Jump To:</span><?= jvbIcon('plus-square') ?>
      </button>
        <ul>
            <li id="back-to-top">
                <a href="#top" title="Back to Top">
                    <?= jvbIcon('caret-circle-up') ?><span>Back to Top</span>
                </a>
            </li>
            <?php
            foreach ($ids as $slug) {
                ?>
@@ -362,7 +368,7 @@
      echo '';
      return '';
   }
   $header = '<nav class="tabs row start" role="tablist">';
   $header = '<nav class="tabs row left" role="tablist">';
   $content = '';
   $i = 0;
@@ -434,7 +440,7 @@
      <div class="bar">
         <div class="fill"></div>
      </div>
      <div class="row btw">
      <div class="row x-btw">
         %s
         <div class="details">
            %s
@@ -451,7 +457,21 @@
   return $bar;
}
function jvbFormStatus(string $message = '') {
function jvbFormStatus(string $message = ''):string
{
   return sprintf(
      '%s
      <div class="fstatus row" hidden>
         <div class="spinner"></div>
         <i class="icon"></i>
         <p class="message">%s</p>
      </div>',
      jvbFormRestore(),
      $message
   );
}
function jvbFormRestore():string
{
   return sprintf(
      '<div class="restore-form col" hidden>
         <h3>Looks like we left things hanging...</h3>
@@ -463,15 +483,9 @@
               <span>Discard</span>
            </button>
         </div>
      </div>
      <div class="fstatus row" hidden>
         <div class="spinner"></div>
         <i class="icon"></i>
         <p class="message">%s</p>
      </div>',
      jvbFormIcon('clock-clockwise'),
      jvbFormIcon('x'),
      $message
   );
}