Skip to content

Commit

Permalink
Edit/Preview embeded items
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasOsti
lucasOsti committed Aug 31, 2023
1 parent 2445c9a commit fb70352
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 17 deletions.
4 changes: 2 additions & 2 deletions src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-command.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ class IbexaEmbedContentInlineCommand extends Command {
});
}

createEmbed(writer, { contentId, contentName }) {
return writer.createElement('embedInline', { contentId, contentName });
createEmbed(writer, { contentId, contentName, locationId, versionNo, languageCodes }) {
return writer.createElement('embedInline', { contentId, contentName, locationId, versionNo, languageCodes });
}
}

Expand Down
58 changes: 52 additions & 6 deletions src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-editing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,24 @@ import IbexaEmbedContentInlineCommand from './embed-inline-command';

import { findContent } from '../../services/content-service';

const renderPreview = (title) => {
const renderPreview = (title, contentId) => {
return `<svg class="ibexa-icon ibexa-icon--medium ibexa-icon--secondary">
<use xlink:href="${window.ibexa.helpers.icon.getIconPath('embed')}"></use>
</svg>
<span class="ibexa-embed-content__title">${title}</span>`;
<use xlink:href="${window.ibexa.helpers.icon.getIconPath('embed')}"></use>
</svg>
<span
class="ibexa-embed-content__title"
data-ibexa-update-content-id="${contentId}"
data-ibexa-update-source-data-path="Content.Name">${title}</span>
<span>
<button
type="button"
class="btn ibexa-btn ibexa-btn--small ibexa-btn--ghost ibexa-btn--no-text ibexa-embedded-item__actions-menu-trigger-btn"
>
<svg class="ibexa-icon ibexa-icon--small ibexa-icon--secondary">
<use xlink:href="${window.ibexa.helpers.icon.getIconPath('options')}"></use>
</svg>
</button>
</span>`;
};

class IbexaEmbedContentInlineEditing extends Plugin {
Expand All @@ -25,7 +38,7 @@ class IbexaEmbedContentInlineEditing extends Plugin {
isObject: true,
isInline: true,
allowWhere: '$text',
allowAttributes: ['contentId', 'contentName'],
allowAttributes: ['contentId', 'contentName', 'locationId', 'versionNo', 'languageCodes'],
});
}

Expand Down Expand Up @@ -57,13 +70,37 @@ class IbexaEmbedContentInlineEditing extends Plugin {
})
.add((dispatcher) =>
dispatcher.on('attribute:contentName', (event, data, conversionApi) => {
const { editor } = this;
const downcastWriter = conversionApi.writer;
const modelElement = data.item;
const viewElement = conversionApi.mapper.toViewElement(modelElement);
const preview = downcastWriter.createUIElement('span', { class: 'ibexa-embed-content' }, function (domDocument) {
const contentId = modelElement.getAttribute('contentId');
const contentName = modelElement.getAttribute('contentName');
const locationId = modelElement.getAttribute('locationId');
const versionNo = modelElement.getAttribute('versionNo');
const languageCodes = modelElement.getAttribute('languageCodes');
const domElement = this.toDomElement(domDocument);

domElement.innerHTML = renderPreview(modelElement.getAttribute('contentName'));
domElement.innerHTML = renderPreview(contentName, contentId);

const itemActionsTriggerElement = domElement.querySelector('.ibexa-embedded-item__actions-menu-trigger-btn');
const itemActionsMenuContainer = editor.sourceElement.parentNode.querySelector(
'.ibexa-embedded-item-actions .ibexa-multilevel-popup-menu',
);

domDocument.body.dispatchEvent(
new CustomEvent('ibexa-embedded-item:create-dynamic-menu', {
detail: {
contentId,
locationId,
versionNo,
languageCodes,
menuTriggerElement: itemActionsTriggerElement,
menuContainer: itemActionsMenuContainer,
},
}),
);

return domElement;
});
Expand Down Expand Up @@ -106,9 +143,18 @@ class IbexaEmbedContentInlineEditing extends Plugin {

findContent({ token, siteaccess, contentId }, (contents) => {
const contentName = contents[0].TranslatedName;
const locationId = contents[0].MainLocation._href.split('/').pop();
const versionNo = contents[0].currentVersionNo;
const languageCodes = contents[0].CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language.map(
(language) => language.languageCode,
);

this.editor.model.change((writer) => {
writer.setAttribute('contentName', contentName, modelElement);
writer.setAttribute('contentId', contentId, modelElement);
writer.setAttribute('locationId', locationId, modelElement);
writer.setAttribute('versionNo', versionNo, modelElement);
writer.setAttribute('languageCodes', languageCodes, modelElement);
});
});

Expand Down
5 changes: 5 additions & 0 deletions src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@ class IbexaEmbedContentInlineUI extends IbexaEmbedBaseUI {
return {
contentId: items[0].ContentInfo.Content._id,
contentName: items[0].ContentInfo.Content.TranslatedName,
locationId: items[0].id,
versionNo: items[0].ContentInfo.Content.currentVersionNo,
languageCodes: items[0].ContentInfo.Content.CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language.map(
(language) => language.languageCode,
),
};
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/bundle/Resources/public/js/CKEditor/embed/content/embed-command.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ class IbexaEmbedContentCommand extends Command {
});
}

createEmbed(writer, { contentId, contentName }) {
return writer.createElement('embed', { contentId, contentName });
createEmbed(writer, { contentId, contentName, locationId, versionNo, languageCodes }) {
return writer.createElement('embed', { contentId, contentName, locationId, versionNo, languageCodes });
}
}

Expand Down
62 changes: 55 additions & 7 deletions src/bundle/Resources/public/js/CKEditor/embed/content/embed-editing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,24 @@ import IbexaEmbedContentCommand from './embed-command';

import { findContent } from '../../services/content-service';

const renderPreview = (title) => {
const renderPreview = (title, contentId) => {
return `<svg class="ibexa-icon ibexa-icon--medium ibexa-icon--secondary">
<use xlink:href="${window.ibexa.helpers.icon.getIconPath('embed')}"></use>
</svg>
<span class="ibexa-embed-content__title">${title}</span>`;
<use xlink:href="${window.ibexa.helpers.icon.getIconPath('embed')}"></use>
</svg>
<span
class="ibexa-embed-content__title"
data-ibexa-update-content-id="${contentId}"
data-ibexa-update-source-data-path="Content.Name">${title}</span>
<span>
<button
type="button"
class="btn ibexa-btn ibexa-btn--small ibexa-btn--ghost ibexa-btn--no-text ibexa-embedded-item-actions__menu-trigger-btn"
>
<svg class="ibexa-icon ibexa-icon--small ibexa-icon--secondary">
<use xlink:href="${window.ibexa.helpers.icon.getIconPath('options')}"></use>
</svg>
</button>
</span>`;
};

class IbexaEmbedContentEditing extends Plugin {
Expand All @@ -24,7 +37,7 @@ class IbexaEmbedContentEditing extends Plugin {
schema.register('embed', {
isObject: true,
allowWhere: '$block',
allowAttributes: ['contentId', 'contentName'],
allowAttributes: ['contentId', 'contentName', 'locationId', 'versionNo', 'languageCodes'],
});
}

Expand All @@ -43,9 +56,11 @@ class IbexaEmbedContentEditing extends Plugin {
class: 'ibexa-embed',
});
const preview = downcastWriter.createUIElement('p', { class: 'ibexa-embed-content' }, function (domDocument) {
const contentId = modelElement.getAttribute('contentId');
const contentName = modelElement.getAttribute('contentName');
const domElement = this.toDomElement(domDocument);

domElement.innerHTML = renderPreview(modelElement.getAttribute('contentName'));
domElement.innerHTML = renderPreview(contentName, contentId);

return domElement;
});
Expand All @@ -57,13 +72,37 @@ class IbexaEmbedContentEditing extends Plugin {
})
.add((dispatcher) =>
dispatcher.on('attribute:contentName', (event, data, conversionApi) => {
const { editor } = this;
const downcastWriter = conversionApi.writer;
const modelElement = data.item;
const viewElement = conversionApi.mapper.toViewElement(modelElement);
const preview = downcastWriter.createUIElement('p', { class: 'ibexa-embed-content' }, function (domDocument) {
const contentId = modelElement.getAttribute('contentId');
const contentName = modelElement.getAttribute('contentName');
const locationId = modelElement.getAttribute('locationId');
const versionNo = modelElement.getAttribute('versionNo');
const languageCodes = modelElement.getAttribute('languageCodes');
const domElement = this.toDomElement(domDocument);

domElement.innerHTML = renderPreview(modelElement.getAttribute('contentName'));
domElement.innerHTML = renderPreview(contentName);

const itemActionsTriggerElement = domElement.querySelector('.ibexa-embedded-item-actions__menu-trigger-btn');
const itemActionsMenuContainer = editor.sourceElement.parentNode.querySelector(
'.ibexa-embedded-item-actions .ibexa-multilevel-popup-menu',
);

domDocument.body.dispatchEvent(
new CustomEvent('ibexa-embedded-item:create-dynamic-menu', {
detail: {
contentId,
locationId,
versionNo,
languageCodes,
menuTriggerElement: itemActionsTriggerElement,
menuContainer: itemActionsMenuContainer,
},
}),
);

return domElement;
});
Expand Down Expand Up @@ -106,9 +145,18 @@ class IbexaEmbedContentEditing extends Plugin {

findContent({ token, siteaccess, contentId }, (contents) => {
const contentName = contents[0].TranslatedName;
const locationId = contents[0].MainLocation._href.split('/').pop();
const versionNo = contents[0].currentVersionNo;
const languageCodes = contents[0].CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language.map(
(language) => language.languageCode,
);

this.editor.model.change((writer) => {
writer.setAttribute('contentName', contentName, modelElement);
writer.setAttribute('contentId', contentId, modelElement);
writer.setAttribute('locationId', locationId, modelElement);
writer.setAttribute('versionNo', versionNo, modelElement);
writer.setAttribute('languageCodes', languageCodes, modelElement);
});
});

Expand Down
5 changes: 5 additions & 0 deletions src/bundle/Resources/public/js/CKEditor/embed/content/embed-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@ class IbexaEmbedContentUI extends IbexaEmbedBaseUI {
return {
contentId: items[0].ContentInfo.Content._id,
contentName: items[0].ContentInfo.Content.TranslatedName,
locationId: items[0].id,
versionNo: items[0].ContentInfo.Content.currentVersionNo,
languageCodes: items[0].ContentInfo.Content.CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language.map(
(language) => language.languageCode,
),
};
}
}
Expand Down

0 comments on commit fb70352

Please sign in to comment.