|
|
@@ -9,35 +9,68 @@
|
|
|
|
|
|
import View from '@ckeditor/ckeditor5-ui/src/view';
|
|
|
|
|
|
+/**
|
|
|
+ * This class wraps DOM element as a CKEditor5 UI View.
|
|
|
+ *
|
|
|
+ * It allows to render any DOM element and use it in mentions list.
|
|
|
+ */
|
|
|
export default class DomWrapperView extends View {
|
|
|
- constructor( locale, domNode ) {
|
|
|
+ /**
|
|
|
+ * Creates an instance of {@link module:mention/ui/domwrapperview~DomWrapperView} class.
|
|
|
+ *
|
|
|
+ * Also see {@link #render}.
|
|
|
+ *
|
|
|
+ * @param {module:utils/locale~Locale} [locale] The localization services instance.
|
|
|
+ * @param {Element} domElement
|
|
|
+ */
|
|
|
+ constructor( locale, domElement ) {
|
|
|
super( locale );
|
|
|
|
|
|
+ // Disable template rendering on this view.
|
|
|
this.template = false;
|
|
|
- this.domNode = domNode;
|
|
|
|
|
|
- this.domNode.classList.add( 'ck-button' );
|
|
|
+ /**
|
|
|
+ * The DOM element for which wrapper was created.
|
|
|
+ *
|
|
|
+ * @type {Element}
|
|
|
+ */
|
|
|
+ this.domElement = domElement;
|
|
|
+
|
|
|
+ // Render dom wrapper as a button.
|
|
|
+ this.domElement.classList.add( 'ck-button' );
|
|
|
|
|
|
+ /**
|
|
|
+ * Controls whether the dom wrapper view is "on". This is in line with {@link module:ui/button/button~Button#isOn} property.
|
|
|
+ *
|
|
|
+ * @observable
|
|
|
+ * @default true
|
|
|
+ * @member {Boolean} #isOn
|
|
|
+ */
|
|
|
this.set( 'isOn', false );
|
|
|
|
|
|
+ // Handle isOn state as in buttons.
|
|
|
this.on( 'change:isOn', ( evt, name, isOn ) => {
|
|
|
if ( isOn ) {
|
|
|
- this.domNode.classList.add( 'ck-on' );
|
|
|
- this.domNode.classList.remove( 'ck-off' );
|
|
|
+ this.domElement.classList.add( 'ck-on' );
|
|
|
+ this.domElement.classList.remove( 'ck-off' );
|
|
|
} else {
|
|
|
- this.domNode.classList.add( 'ck-off' );
|
|
|
- this.domNode.classList.remove( 'ck-on' );
|
|
|
+ this.domElement.classList.add( 'ck-off' );
|
|
|
+ this.domElement.classList.remove( 'ck-on' );
|
|
|
}
|
|
|
} );
|
|
|
|
|
|
- this.listenTo( this.domNode, 'click', () => {
|
|
|
+ // Pass click event as execute event.
|
|
|
+ this.listenTo( this.domElement, 'click', () => {
|
|
|
this.fire( 'execute' );
|
|
|
} );
|
|
|
}
|
|
|
|
|
|
+ /**
|
|
|
+ * @inheritDoc
|
|
|
+ */
|
|
|
render() {
|
|
|
super.render();
|
|
|
|
|
|
- this.element = this.domNode;
|
|
|
+ this.element = this.domElement;
|
|
|
}
|
|
|
}
|