=Form updates

Jake Vanderwerf

2025-10-20 e729f920139f0c65902be2d6b2c32466b08375e8

 inc/helpers/renderFields.php

@@ -324,10 +324,32 @@
add_action('wp_footer', 'jvbOutputImageTemplates');

function jvbOutputImageTemplates() {
   if (wp_script_is('jvb-form')) {
      jvbInlineStyles('forms');
      ?>
      <template class="formSummary">
         <div class="form-summary">
            <h2>Success!</h2>
            <div class="message">
               <p>We're picking up what you're laying down.</p>
               <p>You'll get an email with your response. If you can't find it, check your spam.</p>
               <p>If you need to make any changes, respond to that email.</p>
               <p>You can see a summary of what you wrote below:</p>
            </div>
            <div class="summary">
               <div class="result">
                  <h4></h4>
                  <p></p>
               </div>
            </div>
         </div>
      </template>
      <?php
   }
   if (wp_script_is('jvb-uploader')) {
      ?>
      <template class="emptyGroup">
         <div class="empty-group">
         <div class="empty-group row">
            <p>Drag here to create new group!</p>
         </div>
      </template>
@@ -335,27 +357,41 @@
         <?= jvbImageMeta() ?>
      </template>
      <template class="imageGroup">
         <details class="upload-group">
            <summary class="row btw">
               <div class="group-header">
                  <div class="group-actions">
                     <button type="button" class="add-selection-to-group" title="Add selected images to this group">
                        <?= jvbIcon('add') ?>
                        Add to Group
                     </button>
                     <button type="button" class="remove-group" title="Delete group">
                        <?= jvbIcon('delete') ?>
                        Delete Group
                     </button>
         <div class="upload-group">
            <div class="group-header">
               <div class="selected">
                  <div class="field">
                     <input type="checkbox" id="select-all-group" name="select-all-group">
                     <label for="select-all-group">
                        Select All
                     </label>
                  </div>
                  <div class="info" hidden>
                  </div>
               </div>
               <div class="group-content col">
                  <div class="item-grid group"></div>
                  <p class="hint group-count"></p>
               <div class="group-actions">
                  <button type="button" data-action="add-to-group" title="Add selected uploads to this group">
                     <?= jvbIcon('add') ?>
                     Add Here
                  </button>
                  <button type="button" data-action="delete-group" title="Delete group">
                     <?= jvbIcon('delete') ?>
                     Delete Group
                  </button>
               </div>
            </summary>
            <div class="fields"></div>
         </details>
            </div>
            <details>
               <summary class="row btw">
                  Extra Fields
               </summary>
               <div class="fields"></div>
            </details>
            <div class="group-content col">
               <div class="item-grid group"></div>
               <p class="hint group-count"></p>
            </div>
         </div>

      </template>
      <template class="groupActions">
         <div class="item-actions">
@@ -368,7 +404,7 @@
               </label>
            </div>

            <button type="button" class="remove" title="Remove from Group">
            <button type="button" data-action="remove-from-group" title="Remove from Group">
               <?=jvbIcon('delete')?>
            </button>
         </div>
@@ -379,14 +415,10 @@
               <span class="selection-count">0</span> items selected
            </div>
            <div class="selection-controls">
               <button type="button" class="create-from-selection">
               <button type="button" data-action="add-to-group">
                  <?= jvbIcon('add') ?>
                  New Group
               </button>
               <button type="button" class="deselect-all">
                  <?= jvbIcon('close') ?>
                  Deselect All
               </button>
            </div>
         </div>
      </template>
@@ -412,28 +444,28 @@
         </div>
      </template>
      <template class="uploadItem">
         <div class="upload-item">
         <div class="item upload">
            <div class="preview">
               <img>
               <?php jvbRenderProgressBar('<span class="icon"></span><span class="details"></span>') ?>
               <div class="actions">
                  <input type="checkbox" class="upload-select" name="select-item" id="select-item">
                  <label for="select-item" aria-label="Select image"></label>
                  <div class="item-actions">
                     <div class="radio-button">
                        <input type="radio" class="featured btn" name="featured" id="featured" hidden>
                        <label for="featured">
                           <?=jvbIcon('star')?>
                           <?=jvbIcon('star', ['style' => 'fill'])?>
                           <span class="screen-reader-text">Set as featured image</span>
                        </label>
                     </div>

                     <button type="button" class="remove" title="Remove from Group">
                        <?=jvbIcon('delete')?>
                     </button>
               <?php jvbRenderProgressBar('',true) ?>
               <input type="checkbox" class="upload-select" name="select-item" id="select-item">
               <label for="select-item" aria-label="Select image">
                  <img>
                  <video></video>
                  <span></span>
               </label>
               <div class="item-actions row btw">
                  <div class="radio-button">
                     <input type="radio" class="featured btn" name="featured" id="featured" hidden>
                     <label for="featured">
                        <?=jvbIcon('star')?>
                        <?=jvbIcon('star', ['style' => 'fill'])?>
                        <span class="screen-reader-text">Set as featured image</span>
                     </label>
                  </div>

                  <button type="button" data-action="delete-upload" title="Remove from Group">
                     <?=jvbIcon('delete')?>
                  </button>
               </div>
            </div>
            <details>
@@ -442,35 +474,37 @@
         </div>
      </template>
      <template class="restoreNotification">
         <div class="restore-notification">
            <div class="restore-content">
         <dialog class="restore-uploads">
            <div class="wrap">
               <div class="restore-message">
                  <h4>Looks like we left things hanging</h4>
                  <p class="restore-details"></p>
                  <p class="hint">If you'd rather start over, you can clear this information.</p>
               </div>
               <div class="restore-actions">
                  <div class="selection-controls">
                     <button type="button" class="select-all-restore">Select All</button>
                     <button type="button" class="select-none-restore">Select None</button>
                  <div class="selected">
                     <div class="field">
                        <input type="checkbox" id="select-all-restore" name="select-all-restore">
                        <label for="select-all-restore">
                           Select All
                        </label>
                     </div>
                     <div class="info" hidden>
                     </div>
                  </div>
                  <div class="action-buttons">
                     <button type="button" class="restore-selected">
                  <div class="m-actions row nowrap">
                     <button type="button" data-action="restore">
                        <?= jvbIcon('restore') ?>
                        Restore Selected
                     </button>
                     <button type="button" class="restart-uploads">
                        <?= jvbIcon('delete') ?>
                        Scrap Cache
                     </button>
                     <button type="button" class="dismiss-cache-check" title="Dismiss notification">
                     <button type="button" data-action="clear-cache" title="Clear cache and close window">
                        <?= jvbIcon('close') ?>
                        Dismiss
                        Clear Cache
                     </button>
                  </div>
               </div>
            </div>
         </div>
         </dialog>
      </template>
      <template class="restoreField">
         <div class="restore-field">
@@ -478,24 +512,6 @@
            <div class="item-grid restore"></div>
         </div>
      </template>
      <template class="restoreItem">
         <label class="restore-item">
            <div class="preview">
               <img>
               <div class="image-placeholder"><svg width="40" height="40" fill="currentColor" viewBox="0 0 256 256">
                     <path d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40ZM56,56H200V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L56,117.37V56Zm144,144H56V141.67l36.7-36.7,44,44a8,8,0,0,0,11.31,0l20-20L200,161.67V200ZM148,100a12,12,0,1,1,12,12A12,12,0,0,1,148,100Z"/>
                  </svg></div>
            </div>
            <div class="restore-item-info">
               <div class="name"></div>
               <div class="restore-item-meta">
               </div>
            </div>
            <div class="restore-item-controls">
               <input type="checkbox" id="restore-" class="restore-checkbox" checked>
            </div>
         </label>
      </template>

      <template class="startOverConfirmation">
         <dialog class="start-over-confirmation">
@@ -519,6 +535,12 @@
            </div>
         </dialog>
      </template>
      <template class="dragPreview">
         <div class="drag-preview">
            <div class="drag-items"><div class="drag-item"></div></div>
            <div class="drag-count" hidden></div>
         </div>
      </template>
      <?php
   }
   if (wp_script_is('jvb-selector')) {