From dde339bc1be02fb16c29318328344c0f59b5bca5 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Wed, 24 Jul 2024 15:21:20 +0200 Subject: [PATCH] IBX-8150: Added option to enable attributes types --- .../encore/ez.webpack.custom.config.js | 1 + .../block-custom-tag/custom-tag-ui.js | 12 ++++++- .../ui/custom-tag-attributes-view.js | 4 ++- .../custom-tags/ui/custom-tag-form-view.js | 35 ++++++++++++++++++- 4 files changed, 49 insertions(+), 3 deletions(-) diff --git a/src/bundle/Resources/encore/ez.webpack.custom.config.js b/src/bundle/Resources/encore/ez.webpack.custom.config.js index a652154d..a561aa29 100644 --- a/src/bundle/Resources/encore/ez.webpack.custom.config.js +++ b/src/bundle/Resources/encore/ez.webpack.custom.config.js @@ -14,6 +14,7 @@ Encore.addEntry('ibexa-richtext-onlineeditor-js', [path.resolve(__dirname, '../p Encore.addAliases({ '@ckeditor': path.resolve('./public/bundles/ibexaadminuiassets/vendors/@ckeditor'), + '@fieldtype-richtext': path.resolve('./vendor/ibexa/fieldtype-richtext'), }); const customConfig = Encore.getWebpackConfig(); diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js index af6a9fc6..262ff512 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js @@ -111,7 +111,13 @@ class IbexaCustomTagUI extends Plugin { this.isNew = false; Object.entries(this.formView.attributeViews).forEach(([name, attributeView]) => { - newValues[name] = attributeView.fieldView.element.value; + const getValue = this.formView.getValueMethods[this.config.attributes[name].type]; + + if (!getValue) { + return; + } + + newValues[name] = getValue(attributeView); }); this.editor.model.change((writer) => { @@ -126,6 +132,10 @@ class IbexaCustomTagUI extends Plugin { this.hideForm(); }); + this.listenTo(formView, 'ibexa-ckeditor-update-balloon-position', () => { + this.balloon.updatePosition(this.getBalloonPositionData()); + }); + return formView; } diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js index fd17f59e..4343a651 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js @@ -60,6 +60,8 @@ class IbexaCustomTagAttributesView extends View { Object.entries(attributes).forEach(([name, config]) => { const value = values[name] === null || values[name] === undefined || values[name] === '' ? '-' : values[name]; + const getValueLabelMethods = window.ibexa.richText.CKEditor.customTags.getValueLabelMethods || {}; + const valueLabel = getValueLabelMethods[name] && value !== '-' ? getValueLabelMethods[name](value, config) : value; children.push({ tag: 'div', @@ -79,7 +81,7 @@ class IbexaCustomTagAttributesView extends View { attributes: { class: 'ibexa-custom-tag-attributes__item-value', }, - children: [value], + children: [valueLabel], }, ], }); diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js index 3cfeb488..5d081c20 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js @@ -19,6 +19,10 @@ class IbexaCustomTagFormView extends View { this.saveButtonView = this.createButton('Save', null, 'ck-button-save', 'save-custom-tag'); this.cancelButtonView = this.createButton('Cancel', null, 'ck-button-cancel', 'cancel-custom-tag'); + const attributeRenderMethods = window.ibexa.richText.CKEditor.customTags.attributeRenderMethods || {}; + const setValueMethods = window.ibexa.richText.CKEditor.customTags.setValueMethods || {}; + const getValueMethods = window.ibexa.richText.CKEditor.customTags.getValueMethods || {}; + this.attributeViews = {}; this.attributeRenderMethods = { string: this.createTextInput, @@ -26,6 +30,7 @@ class IbexaCustomTagFormView extends View { choice: this.createDropdown, boolean: this.createBoolean, link: this.createTextInput, + ...attributeRenderMethods, }; this.setValueMethods = { string: this.setStringValue, @@ -33,6 +38,16 @@ class IbexaCustomTagFormView extends View { choice: this.setChoiceValue, boolean: this.setBooleanValue, link: this.setStringValue, + ...setValueMethods, + }; + + this.getValueMethods = { + string: this.getStringValue, + number: this.getNumberValue, + choice: this.getChoiceValue, + boolean: this.getBooleanValue, + link: this.getStringValue, + ...getValueMethods, }; } @@ -77,6 +92,22 @@ class IbexaCustomTagFormView extends View { attributeView.fieldView.set('isEmpty', false); } + getNumberValue(attributeView) { + return attributeView.fieldView.element.value; + } + + getStringValue(attributeView) { + return attributeView.fieldView.element.value; + } + + getChoiceValue(attributeView) { + return attributeView.fieldView.element.value; + } + + getBooleanValue(attributeView) { + return attributeView.fieldView.element.value; + } + setChildren(childrenData, label) { this.childrenData = childrenData; this.children = this.createFormChildren(childrenData); @@ -154,7 +185,9 @@ class IbexaCustomTagFormView extends View { } const createAttribute = createAttributeMethod.bind(this); - const attributeView = createAttribute(config); + const attributeView = createAttribute(config, this.locale, name); + + attributeView.delegate('ibexa-ckeditor-update-balloon-position').to(this, 'ibexa-ckeditor-update-balloon-position'); this.attributeViews[name] = attributeView;