ユニバーサルエディターイベント events
リモートアプリのコンテンツや UI の変更に反応するために使用できる、ユニバーサルエディターが送信する様々なイベントについて説明します。
はじめに introduction
アプリケーションには、ページまたはコンポーネントのアップデートに関する様々な要件があります。 そのため、ユニバーサルエディターは、定義済みのイベントをリモートアプリケーションに送信します。 リモートアプリケーションに送信されたイベントのカスタムイベントリスナーがない場合は、universal-editor-cors パッケージから提供される フォールバックイベントリスナーが実行されます。
すべてのイベントは、リモートページの影響を受ける DOM 要素で呼び出されます。 イベントは、universal-editor-cors パッケージによって提供されるデフォルトのイベントリスナーが登録されている BODY 要素までバブルアップします。 コンテンツ用のイベントと UI 用のイベントがあります。
すべてのイベントは命名規則に従います。
aue:<content-or-ui>-<event-name>
例：aue:content-update および aue:ui-select
イベントには、リクエストのと応答のペイロードが含まれ、対応する呼び出しが成功するとトリガーされます。 呼び出しとそのペイロードの例について詳しくは、ドキュメント ユニバーサルエディターの呼び出しを参照してください。
コンテンツ更新イベント content-events
aue:content-add content-add
aue:content-add イベントは、新しいコンポーネントがコンテナに追加されるとトリガーされます。
ペイロードは、ユニバーサルエディターサービスのコンテンツと、コンポーネント定義のフォールバックコンテンツです。
{
details: {
request: request payload; // what is sent to the service
response: { // what is returned by the service
resource: string; // newly created content resource
updates: [{
resource: string; // resource to update
type: string; // type of instrumentation
content?: string; // content to replace
}]
}
}
}
aue:content-details content-details
プロパティパネルにコンポーネントが読み込まれると、aue:content-details イベントがトリガーされます。
ペイロードは、コンポーネントのコンテンツであり、オプションでスキーマでもあります。
{
details: {
content: object // content object
model: [object] // model object
request: request payload; // what is sent to the service
response: response payload; // what is returned by the service
}
}
aue:content-move content-move
コンポーネントが移動されると、aue:content-move イベントがトリガーされます。
ペイロードは、コンポーネント、ソースコンテナ、ターゲットコンテナです。
{
details: {
from: string; // container we move the component from
component: string; // component we move
to: string; // container we move the component to
before: string; // before which component shall we place the component
request: request payload; // what is sent to the service
response: response payload; // what is returned by the service
}
}
aue:content-patch content-patch
aue:content-patch イベントは、コンポーネントのデータがプロパティパネルで更新されたときにトリガーされます。
ペイロードは、更新されたプロパティの JSON パッチです。
{
details: {
patch: {
name: string; // attribute which is updated
value: string; // new value which is stored to the attribute
},
request: request payload; // what is sent to the service
response: response payload; // what is returned by the service
}
}
aue:content-remove content-remove
aue:content-remove イベントは、コンポーネントがコンテナから削除されたときにトリガーされます。
ペイロードは、削除されたコンポーネントの項目 ID です。
{
details: {
resource: string; // the resource which got removed
request: request payload; // what is sent to the service
response: response payload; // what is returned by the service
}
}
aue:content-update content-update
コンポーネントのプロパティがコンテキスト内で更新されると、aue:content-update イベントがトリガーされます。
ペイロードは更新された値です。
{
details: {
value: string; // updated value
request: request payload; // what is sent to the service
response: response payload; // what is returned by the service
}
}
ペイロードの受け渡し passing-payloads
すべてのコンテンツ更新イベントについて、リクエストされたペイロードと応答ペイロードがイベントに渡されます。 例：更新呼び出しの場合：
リクエストペイロード :
{
"connections": [
{
"name": "aemconnection",
"protocol": "aem",
"uri": "https://author-p7452-e12433.adobeaemcloud.com"
}
],
"target": {
"resource": "urn:aemconnection:/content/dam/wknd-shared/en/magazine/arctic-surfing/aloha-spirits-in-northern-norway/jcr:content/data/master",
"type": "text",
"prop": "title"
},
"value": "Alhoa Spirit Northern Norway!"
}
応答ペイロード
{
"updates": [
{
"resource": "urn:aemconnection:/content/dam/wknd-shared/en/magazine/arctic-surfing/aloha-spirits-in-northern-norway/jcr:content/data/master",
"prop": "title",
"type": "text"
}
]
}
UI イベント ui-events
aue:ui-publish ui-publish
aue:ui-publish イベントは、コンテンツが公開されると（BODY レベルでの呼び出しを伴って）トリガーされます。
ペイロードは、項目 ID とその公開ステータスのリストです。
aue:ui-select ui-select
コンポーネントが選択されると、aue:ui-select イベントがトリガーされます。
ペイロードは、選択したコンポーネントの項目 ID、項目プロパティおよび項目タイプです。
{
details: {
resource: string; // resource of the selected
prop: string; // prop of the selected
type: string; // type of the selected
selected: boolean; // was selected or unselected
}
}
aue:ui-preview ui-preview
aue:ui-preview イベントは、ページの編集モードが プレビュー に変更されたときにトリガーされます。
このイベントのペイロードが空です。
{
details: {}
}
aue:ui-edit ui-edit
aue:ui-edit イベントは、ページの編集モードが 編集 に変更されたときにトリガーされます。
このイベントのペイロードが空です。
{
details: {}
}
aue:ui-viewport-change ui-viewport-change
ビューポートのサイズが変更されると、aue:ui-viewport-change イベントがトリガーされます。
ペイロードはビューポートのサイズです。
{
details: {
height: number?; // height of the viewport. Undefined when fullscreen
width: number?; // width of the viewport. Undefined when fullscreen
}
}
aue:initialized initialized
aue:initialized イベントがトリガーされ、ユニバーサルエディターに正常に読み込まれたことがリモートページに通知されます。
このイベントのペイロードが空です。
{
details: {}
}
フォールバックイベントリスナー fallback-listeners
コンテンツの更新 content-update-fallbacks
aue:content-addaue:content-detailsaue:content-moveaue:content-patchaue:content-removeaue:content-updateinnerHTML を更新UI イベント ui-event-fallbacks
aue:ui-publishaue:ui-selectaue:ui-previewclass="adobe-ue-preview" を追加aue:ui-editclass=adobe-ue-edit" を追加aue:ui-viewport-changeaue:initialized