feat: ship Peptide Reconstitution Calculator v1.0.0
Interactive reconstitution calculator with peptide-specific presets. Core features: - [prc_calculator] shortcode with instant client-side math - Concentration (mg/mL), mcg/unit, injection volume, syringe units, doses/vial - Live presets from PR Core dosing data (graceful fallback to 8 defaults) - REST API (prc/v1): presets list/detail + server-side calculate - Transient-cached presets with event-driven invalidation - Dark mode + responsive design (320px+) - Full teardown in uninstall.php 12 PHP files (max 241 lines), 1 JS file, 1 CSS file. CI: PHP lint 8.1-8.3, PHPCS WordPress, 300-line check. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
peptiderepo
303
assets/css/calculator.css
Normal file
303
assets/css/calculator.css
Normal file
@@ -0,0 +1,303 @@
|
||||
/**
|
||||
* Peptide Reconstitution Calculator — Frontend Styles
|
||||
*
|
||||
* Namespace: .prc- prefix on all classes.
|
||||
* Design: Clean, card-based layout. Responsive down to 320px.
|
||||
* Dark mode: respects prefers-color-scheme.
|
||||
*
|
||||
* @see includes/frontend/class-prc-shortcode.php — HTML structure.
|
||||
*/
|
||||
|
||||
/* ── Container ─────────────────────────────────────────────────────── */
|
||||
|
||||
.prc-calculator {
|
||||
max-width: 640px;
|
||||
margin: 2rem auto;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Header ────────────────────────────────────────────────────────── */
|
||||
|
||||
.prc-calculator__header {
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: linear-gradient(135deg, #1e40af, #3b82f6);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.prc-calculator__title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* ── Body (form fields) ───────────────────────────────────────────── */
|
||||
|
||||
.prc-calculator__body {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
/* ── Field ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.prc-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.prc-field--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.prc-field__label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.prc-field__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.prc-field__input {
|
||||
flex: 1;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
color: #111827;
|
||||
background: #f9fafb;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.prc-field__input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.prc-field__input--half {
|
||||
flex: 0 0 48%;
|
||||
}
|
||||
|
||||
.prc-field__input--unit {
|
||||
flex: 0 0 80px;
|
||||
}
|
||||
|
||||
.prc-field__unit {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
.prc-field__hint {
|
||||
font-size: 0.8rem;
|
||||
color: #6b7280;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.prc-field__static {
|
||||
font-size: 0.95rem;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.prc-field__custom-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ── Results Panel ─────────────────────────────────────────────────── */
|
||||
|
||||
.prc-results {
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
background: #f0f9ff;
|
||||
}
|
||||
|
||||
.prc-results--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.prc-results__title {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.prc-results__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* ── Result Card ───────────────────────────────────────────────────── */
|
||||
|
||||
.prc-result-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.prc-result-card--primary {
|
||||
border-color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.prc-result-card__value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.prc-result-card--primary .prc-result-card__value {
|
||||
color: #1e40af;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.prc-result-card__label {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
margin-top: 0.375rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* ── Disclaimer ────────────────────────────────────────────────────── */
|
||||
|
||||
.prc-disclaimer {
|
||||
padding: 0.75rem 1.5rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
line-height: 1.5;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
/* ── Noscript ──────────────────────────────────────────────────────── */
|
||||
|
||||
.prc-noscript {
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* ── Dark Mode ─────────────────────────────────────────────────────── */
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.prc-calculator {
|
||||
background: #1f2937;
|
||||
border-color: #374151;
|
||||
}
|
||||
|
||||
.prc-calculator__header {
|
||||
background: linear-gradient(135deg, #1e3a8a, #2563eb);
|
||||
}
|
||||
|
||||
.prc-field__label {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.prc-field__input {
|
||||
background: #111827;
|
||||
border-color: #4b5563;
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
.prc-field__input:focus {
|
||||
background: #1f2937;
|
||||
border-color: #60a5fa;
|
||||
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
|
||||
}
|
||||
|
||||
.prc-field__unit,
|
||||
.prc-field__hint {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.prc-field__static {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.prc-results {
|
||||
background: #111827;
|
||||
border-color: #374151;
|
||||
}
|
||||
|
||||
.prc-results__title {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.prc-result-card {
|
||||
background: #1f2937;
|
||||
border-color: #374151;
|
||||
}
|
||||
|
||||
.prc-result-card--primary {
|
||||
background: #172554;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.prc-result-card__value {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
.prc-result-card--primary .prc-result-card__value {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.prc-result-card__label {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.prc-disclaimer {
|
||||
color: #6b7280;
|
||||
border-color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Responsive ────────────────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.prc-calculator {
|
||||
margin: 1rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.prc-calculator__body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.prc-results {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.prc-results__grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.prc-field__row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.prc-field__input--half {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
309
assets/js/calculator.js
Normal file
309
assets/js/calculator.js
Normal file
@@ -0,0 +1,309 @@
|
||||
/**
|
||||
* Peptide Reconstitution Calculator — Client-side logic.
|
||||
*
|
||||
* What: Drives the interactive calculator widget. Populates the peptide
|
||||
* dropdown from inline presets, auto-fills fields on selection,
|
||||
* runs reconstitution math on every input change, and renders results.
|
||||
* Dependencies: prcConfig global (set by wp_localize_script in PRC_Shortcode).
|
||||
*
|
||||
* @see includes/frontend/class-prc-shortcode.php — HTML structure + config injection.
|
||||
* @see includes/class-prc-math.php — Server-side mirror of the math.
|
||||
*/
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* ── Constants ────────────────────────────────────────────────────── */
|
||||
|
||||
var SYRINGE_UNITS_PER_ML = 100;
|
||||
|
||||
/* ── State ────────────────────────────────────────────────────────── */
|
||||
|
||||
var presets = [];
|
||||
var currentPreset = null;
|
||||
|
||||
/* ── DOM References ──────────────────────────────────────────────── */
|
||||
|
||||
var els = {};
|
||||
|
||||
/* ── Init ─────────────────────────────────────────────────────────── */
|
||||
|
||||
function init() {
|
||||
var container = document.querySelector('.prc-calculator');
|
||||
if (!container) {
|
||||
return;
|
||||
}
|
||||
|
||||
cacheDomRefs();
|
||||
loadPresets();
|
||||
populatePeptideDropdown();
|
||||
bindEvents();
|
||||
renderDisclaimer();
|
||||
|
||||
// Auto-select peptide if data attribute is set.
|
||||
var preselected = container.getAttribute('data-selected-slug');
|
||||
if (preselected) {
|
||||
els.peptideSelect.value = preselected;
|
||||
onPeptideChange();
|
||||
}
|
||||
}
|
||||
|
||||
function cacheDomRefs() {
|
||||
els.peptideSelect = document.getElementById('prc-peptide-select');
|
||||
els.vialSelect = document.getElementById('prc-vial-select');
|
||||
els.vialMg = document.getElementById('prc-vial-mg');
|
||||
els.waterMl = document.getElementById('prc-water-ml');
|
||||
els.desiredDose = document.getElementById('prc-desired-dose');
|
||||
els.doseUnit = document.getElementById('prc-dose-unit');
|
||||
els.doseRange = document.getElementById('prc-dose-range');
|
||||
els.frequencyRow = document.getElementById('prc-frequency-row');
|
||||
els.frequencyValue = document.getElementById('prc-frequency-value');
|
||||
els.results = document.getElementById('prc-results');
|
||||
els.concentration = document.getElementById('prc-result-concentration');
|
||||
els.mcgPerUnit = document.getElementById('prc-result-mcg-per-unit');
|
||||
els.syringeUnits = document.getElementById('prc-result-syringe-units');
|
||||
els.injectionMl = document.getElementById('prc-result-injection-ml');
|
||||
els.doses = document.getElementById('prc-result-doses');
|
||||
els.disclaimer = document.getElementById('prc-disclaimer');
|
||||
}
|
||||
|
||||
function loadPresets() {
|
||||
if (typeof prcConfig !== 'undefined' && prcConfig.presets) {
|
||||
presets = prcConfig.presets;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Dropdown Population ─────────────────────────────────────────── */
|
||||
|
||||
function populatePeptideDropdown() {
|
||||
var select = els.peptideSelect;
|
||||
if (!select) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear existing options except the first placeholder.
|
||||
while (select.options.length > 1) {
|
||||
select.remove(1);
|
||||
}
|
||||
|
||||
// Add preset options.
|
||||
presets.forEach(function (preset) {
|
||||
var opt = document.createElement('option');
|
||||
opt.value = preset.slug;
|
||||
opt.textContent = preset.name;
|
||||
if (preset.source === 'pr_core') {
|
||||
opt.textContent += ' ★';
|
||||
}
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
// Add custom entry option.
|
||||
var customOpt = document.createElement('option');
|
||||
customOpt.value = '__custom__';
|
||||
var i18n = (typeof prcConfig !== 'undefined' && prcConfig.i18n) ? prcConfig.i18n : {};
|
||||
customOpt.textContent = i18n.customEntry || 'Custom / Manual Entry';
|
||||
select.appendChild(customOpt);
|
||||
}
|
||||
|
||||
/* ── Event Binding ───────────────────────────────────────────────── */
|
||||
|
||||
function bindEvents() {
|
||||
if (els.peptideSelect) {
|
||||
els.peptideSelect.addEventListener('change', onPeptideChange);
|
||||
}
|
||||
if (els.vialSelect) {
|
||||
els.vialSelect.addEventListener('change', onVialSelectChange);
|
||||
}
|
||||
if (els.vialMg) {
|
||||
els.vialMg.addEventListener('input', calculate);
|
||||
}
|
||||
if (els.waterMl) {
|
||||
els.waterMl.addEventListener('input', calculate);
|
||||
}
|
||||
if (els.desiredDose) {
|
||||
els.desiredDose.addEventListener('input', calculate);
|
||||
}
|
||||
if (els.doseUnit) {
|
||||
els.doseUnit.addEventListener('change', calculate);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Event Handlers ──────────────────────────────────────────────── */
|
||||
|
||||
function onPeptideChange() {
|
||||
var slug = els.peptideSelect.value;
|
||||
|
||||
if (slug === '__custom__' || slug === '') {
|
||||
currentPreset = null;
|
||||
clearPresetFields();
|
||||
hideResults();
|
||||
return;
|
||||
}
|
||||
|
||||
currentPreset = presets.find(function (p) { return p.slug === slug; });
|
||||
if (!currentPreset) {
|
||||
clearPresetFields();
|
||||
return;
|
||||
}
|
||||
|
||||
applyPreset(currentPreset);
|
||||
calculate();
|
||||
}
|
||||
|
||||
function onVialSelectChange() {
|
||||
var val = els.vialSelect.value;
|
||||
if (val === '__custom__') {
|
||||
els.vialMg.value = '';
|
||||
els.vialMg.focus();
|
||||
} else {
|
||||
els.vialMg.value = val;
|
||||
}
|
||||
calculate();
|
||||
}
|
||||
|
||||
/* ── Preset Application ──────────────────────────────────────────── */
|
||||
|
||||
function applyPreset(preset) {
|
||||
// Populate vial size dropdown.
|
||||
populateVialDropdown(preset.vial_sizes_mg, preset.default_vial_mg);
|
||||
|
||||
// Set vial mg input.
|
||||
els.vialMg.value = preset.default_vial_mg;
|
||||
|
||||
// Set recommended water volume.
|
||||
els.waterMl.value = preset.recommended_water_ml;
|
||||
|
||||
// Set dose unit.
|
||||
els.doseUnit.value = preset.dose_unit;
|
||||
|
||||
// Set a sensible default dose (midpoint of range).
|
||||
if (preset.dose_range_min !== null && preset.dose_range_max !== null) {
|
||||
var mid = (preset.dose_range_min + preset.dose_range_max) / 2;
|
||||
// Round to nearest sensible number.
|
||||
if (preset.dose_unit === 'mcg') {
|
||||
els.desiredDose.value = Math.round(mid / 25) * 25;
|
||||
} else {
|
||||
els.desiredDose.value = Math.round(mid * 100) / 100;
|
||||
}
|
||||
}
|
||||
|
||||
// Show dose range hint.
|
||||
if (preset.dose_range_min !== null && preset.dose_range_max !== null) {
|
||||
els.doseRange.textContent =
|
||||
'Typical range: ' + preset.dose_range_min + '–' + preset.dose_range_max + ' ' + preset.dose_unit;
|
||||
} else {
|
||||
els.doseRange.textContent = '';
|
||||
}
|
||||
|
||||
// Show frequency if available.
|
||||
if (preset.typical_frequency) {
|
||||
els.frequencyRow.classList.remove('prc-field--hidden');
|
||||
els.frequencyValue.textContent = preset.typical_frequency;
|
||||
} else {
|
||||
els.frequencyRow.classList.add('prc-field--hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function populateVialDropdown(sizes, defaultSize) {
|
||||
var select = els.vialSelect;
|
||||
select.innerHTML = '';
|
||||
|
||||
sizes.forEach(function (size) {
|
||||
var opt = document.createElement('option');
|
||||
opt.value = size;
|
||||
opt.textContent = size + ' mg';
|
||||
if (size === defaultSize) {
|
||||
opt.selected = true;
|
||||
}
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
// Add custom option.
|
||||
var customOpt = document.createElement('option');
|
||||
customOpt.value = '__custom__';
|
||||
customOpt.textContent = 'Custom…';
|
||||
select.appendChild(customOpt);
|
||||
}
|
||||
|
||||
function clearPresetFields() {
|
||||
els.vialSelect.innerHTML = '';
|
||||
els.vialMg.value = '';
|
||||
els.waterMl.value = '';
|
||||
els.desiredDose.value = '';
|
||||
els.doseRange.textContent = '';
|
||||
els.frequencyRow.classList.add('prc-field--hidden');
|
||||
}
|
||||
|
||||
/* ── Calculation ─────────────────────────────────────────────────── */
|
||||
|
||||
function calculate() {
|
||||
var vialMg = parseFloat(els.vialMg.value);
|
||||
var waterMl = parseFloat(els.waterMl.value);
|
||||
var desiredDose = parseFloat(els.desiredDose.value);
|
||||
var doseUnit = els.doseUnit.value;
|
||||
|
||||
// Need all three inputs to calculate.
|
||||
if (isNaN(vialMg) || isNaN(waterMl) || isNaN(desiredDose)) {
|
||||
hideResults();
|
||||
return;
|
||||
}
|
||||
|
||||
if (vialMg <= 0 || waterMl <= 0 || desiredDose <= 0) {
|
||||
hideResults();
|
||||
return;
|
||||
}
|
||||
|
||||
// Normalize dose to mg.
|
||||
var doseMg = (doseUnit === 'mcg') ? desiredDose / 1000 : desiredDose;
|
||||
|
||||
// Core math — mirrors PRC_Math::calculate().
|
||||
var concentrationMgMl = vialMg / waterMl;
|
||||
var totalMcg = vialMg * 1000;
|
||||
var totalUnits = waterMl * SYRINGE_UNITS_PER_ML;
|
||||
var mcgPerUnit = totalMcg / totalUnits;
|
||||
var injectionMl = doseMg / concentrationMgMl;
|
||||
var syringeUnits = injectionMl * SYRINGE_UNITS_PER_ML;
|
||||
var dosesPerVial = Math.floor(vialMg / doseMg);
|
||||
|
||||
// Render results.
|
||||
els.concentration.textContent = round(concentrationMgMl, 2) + ' mg/mL';
|
||||
els.mcgPerUnit.textContent = round(mcgPerUnit, 2) + ' mcg';
|
||||
els.syringeUnits.textContent = round(syringeUnits, 1) + ' IU';
|
||||
els.injectionMl.textContent = round(injectionMl, 3) + ' mL';
|
||||
els.doses.textContent = dosesPerVial;
|
||||
|
||||
showResults();
|
||||
}
|
||||
|
||||
/* ── UI Helpers ───────────────────────────────────────────────────── */
|
||||
|
||||
function showResults() {
|
||||
els.results.classList.remove('prc-results--hidden');
|
||||
}
|
||||
|
||||
function hideResults() {
|
||||
els.results.classList.add('prc-results--hidden');
|
||||
}
|
||||
|
||||
function renderDisclaimer() {
|
||||
var i18n = (typeof prcConfig !== 'undefined' && prcConfig.i18n) ? prcConfig.i18n : {};
|
||||
var text = i18n.disclaimer ||
|
||||
'For informational purposes only. Not medical advice. Always consult a qualified healthcare professional.';
|
||||
if (els.disclaimer) {
|
||||
els.disclaimer.textContent = text;
|
||||
}
|
||||
}
|
||||
|
||||
function round(value, decimals) {
|
||||
var factor = Math.pow(10, decimals);
|
||||
return Math.round(value * factor) / factor;
|
||||
}
|
||||
|
||||
/* ── Boot ─────────────────────────────────────────────────────────── */
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user