Compare commits

...
18 Commits
Author SHA1 Message Date
m038 fff5358ce2 Merge remote-tracking branch 'origin/main' into feat/journal-post-form 2026-07-04 22:53:45 +02:00
m038andClaude Opus 4.8 b8a7bedcda config: track API plugin functional config so it deploys
The API plugin's enabled/route/session_enabled/cors/rate_limit config
lived only in the untracked user/plugins/api/api.yaml, so a fresh install
(prod) had no working /api — Admin2, which authenticates via /api/v1,
could not log in. Move the functional config into the tracked override
user/config/plugins/api.yaml (merged over the plugin defaults). Secrets
(JWT) stay in the gitignored api-private.php; the auto-generated
popularity salt is intentionally not committed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Np4cMQLF77i664CAQXySzU
2026-07-04 22:16:45 +02:00
m038andClaude Opus 4.8 8cf1145e6f feat(post-form): reverse-geocode City/Country + drop hero-image field
Get Location now reverse-geocodes the captured coordinates into City +
Country via BigDataCloud's free client endpoint, filling only blank fields
(never clobbering a manual entry) and appending the resolved place to the
location status. Best-effort — a failure leaves the coordinates intact.

Removes the redundant hero_image field: journal entries render their hero
from the first uploaded photo (entry-journal uses entry.media.images|first),
so an explicit hero filename served no purpose. Stories still use hero_image
but are not posted through this form.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-04 21:06:01 +02:00
m038andClaude Opus 4.8 8b037511fd feat(post-form): require 1–6 photos per entry
Raise the FilePond limit from 4 to 6 and enforce a minimum of one photo.
The photo field is first in the form, so initValidation checks it first: an
empty picker blocks submit, reveals the (possibly collapsed) photo section,
and shows "Add at least one photo." under its header. Labels updated to
"Photos (1–6)".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-04 20:59:01 +02:00
m038andClaude Opus 4.8 1cde137daa feat(post-form): native datetime-local picker + require date client-side
The stock Grav `datetime` field template is deprecated and falls back to a
plain text box, so `type: datetime` + `default: now` rendered a raw input
showing the literal word "now" — unusable. Add a theme override at
templates/forms/fields/datetime/datetime.html.twig that renders a native
<input type="datetime-local"> (real calendar+clock, great on mobile), drop
the `default: now`, and prefill the current local time from post-form.js.

Also add `date` to the existing client-side validator. Together with the
picker (which can't hold an invalid value) this stops a bad/empty date from
round-tripping to the server — which was the trigger that made Grav re-render
the managed FilePond field from the session flash as filename-only inputs and
resurrect a photo the user had removed. Grav still reformats the submitted
value to the blueprint `format: 'Y-m-d H:i'` on save, so stored dates and
folder slugs are unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-04 20:41:49 +02:00
m038andClaude Opus 4.8 d17d1256ba feat(post-form): dark-theme the photo widget + drag-to-reorder that sticks
Styling: repaint FilePond's default light drop zone/thumbnails/actions with
the Field Notes dark tokens so the picker matches the site palette.

Reordering: enable FilePond drag-reorder (allowReorder, itemInsertLocation
'after'). FilePond does NOT re-sequence its submitted data[photos][] inputs on
reorder, so post-form.js sends the visual order as a top-level `photo_order`
POST key on submit. cache-on-save reads it from $_POST (after add-page-by-form
copies the files, priority -100) and renames them photo-1..N in that order —
which the entry honours since it lists media by filename and treats the first
as hero. The order key is top-level (not data[...]), so it never lands in the
entry frontmatter. Best-effort + self-idempotent: locates the new entry folder
by the uploaded filenames and no-ops if they're already renamed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-04 20:25:56 +02:00
m038andClaude Opus 4.8 2e32a8559c config: migrate strict_mode to Twig 3 compat flags for Grav 2.0
Grav 2.0's schema migration replaces the 1.7-era twig_compat with
twig2_compat/twig3_compat. Matching the repo to what the upgraded server
already generated so a content reset doesn't revert it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Np4cMQLF77i664CAQXySzU
2026-07-04 20:13:18 +02:00
m038andClaude Opus 4.8 87da3e4b5b feat(post-form): photos-first order, auto-collapsing photo summary, success-only view
- Reorder blueprint to Photos → Title → Content; drop title autofocus so the
  picker leads (it anchors what you write).
- After upload the photo section auto-collapses to a live summary bar
  ("✓ N photos ready — tap to review") and re-expands on tap; the field's
  own .form-label is hidden so the <summary> is the sole header. Trailing
  refreshes settle the summary past FilePond's event/DOM timing gap.
- Replace FilePond's murky completed-thumbnail overlay with a clean green ✓
  badge (remove action left intact).
- On a successful post, hide the reset form + location/weather controls so
  only the "✓ Saved" confirmation + View-journal CTA remain.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-04 19:46:49 +02:00
m038 d3a520426a fix(post-form): load FilePond CSS in head + real success confirmation
Three field-reported bugs, all root-caused on the isolated test server:

1+2. FilePond's stylesheet never loaded — the filepond field registers it via
   assets.addCss() during body render, too late for the theme's head-only
   {{ assets.css() }}. Photo tiles rendered as giant unstyled boxes that
   stacked and overlapped the rest of the form (Get Location/Weather, Submit),
   making it unusable and looking like upload errors. Load filepond.min.css +
   image-preview CSS in the head_assets block; hide the PQINA credit.

3. The success notice rendered at the top of a long, reset form (off-screen
   after submitting from the bottom) and .notices was unstyled on the dark
   theme. Style .notices; on load, scroll the confirmation into view and inject
   a 'View your journal' link (to site.active_trip) + 'Post another' CTA.

Verified in a browser: 3 photos render compact without overlap; post-submit
shows the confirmation + working view link.
2026-07-04 19:23:02 +02:00
m038 c70e96879b fix(post-form): convert HEIC via FilePond beforeAddFile, not a custom uploader (U4)
Runtime verification showed the custom picker uploaded to Grav's flash but
never attached photos to the entry — attachment needs FilePond's exact
(undocumented) submit contract. Reverting to type:filepond and hooking its
beforeAddFile: a HEIC item is rejected, converted to JPEG via the lazy heic-to
chunk, then re-added with pond.addFile() so FilePond owns upload + page-attach
(the proven path). Web-format photos pass through; conversion failures fail
closed (inline status, original never added). Removes the custom photos field
template + AJAX uploader.

Verified end-to-end in a browser: HEIC posts as JPEG, corrupt HEIC is skipped,
Submit gated while converting, draft photos-reselect hint intact.

Refs R8, R9, R16, R17, AE1, AE4, KTD4.
2026-07-04 17:51:58 +02:00
m038andClaude Opus 4.8 2b48e427fd chore: gitignore api plugin private-key file (api-private.php)
The API plugin (>=1.0.7) relocates jwt_secret from config/plugins/api.yaml
into a generated config/plugins/api-private.php. Ignore it like the other
per-instance secrets (git-sync.yaml, security.yaml) so it is never committed
or pushed by git-sync.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Np4cMQLF77i664CAQXySzU
2026-07-04 17:49:59 +02:00
m038 9a96d0f19e feat(post-form): text-only draft persistence (U6)
Mirror text field values (incl. EasyMDE content) to localStorage on every
edit and restore them on load. Clear the draft only when the server confirms
a successful post (.notices.success) — the invariant that guarantees text
survives validation failures, save errors, and session expiry (login form
shown → form absent → draft left intact for post-reauth restore). Photos are
not persisted (File/Blob can't serialize); on restore an inline hint says
they need re-selecting.

Refs R19 (preserve-on-failure), R20, KTD6.
2026-07-04 16:45:28 +02:00
m038 7f021ab114 feat(post-form): Field Notes styling, disclosure, feedback states (U5)
Migrate Get Location/Weather + required-field validation out of the
template's inline scripts into the bundle: generalize the field lookup so
weather_desc (now a <select>) is found, gate Get Weather until coords exist,
and add idle/loading/success/error states. Build the 'More options' <details>
(native, KTD5) around the advanced trio, auto-open when any has a value.
Add Field Notes CSS: select/number styling, EasyMDE dark theme, disclosure,
button spinner, and server form-message states.

Refs R5, R11, R12, R18, R19, AE3, KTD5.
2026-07-04 16:42:58 +02:00
m038andClaude Opus 4.8 c4e9b2f6bf config: switch GPM release channel testing -> stable
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Np4cMQLF77i664CAQXySzU
2026-07-04 16:38:28 +02:00
m038 bf5b5c2f3c feat(post-form): client-side HEIC->JPEG photo picker (U4)
Replace /post's managed filepond field with a controlled 'photos' field
(theme forms/fields/photos) + picker logic in post-form.js: magic-byte
sniff (ISO-BMFF ftyp brands, not filename/MIME), lazy import('heic-to')
only for real HEIC (deferred 3MB chunk via ESM splitting), per-thumbnail
converting/uploading/done/error states, in-flight counter gating Submit,
and fail-closed skip on conversion failure. Converted JPEGs POST to Grav's
AJAX file-upload route into the form flash (the only path copyFiles reads),
so add-page-by-form attaches them on submit. Web-format photos pass through.

Refs R8, R9, R16, R17, AE1, AE4, KTD4.
2026-07-04 16:38:13 +02:00
m038 6282528dd8 feat(post-form): EasyMDE editor + /post-scoped ESM bundle (U3)
Add a page-scoped js/src/post-form.js bundle (built ESM + code-splitting
so U4's heic-to becomes a deferred chunk) loaded only by post-form.html.twig
via a new base head_assets block. EasyMDE replaces the bare textarea with a
minimal toolbar (bold/italic/list/link/preview), FA-free via CSS glyphs, and
syncs codemirror.save() on change + capture-phase submit so the inline
required-field validator and payload see the live value.

Refs R7, R15, KTD2, KTD3.
2026-07-04 15:40:28 +02:00
m038 87e216594e feat(post-form): expose all entry fields + weather picker (U2)
weather_desc hidden->select (emoji conditions mirroring entry.yaml),
weather_temp_c hidden->editable number, add transport_mode select and
the advanced trio (hero_image, force_connect, featured) tagged
advanced-field for U5's More options disclosure.

Refs R3, R4, R6, AE3.
2026-07-04 15:32:46 +02:00
m038 817c20c24a feat(post-form): inject active-trip parent server-side (U1)
Derive the entry write target from site.active_trip at submit time in
cache-on-save's onFormValidationProcessed handler, and fail closed
(ValidationException) when no active trip is set. Removes the hardcoded
pageconfig.parent that had to be hand-synced with active_trip.

Refs R1, R2, AE2, KTD1.
2026-07-04 15:29:07 +02:00
16 changed files with 1606 additions and 143 deletions
+1
View File
@@ -6,5 +6,6 @@
/pages/01.trips/italy-2026-demo/
/pages/02.post/*ui-test*/
/config/plugins/git-sync.yaml
/config/plugins/api-private.php
/config/security.yaml
/themes/intotheeast/node_modules/
+59 -3
View File
@@ -1,4 +1,60 @@
popularity:
salt: 671ae9ab4f792c7dc860dbe8be288f2fdebdb3b4615f3c0f43211ecb95aaeeb3
enabled: true
route: /api
version_prefix: v1
auth:
jwt_secret: 61a84160bdd430768c82c4fe153e151a7a6f68f993c3779a5f36d32ee9293653
api_keys_enabled: true
jwt_enabled: true
jwt_algorithm: HS256
jwt_expiry: 3600
jwt_refresh_expiry: 604800
session_enabled: true
cors:
enabled: true
origins: { }
methods:
- GET
- POST
- PATCH
- DELETE
- OPTIONS
headers:
- Content-Type
- Authorization
- X-API-Key
- X-API-Token
- X-Grav-Environment
- If-Match
- If-None-Match
expose_headers:
- ETag
- X-Invalidates
- X-RateLimit-Limit
- X-RateLimit-Remaining
- X-RateLimit-Reset
max_age: 86400
credentials: false
rate_limit:
enabled: true
requests: 120
window: 60
storage: file
flex_backend:
pages: true
accounts: true
pagination:
default_per_page: 20
max_per_page: 1000
invitations:
expiration: 604800
popularity:
enabled: true
exclude_admin: true
exclude_ips: { }
history:
daily: 30
monthly: 12
visitors: 20
ignore:
- '/test*'
- /modular
salt: 37517ad926e4f900863af7f1b58718cdccc34f7265dedd09d33b6f820046c510
+3 -2
View File
@@ -210,7 +210,7 @@ session:
domain: null
path: null
gpm:
releases: testing
releases: stable
official_gpm_only: true
http:
method: curl
@@ -237,7 +237,8 @@ flex:
lifetime: 600
strict_mode:
yaml_compat: false
twig_compat: false
blueprint_compat: false
twig2_compat: false
twig3_compat: true
uploads_privacy:
enabled: false
+92 -18
View File
@@ -4,9 +4,9 @@ template: post-form
access:
site.login: true
# Keep in sync with active_trip in user/config/site.yaml
# Parent (write target) is injected server-side from site.active_trip by the
# cache-on-save plugin (onFormValidationProcessed) — no manual sync needed.
pageconfig:
parent: '/trips/italy-2026-demo/dailies'
slug_field: 'date,title'
overwrite_mode: false
@@ -19,19 +19,41 @@ form:
action: /post
enctype: multipart/form-data
fields:
# Photos come first — they anchor what you'll write (Photos → Title →
# Content). After upload post-form.js auto-collapses this into a summary
# bar so the thumbnails don't crowd the writing area.
-
name: photos
label: Photos (16)
# Grav-managed filepond field. post-form.js hooks its beforeAddFile
# to convert HEIC->JPEG in the browser, then re-adds the JPEG via the
# public pond.addFile() API — FilePond keeps ownership of the upload
# and page-attach contract (U4).
type: filepond
multiple: true
destination: '@self'
# Max 6 photos per entry; at least 1 is required (enforced
# client-side in post-form.js initValidation).
limit: 6
accept:
- 'image/*'
-
name: title
label: Title
type: text
autofocus: true
validate:
required: true
-
name: date
label: Date & Time
# Rendered as a native <input type="datetime-local"> by the theme
# override at templates/forms/fields/datetime/datetime.html.twig.
# No `default: now` — the stock text fallback would print the literal
# string "now" into the picker; post-form.js prefills the current
# local time instead (and the client validator requires this field).
type: datetime
default: now
format: 'Y-m-d H:i'
validate:
required: true
@@ -44,16 +66,6 @@ form:
validate:
required: true
-
name: photos
label: Photos (max 4)
type: filepond
multiple: true
destination: '@self'
limit: 4
accept:
- 'image/*'
-
name: lat
label: Latitude
@@ -79,12 +91,74 @@ form:
placeholder: 'e.g. Japan'
-
name: weather_temp_c
type: hidden
name: weather_desc
label: Weather Condition
type: select
default: ''
options:
'': '— none —'
'Sunny': '☀️ Sunny'
'Partly cloudy': '⛅ Partly cloudy'
'Cloudy': '☁️ Cloudy'
'Foggy': '🌫️ Foggy'
'Drizzle': '🌦️ Drizzle'
'Rain': '🌧️ Rain'
'Snow': '❄️ Snow'
'Thunderstorm': '⛈️ Thunderstorm'
-
name: weather_desc
type: hidden
name: weather_temp_c
label: 'Temperature (°C)'
type: number
placeholder: 'tap "Get Weather" or type it'
validate:
min: -60
max: 60
-
name: transport_mode
label: 'How I got here'
type: select
default: ''
options:
'': '— not specified —'
'walking': '🚶 Walking'
'bicycle': '🚲 Bicycle'
'bus': '🚌 Bus'
'train': '🚆 Train'
'car': '🚗 Car'
'plane': '✈️ Plane'
# Advanced fields — collapsed behind "More options" (see U5).
# No hero_image field: journal entries render their hero from the first
# uploaded photo (entry-journal.html.twig uses entry.media.images|first),
# so an explicit hero filename was redundant. Stories still use hero_image
# but they aren't posted through this form.
-
name: force_connect
label: Force connector line
type: toggle
classes: advanced-field
highlight: 0
default: 0
options:
1: 'Yes'
0: 'No'
validate:
type: bool
-
name: featured
label: Featured highlight
type: toggle
classes: advanced-field
highlight: 0
default: 0
options:
1: 'Yes'
0: 'No'
validate:
type: bool
novalidate: true
+188 -3
View File
@@ -1,6 +1,7 @@
<?php
namespace Grav\Plugin;
use Grav\Common\Data\ValidationException;
use Grav\Common\Plugin;
use RocketTheme\Toolbox\Event\Event;
@@ -9,18 +10,202 @@ class CacheOnSavePlugin extends Plugin
public static function getSubscribedEvents(): array
{
return [
'onFormProcessed' => ['onFormProcessed', 0],
// Runs before add-page-by-form's onFormProcessed (page write), so it
// can inject the write target and abort the submit by failing validation.
'onFormValidationProcessed' => ['onFormValidationProcessed', 0],
// Priority -100 so this runs AFTER add-page-by-form's onFormProcessed
// (priority 0) has created the page and copied the uploaded files —
// we reorder those files, then clear the page-tree cache.
'onFormProcessed' => ['onFormProcessed', -100],
];
}
/**
* Server-authoritative active-trip parent injection.
*
* The post form no longer hardcodes `pageconfig.parent`; instead the write
* target is derived from `site.active_trip` at submit time and injected into
* the form data. add-page-by-form reads `$form->value()->toArray()['parent']`
* (add-page-by-form.php:521) and honours it over any pageconfig/header parent.
*
* Fail closed: if `active_trip` is unset/empty we throw a ValidationException
* so the `add_page` action never runs. Merely leaving `parent` unset is unsafe —
* with `pageconfig.parent` removed, add-page-by-form's `getParentPage('')`
* resolves to the /post page itself and the entry would silently land there.
*/
public function onFormValidationProcessed(Event $event): void
{
$form = $event['form'];
if (!$form || $form->getName() !== 'new-entry') {
return;
}
$activeTrip = $this->grav['config']->get('site.active_trip');
$activeTrip = is_string($activeTrip) ? trim($activeTrip) : '';
if ($activeTrip === '') {
throw new ValidationException('No active trip is set — cannot post an entry. Set site.active_trip first.');
}
$form->setData('parent', $this->resolveDailiesParent($activeTrip));
}
/**
* Normalise `active_trip` to its dailies container route.
*
* Accepts either a full route ("/trips/italy-2026-demo") or a bare slug
* ("italy-2026-demo") and returns "/trips/<slug>/dailies".
*/
private function resolveDailiesParent(string $activeTrip): string
{
$trip = trim($activeTrip, '/');
if (strpos($trip, 'trips/') !== 0) {
$trip = 'trips/' . $trip;
}
return '/' . $trip . '/dailies';
}
/**
* The photo order the user arranged in the form, sent explicitly by
* post-form.js as a JSON array of filenames in the dedicated
* data[photo_order] input. FilePond does not re-sequence its own submitted
* inputs on reorder, so this is the only reliable source of the drag order.
* Read straight from $_POST as a top-level key (not under data[]), so Grav's
* form never captures it and it never lands in the entry frontmatter.
*/
private function orderFromPost(): array
{
$raw = $_POST['photo_order'] ?? null;
if (!is_string($raw) || $raw === '') {
return [];
}
$decoded = json_decode($raw, true);
if (!is_array($decoded)) {
return [];
}
$names = [];
foreach ($decoded as $name) {
if (is_string($name) && $name !== '') {
$names[] = basename(str_replace('\\', '/', $name));
}
}
return $names;
}
public function onFormProcessed(Event $event): void
{
$form = $event['form'];
if (!$form) {
if (!$form || $form->getName() !== 'new-entry') {
return;
}
if ($form->getName() === 'new-entry') {
// Reorder the just-copied photos to match the order the user arranged in
// the form (FilePond drag). Best-effort: any failure logs and is skipped
// so a post is never lost over cosmetics.
try {
$this->reorderPhotos();
} catch (\Throwable $e) {
$this->grav['log']->warning('cache-on-save: photo reorder skipped — ' . $e->getMessage());
}
$this->grav['cache']->deleteAll();
}
/**
* Rename the uploaded photos to photo-1..N in the submitted (drag) order.
*
* The published entry lists media in filename order and treats the first as
* the hero (see partials/entry-journal + entry-story), so a deterministic
* photo-N naming is what makes the arranged order stick. copyFiles() writes
* each file under its unsanitised client filename, and post-form.js sends the
* drag order via the top-level `photo_order` POST key (orderFromPost) — so we
* can map each on-disk file to its final photo-N slot.
*/
private function reorderPhotos(): void
{
$names = $this->orderFromPost();
if (count($names) < 1) {
return; // nothing uploaded
}
$activeTrip = $this->grav['config']->get('site.active_trip');
$activeTrip = is_string($activeTrip) ? trim($activeTrip) : '';
if ($activeTrip === '') {
return;
}
$slug = preg_replace('#^/?trips/#', '', trim($activeTrip, '/'));
$slug = preg_replace('#/.*$#', '', $slug);
$dir = $this->findEntryFolder($slug, $names);
if ($dir === null) {
return; // couldn't confidently locate the new entry folder
}
// Two-phase rename via temp names so a target (photo-2.jpg) can't clobber
// a not-yet-moved source of the same name.
$planned = [];
$i = 1;
foreach ($names as $name) {
$src = $dir . DIRECTORY_SEPARATOR . $name;
if (!is_file($src)) {
continue; // skip anything not actually on disk
}
$ext = strtolower(pathinfo($name, PATHINFO_EXTENSION)) ?: 'jpg';
$tmp = $dir . DIRECTORY_SEPARATOR . '.reorder-tmp-' . $i . '.' . $ext;
$final = $dir . DIRECTORY_SEPARATOR . 'photo-' . $i . '.' . $ext;
if ($src === $final) {
$i++;
continue; // already correctly named
}
@rename($src, $tmp);
$planned[] = [$tmp, $final];
$i++;
}
foreach ($planned as [$tmp, $final]) {
if (is_file($tmp)) {
@rename($tmp, $final);
}
}
}
/**
* Locate the freshly-created entry folder: the child of the active trip's
* dailies directory that contains all of the uploaded files. Matching by the
* exact uploaded filenames avoids re-deriving add-page-by-form's slug logic.
*/
private function findEntryFolder(string $slug, array $names): ?string
{
$pagesRoot = rtrim(USER_DIR, '/\\') . '/pages';
$dailies = null;
foreach (glob($pagesRoot . '/*trips*', GLOB_ONLYDIR) ?: [] as $tripsDir) {
foreach (glob($tripsDir . '/*', GLOB_ONLYDIR) ?: [] as $tripDir) {
$base = basename($tripDir);
if ($base === $slug || preg_match('/(^|\.)' . preg_quote($slug, '/') . '$/', $base)) {
$found = glob($tripDir . '/*dailies*', GLOB_ONLYDIR) ?: [];
if ($found) {
$dailies = $found[0];
break 2;
}
}
}
}
if ($dailies === null) {
return null;
}
foreach (glob($dailies . '/*', GLOB_ONLYDIR) ?: [] as $child) {
$allPresent = true;
foreach ($names as $name) {
if (!is_file($child . DIRECTORY_SEPARATOR . $name)) {
$allPresent = false;
break;
}
}
if ($allPresent) {
return $child;
}
}
return null;
}
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
var g=Object.create;var f=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var m=(a=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(a,{get:(b,c)=>(typeof require<"u"?require:b)[c]}):a)(function(a){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+a+'" is not supported')});var n=(a,b)=>()=>(b||a((b={exports:{}}).exports,b),b.exports);var l=(a,b,c,e)=>{if(b&&typeof b=="object"||typeof b=="function")for(let d of i(b))!k.call(a,d)&&d!==c&&f(a,d,{get:()=>b[d],enumerable:!(e=h(b,d))||e.enumerable});return a};var o=(a,b,c)=>(c=a!=null?g(j(a)):{},l(b||!a||!a.__esModule?f(c,"default",{value:a,enumerable:!0}):c,a));export{m as a,n as b,o as c};
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+325
View File
@@ -0,0 +1,325 @@
/*
* /post form bundle CSS. U3 scope: make the EasyMDE editor usable without the
* FontAwesome dependency (toolbar glyphs supplied here). Field Notes theming,
* mobile layout, and the "More options" disclosure land in U5.
*/
/* EasyMDE toolbar glyphs — replace the FontAwesome icons EasyMDE expects. */
.editor-toolbar .mde-btn::before {
font-style: normal;
font-weight: 400;
font-family: inherit;
}
.editor-toolbar .mde-bold::before { content: 'B'; font-weight: 700; }
.editor-toolbar .mde-italic::before { content: 'I'; font-style: italic; }
.editor-toolbar .mde-ul::before { content: '\2022\2002\2014'; } /* • — */
.editor-toolbar .mde-link::before { content: '\1F517'; } /* 🔗 */
.editor-toolbar .mde-preview::before { content: '\1F441'; } /* 👁 */
.EasyMDEContainer .CodeMirror {
min-height: 180px;
}
/* ── Photo HEIC-conversion feedback (U4) ────────────────────
* FilePond renders the thumbnails/progress; these are the pre-FilePond
* "converting…" status line and the draft photos-reselect hint (U6).
*/
.photo-convert-status:empty { display: none; }
.photo-convert-status {
font-size: var(--text-sm);
margin-top: var(--space-2);
}
.photo-reauth-hint {
display: none;
font-size: var(--text-sm);
color: var(--color-ink-muted);
margin-top: var(--space-2);
}
.photo-reauth-hint.is-shown { display: block; }
/* ── Field Notes styling for the new controls (U5, R11/R12) ── */
/* Select fields (weather condition, transport mode) match the text inputs. */
.post-form-wrap select {
width: 100%;
font-family: var(--font-ui);
font-size: var(--text-base);
padding: 0.875rem 1rem;
min-height: 44px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-canvas);
color: var(--color-ink);
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2390887E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
.post-form-wrap select:focus {
outline: 2px solid var(--color-accent);
outline-offset: 1px;
border-color: var(--color-accent);
}
.post-form-wrap input[type="number"] {
width: 100%;
font-family: var(--font-ui);
font-size: var(--text-base);
padding: 0.875rem 1rem;
min-height: 44px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-canvas);
color: var(--color-ink);
-webkit-appearance: none;
appearance: none;
}
.post-form-wrap input[type="number"]:focus {
outline: 2px solid var(--color-accent);
outline-offset: 1px;
border-color: var(--color-accent);
}
/* "More options" disclosure */
.more-options {
margin-bottom: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-canvas);
}
.more-options__summary {
cursor: pointer;
padding: 0.875rem 1rem;
min-height: 44px;
display: flex;
align-items: center;
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-ink);
list-style: none;
user-select: none;
}
.more-options__summary::-webkit-details-marker { display: none; }
.more-options__summary::before {
content: '▸';
margin-right: var(--space-2);
color: var(--color-ink-muted);
transition: transform 0.15s;
}
.more-options[open] .more-options__summary::before { transform: rotate(90deg); }
.more-options[open] .more-options__summary { border-bottom: 1px solid var(--color-border); }
.more-options > .form-field { padding: 0 1rem; }
.more-options > .form-field:first-of-type { padding-top: var(--space-4); }
.more-options > .form-field:last-child { padding-bottom: var(--space-4); margin-bottom: 0; }
/* Button loading spinner (Get Location / Get Weather) */
.btn-action.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn-action.is-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid var(--color-ink-muted);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: post-spin 0.7s linear infinite;
}
.btn-action[disabled] { opacity: 0.5; cursor: not-allowed; }
@keyframes post-spin { to { transform: rotate(360deg); } }
/* Grav renders form status as <div class="notices success|error green|red">.
The theme doesn't style .notices, so on the dark background it was nearly
invisible — style it prominently here. */
.post-form-wrap .notices {
padding: 1rem 1.1rem;
border-radius: var(--radius-md);
font-size: var(--text-base);
margin: 0 0 var(--space-5);
background: var(--color-canvas);
color: var(--color-ink);
border-left: 4px solid var(--color-accent);
}
.post-form-wrap .notices p { margin: 0; }
.post-form-wrap .notices.error,
.post-form-wrap .notices.red { border-left-color: var(--color-error); }
.post-form-wrap .notices.success,
.post-form-wrap .notices.green { border-left-color: var(--color-accent); }
/* Post-success confirmation CTA (injected by post-form.js). */
.post-success {
margin: 0 0 var(--space-5);
padding: 1.1rem;
border-radius: var(--radius-md);
background: var(--color-accent-light);
border: 1px solid var(--color-accent);
}
.post-success__title {
font-family: var(--font-ui);
font-size: var(--text-md);
font-weight: 600;
color: var(--color-ink);
margin: 0 0 var(--space-3);
}
.post-success__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.post-success__view {
flex: 1;
min-width: 140px;
text-align: center;
padding: 0.8rem 1rem;
min-height: 44px;
border-radius: var(--radius-md);
background: var(--color-accent);
color: var(--color-accent-on);
font-weight: 600;
text-decoration: none;
}
.post-success__again {
flex: 1;
min-width: 140px;
text-align: center;
padding: 0.8rem 1rem;
min-height: 44px;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-ink);
border: 1px solid var(--color-border);
font-weight: 600;
text-decoration: none;
}
/* Hide FilePond's "Powered by PQINA" credit. */
.filepond--credits { display: none !important; }
/* Field Notes dark theme for the FilePond widget — the default is a light/cream
panel that clashes with the site's warm near-black palette. Repaint the drop
zone, thumbnails and actions with the design tokens. */
.filepond--root { font-family: var(--font-ui); font-size: var(--text-base); }
.filepond--panel-root {
background-color: var(--color-canvas);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.filepond--drop-label,
.filepond--drop-label label { color: var(--color-ink-muted); }
.filepond--label-action {
color: var(--color-accent);
text-decoration-color: var(--color-accent);
}
.filepond--item-panel {
background-color: var(--color-surface-raised);
border-radius: var(--radius-md);
}
.filepond--drip-blob { background-color: var(--color-accent); }
.filepond--file { color: var(--color-ink); }
.filepond--file-action-button {
color: var(--color-ink);
background-color: rgba(0, 0, 0, 0.45);
}
.filepond--file-action-button:hover { background-color: rgba(0, 0, 0, 0.65); }
/* Issue #2: FilePond's completed thumbnail carries a murky gradient tint + the
filename overlay, which reads as "something's wrong". Strip those overlays
and show a single clean green ✓ badge so a finished upload is unambiguous.
The remove (×) action button is left untouched so photos stay removable. */
.filepond--image-preview-overlay { display: none !important; }
.filepond--item[data-filepond-item-state="processing-complete"] .filepond--file-info,
.filepond--item[data-filepond-item-state="processing-complete"] .filepond--file-status {
opacity: 0;
}
.filepond--item[data-filepond-item-state="processing-complete"]::after {
content: '✓';
position: absolute;
top: 8px;
right: 8px;
z-index: 5;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
font-size: 15px;
font-weight: 700;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
/* Issue #3: photo section auto-collapses to a summary bar after upload — same
<details> affordance as "More options" above. */
.photos-collapse {
margin-bottom: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-canvas);
}
.photos-collapse__summary {
cursor: pointer;
padding: 0.875rem 1rem;
min-height: 44px;
display: flex;
align-items: center;
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-ink);
list-style: none;
user-select: none;
}
.photos-collapse__summary::-webkit-details-marker { display: none; }
.photos-collapse__summary::before {
content: '▸';
margin-right: var(--space-2);
color: var(--color-ink-muted);
transition: transform 0.15s;
}
.photos-collapse[open] .photos-collapse__summary::before { transform: rotate(90deg); }
.photos-collapse[open] .photos-collapse__summary { border-bottom: 1px solid var(--color-border); }
.photos-collapse > :not(summary) { padding-left: 1rem; padding-right: 1rem; }
.photos-collapse[open] .filepond--root,
.photos-collapse[open] .filepond-root { margin: var(--space-4) 0; }
.photos-collapse[open] > .photo-convert-status:last-child,
.photos-collapse[open] > .photo-reauth-hint:last-child { padding-bottom: var(--space-4); }
/* ── EasyMDE — Field Notes dark theme (U5) ─────────────────── */
.EasyMDEContainer .CodeMirror {
background: var(--color-canvas);
color: var(--color-ink);
border: 1px solid var(--color-border);
border-radius: 0 0 var(--radius-md) var(--radius-md);
font-family: var(--font-ui);
font-size: var(--text-base);
line-height: var(--leading-normal);
padding: var(--space-1);
}
.EasyMDEContainer .CodeMirror-cursor { border-color: var(--color-ink); }
.EasyMDEContainer .CodeMirror-selected { background: var(--color-accent-light) !important; }
.EasyMDEContainer .editor-toolbar {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-bottom: none;
border-radius: var(--radius-md) var(--radius-md) 0 0;
opacity: 1;
}
.EasyMDEContainer .editor-toolbar button {
color: var(--color-ink) !important;
min-width: 34px;
height: 34px;
}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
background: var(--color-accent-light);
border-color: var(--color-border);
}
.EasyMDEContainer .editor-toolbar i.separator { border-color: var(--color-border); }
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
background: var(--color-canvas);
color: var(--color-ink);
}
.EasyMDEContainer .editor-preview a { color: var(--color-accent); }
+706
View File
@@ -0,0 +1,706 @@
/*
* /post journal form bundle — page-scoped (loaded only by post-form.html.twig).
* Kept out of the global main.js so EasyMDE (+ the U4 HEIC converter, lazy-loaded)
* never ship on any other page. Built as ESM with code-splitting so the heic-to
* dynamic import becomes a separately-fetched chunk (see package.json / KTD2).
*
* Every init function presence-guards its own DOM, mirroring main.js's
* initTripStats pattern, so this is a no-op if an element is absent.
*/
import EasyMDE from 'easymde';
import 'easymde/dist/easymde.min.css';
import './post-form.css';
/* ── Markdown editor (EasyMDE) ───────────────────────────── */
function initEditor() {
var textarea = document.querySelector('textarea[name="data[content]"]');
if (!textarea) return null;
var editor = new EasyMDE({
element: textarea,
spellChecker: false,
autoDownloadFontAwesome: false, // toolbar glyphs come from post-form.css, no FA CDN
status: false,
placeholder: 'What happened today?',
minHeight: '180px',
// Minimal toolbar; custom classNames drive the CSS glyphs in post-form.css.
toolbar: [
{ name: 'bold', action: EasyMDE.toggleBold, className: 'mde-btn mde-bold', title: 'Bold' },
{ name: 'italic', action: EasyMDE.toggleItalic, className: 'mde-btn mde-italic', title: 'Italic' },
{ name: 'unordered-list', action: EasyMDE.toggleUnorderedList, className: 'mde-btn mde-ul', title: 'Bulleted list' },
{ name: 'link', action: EasyMDE.drawLink, className: 'mde-btn mde-link', title: 'Insert link' },
'|',
{ name: 'preview', action: EasyMDE.togglePreview, className: 'mde-btn mde-preview', title: 'Toggle preview' },
],
});
// KTD3 / R15: keep the underlying <textarea> in sync with the editor so the
// form's custom required-field validator (which reads [name="data[content]"])
// and the submitted payload both see the live value.
editor.codemirror.on('change', function () { editor.codemirror.save(); });
var form = textarea.closest('form');
if (form) {
// Capture phase fires before the inline bubble-phase validator, so the
// textarea already holds the current value when validation reads it.
form.addEventListener('submit', function () { editor.codemirror.save(); }, true);
}
return editor;
}
/* ── Photo picker + client-side HEIC→JPEG (U4) ───────────────
* We replaced Grav's managed filepond field with a plain, controlled picker
* (see the `photos` field template) because filepond instant-uploads each file
* the moment it is added and its FilePond.create config is not ours to hook —
* so HEIC could never be converted before upload. Here we own the flow: sniff,
* lazy-convert HEIC, then POST each web-safe JPEG to Grav's AJAX file-upload
* route (into the form flash, exactly as filepond's server.process did) so
* add-page-by-form's copyFiles() picks them up on submit.
*/
// ISO-BMFF 'ftyp' brands that indicate HEIC/HEIF. Sniffed from bytes, never
// from the filename/MIME (R16) — iOS sometimes hands us .heic with an image/*
// MIME, and a renamed .jpg can still be HEIC underneath.
var HEIC_BRANDS = ['heic', 'heix', 'heif', 'hevc', 'hevx', 'mif1', 'msf1', 'heim', 'heis', 'hevm', 'hevs'];
function looksLikeHeic(file) {
return file.slice(0, 64).arrayBuffer().then(function (buf) {
var b = new Uint8Array(buf);
if (b.length < 12) return false;
// bytes 4..8 must be the 'ftyp' box type
if (String.fromCharCode(b[4], b[5], b[6], b[7]) !== 'ftyp') return false;
// scan major brand + compatible brands (4-byte codes from offset 8)
var brands = '';
for (var i = 8; i + 4 <= b.length; i += 4) {
brands += String.fromCharCode(b[i], b[i + 1], b[i + 2], b[i + 3]).toLowerCase();
}
return HEIC_BRANDS.some(function (brand) { return brands.indexOf(brand) !== -1; });
}).catch(function () { return false; });
}
function slugifyJpegName(name) {
var base = String(name || 'photo').replace(/\.[^.]+$/, '');
base = base.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
return (base || 'photo') + '.jpg';
}
// Insert (once) a status line just after the FilePond field for conversion
// feedback, returning it. FilePond owns the per-thumbnail chrome; this line
// carries the pre-FilePond "converting…" / error state.
function photoStatusEl() {
var root = document.querySelector('.filepond-root, .form-input-file');
if (!root || !root.parentNode) return null;
var el = root.parentNode.querySelector('.photo-convert-status');
if (!el) {
el = document.createElement('p');
el.className = 'photo-convert-status form-status';
el.setAttribute('role', 'status');
root.parentNode.insertBefore(el, root.nextSibling);
}
return el;
}
// Wrap the photo picker in a native <details> so it can auto-collapse to a
// live summary bar once uploads settle (issue #3: thumbnails otherwise crowd
// the writing area). The field's own <label> is hidden — the <summary> becomes
// the section header. Returns { details, summary } or null when no picker.
function buildPhotoCollapse() {
var root = document.querySelector('.filepond-root, .form-input-file');
if (!root) return null;
var wrapper = root.closest('.form-field');
if (!wrapper) return null;
// Grav wraps the field label in a .form-label div (not a bare <label>);
// hide it so the <summary> is the section's only header.
var fieldLabel = wrapper.querySelector('.form-label');
var details = document.createElement('details');
details.className = 'photos-collapse';
details.open = true;
var summary = document.createElement('summary');
summary.className = 'photos-collapse__summary';
summary.textContent = 'Photos (16)';
details.appendChild(summary);
// Relocate the existing control (+ label/status) into the details body.
while (wrapper.firstChild) details.appendChild(wrapper.firstChild);
wrapper.appendChild(details);
if (fieldLabel) fieldLabel.style.display = 'none';
return { details: details, summary: summary };
}
function initPhotoConversion() {
var form = document.querySelector('form[name="new-entry"]');
if (!form) return;
var converting = 0; // HEIC conversions in flight (before FilePond) — gates Submit
var collapse = buildPhotoCollapse();
var orderPond = null; // set when the managed FilePond instance is found
// FilePond does NOT re-sequence its submitted data[photos][] inputs when the
// list is reordered — those stay in upload order — so the drag order never
// reaches the server on its own. Send it explicitly: on submit, write the
// current visual order into a hidden input. Its name is a TOP-LEVEL POST key
// ("photo_order", not "data[...]") so Grav's form never captures it into the
// page data — the server reads it straight from $_POST and renames the
// copied files photo-1..N to match, with nothing leaking into frontmatter.
form.addEventListener('submit', function () {
if (!orderPond) return;
var files = orderPond.getFiles();
if (!files.length) return; // text-only post — send nothing
var hidden = form.querySelector('input[name="photo_order"]');
if (!hidden) {
hidden = document.createElement('input');
hidden.type = 'hidden';
hidden.name = 'photo_order';
form.appendChild(hidden);
}
hidden.value = JSON.stringify(files.map(function (f) { return f.filename; }));
}, true);
function setStatus(msg, kind) {
var el = photoStatusEl();
if (!el) return;
el.textContent = msg || '';
el.className = 'photo-convert-status form-status' + (kind ? ' form-status--' + kind : '');
}
// Live summary + auto-collapse for the photo section. Reads FilePond's DOM
// item states (robust across FilePond versions) plus the pre-FilePond HEIC
// `converting` counter, so the section stays open while anything is in
// flight and collapses to "✓ N ready" only once everything has settled.
function refreshCollapse() {
if (!collapse) return;
var items = document.querySelectorAll('.filepond--item[data-filepond-item-state]');
var total = items.length;
var done = 0;
Array.prototype.forEach.call(items, function (el) {
if (el.getAttribute('data-filepond-item-state') === 'processing-complete') done++;
});
if (converting > 0 || (total > 0 && done < total)) {
collapse.summary.textContent = converting > 0
? 'Converting ' + converting + ' photo' + (converting > 1 ? 's' : '') + '…'
: 'Uploading ' + total + ' photo' + (total > 1 ? 's' : '') + '…';
collapse.details.open = true; // keep visible while working
} else if (total > 0) {
collapse.summary.textContent = '✓ ' + total + ' photo' + (total > 1 ? 's' : '') + ' ready — tap to review';
collapse.details.open = false; // auto-collapse when settled
} else {
collapse.summary.textContent = 'Photos (16)';
collapse.details.open = true;
}
}
// FilePond fires processfile/processfiles a tick before it flips the item's
// data-filepond-item-state to "processing-complete", so a refresh bound
// straight to the event reads a stale state. Re-check on trailing timeouts
// so the summary settles on the final DOM state.
function scheduleRefresh() {
refreshCollapse();
setTimeout(refreshCollapse, 150);
setTimeout(refreshCollapse, 500);
}
function updateGate() {
var btn = form.querySelector('button[type="submit"], input[type="submit"]');
if (btn) btn.disabled = converting > 0;
if (converting > 0) {
setStatus('Converting ' + converting + ' photo' + (converting > 1 ? 's' : '') + '…');
} else {
var el = photoStatusEl();
if (el && /Converting/.test(el.textContent)) setStatus('');
}
refreshCollapse();
}
// Guard the submit while a HEIC is still converting (it hasn't entered
// FilePond yet, so FilePond's own processing gate wouldn't cover it). R17.
form.addEventListener('submit', function (e) {
if (converting > 0) {
e.preventDefault();
setStatus('Hang on — a photo is still converting.', 'err');
}
}, true);
// FilePond hook: reject a HEIC item, convert it to JPEG via the lazy heic-to
// chunk (KTD4), then re-add the JPEG through pond.addFile() so FilePond
// uploads and page-attaches it via its own (correct) contract.
function makeBeforeAddFile(pond) {
return function (item) {
var file = item && item.file;
if (!file) return true;
return looksLikeHeic(file).then(function (isHeic) {
if (!isHeic) return true; // web format (R9) — FilePond handles it
converting++;
updateGate();
import('heic-to').then(function (mod) {
var heicTo = mod.heicTo || (mod.default && mod.default.heicTo);
return heicTo({ blob: file, type: 'image/jpeg', quality: 0.85 });
}).then(function (jpeg) {
var jpegFile = new File([jpeg], slugifyJpegName(file.name), { type: 'image/jpeg' });
pond.addFile(jpegFile);
}).catch(function () {
// Fail closed (R16): the original HEIC is never added/uploaded.
setStatus('A photo couldnt be converted and was skipped — the others are fine.', 'err');
}).then(function () {
converting--;
updateGate();
});
return false; // reject the original HEIC
});
};
}
// The managed FilePond instance is created by the form plugin's
// filepond-handler (DOMContentLoaded). Poll briefly, then attach the hook.
var tries = 0;
(function attach() {
var ponds = (window.GravFilePond && window.GravFilePond.getInstances)
? window.GravFilePond.getInstances() : [];
if (!ponds.length) {
if (tries++ < 120) setTimeout(attach, 50);
return;
}
ponds.forEach(function (pond) {
if (pond && !pond._heicHooked) {
pond._heicHooked = true;
// allowReorder: drag thumbnails to set the order. The server
// (cache-on-save) renames the copied files photo-1..N in the
// submitted order so the published entry honours it (entry media
// is filename-ordered; hero = first).
pond.setOptions({ beforeAddFile: makeBeforeAddFile(pond), allowReorder: true, itemInsertLocation: 'after' });
orderPond = pond;
// Update the collapse summary as files are added/uploaded/removed.
['addfile', 'processfile', 'processfiles', 'removefile', 'error'].forEach(function (ev) {
try { pond.on(ev, scheduleRefresh); } catch (e) { /* older FilePond API */ }
});
refreshCollapse();
}
});
})();
}
/* ── Field helper ────────────────────────────────────────── */
// Attribute selector matches input, select AND textarea — unlike the old
// input[...] lookup, which broke once weather_desc became a <select> (U2).
function field(name) {
return document.querySelector('[name="data[' + name + ']"]');
}
/* ── "More options" disclosure (U5, KTD5) ─────────────────────
* The blueprint renders the advanced fields (force_connect/featured) flat;
* here we relocate their .form-field wrappers into a native <details> so
* they collapse by default with full keyboard/AT support. Auto-opens if any
* advanced field already carries a value (edit / draft restore).
*/
function initDisclosure() {
var flagged = Array.prototype.slice.call(document.querySelectorAll('.advanced-field'));
if (!flagged.length) return;
var wrappers = [];
flagged.forEach(function (el) {
var w = el.closest('.form-field');
if (w && wrappers.indexOf(w) === -1) wrappers.push(w);
});
if (!wrappers.length) return;
var details = document.createElement('details');
details.className = 'more-options';
var summary = document.createElement('summary');
summary.className = 'more-options__summary';
summary.textContent = 'More options';
details.appendChild(summary);
wrappers[0].parentNode.insertBefore(details, wrappers[0]);
wrappers.forEach(function (w) { details.appendChild(w); });
var hasValue = wrappers.some(function (w) {
var text = w.querySelector('input[type="text"]');
if (text && text.value.trim()) return true;
var toggle = w.querySelector('input[type="radio"]:checked');
if (toggle && toggle.value && toggle.value !== '0') return true;
return false;
});
if (hasValue) details.open = true;
}
/* ── Get Location / Get Weather (U5, R18) ─────────────────────
* Migrated out of the template's inline scripts so it can read the now-<select>
* weather_desc field and expose idle/loading/success/error states.
*/
var WMO_MAP = {
0: 'Sunny', 1: 'Partly cloudy', 2: 'Partly cloudy', 3: 'Cloudy',
45: 'Foggy', 48: 'Foggy',
51: 'Drizzle', 53: 'Drizzle', 55: 'Drizzle', 56: 'Drizzle', 57: 'Drizzle',
61: 'Rain', 63: 'Rain', 65: 'Rain', 66: 'Rain', 67: 'Rain', 80: 'Rain', 81: 'Rain', 82: 'Rain',
71: 'Snow', 73: 'Snow', 75: 'Snow', 77: 'Snow', 85: 'Snow', 86: 'Snow',
95: 'Thunderstorm', 96: 'Thunderstorm', 99: 'Thunderstorm'
};
function setStatus(el, msg, kind) {
if (!el) return;
el.className = 'form-status' + (kind ? ' form-status--' + kind : '');
el.textContent = msg || '';
}
function initGeo() {
var locBtn = document.getElementById('get-location');
var wxBtn = document.getElementById('get-weather');
if (!locBtn && !wxBtn) return;
var locStatus = document.getElementById('location-status');
var wxStatus = document.getElementById('weather-status');
function coords() {
var latEl = field('lat');
var lngEl = field('lng');
var lat = latEl ? latEl.value.trim() : '';
var lng = lngEl ? lngEl.value.trim() : '';
return (lat && lng) ? { lat: lat, lng: lng } : null;
}
// Get Weather is meaningless without coordinates — gate it (R18).
function syncWeatherEnabled() {
if (!wxBtn) return;
var ok = !!coords();
wxBtn.disabled = !ok;
wxBtn.title = ok ? '' : 'Get location first';
}
syncWeatherEnabled();
// Reverse-geocode the captured coordinates into City + Country via
// BigDataCloud's free client endpoint (no API key, CORS-enabled). Only
// fills fields the traveller left blank — never clobbers a manual entry —
// and appends the resolved place to the location status. Best-effort: a
// failure leaves the coordinates (and the manual city/country fields) intact.
function reverseGeocode(lat, lng) {
var cityEl = field('location_city');
var countryEl = field('location_country');
// Nothing to fill if the traveller already typed both.
if ((!cityEl || cityEl.value.trim()) && (!countryEl || countryEl.value.trim())) return;
var url = 'https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=' +
encodeURIComponent(lat) + '&longitude=' + encodeURIComponent(lng) + '&localityLanguage=en';
fetch(url).then(function (r) { return r.json(); }).then(function (data) {
// BigDataCloud's `city` is often empty in rural areas; `locality`
// is the more reliably-populated place name, so fall back to it.
var city = (data.city || data.locality || '').trim();
var country = (data.countryName || '').trim();
if (cityEl && !cityEl.value.trim() && city) cityEl.value = city;
if (countryEl && !countryEl.value.trim() && country) countryEl.value = country;
var place = [city, country].filter(Boolean).join(', ');
if (place) {
setStatus(locStatus, '✓ Location captured · ' + place, 'ok');
}
}).catch(function () { /* keep the coordinates-only status */ });
}
if (locBtn) {
locBtn.addEventListener('click', function () {
if (!navigator.geolocation) {
setStatus(locStatus, 'Geolocation is not supported on this device.', 'err');
return;
}
locBtn.classList.add('is-loading');
locBtn.disabled = true;
setStatus(locStatus, 'Getting location…');
navigator.geolocation.getCurrentPosition(function (pos) {
var lat = pos.coords.latitude.toFixed(6);
var lng = pos.coords.longitude.toFixed(6);
var latEl = field('lat');
var lngEl = field('lng');
if (latEl) latEl.value = lat;
if (lngEl) lngEl.value = lng;
locBtn.classList.remove('is-loading');
locBtn.disabled = false;
setStatus(locStatus, '✓ Location captured · ' + lat + ', ' + lng, 'ok');
syncWeatherEnabled();
reverseGeocode(lat, lng); // fill City/Country in the background
}, function (err) {
locBtn.classList.remove('is-loading');
locBtn.disabled = false;
setStatus(locStatus, '✗ ' + (err && err.message ? err.message : 'Could not get location') + ' — enter coordinates manually if needed.', 'err');
}, { enableHighAccuracy: true, timeout: 15000 });
});
}
if (wxBtn) {
wxBtn.addEventListener('click', function () {
var c = coords();
if (!c) {
setStatus(wxStatus, 'Get location first, then fetch weather.', 'err');
return;
}
wxBtn.classList.add('is-loading');
wxBtn.disabled = true;
setStatus(wxStatus, 'Fetching weather…');
var url = 'https://api.open-meteo.com/v1/forecast?latitude=' + c.lat +
'&longitude=' + c.lng + '&current=temperature_2m,weather_code&temperature_unit=celsius';
fetch(url).then(function (r) { return r.json(); }).then(function (data) {
var temp = Math.round(data.current.temperature_2m);
var desc = WMO_MAP[data.current.weather_code] || 'Cloudy';
var tempEl = field('weather_temp_c');
var descEl = field('weather_desc');
if (tempEl) tempEl.value = temp;
if (descEl) descEl.value = desc; // works for <select> too (R6)
wxBtn.classList.remove('is-loading');
syncWeatherEnabled();
setStatus(wxStatus, '✓ Weather set · ' + desc + ' · ' + temp + '°C (edit above if needed)', 'ok');
}).catch(function () {
wxBtn.classList.remove('is-loading');
syncWeatherEnabled();
setStatus(wxStatus, '✗ Could not fetch weather — set it manually above.', 'err');
});
});
}
}
/* ── Blocking required-field validation (U5, R19) ─────────────
* Replaces the template's inline validator. Reads the EasyMDE-synced content
* value (initEditor keeps the textarea current) and shows per-field messages.
*/
// Current local wall-clock time as the value a datetime-local input expects
// ("YYYY-MM-DDTHH:MM"). Uses the browser's timezone — the server has no idea
// where the traveller is — and strips seconds so the value round-trips cleanly.
function localNowDatetime() {
var d = new Date();
d.setSeconds(0, 0);
d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
return d.toISOString().slice(0, 16);
}
function initValidation() {
var REQUIRED = { title: 'Title', date: 'Date & time', content: 'Content' };
var form = document.querySelector('form[name="new-entry"]');
if (!form) return;
// Prefill the date/time picker with "now" (local) unless draft restore
// already put a value there. initDraft runs before initValidation in boot(),
// so an empty field here means there was no saved draft date to keep.
var dateEl = field('date');
if (dateEl && !String(dateEl.value).trim()) {
dateEl.value = localNowDatetime();
}
function clearErrors() {
form.querySelectorAll('.field-error').forEach(function (el) { el.remove(); });
form.querySelectorAll('.field-invalid').forEach(function (el) { el.classList.remove('field-invalid'); });
}
function showError(el, msg) {
el.classList.add('field-invalid');
var err = document.createElement('span');
err.className = 'field-error';
err.textContent = msg;
el.parentNode.insertBefore(err, el.nextSibling);
}
// At least one photo is required. The picker is first in the form, so if it
// is empty this is the first invalid field — reveal the (possibly collapsed)
// section, show the message under its header, and return an element to
// scroll to. Uses the same .field-error class so clearErrors() cleans it up.
function showPhotoError(msg) {
var collapse = form.querySelector('.photos-collapse');
var host, anchor;
if (collapse) {
collapse.open = true; // reveal the drop zone + message
anchor = collapse.querySelector('.photos-collapse__summary');
host = collapse;
} else {
host = document.querySelector('.filepond-root, .form-input-file');
anchor = host;
}
if (!anchor) return host || null;
var err = document.createElement('span');
err.className = 'field-error';
err.textContent = msg;
anchor.insertAdjacentElement('afterend', err);
return host || anchor;
}
// Bubble phase: runs after initEditor's capture-phase codemirror.save(), so
// the content textarea already holds the live value.
form.addEventListener('submit', function (e) {
clearErrors();
var firstInvalid = null;
// ≥1 photo (photos are the first field). Count any present FilePond item.
if (document.querySelectorAll('.filepond--item').length < 1) {
firstInvalid = showPhotoError('Add at least one photo.');
}
Object.keys(REQUIRED).forEach(function (name) {
var el = field(name);
if (el && !String(el.value).trim()) {
showError(el, REQUIRED[name] + ' is required.');
if (!firstInvalid) firstInvalid = el;
}
});
if (firstInvalid) {
e.preventDefault();
if (typeof firstInvalid.focus === 'function') firstInvalid.focus();
firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
}
/* ── Draft persistence (U6, R19 preserve-on-failure + R20, KTD6) ──
* Text field values are mirrored to localStorage so a failed submit or an
* expired session mid-compose never loses the writing. Photos can't be
* serialized (File/Blob) so they are NOT persisted — an inline hint says so
* on restore. The draft is cleared ONLY when the server confirms a successful
* post (<div class="notices success">), which is exactly what guarantees the
* text survives every non-success outcome, independent of failure-type sniffing.
*/
var DRAFT_KEY = 'intotheeast:new-entry-draft';
function draftEls(form) {
return Array.prototype.slice.call(form.querySelectorAll('[name^="data["]'))
.filter(function (el) {
if (el.type === 'file') return false;
var n = el.name;
return n.indexOf('data[_json') !== 0 && n.indexOf('data[photos') !== 0;
});
}
function showReauthHint() {
// The filepond-root div is server-rendered, so it exists even before
// FilePond enhances it. Place the hint right after the photo field.
var root = document.querySelector('.filepond-root, .form-input-file');
if (!root || !root.parentNode) return;
if (root.parentNode.querySelector('.photo-reauth-hint')) return;
var p = document.createElement('p');
p.className = 'photo-reauth-hint is-shown';
p.textContent = 'Your text was restored — photos need re-selecting (they cant be saved in a draft).';
root.parentNode.insertBefore(p, root.nextSibling);
}
function initDraft() {
var form = document.querySelector('form[name="new-entry"]');
if (!form) return; // e.g. session expired → login form shown; draft is left intact
// A confirmed successful post: clear the draft and do NOT restore onto the
// freshly reset form. This runs before any save, so process.reset can't
// round-trip blank fields back into storage.
if (document.querySelector('.notices.success')) {
try { localStorage.removeItem(DRAFT_KEY); } catch (e) { /* ignore */ }
return;
}
function save() {
var data = {};
draftEls(form).forEach(function (el) {
if (el.type === 'radio') { if (el.checked) { data[el.name] = el.value; } }
else { data[el.name] = el.value; }
});
try { localStorage.setItem(DRAFT_KEY, JSON.stringify(data)); } catch (e) { /* quota / private mode */ }
}
var raw = null;
try { raw = localStorage.getItem(DRAFT_KEY); } catch (e) { raw = null; }
if (raw) {
var data = null;
try { data = JSON.parse(raw); } catch (e) { data = null; }
if (data) {
var restoredSomething = false;
Object.keys(data).forEach(function (name) {
var val = data[name];
if (val != null && String(val).trim()) { restoredSomething = true; }
if (name === 'data[content]') { return; } // restored via the editor below
var radios = form.querySelectorAll('input[type="radio"][name="' + name + '"]');
if (radios.length) {
radios.forEach(function (r) { r.checked = (r.value === val); });
return;
}
var el = form.querySelector('[name="' + name + '"]');
if (el && el.type !== 'file') { el.value = val; }
});
if (window.postFormEditor && data['data[content]'] != null) {
window.postFormEditor.value(data['data[content]']);
}
if (restoredSomething) { showReauthHint(); }
}
}
// Save text on every edit (change covers selects/toggles; input covers text).
form.addEventListener('input', save);
form.addEventListener('change', save);
if (window.postFormEditor) {
window.postFormEditor.codemirror.on('change', save);
}
}
/* ── Post-success confirmation (issue: message was off-screen) ─────
* After a successful submit the page re-renders with Grav's success notice at
* the top of a long, reset form — easy to miss on mobile. Scroll it into view
* and add a "View your journal" / "Post another" CTA the owner can act on.
*/
function initSuccessState() {
var wrap = document.querySelector('.post-form-wrap');
var notice = document.querySelector('.post-form-wrap .notices.success, .post-form-wrap .notices.green');
if (!wrap || !notice) return;
var panel = document.createElement('div');
panel.className = 'post-success';
var title = document.createElement('p');
title.className = 'post-success__title';
title.textContent = '✓ Saved to your journal.';
panel.appendChild(title);
var actions = document.createElement('div');
actions.className = 'post-success__actions';
var tripUrl = wrap.getAttribute('data-trip-url');
if (tripUrl) {
var view = document.createElement('a');
view.className = 'post-success__view';
view.href = tripUrl;
view.textContent = 'View your journal →';
actions.appendChild(view);
}
var again = document.createElement('a');
again.className = 'post-success__again';
again.href = window.location.pathname; // reload /post fresh
again.textContent = 'Post another';
actions.appendChild(again);
panel.appendChild(actions);
notice.parentNode.insertBefore(panel, notice.nextSibling);
// Issue #1: after a successful post, show the confirmation *only* — hide the
// (now-reset) form and the location/weather controls so a stray empty form
// doesn't render below the success panel. The .notices message and the
// injected panel live in .form-wrapper *before* the <form>, so hiding the
// form leaves them visible.
['form', '.form-action-row', '#location-status', '#weather-status'].forEach(function (sel) {
var el = wrap.querySelector(sel);
if (el) el.style.display = 'none';
});
notice.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
/* ── Boot ────────────────────────────────────────────────── */
function boot() {
// Exposed for U6 draft restore and the Playwright specs; null when this
// bundle loads on a page without the content field.
window.postFormEditor = initEditor();
initSuccessState();
// Restore before disclosure/geo so their on-load checks (auto-open,
// weather-button enable) see the restored values.
initDraft();
initPhotoConversion();
initDisclosure();
initGeo();
initValidation();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', boot);
} else {
boot();
}
+84
View File
@@ -8,6 +8,8 @@
"@fontsource-variable/dm-sans": "latest",
"@fontsource/dm-serif-display": "latest",
"@mapbox/togeojson": "^0.16.2",
"easymde": "^2",
"heic-to": "^1",
"maplibre-gl": "^4",
"photoswipe": "^5",
"scrollama": "^3"
@@ -523,6 +525,21 @@
"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
"license": "ISC"
},
"node_modules/@types/codemirror": {
"version": "5.60.17",
"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.17.tgz",
"integrity": "sha512-AZq2FIsUHVMlp7VSe2hTfl5w4pcUkoFkM3zVsRKsn1ca8CXRDYvnin04+HP2REkwsxemuHqvDofdlhUWNpbwfw==",
"license": "MIT",
"dependencies": {
"@types/tern": "*"
}
},
"node_modules/@types/estree": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
"integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
"license": "MIT"
},
"node_modules/@types/geojson": {
"version": "7946.0.16",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
@@ -555,6 +572,12 @@
"@types/pbf": "*"
}
},
"node_modules/@types/marked": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.2.tgz",
"integrity": "sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w==",
"license": "MIT"
},
"node_modules/@types/pbf": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
@@ -570,6 +593,15 @@
"@types/geojson": "*"
}
},
"node_modules/@types/tern": {
"version": "0.23.9",
"resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.9.tgz",
"integrity": "sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==",
"license": "MIT",
"dependencies": {
"@types/estree": "*"
}
},
"node_modules/@xmldom/xmldom": {
"version": "0.8.13",
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.13.tgz",
@@ -585,6 +617,21 @@
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
"license": "MIT"
},
"node_modules/codemirror": {
"version": "5.65.21",
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.21.tgz",
"integrity": "sha512-6teYk0bA0nR3QP0ihGMoxuKzpl5W80FpnHpBJpgy66NK3cZv5b/d/HY8PnRvfSsCG1MTfr92u2WUl+wT0E40mQ==",
"license": "MIT"
},
"node_modules/codemirror-spell-checker": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
"integrity": "sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==",
"license": "MIT",
"dependencies": {
"typo-js": "*"
}
},
"node_modules/concat-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
@@ -606,6 +653,19 @@
"integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==",
"license": "ISC"
},
"node_modules/easymde": {
"version": "2.21.0",
"resolved": "https://registry.npmjs.org/easymde/-/easymde-2.21.0.tgz",
"integrity": "sha512-5uE7I/DEN8gvGRwxaqAv7h1PMEK2ykNXVX5zL0dK3nCYROGja3AMbdQz8eCEELnfvCfy7tRkTmLuvyJG8uSWjQ==",
"license": "MIT",
"dependencies": {
"@types/codemirror": "^5.60.10",
"@types/marked": "^4.0.7",
"codemirror": "^5.65.15",
"codemirror-spell-checker": "1.1.2",
"marked": "^4.1.0"
}
},
"node_modules/esbuild": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -683,6 +743,12 @@
"node": ">=16"
}
},
"node_modules/heic-to": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/heic-to/-/heic-to-1.5.2.tgz",
"integrity": "sha512-8Fns+lZHAWmz5U5IUxDeXKwIf3foBoKNPLxxFY4B0MkLjNuomEIHCoDbDE+x/llFK3NCEO1cu4+n3iUKY+Svmw==",
"license": "LGPL-3.0"
},
"node_modules/ieee754": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -796,6 +862,18 @@
"url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
}
},
"node_modules/marked": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
"integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
"license": "MIT",
"bin": {
"marked": "bin/marked.js"
},
"engines": {
"node": ">= 12"
}
},
"node_modules/minimist": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
@@ -936,6 +1014,12 @@
"integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
"license": "MIT"
},
"node_modules/typo-js": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.3.2.tgz",
"integrity": "sha512-Z1YkJ7IIYNrFeOxAlHUercY4Q2I+PhYD/3VkWpJGy/Oqudy3bFpNcQxnv6Oa9fTSXCHPGz1eDoX1bZYm2Z891A==",
"license": "BSD-3-Clause"
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+3 -1
View File
@@ -1,12 +1,14 @@
{
"private": true,
"scripts": {
"build": "node scripts/gen-weather-icons.js && esbuild js/src/main.js --bundle --minify --format=iife --outfile=js/main.js --loader:.woff2=file --loader:.woff=file --asset-names=../fonts/[name] && esbuild js/src/map.js --bundle --minify --format=iife --outfile=js/map.js && mkdir -p css-compiled fonts && { mv js/main.css css-compiled/main.css 2>/dev/null || true; } && { mv js/map.css css-compiled/map.css 2>/dev/null || true; }"
"build": "node scripts/gen-weather-icons.js && esbuild js/src/main.js --bundle --minify --format=iife --outfile=js/main.js --loader:.woff2=file --loader:.woff=file --asset-names=../fonts/[name] && esbuild js/src/map.js --bundle --minify --format=iife --outfile=js/map.js && rm -rf js/post && esbuild js/src/post-form.js --bundle --minify --format=esm --splitting --outdir=js/post && mkdir -p css-compiled fonts && { mv js/main.css css-compiled/main.css 2>/dev/null || true; } && { mv js/map.css css-compiled/map.css 2>/dev/null || true; } && { mv js/post/post-form.css css-compiled/post-form.css 2>/dev/null || true; }"
},
"dependencies": {
"@fontsource-variable/dm-sans": "latest",
"@fontsource/dm-serif-display": "latest",
"@mapbox/togeojson": "^0.16.2",
"easymde": "^2",
"heic-to": "^1",
"maplibre-gl": "^4",
"photoswipe": "^5",
"scrollama": "^3"
@@ -0,0 +1,18 @@
{# intotheeast override of Grav's datetime field.
Grav's stock forms/fields/datetime/datetime.html.twig is DEPRECATED and just
extends the text field, so `type: datetime` renders a plain <input type="text">
— the owner sees a raw box (the literal word "now" from `default: now`) with no
way to pick a date/time. Here we render a native <input type="datetime-local">
instead: a real calendar + clock picker, and an excellent one on mobile.
The value is prefilled to the current local time by post-form.js (JS knows the
traveller's timezone; the server doesn't), and the existing client-side
validator now requires this field — so an empty or invalid date can no longer
reach the server and destroy the FilePond photo list on a re-render. #}
{% extends "forms/field.html.twig" %}
{% block input_attributes %}
type="datetime-local"
{{ parent() }}
{% endblock %}
@@ -10,6 +10,7 @@
{% do assets.addJs('theme://js/main.js', {group: 'bottom'}) %}
{% do assets.addJs('theme://js/nav.js', {group: 'bottom'}) %}
{% block map_assets %}{% endblock %}
{% block head_assets %}{% endblock %}
{{ assets.css()|raw }}
{{ assets.js()|raw }}
</head>
+17 -115
View File
@@ -1,126 +1,28 @@
{% extends 'default.html.twig' %}
{% block head_assets %}
{# FilePond's own CSS must load from the <head>. The filepond field registers
it via assets.addCss() during body rendering, which is too late for the
theme's head-only {{ assets.css() }} — so the widget renders unstyled
(giant overlapping tiles) unless we add it here. #}
{% do assets.addCss('plugin://form/assets/filepond/filepond.min.css') %}
{% do assets.addCss('plugin://form/assets/filepond/filepond-plugin-image-preview.min.css') %}
{% do assets.addCss('theme://css-compiled/post-form.css') %}
<script type="module" src="{{ url('theme://js/post/post-form.js') }}"></script>
{% endblock %}
{% block content %}
<div class="post-form-wrap">
<div class="post-form-wrap" data-trip-url="{{ config.site.active_trip }}">
<h1>New Entry</h1>
{% include 'forms/form.html.twig' ignore missing %}
<div class="form-action-row">
<button type="button" id="get-location" class="btn-action">📍 Get Location</button>
<button type="button" id="get-weather" class="btn-action">🌤 Get Weather</button>
<button type="button" id="get-weather" class="btn-action" disabled>🌤 Get Weather</button>
</div>
<p id="location-status" class="form-status"></p>
<p id="weather-status" class="form-status"></p>
<p id="location-status" class="form-status" role="status"></p>
<p id="weather-status" class="form-status" role="status"></p>
</div>
<script>
// Custom validation — form uses novalidate so we handle it here
(function() {
var REQUIRED = ['title', 'content'];
var form = document.querySelector('form[name="new-entry"]');
if (!form) return;
function clearErrors() {
form.querySelectorAll('.field-error').forEach(function(el) { el.remove(); });
form.querySelectorAll('.field-invalid').forEach(function(el) { el.classList.remove('field-invalid'); });
}
function showError(field, msg) {
field.classList.add('field-invalid');
var err = document.createElement('span');
err.className = 'field-error';
err.textContent = msg;
field.parentNode.insertBefore(err, field.nextSibling);
}
form.addEventListener('submit', function(e) {
clearErrors();
var firstInvalid = null;
REQUIRED.forEach(function(name) {
var field = form.querySelector('[name="data[' + name + ']"]');
if (field && !field.value.trim()) {
showError(field, name.charAt(0).toUpperCase() + name.slice(1) + ' is required.');
if (!firstInvalid) firstInvalid = field;
}
});
if (firstInvalid) {
e.preventDefault();
firstInvalid.focus();
firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
}());
</script>
<script>
var WMO_MAP = {
0:'Sunny',1:'Partly cloudy',2:'Partly cloudy',3:'Cloudy',
45:'Foggy',48:'Foggy',
51:'Drizzle',53:'Drizzle',55:'Drizzle',56:'Drizzle',57:'Drizzle',
61:'Rain',63:'Rain',65:'Rain',66:'Rain',67:'Rain',80:'Rain',81:'Rain',82:'Rain',
71:'Snow',73:'Snow',75:'Snow',77:'Snow',85:'Snow',86:'Snow',
95:'Thunderstorm',96:'Thunderstorm',99:'Thunderstorm'
};
function getField(name) {
return document.querySelector('input[name="data[' + name + ']"]');
}
document.getElementById('get-location').addEventListener('click', function() {
var status = document.getElementById('location-status');
status.className = 'form-status';
status.textContent = 'Getting location…';
if (!navigator.geolocation) {
status.textContent = 'Geolocation not supported.';
return;
}
navigator.geolocation.getCurrentPosition(function(pos) {
var lat = pos.coords.latitude.toFixed(6);
var lng = pos.coords.longitude.toFixed(6);
var latField = getField('lat');
var lngField = getField('lng');
if (latField) latField.value = lat;
if (lngField) lngField.value = lng;
status.textContent = '✓ Location captured · ' + lat + ', ' + lng;
status.classList.add('form-status--ok');
}, function(err) {
status.textContent = '✗ Could not get location: ' + err.message;
status.classList.add('form-status--err');
});
});
document.getElementById('get-weather').addEventListener('click', function() {
var status = document.getElementById('weather-status');
status.className = 'form-status';
var latField = getField('lat');
var lngField = getField('lng');
var lat = latField ? latField.value.trim() : '';
var lng = lngField ? lngField.value.trim() : '';
if (!lat || !lng) {
status.textContent = 'Get location first, then fetch weather.';
return;
}
status.textContent = 'Fetching weather…';
var url = 'https://api.open-meteo.com/v1/forecast?latitude=' + lat +
'&longitude=' + lng +
'&current=temperature_2m,weather_code&temperature_unit=celsius';
fetch(url)
.then(function(r) { return r.json(); })
.then(function(data) {
var temp = Math.round(data.current.temperature_2m);
var code = data.current.weather_code;
var desc = WMO_MAP[code] || 'Cloudy';
var tempField = getField('weather_temp_c');
var descField = getField('weather_desc');
if (tempField) tempField.value = temp;
if (descField) descField.value = desc;
status.textContent = '✓ Weather set · ' + desc + ' · ' + temp + '°C';
status.classList.add('form-status--ok');
})
.catch(function() {
status.textContent = '✗ Could not fetch weather — enter manually if needed.';
status.classList.add('form-status--err');
});
});
</script>
{# Get Location / Get Weather, disclosure, and validation all live in the
page-scoped bundle (js/src/post-form.js), loaded via head_assets above. #}
{% endblock %}