123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- /**
- * @file
- * ContentEditable-based in-place editor for plain text content.
- */
- (function($, _, Drupal) {
- Drupal.quickedit.editors.plain_text = Drupal.quickedit.EditorView.extend(
- /** @lends Drupal.quickedit.editors.plain_text# */ {
- /**
- * Stores the textual DOM element that is being in-place edited.
- */
- $textElement: null,
- /**
- * @constructs
- *
- * @augments Drupal.quickedit.EditorView
- *
- * @param {object} options
- * Options for the plain text editor.
- */
- initialize(options) {
- Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
- const editorModel = this.model;
- const fieldModel = this.fieldModel;
- // Store the original value of this field. Necessary for reverting
- // changes.
- const $fieldItems = this.$el.find('.quickedit-field');
- const $textElement = $fieldItems.length ? $fieldItems.eq(0) : this.$el;
- this.$textElement = $textElement;
- editorModel.set('originalValue', $.trim(this.$textElement.text()));
- // Sets the state to 'changed' whenever the value changes.
- let previousText = editorModel.get('originalValue');
- $textElement.on('keyup paste', event => {
- const currentText = $.trim($textElement.text());
- if (previousText !== currentText) {
- previousText = currentText;
- editorModel.set('currentValue', currentText);
- fieldModel.set('state', 'changed');
- }
- });
- },
- /**
- * {@inheritdoc}
- *
- * @return {jQuery}
- * The text element for the plain text editor.
- */
- getEditedElement() {
- return this.$textElement;
- },
- /**
- * {@inheritdoc}
- *
- * @param {object} fieldModel
- * The field model that holds the state.
- * @param {string} state
- * The state to change to.
- * @param {object} options
- * State options, if needed by the state change.
- */
- stateChange(fieldModel, state, options) {
- const from = fieldModel.previous('state');
- const to = state;
- switch (to) {
- case 'inactive':
- break;
- case 'candidate':
- if (from !== 'inactive') {
- this.$textElement.removeAttr('contenteditable');
- }
- if (from === 'invalid') {
- this.removeValidationErrors();
- }
- break;
- case 'highlighted':
- break;
- case 'activating':
- // Defer updating the field model until the current state change has
- // propagated, to not trigger a nested state change event.
- _.defer(() => {
- fieldModel.set('state', 'active');
- });
- break;
- case 'active':
- this.$textElement.attr('contenteditable', 'true');
- break;
- case 'changed':
- break;
- case 'saving':
- if (from === 'invalid') {
- this.removeValidationErrors();
- }
- this.save(options);
- break;
- case 'saved':
- break;
- case 'invalid':
- this.showValidationErrors();
- break;
- }
- },
- /**
- * {@inheritdoc}
- *
- * @return {object}
- * A settings object for the quick edit UI.
- */
- getQuickEditUISettings() {
- return {
- padding: true,
- unifiedToolbar: false,
- fullWidthToolbar: false,
- popup: false,
- };
- },
- /**
- * {@inheritdoc}
- */
- revert() {
- this.$textElement.html(this.model.get('originalValue'));
- },
- },
- );
- })(jQuery, _, Drupal);
|