- New extension fe_comment (Evomedien, framework-agnostic): floating page
feedback widget served from /api/fe-comment/widget.js, note pad in localStorage, submissions mailed via /api/fe-comment/submit with recipients from the extension configuration; classic sites get the script injected via AssetCollector when the jsonOutput setting is off. An enabled master switch serves the widget EMPTY when off (no 404, no console errors) and rejects submissions - the go-live kill switch, no front-end build change needed - URL swap finished: /_json prefix middleware, SPA fallback live with a dedicated root rule (REQUEST_FILENAME of / is a directory) and a query-string exception for the TYPO3 v14 install tool entry (?__typo3_install on the site root - the backend Settings/Environment modules depend on it); /api/ as a whole stays with TYPO3 - MailMessage::send() no longer exists in v14: fe_comment and the form EmailDelivery (latently broken since the core upgrade) now send through the Mailer service. Mail transport moved to SMTP against the local exim so delivery errors surface instead of bouncing into the blackhole - exim verifies the envelope sender, which therefore must be a routable existing address (transport config lives in the untracked settings.php) - Related-product card texts editable on the product record (table rebuilt with uid/pid, TCA + inline field, one-time migration script); shared RteCompare for the module badge and the CLI comparison - batch dry-run now reports 0 writes instead of flagging every richtext field - Workbook clarification cases executed: VisionIO-SD14, VisionSC-SD14 and both Diamond OG records imported (40 fields, live-verified); ArtioSign and ArtioView created hidden (uid 109/110) via create_artio_records.php - the product table has no sorting column; WallControl_10 mapping REVERTED and parked: the dry run revealed aetria-wallcontrol already carries its own agency workbook, which WallControl_10 would have overwritten. Manifest now 75 product / 24 family / 1 open
This commit is contained in:
orasche committed
1 parent
6db2234851
commit
f0b0694842
28 files changed
+1272
-54
No files matched your search
@@ -0,0 +1,44 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Evomedien\FeComment\EventListener;
|
||||
|
||||
use Evomedien\FeComment\Service\ExtensionSettings;
|
||||
use TYPO3\CMS\Core\Http\ApplicationType;
|
||||
use TYPO3\CMS\Core\Page\Event\BeforeJavaScriptsRenderingEvent;
|
||||
|
||||
/**
|
||||
* Classic-site mode (extension setting jsonOutput = 0): add the widget
|
||||
* script to every TYPO3-rendered frontend page, so the feedback button
|
||||
* appears with zero TypoScript. In headless mode (jsonOutput = 1, the
|
||||
* default) this listener does nothing - the SPA embeds
|
||||
* /api/fe-comment/widget.js itself.
|
||||
*/
|
||||
final class InjectWidget
|
||||
{
|
||||
public function __invoke(BeforeJavaScriptsRenderingEvent $event): void
|
||||
{
|
||||
if ($event->isInline() || $event->isPriority()) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
$request = $GLOBALS['TYPO3_REQUEST'] ?? null;
|
||||
if ($request === null || !ApplicationType::fromRequest($request)->isFrontend()) {
|
||||
return;
|
||||
}
|
||||
$settings = new ExtensionSettings();
|
||||
if (!$settings->enabled() || $settings->jsonOutput()) {
|
||||
return;
|
||||
}
|
||||
$event->getAssetCollector()->addJavaScript(
|
||||
'fe-comment-widget',
|
||||
'/api/fe-comment/widget.js',
|
||||
['defer' => 'defer'],
|
||||
['useNonce' => true]
|
||||
);
|
||||
} catch (\Throwable) {
|
||||
// a broken feedback widget must never break the page
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Evomedien\FeComment\Middleware;
|
||||
|
||||
use Evomedien\FeComment\Service\ExtensionSettings;
|
||||
use Psr\Http\Message\ResponseInterface;
|
||||
use Psr\Http\Message\ServerRequestInterface;
|
||||
use Psr\Http\Server\MiddlewareInterface;
|
||||
use Psr\Http\Server\RequestHandlerInterface;
|
||||
use TYPO3\CMS\Core\Http\JsonResponse;
|
||||
use TYPO3\CMS\Core\Mail\MailMessage;
|
||||
use TYPO3\CMS\Core\Utility\GeneralUtility;
|
||||
|
||||
/**
|
||||
* POST /api/fe-comment/submit - sends the note pad by mail.
|
||||
*
|
||||
* Payload: {"entries": [{"url": "/product/hx4", "comment": "..."}]}
|
||||
* Response: {"success": true} or {"success": false, "error": "..."}
|
||||
*
|
||||
* Recipients (to/cc/bcc) and subject come from the extension configuration;
|
||||
* without a configured "to" the endpoint refuses, so feedback can never
|
||||
* silently vanish. The sender is the system default mail-from.
|
||||
*/
|
||||
final class SubmitMiddleware implements MiddlewareInterface
|
||||
{
|
||||
private const PATH = '/api/fe-comment/submit';
|
||||
private const MAX_ENTRIES = 100;
|
||||
private const MAX_URL_LENGTH = 2000;
|
||||
private const MAX_COMMENT_LENGTH = 10000;
|
||||
|
||||
public function process(ServerRequestInterface $request, RequestHandlerInterface $handler): ResponseInterface
|
||||
{
|
||||
if (rtrim($request->getUri()->getPath(), '/') !== self::PATH) {
|
||||
return $handler->handle($request);
|
||||
}
|
||||
if (strtoupper($request->getMethod()) !== 'POST') {
|
||||
return new JsonResponse(['success' => false, 'error' => 'POST only'], 405);
|
||||
}
|
||||
|
||||
try {
|
||||
$settings = GeneralUtility::makeInstance(ExtensionSettings::class);
|
||||
if (!$settings->enabled()) {
|
||||
return new JsonResponse(['success' => false, 'error' => 'Feedback is disabled'], 403);
|
||||
}
|
||||
if ($settings->mailTo() === []) {
|
||||
return new JsonResponse(['success' => false, 'error' => 'No recipient configured (extension configuration fe_comment)'], 503);
|
||||
}
|
||||
|
||||
$payload = json_decode((string)$request->getBody(), true);
|
||||
$entries = is_array($payload['entries'] ?? null) ? $payload['entries'] : [];
|
||||
$clean = [];
|
||||
foreach (array_slice($entries, 0, self::MAX_ENTRIES) as $entry) {
|
||||
$url = mb_substr(trim((string)($entry['url'] ?? '')), 0, self::MAX_URL_LENGTH);
|
||||
$comment = mb_substr(trim((string)($entry['comment'] ?? '')), 0, self::MAX_COMMENT_LENGTH);
|
||||
if ($comment !== '') {
|
||||
$clean[] = ['url' => $url, 'comment' => $comment];
|
||||
}
|
||||
}
|
||||
if ($clean === []) {
|
||||
return new JsonResponse(['success' => false, 'error' => 'No entries'], 400);
|
||||
}
|
||||
|
||||
$host = $request->getUri()->getHost();
|
||||
$lines = ['Page feedback from ' . $host, 'Submitted: ' . date('Y-m-d H:i'), str_repeat('-', 60), ''];
|
||||
foreach ($clean as $i => $entry) {
|
||||
$lines[] = ($i + 1) . ') ' . ($entry['url'] !== '' ? $entry['url'] : '(no url)');
|
||||
$lines[] = $entry['comment'];
|
||||
$lines[] = '';
|
||||
}
|
||||
|
||||
$mail = GeneralUtility::makeInstance(MailMessage::class);
|
||||
$mail->to(...$settings->mailTo())
|
||||
->subject($settings->subject() . ' — ' . $host . ' (' . count($clean) . ')')
|
||||
->text(implode("\n", $lines));
|
||||
if ($settings->mailCc() !== []) {
|
||||
$mail->cc(...$settings->mailCc());
|
||||
}
|
||||
if ($settings->mailBcc() !== []) {
|
||||
$mail->bcc(...$settings->mailBcc());
|
||||
}
|
||||
// v14: MailMessage no longer has send() - the Mailer service does.
|
||||
GeneralUtility::makeInstance(\TYPO3\CMS\Core\Mail\Mailer::class)->send($mail);
|
||||
|
||||
return new JsonResponse(['success' => true, 'sent' => count($clean)]);
|
||||
} catch (\Throwable $e) {
|
||||
return new JsonResponse(['success' => false, 'error' => 'Send failed: ' . $e->getMessage()], 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Evomedien\FeComment\Middleware;
|
||||
|
||||
use Psr\Http\Message\ResponseInterface;
|
||||
use Psr\Http\Message\ServerRequestInterface;
|
||||
use Psr\Http\Server\MiddlewareInterface;
|
||||
use Psr\Http\Server\RequestHandlerInterface;
|
||||
use TYPO3\CMS\Core\Http\Response;
|
||||
use TYPO3\CMS\Core\Http\Stream;
|
||||
use TYPO3\CMS\Core\Utility\GeneralUtility;
|
||||
|
||||
/**
|
||||
* Serves the widget assets under STABLE urls, independent of composer's
|
||||
* hashed _assets publishing:
|
||||
*
|
||||
* /api/fe-comment/widget.js
|
||||
* /api/fe-comment/widget.css
|
||||
*
|
||||
* One <script> tag is the whole integration - the JS injects its own CSS
|
||||
* link. Short client cache so editors see fixes quickly; the widget is a
|
||||
* review tool, not a high-traffic asset.
|
||||
*/
|
||||
final class WidgetAssetMiddleware implements MiddlewareInterface
|
||||
{
|
||||
private const FILES = [
|
||||
'/api/fe-comment/widget.js' => ['EXT:fe_comment/Resources/Public/JavaScript/fe-comment.js', 'application/javascript; charset=utf-8'],
|
||||
'/api/fe-comment/widget.css' => ['EXT:fe_comment/Resources/Public/Css/fe-comment.css', 'text/css; charset=utf-8'],
|
||||
];
|
||||
|
||||
public function process(ServerRequestInterface $request, RequestHandlerInterface $handler): ResponseInterface
|
||||
{
|
||||
$path = $request->getUri()->getPath();
|
||||
$file = self::FILES[$path] ?? null;
|
||||
if ($file === null) {
|
||||
return $handler->handle($request);
|
||||
}
|
||||
|
||||
// Kill switch: the go-live off state serves an EMPTY file instead of
|
||||
// a 404, so a front end still embedding the script tag stays silent -
|
||||
// no console errors, no build change needed.
|
||||
if (!GeneralUtility::makeInstance(\Evomedien\FeComment\Service\ExtensionSettings::class)->enabled()) {
|
||||
return (new Response())
|
||||
->withHeader('Content-Type', $file[1])
|
||||
->withHeader('Cache-Control', 'public, max-age=300')
|
||||
->withBody(GeneralUtility::makeInstance(\TYPO3\CMS\Core\Http\StreamFactory::class)
|
||||
->createStream('/* fe_comment is disabled (extension configuration) */'));
|
||||
}
|
||||
|
||||
$absolute = GeneralUtility::getFileAbsFileName($file[0]);
|
||||
if ($absolute === '' || !is_file($absolute)) {
|
||||
return (new Response())->withStatus(404);
|
||||
}
|
||||
|
||||
return (new Response())
|
||||
->withHeader('Content-Type', $file[1])
|
||||
->withHeader('Cache-Control', 'public, max-age=300')
|
||||
->withBody(new Stream($absolute, 'rb'));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Evomedien\FeComment\Service;
|
||||
|
||||
use TYPO3\CMS\Core\Configuration\ExtensionConfiguration;
|
||||
use TYPO3\CMS\Core\Utility\GeneralUtility;
|
||||
|
||||
/**
|
||||
* Typed access to the extension configuration (Settings > Extension
|
||||
* Configuration > fe_comment). Every accessor is failure-tolerant: an
|
||||
* unconfigured extension behaves like "everything empty, headless mode".
|
||||
*/
|
||||
final class ExtensionSettings
|
||||
{
|
||||
/** @var array<string,mixed> */
|
||||
private array $settings;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
try {
|
||||
$this->settings = (array)GeneralUtility::makeInstance(ExtensionConfiguration::class)->get('fe_comment');
|
||||
} catch (\Throwable) {
|
||||
$this->settings = [];
|
||||
}
|
||||
}
|
||||
|
||||
/** @return string[] */
|
||||
public function mailTo(): array
|
||||
{
|
||||
return $this->addressList('mailTo');
|
||||
}
|
||||
|
||||
/** @return string[] */
|
||||
public function mailCc(): array
|
||||
{
|
||||
return $this->addressList('mailCc');
|
||||
}
|
||||
|
||||
/** @return string[] */
|
||||
public function mailBcc(): array
|
||||
{
|
||||
return $this->addressList('mailBcc');
|
||||
}
|
||||
|
||||
public function subject(): string
|
||||
{
|
||||
$subject = trim((string)($this->settings['subject'] ?? ''));
|
||||
return $subject !== '' ? $subject : 'Page feedback';
|
||||
}
|
||||
|
||||
/** Master switch: off serves an empty widget and rejects submissions. */
|
||||
public function enabled(): bool
|
||||
{
|
||||
return (bool)($this->settings['enabled'] ?? true);
|
||||
}
|
||||
|
||||
/** true = headless: TYPO3 injects nothing, the front end embeds the widget itself. */
|
||||
public function jsonOutput(): bool
|
||||
{
|
||||
return (bool)($this->settings['jsonOutput'] ?? true);
|
||||
}
|
||||
|
||||
/** @return string[] valid mail addresses only */
|
||||
private function addressList(string $key): array
|
||||
{
|
||||
$addresses = [];
|
||||
foreach (GeneralUtility::trimExplode(',', (string)($this->settings[$key] ?? ''), true) as $address) {
|
||||
if (GeneralUtility::validEmail($address)) {
|
||||
$addresses[] = $address;
|
||||
}
|
||||
}
|
||||
return $addresses;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Frontend middlewares for EXT:fe_comment. Both answer before site/page
|
||||
* resolution - the endpoints exist on every site the extension is loaded in.
|
||||
*/
|
||||
return [
|
||||
'frontend' => [
|
||||
'fecomment/widget-assets' => [
|
||||
'target' => \Evomedien\FeComment\Middleware\WidgetAssetMiddleware::class,
|
||||
'after' => [
|
||||
'typo3/cms-core/normalized-params-attribute',
|
||||
],
|
||||
'before' => [
|
||||
'typo3/cms-frontend/site',
|
||||
],
|
||||
],
|
||||
'fecomment/submit' => [
|
||||
'target' => \Evomedien\FeComment\Middleware\SubmitMiddleware::class,
|
||||
'after' => [
|
||||
'typo3/cms-core/normalized-params-attribute',
|
||||
],
|
||||
'before' => [
|
||||
'typo3/cms-frontend/site',
|
||||
],
|
||||
],
|
||||
],
|
||||
];
|
||||
@@ -0,0 +1,14 @@
|
||||
services:
|
||||
_defaults:
|
||||
autowire: true
|
||||
autoconfigure: true
|
||||
public: false
|
||||
|
||||
Evomedien\FeComment\:
|
||||
resource: '../Classes/*'
|
||||
|
||||
Evomedien\FeComment\EventListener\InjectWidget:
|
||||
tags:
|
||||
- name: event.listener
|
||||
identifier: 'fecomment/inject-widget'
|
||||
event: TYPO3\CMS\Core\Page\Event\BeforeJavaScriptsRenderingEvent
|
||||
@@ -0,0 +1,47 @@
|
||||
# EXT:fe_comment — page feedback widget
|
||||
|
||||
A floating button at the right edge of every page lets reviewers (e.g. the
|
||||
customer) comment on the page they are looking at. Notes collect on a local
|
||||
note pad (localStorage, survives navigation and SPA route changes); the pad
|
||||
lists every note with its URL and editable text and submits them all in one
|
||||
mail.
|
||||
|
||||
Framework-agnostic: the whole UI is one vanilla-JS file served by the
|
||||
extension itself — it works on a React/SPA front end and on classic
|
||||
TYPO3-rendered pages alike.
|
||||
|
||||
## Endpoints (middleware, active on every site with the extension installed)
|
||||
|
||||
| URL | Purpose |
|
||||
|---|---|
|
||||
| `/api/fe-comment/widget.js` | the widget (injects its own CSS) |
|
||||
| `/api/fe-comment/widget.css` | widget styles |
|
||||
| `/api/fe-comment/submit` | POST `{"entries":[{"url","comment"}]}` → sends the mail |
|
||||
|
||||
## Configuration (Settings → Extension Configuration → fe_comment)
|
||||
|
||||
- **mailTo** (required) / **mailCc** / **mailBcc** — comma-separated lists.
|
||||
Without a valid `mailTo`, submissions are rejected (HTTP 503), nothing is
|
||||
lost silently.
|
||||
- **subject** — subject line, host and entry count are appended.
|
||||
- **jsonOutput** — `1` (default): headless mode, TYPO3 injects nothing; the
|
||||
front end embeds the widget itself:
|
||||
`<script src="/api/fe-comment/widget.js" defer></script>`
|
||||
`0`: classic TYPO3 site, the extension injects the script into every
|
||||
rendered frontend page automatically (AssetCollector, no TypoScript).
|
||||
|
||||
The sender address is TYPO3's system default
|
||||
(`$GLOBALS['TYPO3_CONF_VARS']['MAIL']['defaultMailFromAddress']`).
|
||||
|
||||
## Notes for SPA setups
|
||||
|
||||
- The page URL is read at SAVE time (`location.pathname + search`), so
|
||||
client-side route changes are captured correctly.
|
||||
- If page URLs are rewritten to an SPA fallback (like the vitec `.htaccess`
|
||||
phase B block), `/api/` paths must stay excluded from the fallback so the
|
||||
endpoints keep reaching TYPO3.
|
||||
|
||||
## Labels
|
||||
|
||||
UI labels are German and live in the `T` object at the top of
|
||||
`Resources/Public/JavaScript/fe-comment.js`.
|
||||
@@ -0,0 +1,121 @@
|
||||
/* EXT:fe_comment widget — isolated styles, .evofc-prefixed, high z-index. */
|
||||
|
||||
.evofc {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2147483000;
|
||||
font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
color: #1c2430;
|
||||
}
|
||||
|
||||
.evofc-toggle {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: 0;
|
||||
border-radius: 8px 0 0 8px;
|
||||
background: #1f6feb;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
|
||||
}
|
||||
.evofc-toggle:hover { background: #1a5fd0; }
|
||||
|
||||
.evofc-badge {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 4px;
|
||||
border-radius: 9px;
|
||||
background: #d9463e;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.evofc-panel {
|
||||
position: absolute;
|
||||
right: 52px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 320px;
|
||||
max-width: calc(100vw - 70px);
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
border: 1px solid #d5dbe3;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.evofc-title { font-weight: 700; margin-bottom: 10px; }
|
||||
.evofc-label { display: block; font-size: 12px; color: #5a6572; margin: 8px 0 2px; }
|
||||
|
||||
.evofc-url,
|
||||
.evofc-text {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #c9d1da;
|
||||
border-radius: 6px;
|
||||
padding: 6px 8px;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
.evofc-url { background: #f3f5f7; color: #5a6572; }
|
||||
.evofc-text { resize: vertical; }
|
||||
|
||||
.evofc-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
|
||||
|
||||
.evofc-button {
|
||||
border: 1px solid #c9d1da;
|
||||
border-radius: 6px;
|
||||
background: #f6f8fa;
|
||||
color: #1c2430;
|
||||
padding: 7px 12px;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.evofc-button:hover { background: #eef1f4; }
|
||||
.evofc-primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
|
||||
.evofc-primary:hover { background: #1a5fd0; }
|
||||
.evofc-primary:disabled { opacity: .6; cursor: default; }
|
||||
|
||||
.evofc-hint { color: #2f9e44; font-size: 12px; }
|
||||
.evofc-footer { margin-top: 10px; }
|
||||
.evofc-empty, .evofc-status { margin: 8px 0 0; font-size: 13px; }
|
||||
.evofc-status { font-weight: 600; }
|
||||
|
||||
.evofc-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.evofc-item { border: 1px solid #e2e7ec; border-radius: 8px; padding: 8px; }
|
||||
.evofc-item-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 6px; }
|
||||
.evofc-item-url {
|
||||
font-size: 12px;
|
||||
color: #5a6572;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.evofc-remove {
|
||||
border: 0;
|
||||
background: none;
|
||||
color: #d9463e;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
@@ -0,0 +1,258 @@
|
||||
/**
|
||||
* EXT:fe_comment — page feedback widget (framework-agnostic, vanilla JS).
|
||||
*
|
||||
* One floating button at the right edge opens a small form: current page
|
||||
* URL + a comment field. Saved notes land on a local note pad
|
||||
* (localStorage, survives navigation — also SPA route changes, the URL is
|
||||
* read at save time). The pad lists every note (URL + editable text) and
|
||||
* submits all of them to POST /api/fe-comment/submit, which mails them.
|
||||
*
|
||||
* Integration: <script src="/api/fe-comment/widget.js" defer></script>
|
||||
* (classic TYPO3 sites get this injected by the extension automatically
|
||||
* when the "JSON output" setting is off).
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
if (window.__evofcLoaded) { return; }
|
||||
window.__evofcLoaded = true;
|
||||
|
||||
var ENDPOINT = '/api/fe-comment/submit';
|
||||
var CSS_URL = '/api/fe-comment/widget.css';
|
||||
var STORAGE_KEY = 'evoFeCommentNotes';
|
||||
|
||||
var T = {
|
||||
open: 'Seite kommentieren',
|
||||
formTitle: 'Anmerkung zu dieser Seite',
|
||||
urlLabel: 'Seite',
|
||||
commentLabel: 'Anmerkung',
|
||||
placeholder: 'Was ist dir aufgefallen?',
|
||||
save: 'Auf den Merkzettel',
|
||||
showPad: 'Merkzettel',
|
||||
padTitle: 'Merkzettel',
|
||||
padEmpty: 'Noch keine Anmerkungen.',
|
||||
remove: 'Entfernen',
|
||||
submit: 'Absenden',
|
||||
submitting: 'Sende …',
|
||||
back: 'Zurück',
|
||||
savedHint: 'Gespeichert ✓',
|
||||
sentOk: 'Danke! Die Anmerkungen wurden gesendet.',
|
||||
sentFail: 'Senden fehlgeschlagen: '
|
||||
};
|
||||
|
||||
function loadNotes() {
|
||||
try {
|
||||
var raw = localStorage.getItem(STORAGE_KEY);
|
||||
var list = raw ? JSON.parse(raw) : [];
|
||||
return Array.isArray(list) ? list : [];
|
||||
} catch (e) { return []; }
|
||||
}
|
||||
function saveNotes(notes) {
|
||||
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(notes)); } catch (e) { /* private mode */ }
|
||||
}
|
||||
function currentUrl() {
|
||||
return location.pathname + location.search;
|
||||
}
|
||||
function el(tag, className, text) {
|
||||
var node = document.createElement(tag);
|
||||
if (className) { node.className = className; }
|
||||
if (text) { node.textContent = text; }
|
||||
return node;
|
||||
}
|
||||
|
||||
// ---- styles ------------------------------------------------------------
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = CSS_URL;
|
||||
document.head.appendChild(link);
|
||||
|
||||
// ---- structure ---------------------------------------------------------
|
||||
var root = el('div', 'evofc');
|
||||
root.setAttribute('data-evofc', '');
|
||||
|
||||
var toggle = el('button', 'evofc-toggle');
|
||||
toggle.type = 'button';
|
||||
toggle.title = T.open;
|
||||
toggle.setAttribute('aria-label', T.open);
|
||||
toggle.innerHTML =
|
||||
'<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">' +
|
||||
'<path fill="currentColor" d="M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H8.4L4 21.6A1 1 0 0 1 2.4 20.8V5a2 2 0 0 1 2-2Zm2.6 5.2h11m-11 4h7"' +
|
||||
' stroke="currentColor" stroke-width="1.6" stroke-linecap="round" fill="none"/></svg>';
|
||||
var badge = el('span', 'evofc-badge');
|
||||
badge.hidden = true;
|
||||
toggle.appendChild(badge);
|
||||
|
||||
var panel = el('div', 'evofc-panel');
|
||||
panel.hidden = true;
|
||||
|
||||
root.appendChild(toggle);
|
||||
root.appendChild(panel);
|
||||
|
||||
// ---- views -------------------------------------------------------------
|
||||
var view = 'form'; // 'form' | 'pad'
|
||||
|
||||
function refreshBadge() {
|
||||
var count = loadNotes().length;
|
||||
badge.textContent = String(count);
|
||||
badge.hidden = count === 0;
|
||||
}
|
||||
|
||||
function renderForm() {
|
||||
view = 'form';
|
||||
panel.innerHTML = '';
|
||||
panel.appendChild(el('div', 'evofc-title', T.formTitle));
|
||||
|
||||
var urlLabel = el('label', 'evofc-label', T.urlLabel);
|
||||
var urlInput = el('input', 'evofc-url');
|
||||
urlInput.type = 'text';
|
||||
urlInput.readOnly = true;
|
||||
urlInput.value = currentUrl();
|
||||
|
||||
var commentLabel = el('label', 'evofc-label', T.commentLabel);
|
||||
var textarea = el('textarea', 'evofc-text');
|
||||
textarea.rows = 4;
|
||||
textarea.placeholder = T.placeholder;
|
||||
|
||||
var saveButton = el('button', 'evofc-button evofc-primary', T.save);
|
||||
saveButton.type = 'button';
|
||||
var hint = el('span', 'evofc-hint');
|
||||
|
||||
saveButton.addEventListener('click', function () {
|
||||
var comment = textarea.value.trim();
|
||||
if (comment === '') { textarea.focus(); return; }
|
||||
var notes = loadNotes();
|
||||
notes.push({ url: urlInput.value, comment: comment, added: Date.now() });
|
||||
saveNotes(notes);
|
||||
textarea.value = '';
|
||||
refreshBadge();
|
||||
renderFooter(footer);
|
||||
hint.textContent = T.savedHint;
|
||||
setTimeout(function () { hint.textContent = ''; }, 1800);
|
||||
});
|
||||
|
||||
var footer = el('div', 'evofc-footer');
|
||||
renderFooter(footer);
|
||||
|
||||
panel.appendChild(urlLabel);
|
||||
panel.appendChild(urlInput);
|
||||
panel.appendChild(commentLabel);
|
||||
panel.appendChild(textarea);
|
||||
var row = el('div', 'evofc-row');
|
||||
row.appendChild(saveButton);
|
||||
row.appendChild(hint);
|
||||
panel.appendChild(row);
|
||||
panel.appendChild(footer);
|
||||
}
|
||||
|
||||
function renderFooter(footer) {
|
||||
footer.innerHTML = '';
|
||||
var count = loadNotes().length;
|
||||
if (count > 0) {
|
||||
var padButton = el('button', 'evofc-button', T.showPad + ' (' + count + ')');
|
||||
padButton.type = 'button';
|
||||
padButton.addEventListener('click', renderPad);
|
||||
footer.appendChild(padButton);
|
||||
}
|
||||
}
|
||||
|
||||
function renderPad() {
|
||||
view = 'pad';
|
||||
panel.innerHTML = '';
|
||||
panel.appendChild(el('div', 'evofc-title', T.padTitle));
|
||||
|
||||
var notes = loadNotes();
|
||||
if (notes.length === 0) {
|
||||
panel.appendChild(el('p', 'evofc-empty', T.padEmpty));
|
||||
}
|
||||
|
||||
var list = el('div', 'evofc-list');
|
||||
notes.forEach(function (note, index) {
|
||||
var item = el('div', 'evofc-item');
|
||||
var head = el('div', 'evofc-item-head');
|
||||
head.appendChild(el('span', 'evofc-item-url', note.url || '(ohne URL)'));
|
||||
var removeButton = el('button', 'evofc-remove', '×');
|
||||
removeButton.type = 'button';
|
||||
removeButton.title = T.remove;
|
||||
removeButton.addEventListener('click', function () {
|
||||
var current = loadNotes();
|
||||
current.splice(index, 1);
|
||||
saveNotes(current);
|
||||
refreshBadge();
|
||||
renderPad();
|
||||
});
|
||||
head.appendChild(removeButton);
|
||||
|
||||
var textarea = el('textarea', 'evofc-text');
|
||||
textarea.rows = 3;
|
||||
textarea.value = note.comment;
|
||||
textarea.addEventListener('input', function () {
|
||||
var current = loadNotes();
|
||||
if (current[index]) {
|
||||
current[index].comment = textarea.value;
|
||||
saveNotes(current);
|
||||
}
|
||||
});
|
||||
|
||||
item.appendChild(head);
|
||||
item.appendChild(textarea);
|
||||
list.appendChild(item);
|
||||
});
|
||||
panel.appendChild(list);
|
||||
|
||||
var status = el('p', 'evofc-status');
|
||||
var row = el('div', 'evofc-row');
|
||||
var backButton = el('button', 'evofc-button', T.back);
|
||||
backButton.type = 'button';
|
||||
backButton.addEventListener('click', renderForm);
|
||||
row.appendChild(backButton);
|
||||
|
||||
if (notes.length > 0) {
|
||||
var submitButton = el('button', 'evofc-button evofc-primary', T.submit);
|
||||
submitButton.type = 'button';
|
||||
submitButton.addEventListener('click', function () {
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = T.submitting;
|
||||
var entries = loadNotes().map(function (note) {
|
||||
return { url: note.url, comment: note.comment };
|
||||
});
|
||||
fetch(ENDPOINT, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ entries: entries })
|
||||
}).then(function (response) { return response.json(); }).then(function (result) {
|
||||
if (result && result.success) {
|
||||
saveNotes([]);
|
||||
refreshBadge();
|
||||
renderPad();
|
||||
status.textContent = T.sentOk;
|
||||
panel.appendChild(status);
|
||||
} else {
|
||||
throw new Error((result && result.error) || 'unknown');
|
||||
}
|
||||
}).catch(function (error) {
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = T.submit;
|
||||
status.textContent = T.sentFail + error.message;
|
||||
panel.appendChild(status);
|
||||
});
|
||||
});
|
||||
row.appendChild(submitButton);
|
||||
}
|
||||
panel.appendChild(row);
|
||||
}
|
||||
|
||||
toggle.addEventListener('click', function () {
|
||||
if (panel.hidden) {
|
||||
renderForm();
|
||||
panel.hidden = false;
|
||||
} else {
|
||||
panel.hidden = true;
|
||||
}
|
||||
});
|
||||
|
||||
refreshBadge();
|
||||
if (document.body) {
|
||||
document.body.appendChild(root);
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', function () { document.body.appendChild(root); });
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "evomedien/fe-comment",
|
||||
"version": "1.0.0",
|
||||
"type": "typo3-cms-extension",
|
||||
"description": "Page feedback widget: visitors collect comments per page on a note pad and submit them by mail. Framework-agnostic (works on headless/SPA and classic TYPO3 sites).",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"require": {
|
||||
"typo3/cms-core": "^14.0"
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Evomedien\\FeComment\\": "Classes/"
|
||||
}
|
||||
},
|
||||
"extra": {
|
||||
"typo3/cms": {
|
||||
"extension-key": "fe_comment"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
# cat=basic//10; type=boolean; label=Enabled: Master switch. 0 = the widget script is served EMPTY and submissions are rejected - the kill switch for go-live, no front-end build change needed.
|
||||
enabled = 1
|
||||
|
||||
# cat=mail//10; type=string; label=Mail to: Recipient address(es) for submitted feedback, comma separated. Empty = submissions are rejected with an error.
|
||||
mailTo =
|
||||
|
||||
# cat=mail//20; type=string; label=Mail cc: Optional, comma separated.
|
||||
mailCc =
|
||||
|
||||
# cat=mail//30; type=string; label=Mail bcc: Optional, comma separated.
|
||||
mailBcc =
|
||||
|
||||
# cat=mail//40; type=string; label=Subject: Subject line of the feedback mail.
|
||||
subject = Page feedback
|
||||
|
||||
# cat=output//10; type=boolean; label=JSON output (headless mode): 1 = TYPO3 injects nothing, the front end embeds <script src="/api/fe-comment/widget.js"> itself (SPA / React). 0 = classic TYPO3 site, the widget script is injected into every rendered page automatically.
|
||||
jsonOutput = 1
|
||||
Reference in new issue
Block a user