From e729f920139f0c65902be2d6b2c32466b08375e8 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Mon, 20 Oct 2025 17:54:52 +0000
Subject: [PATCH] =Form updates
---
inc/helpers/renderFields.php | 174 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 98 insertions(+), 76 deletions(-)
diff --git a/inc/helpers/renderFields.php b/inc/helpers/renderFields.php
index 44cf5cd..2e31338 100644
--- a/inc/helpers/renderFields.php
+++ b/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')) {
--
Gitblit v1.10.0