v3.0.0.2

FlatlyPage

← Changes All versions

174 lines · 7.1 KB

<?php
$publish_enabled = $edit_product['publish_enabled'] ?? false;
$publish_date = $edit_product['publish_date'] ?? '';
$publish_time_format = $edit_product['publish_time_format'] ?? '24h';
$publish_timezone = $edit_product['publish_timezone'] ?? 'Europe/Warsaw';
$publish_time_24h = $edit_product['publish_time'] ?? '';
$publish_hour_12 = '';
$publish_ampm = $edit_product['publish_ampm'] ?? '';
if ($publish_time_24h !== '') {
[$h24, $min] = array_pad(explode(':', $publish_time_24h), 2, '00');
$h24 = (int)$h24;
if ($publish_ampm === '') {
$publish_ampm = $h24 >= 12 ? 'PM' : 'AM';
}
$h12 = $h24 % 12;
if ($h12 === 0) {
$h12 = 12;
}
$publish_hour_12 = sprintf('%02d:%s', $h12, $min);
}
$timezone_list = get_publish_timezone_list();
?>
<div class="form-group publish-schedule-block" style="border-top: 1px solid var(--border, #e5e7eb); padding-top: 16px; margin-top: 8px;">
<label class="checkbox-label">
<input
type="checkbox"
name="publish_enabled"
id="publish_enabled"
value="1"
onchange="document.getElementById('publishScheduleFields').style.display = this.checked ? 'block' : 'none';"
<?= $publish_enabled ? 'checked' : '' ?>>
<span>Publish later (optional)</span>
</label>
<p class="form-hint">Keep this page hidden from visitors until the date and time you pick. You can still see it here in the dashboard.</p>
<div id="publishScheduleFields" class="publish-schedule-fields-wrapper" style="display: <?= $publish_enabled ? 'block' : 'none' ?>; margin-top: 12px;">
<div class="form-row-3">
<div class="form-group">
<label class="form-label">Publish Date</label>
<input type="date" name="publish_date" class="form-input" value="<?= e($publish_date) ?>">
</div>
<div class="form-group">
<label class="form-label">Publish Time</label>
<input
type="time"
name="publish_time_24"
class="form-input publish-time-24"
value="<?= e($publish_time_24h) ?>"
style="<?= $publish_time_format === '12h' ? 'display:none;' : '' ?>">
<div class="publish-time-12-wrapper" style="display: <?= $publish_time_format === '12h' ? 'flex' : 'none' ?>; gap: 8px;">
<input
type="time"
name="publish_time_12"
class="form-input publish-time-12"
value="<?= e($publish_hour_12) ?>"
style="flex: 1;">
<select name="publish_ampm" class="form-input publish-ampm" style="flex: 0 0 90px;">
<option value="AM" <?= $publish_ampm === 'AM' ? 'selected' : '' ?>>AM</option>
<option value="PM" <?= $publish_ampm === 'PM' ? 'selected' : '' ?>>PM</option>
</select>
</div>
<input type="hidden" name="publish_time" id="publish_time_hidden" value="<?= e($publish_time_24h) ?>">
</div>
<div class="form-group">
<label class="form-label">Time Format</label>
<select name="publish_time_format" class="form-input publish-time-format-select">
<option value="24h" <?= $publish_time_format === '24h' ? 'selected' : '' ?>>24-hour</option>
<option value="12h" <?= $publish_time_format === '12h' ? 'selected' : '' ?>>12-hour (AM/PM)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">Timezone</label>
<select name="publish_timezone" class="form-input">
<?php foreach ($timezone_list as $tz): ?>
<option value="<?= e($tz) ?>" <?= $publish_timezone === $tz ? 'selected' : '' ?>><?= e($tz) ?></option>
<?php endforeach; ?>
</select>
<p class="form-hint">The publish time follows this timezone, not your visitors' local time.</p>
</div>
</div>
</div>
<script>
(function() {
const scriptEl = document.currentScript;
let container = scriptEl.previousElementSibling;
while (container && !container.classList.contains('publish-schedule-block')) {
container = container.previousElementSibling;
}
if (!container) return;
const wrapper = container.querySelector('.publish-schedule-fields-wrapper');
if (!wrapper) return;
const time24Input = wrapper.querySelector('.publish-time-24');
const time12Wrapper = wrapper.querySelector('.publish-time-12-wrapper');
const time12Input = wrapper.querySelector('.publish-time-12');
const ampmSelect = wrapper.querySelector('.publish-ampm');
const hiddenTime = wrapper.querySelector('#publish_time_hidden');
const formatSelect = wrapper.querySelector('.publish-time-format-select');
function to12h(time24) {
if (!time24) return {
time: '',
ampm: 'AM'
};
const [h, m] = time24.split(':').map(Number);
const ampm = h >= 12 ? 'PM' : 'AM';
let h12 = h % 12;
if (h12 === 0) h12 = 12;
return {
time: String(h12).padStart(2, '0') + ':' + String(m).padStart(2, '0'),
ampm
};
}
function to24h(time12, ampm) {
if (!time12) return '';
const [h, m] = time12.split(':').map(Number);
let h24 = h % 12;
if (ampm === 'PM') h24 += 12;
return String(h24).padStart(2, '0') + ':' + String(m).padStart(2, '0');
}
function syncHidden() {
if (formatSelect.value === '12h') {
hiddenTime.value = to24h(time12Input.value, ampmSelect.value);
} else {
hiddenTime.value = time24Input.value;
}
}
function switchFormat() {
if (formatSelect.value === '12h') {
const converted = to12h(time24Input.value);
if (converted.time) {
time12Input.value = converted.time;
ampmSelect.value = converted.ampm;
}
time24Input.style.display = 'none';
time12Wrapper.style.display = 'flex';
} else {
const time24 = to24h(time12Input.value, ampmSelect.value);
if (time24) {
time24Input.value = time24;
}
time24Input.style.display = '';
time12Wrapper.style.display = 'none';
}
syncHidden();
}
formatSelect.addEventListener('change', switchFormat);
time24Input.addEventListener('input', syncHidden);
time12Input.addEventListener('input', syncHidden);
ampmSelect.addEventListener('change', syncHidden);
syncHidden();
const form = wrapper.closest('form');
if (form) {
form.addEventListener('submit', syncHidden);
}
})();
</script>