Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IBX-9297: Custom CSS can not be removed from link element #199

Merged
merged 4 commits into from
Jan 17, 2025
Merged

IBX-9297: Custom CSS can not be removed from link element #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cb08a8c
IBX-9297: Custom CSS can not be removed from link element
GrabowskiM Dec 11, 2024
2bc4c12
fixed styles
GrabowskiM Dec 12, 2024
a1f2b9b
fixes to removing all values
GrabowskiM Jan 7, 2025
613ff3c
fixes to clearing link
GrabowskiM Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading