v1.5.0: extend theme with navigation dropdowns, 9 page templates, auth UI, newsletter, contact panel
Major theme extension adding full-featured navigation with dropdown submenus (Tools, My Data, Resources), 9 new page templates (Calculator, Protocol Builder, Tracker, Subject Log, Documentation, Directory, Science Feed, Profile, Sign In/Register), documentation page with sidebar ToC and scroll spy, branded AJAX authentication forms, newsletter signup with admin export, slide-out contact/support panel, Research Modules 6-card grid on front page, and comprehensive footer update. Split functions.php (554→206 lines) into 6 focused inc/ modules: helpers, customizer, auth-handlers, contact-handler, page-setup, newsletter-admin. All new components include dark mode support, CSRF protection, input sanitization, output escaping, and graceful plugin degradation via shortcode_exists(). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
peptiderepo
192
assets/js/auth.js
Normal file
192
assets/js/auth.js
Normal file
@@ -0,0 +1,192 @@
|
||||
/**
|
||||
* Authentication Page — Form Toggle & Validation
|
||||
* Peptide Starter Theme
|
||||
*
|
||||
* Handles:
|
||||
* - Toggle between sign-in and register forms
|
||||
* - Client-side form validation
|
||||
* - Password strength indicator
|
||||
* - AJAX form submission to avoid full page reload
|
||||
*
|
||||
* @see page-auth.php — renders the auth forms
|
||||
* @see functions.php — AJAX handlers (ps_auth_login, ps_auth_register)
|
||||
*
|
||||
* Conditionally enqueued only on pages using the Sign In / Register template.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var loginWrap = document.getElementById('ps-auth-login');
|
||||
var registerWrap = document.getElementById('ps-auth-register');
|
||||
var showRegister = document.getElementById('ps-show-register');
|
||||
var showLogin = document.getElementById('ps-show-login');
|
||||
var messages = document.getElementById('ps-auth-messages');
|
||||
var loginForm = document.getElementById('ps-login-form');
|
||||
var registerForm = document.getElementById('ps-register-form');
|
||||
|
||||
if (!loginWrap || !registerWrap) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle between login and register views.
|
||||
* @param {string} view - 'login' or 'register'.
|
||||
*/
|
||||
function showView(view) {
|
||||
clearMessages();
|
||||
if (view === 'register') {
|
||||
loginWrap.classList.add('ps-auth-form-wrap--hidden');
|
||||
registerWrap.classList.remove('ps-auth-form-wrap--hidden');
|
||||
} else {
|
||||
registerWrap.classList.add('ps-auth-form-wrap--hidden');
|
||||
loginWrap.classList.remove('ps-auth-form-wrap--hidden');
|
||||
}
|
||||
}
|
||||
|
||||
if (showRegister) {
|
||||
showRegister.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
showView('register');
|
||||
});
|
||||
}
|
||||
|
||||
if (showLogin) {
|
||||
showLogin.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
showView('login');
|
||||
});
|
||||
}
|
||||
|
||||
// Check URL hash on load for deep linking.
|
||||
if (window.location.hash === '#register') {
|
||||
showView('register');
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a message in the auth messages area.
|
||||
* @param {string} text - Message text.
|
||||
* @param {string} type - 'success', 'error', or 'info'.
|
||||
*/
|
||||
function showMessage(text, type) {
|
||||
if (!messages) {
|
||||
return;
|
||||
}
|
||||
var alertClass = 'ps-alert ps-alert-' + (type || 'info');
|
||||
messages.innerHTML = '<div class="' + alertClass + '"><p>' + escapeHtml(text) + '</p></div>';
|
||||
}
|
||||
|
||||
function clearMessages() {
|
||||
if (messages) {
|
||||
messages.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML entities to prevent XSS in message display.
|
||||
* @param {string} str - Raw string.
|
||||
* @returns {string} Escaped string.
|
||||
*/
|
||||
function escapeHtml(str) {
|
||||
var div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
/**
|
||||
* Password strength indicator.
|
||||
* Updates the #ps-password-strength element with a rating.
|
||||
*/
|
||||
var passwordInput = document.getElementById('ps-reg-password');
|
||||
var strengthEl = document.getElementById('ps-password-strength');
|
||||
|
||||
if (passwordInput && strengthEl) {
|
||||
passwordInput.addEventListener('input', function() {
|
||||
var val = passwordInput.value;
|
||||
var score = 0;
|
||||
var label = '';
|
||||
|
||||
if (val.length >= 8) { score++; }
|
||||
if (val.length >= 12) { score++; }
|
||||
if (/[a-z]/.test(val) && /[A-Z]/.test(val)) { score++; }
|
||||
if (/\d/.test(val)) { score++; }
|
||||
if (/[^a-zA-Z0-9]/.test(val)) { score++; }
|
||||
|
||||
if (val.length === 0) {
|
||||
label = '';
|
||||
} else if (score <= 1) {
|
||||
label = '<span class="ps-strength-weak">Weak</span>';
|
||||
} else if (score <= 3) {
|
||||
label = '<span class="ps-strength-fair">Fair</span>';
|
||||
} else {
|
||||
label = '<span class="ps-strength-strong">Strong</span>';
|
||||
}
|
||||
|
||||
strengthEl.innerHTML = label;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* AJAX form submission handler.
|
||||
* @param {HTMLFormElement} form - The form to submit.
|
||||
*/
|
||||
function submitForm(form) {
|
||||
var formData = new FormData(form);
|
||||
var btn = form.querySelector('button[type="submit"]');
|
||||
var origText = btn.textContent;
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = '...';
|
||||
clearMessages();
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', (typeof peptideStarterData !== 'undefined' ? peptideStarterData.ajaxUrl : '/wp-admin/admin-ajax.php'));
|
||||
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
|
||||
|
||||
xhr.onload = function() {
|
||||
btn.disabled = false;
|
||||
btn.textContent = origText;
|
||||
|
||||
try {
|
||||
var resp = JSON.parse(xhr.responseText);
|
||||
if (resp.success && resp.data && resp.data.redirect) {
|
||||
window.location.href = resp.data.redirect;
|
||||
} else {
|
||||
showMessage(resp.data && resp.data.message ? resp.data.message : 'An error occurred.', 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
showMessage('An unexpected error occurred. Please try again.', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
btn.disabled = false;
|
||||
btn.textContent = origText;
|
||||
showMessage('Network error. Please check your connection.', 'error');
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
}
|
||||
|
||||
if (loginForm) {
|
||||
loginForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
if (!loginForm.checkValidity()) {
|
||||
loginForm.reportValidity();
|
||||
return;
|
||||
}
|
||||
submitForm(loginForm);
|
||||
});
|
||||
}
|
||||
|
||||
if (registerForm) {
|
||||
registerForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
if (!registerForm.checkValidity()) {
|
||||
registerForm.reportValidity();
|
||||
return;
|
||||
}
|
||||
submitForm(registerForm);
|
||||
});
|
||||
}
|
||||
})();
|
||||
145
assets/js/documentation.js
Normal file
145
assets/js/documentation.js
Normal file
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* Documentation Page — Table of Contents & Scroll Spy
|
||||
* Peptide Starter Theme
|
||||
*
|
||||
* Handles:
|
||||
* - Auto-generates ToC from h2 headings in the documentation body
|
||||
* - Scroll spy highlights the active section in the sidebar
|
||||
* - Smooth scrolling on ToC link click
|
||||
* - Collapses sidebar to dropdown on mobile
|
||||
*
|
||||
* @see page-documentation.php — renders the two-column layout
|
||||
* @see style.css — .ps-docs-* classes
|
||||
*
|
||||
* Conditionally enqueued only on pages using the Documentation template.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const docsBody = document.getElementById('ps-docs-body');
|
||||
const tocList = document.getElementById('ps-docs-toc-list');
|
||||
const sidebar = document.querySelector('.ps-docs-sidebar');
|
||||
|
||||
if (!docsBody || !tocList) {
|
||||
return;
|
||||
}
|
||||
|
||||
const headings = docsBody.querySelectorAll('h2');
|
||||
|
||||
if (headings.length === 0) {
|
||||
// Hide the sidebar if there are no headings to navigate.
|
||||
if (sidebar) {
|
||||
sidebar.style.display = 'none';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the Table of Contents from h2 headings.
|
||||
* Assigns IDs to headings that lack one for anchor linking.
|
||||
*/
|
||||
function buildToc() {
|
||||
headings.forEach(function(heading, index) {
|
||||
// Ensure every heading has an ID for anchor links.
|
||||
if (!heading.id) {
|
||||
heading.id = 'section-' + (index + 1);
|
||||
}
|
||||
|
||||
var li = document.createElement('li');
|
||||
var link = document.createElement('a');
|
||||
|
||||
link.href = '#' + heading.id;
|
||||
link.textContent = heading.textContent;
|
||||
link.className = 'ps-docs-toc-link';
|
||||
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
smoothScrollTo(heading);
|
||||
});
|
||||
|
||||
li.appendChild(link);
|
||||
tocList.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Smooth scroll to a target element, accounting for the sticky header.
|
||||
* @param {HTMLElement} target The element to scroll to.
|
||||
*/
|
||||
function smoothScrollTo(target) {
|
||||
var headerHeight = document.querySelector('.site-header')
|
||||
? document.querySelector('.site-header').offsetHeight
|
||||
: 0;
|
||||
var offset = 24; // Extra breathing room below header.
|
||||
var top = target.getBoundingClientRect().top + window.pageYOffset - headerHeight - offset;
|
||||
|
||||
window.scrollTo({
|
||||
top: top,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// Update URL hash without jumping.
|
||||
history.replaceState(null, '', '#' + target.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll spy — highlights the ToC link corresponding to the
|
||||
* currently visible section. Uses IntersectionObserver for performance.
|
||||
*/
|
||||
function initScrollSpy() {
|
||||
var tocLinks = tocList.querySelectorAll('.ps-docs-toc-link');
|
||||
|
||||
if (tocLinks.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var headerHeight = document.querySelector('.site-header')
|
||||
? document.querySelector('.site-header').offsetHeight
|
||||
: 0;
|
||||
|
||||
var observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
var id = entry.target.id;
|
||||
tocLinks.forEach(function(link) {
|
||||
link.classList.remove('ps-docs-toc-link--active');
|
||||
if (link.getAttribute('href') === '#' + id) {
|
||||
link.classList.add('ps-docs-toc-link--active');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}, {
|
||||
rootMargin: '-' + (headerHeight + 32) + 'px 0px -60% 0px',
|
||||
threshold: 0
|
||||
});
|
||||
|
||||
headings.forEach(function(heading) {
|
||||
observer.observe(heading);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Mobile dropdown toggle for the sidebar ToC.
|
||||
*/
|
||||
function initMobileToggle() {
|
||||
var tocTitle = document.querySelector('.ps-docs-toc-title');
|
||||
|
||||
if (!tocTitle) {
|
||||
return;
|
||||
}
|
||||
|
||||
tocTitle.addEventListener('click', function() {
|
||||
// Only toggle on mobile (sidebar is not sticky).
|
||||
if (window.innerWidth < 1024) {
|
||||
sidebar.classList.toggle('ps-docs-sidebar--open');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize.
|
||||
buildToc();
|
||||
initScrollSpy();
|
||||
initMobileToggle();
|
||||
})();
|
||||
163
assets/js/settings-panel.js
Normal file
163
assets/js/settings-panel.js
Normal file
@@ -0,0 +1,163 @@
|
||||
/**
|
||||
* Settings Panel — Open/Close & Contact Form
|
||||
* Peptide Starter Theme
|
||||
*
|
||||
* Handles:
|
||||
* - Toggle settings slide-out panel visibility
|
||||
* - AJAX submission of the contact form
|
||||
* - Overlay backdrop click to close
|
||||
* - Escape key to close
|
||||
* - Focus trap inside the panel for accessibility
|
||||
*
|
||||
* @see template-parts/settings-panel.php — panel HTML
|
||||
* @see header.php — settings icon trigger button
|
||||
* @see functions.php — AJAX handler for contact form
|
||||
*
|
||||
* Enqueued globally (lightweight — all listeners are passive until panel opens).
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var panel = document.getElementById('ps-settings-panel');
|
||||
var overlay = document.getElementById('ps-settings-overlay');
|
||||
var closeBtn = document.getElementById('ps-settings-close');
|
||||
var openBtn = document.getElementById('ps-settings-toggle');
|
||||
var contactForm = document.getElementById('ps-contact-form');
|
||||
var statusEl = document.getElementById('ps-contact-status');
|
||||
|
||||
if (!panel || !overlay) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the settings panel.
|
||||
*/
|
||||
function openPanel() {
|
||||
panel.classList.add('ps-settings-panel--open');
|
||||
panel.setAttribute('aria-hidden', 'false');
|
||||
overlay.classList.add('ps-settings-overlay--active');
|
||||
overlay.setAttribute('aria-hidden', 'false');
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Focus the close button for keyboard users.
|
||||
if (closeBtn) {
|
||||
setTimeout(function() { closeBtn.focus(); }, 100);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the settings panel.
|
||||
*/
|
||||
function closePanel() {
|
||||
panel.classList.remove('ps-settings-panel--open');
|
||||
panel.setAttribute('aria-hidden', 'true');
|
||||
overlay.classList.remove('ps-settings-overlay--active');
|
||||
overlay.setAttribute('aria-hidden', 'true');
|
||||
document.body.style.overflow = '';
|
||||
|
||||
// Return focus to the trigger button.
|
||||
if (openBtn) {
|
||||
openBtn.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Bind open trigger.
|
||||
if (openBtn) {
|
||||
openBtn.addEventListener('click', openPanel);
|
||||
}
|
||||
|
||||
// Bind close button.
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', closePanel);
|
||||
}
|
||||
|
||||
// Bind overlay backdrop click.
|
||||
overlay.addEventListener('click', closePanel);
|
||||
|
||||
// Close on Escape key.
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && panel.classList.contains('ps-settings-panel--open')) {
|
||||
closePanel();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Contact form AJAX submission.
|
||||
*/
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!contactForm.checkValidity()) {
|
||||
contactForm.reportValidity();
|
||||
return;
|
||||
}
|
||||
|
||||
var formData = new FormData(contactForm);
|
||||
var btn = contactForm.querySelector('button[type="submit"]');
|
||||
var origText = btn.textContent;
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = '...';
|
||||
|
||||
if (statusEl) {
|
||||
statusEl.innerHTML = '';
|
||||
}
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
var ajaxUrl = (typeof peptideStarterData !== 'undefined' && peptideStarterData.ajaxUrl)
|
||||
? peptideStarterData.ajaxUrl
|
||||
: '/wp-admin/admin-ajax.php';
|
||||
|
||||
xhr.open('POST', ajaxUrl);
|
||||
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
|
||||
|
||||
xhr.onload = function() {
|
||||
btn.disabled = false;
|
||||
btn.textContent = origText;
|
||||
|
||||
try {
|
||||
var resp = JSON.parse(xhr.responseText);
|
||||
if (resp.success) {
|
||||
if (statusEl) {
|
||||
statusEl.innerHTML = '<div class="ps-alert ps-alert-success"><p>' +
|
||||
escapeHtml(resp.data.message || 'Message sent.') + '</p></div>';
|
||||
}
|
||||
contactForm.reset();
|
||||
} else {
|
||||
if (statusEl) {
|
||||
statusEl.innerHTML = '<div class="ps-alert ps-alert-error"><p>' +
|
||||
escapeHtml(resp.data.message || 'Failed to send.') + '</p></div>';
|
||||
}
|
||||
}
|
||||
} catch (ex) {
|
||||
if (statusEl) {
|
||||
statusEl.innerHTML = '<div class="ps-alert ps-alert-error"><p>An unexpected error occurred.</p></div>';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
btn.disabled = false;
|
||||
btn.textContent = origText;
|
||||
if (statusEl) {
|
||||
statusEl.innerHTML = '<div class="ps-alert ps-alert-error"><p>Network error. Please try again.</p></div>';
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML for safe insertion.
|
||||
* @param {string} str - Raw text.
|
||||
* @returns {string} Escaped HTML.
|
||||
*/
|
||||
function escapeHtml(str) {
|
||||
var div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user