Skip to content

Commit

Permalink
IBX-9297: Custom CSS can not be removed from link element (#199)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GrabowskiM
GrabowskiM authored Jan 17, 2025
1 parent ef64b0a commit 21f1dbc
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 22 deletions.
18 changes: 15 additions & 3 deletions src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
import { createLabeledInputText, createLabeledDropdown } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';

import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';

import { createLabeledInputNumber } from '../../common/input-number/utils';
import { createLabeledSwitchButton } from '../../common/switch-button/utils';

Expand Down Expand Up @@ -191,11 +193,23 @@ class IbexaCustomAttributesFormView extends View {
}

createDropdown(config) {
const Translator = getTranslator();
const labeledDropdown = new LabeledFieldView(this.locale, createLabeledDropdown);
const itemsList = new Collection();

labeledDropdown.label = config.label;

if (!config.multiple && !config.required) {
itemsList.add({
type: 'button',
model: new Model({
withText: true,
label: Translator.trans(/*@Desc("None")*/ 'dropdown.none.label', {}, 'ck_editor'),
value: null,
}),
});
}

config.choices.forEach((choice) => {
itemsList.add({
type: 'button',
Expand All @@ -219,9 +233,7 @@ class IbexaCustomAttributesFormView extends View {

labeledDropdown.fieldView.element.value = value;

if (event.source.value) {
labeledDropdown.set('isEmpty', false);
}
labeledDropdown.set('isEmpty', !event.source.value);
});

return labeledDropdown;
Expand Down
5 changes: 1 addition & 4 deletions src/bundle/Resources/public/js/CKEditor/link/link-command.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,7 @@ class IbexaLinkCommand extends Command {
writer.setAttribute('ibexaLinkHref', linkData.href, element);
writer.setAttribute('ibexaLinkTitle', linkData.title, element);
writer.setAttribute('ibexaLinkTarget', linkData.target, element);

if (!!linkData.ibexaLinkClasses) {
writer.setAttribute('ibexaLinkClasses', linkData.ibexaLinkClasses, element);
}
writer.setAttribute('ibexaLinkClasses', linkData.ibexaLinkClasses, element);

if (linkData.ibexaLinkAttributes) {
Object.entries(linkData.ibexaLinkAttributes).forEach(([name, value]) => {
Expand Down
21 changes: 19 additions & 2 deletions src/bundle/Resources/public/js/CKEditor/link/link-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,24 @@ class IbexaLinkUI extends Plugin {
}

removeAttributes(writer, element) {
const { link: customAttributesLinkConfig } = getCustomAttributesConfig();
const { link: customClassesLinkConfig } = getCustomClassesConfig();

writer.removeAttribute('ibexaLinkHref', element);
writer.removeAttribute('ibexaLinkTitle', element);
writer.removeAttribute('ibexaLinkTarget', element);

if (customClassesLinkConfig) {
writer.removeAttribute('ibexaLinkClasses', element);
}

if (customAttributesLinkConfig) {
const attributes = Object.keys(customAttributesLinkConfig);

attributes.forEach((attribute) => {
writer.removeAttribute(`ibexaLink${attribute}`, element);
});
}
}

removeLink() {
Expand Down Expand Up @@ -109,15 +124,17 @@ class IbexaLinkUI extends Plugin {
};

if (customClassesLinkConfig) {
const defaultCustomClasses = customClassesLinkConfig?.defaultValue ?? '';
const defaultCustomClasses = this.isNew ? customClassesLinkConfig.defaultValue : '';
const classesValue = link?.getAttribute('class') ?? defaultCustomClasses;

values.ibexaLinkClasses = classesValue;
}

if (customAttributesLinkConfig) {
const attributesValues = Object.entries(customAttributesLinkConfig).reduce((output, [name, config]) => {
output[name] = link?.getAttribute(`data-ezattribute-${name}`) ?? config.defaultValue;
const defaultCustomAttributeValue = this.isNew ? config.defaultValue : '';

output[name] = link?.getAttribute(`data-ezattribute-${name}`) ?? defaultCustomAttributeValue;

return output;
}, {});
Expand Down
70 changes: 59 additions & 11 deletions src/bundle/Resources/public/js/CKEditor/link/ui/link-form-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
import { createLabeledInputText, createLabeledDropdown } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';

import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';

import { createLabeledSwitchButton } from '../../common/switch-button/utils';
import { createLabeledInputNumber } from '../../common/input-number/utils';
import { getCustomAttributesConfig, getCustomClassesConfig } from '../../custom-attributes/helpers/config-helper';
Expand All @@ -19,6 +21,7 @@ class IbexaLinkFormView extends View {

this.saveButtonView = this.createButton('Save', null, 'ck-button-save', 'save-link');
this.cancelButtonView = this.createButton('Remove link', null, 'ck-button-cancel', 'remove-link');
this.removeCustomAttributesButtonView = this.createButton('Remove attributes', null, 'ck-button-cancel');
this.selectContentButtonView = this.createButton('Select content', null, 'ibexa-btn--select-content');
this.urlInputView = this.createTextInput({ label: 'Link to' });
this.titleView = this.createTextInput({ label: 'Title' });
Expand All @@ -42,6 +45,7 @@ class IbexaLinkFormView extends View {
const customAttributesLinkConfig = customAttributesConfig.link;
const customClassesLinkConfig = customClassesConfig.link;
const customAttributesDefinitions = [];
const actionBtns = [this.saveButtonView, this.cancelButtonView];

this.children = this.createFormChildren();
this.attributesChildren = this.createFromAttributesChildren(customAttributesLinkConfig, customClassesLinkConfig);
Expand All @@ -63,6 +67,8 @@ class IbexaLinkFormView extends View {

children: this.attributesChildren,
});

actionBtns.push(this.removeCustomAttributesButtonView);
}

this.setTemplate({
Expand Down Expand Up @@ -107,7 +113,7 @@ class IbexaLinkFormView extends View {
attributes: {
class: 'ibexa-ckeditor-balloon-form__actions',
},
children: [this.saveButtonView, this.cancelButtonView],
children: actionBtns,
},
],
},
Expand All @@ -130,7 +136,7 @@ class IbexaLinkFormView extends View {
this.targetSwitcherView.fieldView.isOn = !!target;
this.targetSwitcherView.fieldView.set('isEmpty', false);

if (ibexaLinkClasses) {
if (ibexaLinkClasses !== undefined) {
this.setChoiceValue(this.classesView, ibexaLinkClasses);
}

Expand Down Expand Up @@ -222,7 +228,7 @@ class IbexaLinkFormView extends View {
const children = this.createCollection();

if (customClasses && Object.keys(customClasses).length !== 0) {
const classesView = this.createDropdown(customClasses);
const classesView = this.createDropdown(customClasses, true);

this.classesView = classesView;
this.customClasses = customClasses;
Expand All @@ -239,7 +245,7 @@ class IbexaLinkFormView extends View {
}

const createAttribute = createAttributeMethod.bind(this);
const attributeView = createAttribute(config);
const attributeView = createAttribute(config, true);

this.attributeViews[`ibexaLink${name}`] = attributeView;

Expand All @@ -263,12 +269,24 @@ class IbexaLinkFormView extends View {
return children;
}

createDropdown(config) {
createDropdown(config, isCustomAttribute = false) {
const Translator = getTranslator();
const labeledDropdown = new LabeledFieldView(this.locale, createLabeledDropdown);
const itemsList = new Collection();

labeledDropdown.label = config.label;

if (!config.multiple && !config.required) {
itemsList.add({
type: 'button',
model: new Model({
withText: true,
label: Translator.trans(/*@Desc("None")*/ 'dropdown.none.label', {}, 'ck_editor'),
value: '',
}),
});
}

config.choices.forEach((choice) => {
itemsList.add({
type: 'button',
Expand All @@ -292,11 +310,17 @@ class IbexaLinkFormView extends View {

labeledDropdown.fieldView.element.value = value;

if (event.source.value) {
labeledDropdown.set('isEmpty', false);
}
labeledDropdown.set('isEmpty', !event.source.value);
});

if (isCustomAttribute) {
this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => {
labeledDropdown.fieldView.element.value = '';

labeledDropdown.set('isEmpty', true);
});
}

return labeledDropdown;
}

Expand All @@ -318,23 +342,39 @@ class IbexaLinkFormView extends View {
return [...selectedItems].join(' ');
}

createTextInput({ label }) {
createTextInput({ label }, isCustomAttribute = false) {
const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);

labeledInput.label = label;

if (isCustomAttribute) {
this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => {
labeledInput.fieldView.reset();
labeledInput.set('value', null);
labeledInput.set('isEmpty', true);
});
}

return labeledInput;
}

createNumberInput(config) {
createNumberInput(config, isCustomAttribute = false) {
const labeledInput = new LabeledFieldView(this.locale, createLabeledInputNumber);

labeledInput.label = config.label;

if (isCustomAttribute) {
this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => {
labeledInput.fieldView.reset();
labeledInput.set('value', null);
labeledInput.set('isEmpty', true);
});
}

return labeledInput;
}

createBoolean({ label }) {
createBoolean({ label }, isCustomAttribute = false) {
const labeledSwitch = new LabeledFieldView(this.locale, createLabeledSwitchButton);

this.listenTo(labeledSwitch.fieldView, 'execute', () => {
Expand All @@ -348,6 +388,14 @@ class IbexaLinkFormView extends View {
labeledSwitch.label = label;
labeledSwitch.fieldView.set('isEmpty', false);

if (isCustomAttribute) {
this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => {
labeledSwitch.fieldView.element.value = false;
labeledSwitch.fieldView.set('value', false);
labeledSwitch.fieldView.isOn = false;
});
}

return labeledSwitch;
}

Expand Down
9 changes: 7 additions & 2 deletions src/bundle/Resources/public/scss/_balloon-form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,17 @@

.ck-input-text {
border-radius: calculateRem(5px);
width: 100%;
}

.ck.ck-dropdown {
border: calculateRem(1px) solid $ibexa-color-dark-200;
border-radius: calculateRem(5px);
width: 100%;

.ck-button.ck-dropdown__button {
.ck-button__label {
width: calculateRem(198px);
width: 100%;
display: inline-block;
}
}
Expand Down Expand Up @@ -69,14 +71,17 @@
.ck.ck-button {
cursor: pointer;

& + .ck-button {
margin-left: calculateRem(8px);
}

&.ck-button-save {
color: $ibexa-color-white;
fill: $ibexa-color-white;
background-image: $ibexa-gradient-danger-primary;
border-width: 0;
padding: calculateRem(0px) calculateRem(16px);
border-radius: $ibexa-border-radius;
margin-right: calculateRem(8px);

&:hover {
color: $ibexa-color-white;
Expand Down
5 changes: 5 additions & 0 deletions src/bundle/Resources/translations/ck_editor.en.xliff
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,11 @@
<target state="new">Custom tag toolbar</target>
<note>key: custom_tag.toolbar.label</note>
</trans-unit>
<trans-unit id="544c548dcc8ae0e549e5e027fc48a7b072bc8872" resname="dropdown.none.label">
<source>None</source>
<target state="new">None</target>
<note>key: dropdown.none.label</note>
</trans-unit>
<trans-unit id="3b257be2c6dd1f7bf0d5c70e64c22bf5b298dbbf" resname="elements_path.list.label">
<source>list</source>
<target state="new">list</target>
Expand Down

0 comments on commit 21f1dbc

Please sign in to comment.