README

为TYPO3 CMS前端添加监视列表功能。

用户可以将“项目”添加到监视列表。他们还可以从监视列表中删除项目并显示当前的监视列表。

项目可以是任何东西。该扩展使用接口，开发者可以将他们想要添加到监视列表中的任何东西连接到项目。

功能集

该扩展提供了一种控制器，用于添加和删除监视列表中的项目。每个项目在每个监视列表中只能存在一次。

还有一个显示监视列表的操作。

如果需要，该扩展具有多个监视列表的概念，提供监视列表标识符，将回退到“默认”。但是，cookie的唯一存储实现尚未处理该概念。

该扩展不提供任何开箱即用的支持。项目差异很大，应提供自己的项目，请参阅“自定义项目”。但提供了一个示例，请参阅下面的示例部分。

该扩展还提供了一个JavaScript，它将解析DOM的数据属性并附加监听器以将元素添加到监视列表。

允许在EXT:form表单中渲染监视列表的项目。

概念

该扩展仅提供功能，没有具体的项目特定实现。项目开发者和集成者需要提供必要的组件，请参阅“自定义项目”。该扩展始终仅使用每个项目的标识符，并不知道有关项目的内容。

自定义项目

开发者需要实现一个ItemHandler和一个代表Item的类。可以可选地实现FormElementAwareItem，以便在EXT:form表单中使用项目。

使用的标识符必须在系统中是唯一的。第一部分是返回给要处理的ItemHandler的item类型，后面跟着一个减号和标识符的其余部分，即：<type>-rest-of-identifier。

标识符中不应使用逗号。标识符将作为csv存储在cookie中。

ItemHandler

该类需要实现WerkraumMedia\Watchlist\Domain\ItemHandlerInterface。目的是将该项的标识符转换为该项的实际实例。处理程序需要通过Symfony标签注册，例如通过Services.yaml。

WerkraumMedia\WatchlistExample\PageItem\ItemHandler:
  tags: ['watchlist.itemHandler']

Item

该类需要实现WerkraumMedia\Watchlist\Domain\Model\Item。

FormElementAwareItem

该类可以实施WerkraumMedia\Watchlist\Domain\Model\FormElementAwareItem。

这些方法由默认的EXT:form集成使用。开发者和集成者可以选择不使用此接口并更改渲染。

示例

该扩展提供了一种用于测试目的的示例实现，请参阅

• Tests/Fixtures/WatchlistExample/Classes/Domain/Items/Page/ItemHandler.php
• Tests/Fixtures/WatchlistExample/Classes/Domain/Items/Page/Page.php这实现了Item以及FormElementAwareItem。
• Tests/Fixtures/WatchlistExample/Configuration/Services.yaml

该示例演示了如何从数据库获取信息，包括文件引用。

EXT:form集成

提供的配置需要通过TypoScript加载。使用一个自由标识符

plugin.tx_form.settings.yamlConfigurations {
    80 = EXT:watchlist/Configuration/Form/Setup.yaml
}

这将注册一个新的表单元素类型 Watchlist，可以像这样使用：

-
  type: Watchlist
  identifier: watchlist-1
  label: 'Watchlist'

提供了一个默认模板，该模板将渲染所有带有复选框的项目。

JavaScript

JavaScript 适用于两个 data- 属性

data-watchlist-counter

定义此元素将保留监视列表中的当前项目数。JavaScript 将更新该元素的内容。

<span data-watchlist-counter class="watchlist-badge-counter"></span>

data-watchlist-item

定义此元素表示一个实际的项目。该属性需要项目的标识符作为值，例如：data-watchlist-item="page-1"

将添加一个 EventListener，监听该元素的点击事件。每次点击都会切换监视列表中项目的状态。

JavaScript 将根据项目的状态向元素添加一个 CSS 类。如果项目不在监视列表中，将添加 watchlist-inactive。如果项目在监视列表中，将添加 watchlist-active。

每当项目被添加到或从监视列表中删除时，将触发一个自定义事件。该事件在 document 上触发。事件提供项目的标识符。一个示例监听器可以如下所示：

document.addEventListener('WatchlistUpdate', function(event) {
    console.log(event.detail.watchlistItem);
});

示例

一个具体的例子可以在 Tests/Fixtures/FrontendRendering.typoscript 中找到。此示例包括提供的 JavaScript 文件以及一些自定义 CSS 和标记。内容元素不是必需的。

变更日志

v1.0.1

• 修复了在 TCA 中将插件作为内容元素注册时的问题。在配置和注册插件时，我们使用了不同的 ExtensionName 和 PluginName 的大小写。这导致插件也被注册为 list_type 即“插入插件”。但没有渲染定义。我们手动添加了 CType 注册。

  现在通过正确调用 registerPlugin() 方法来修复此问题。这样 extbase 就可以找到 CType 定义，并将其添加为 CType 而不是 list_type。

• 修复了损坏的 cookie 处理。

  • 由于某种原因，我们在服务器端存储 cookie 时使用了 /typo3/ 路径。但在 JavaScript 中使用了 /。这不起作用，现在已经修复为现在始终为 /，但通常应该是可配置的。修复揭示了检测是否存储 cookie 时出现问题，该问题已在相应的服务中修复。
  • 此外，存储 cookie 的日期不同。现在我们总是使用 7 天。
  • 现在我们正确地编码了 cookie 的值，以防止像 ; 这样的特殊含义的问题。这已经在 PHP 端完成，但在 JS 中没有。