@ckeditor/ckeditor5-list
Version:
Ordered and unordered lists feature to CKEditor 5.
90 lines (89 loc) • 3.11 kB
JavaScript
/**
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
import { View, ButtonView } from 'ckeditor5/src/ui';
// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
import dropdownArrowIcon from '@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow.svg';
import '../../../theme/collapsible.css';
/**
* A collapsible UI component. Consists of a labeled button and a container which can be collapsed
* by clicking the button. The collapsible container can be a host to other UI views.
*
* @internal
*/
export default class CollapsibleView extends View {
/**
* Creates an instance of the collapsible view.
*
* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
* @param childViews An optional array of initial child views to be inserted into the collapsible.
*/
constructor(locale, childViews) {
super(locale);
const bind = this.bindTemplate;
this.set('isCollapsed', false);
this.set('label', '');
this.buttonView = this._createButtonView();
this.children = this.createCollection();
this.set('_collapsibleAriaLabelUid', undefined);
if (childViews) {
this.children.addMany(childViews);
}
this.setTemplate({
tag: 'div',
attributes: {
class: [
'ck',
'ck-collapsible',
bind.if('isCollapsed', 'ck-collapsible_collapsed')
]
},
children: [
this.buttonView,
{
tag: 'div',
attributes: {
class: [
'ck',
'ck-collapsible__children'
],
role: 'region',
hidden: bind.if('isCollapsed', 'hidden'),
'aria-labelledby': bind.to('_collapsibleAriaLabelUid')
},
children: this.children
}
]
});
}
/**
* @inheritDoc
*/
render() {
super.render();
this._collapsibleAriaLabelUid = this.buttonView.labelView.element.id;
}
/**
* Creates the main {@link #buttonView} of the collapsible.
*/
_createButtonView() {
const buttonView = new ButtonView(this.locale);
const bind = buttonView.bindTemplate;
buttonView.set({
withText: true,
icon: dropdownArrowIcon
});
buttonView.extendTemplate({
attributes: {
'aria-expanded': bind.to('isOn', value => String(value))
}
});
buttonView.bind('label').to(this);
buttonView.bind('isOn').to(this, 'isCollapsed', isCollapsed => !isCollapsed);
buttonView.on('execute', () => {
this.isCollapsed = !this.isCollapsed;
});
return buttonView;
}
}