yaffs.net Git - yaffs-website/blob - web/core/modules/quickedit/js/editors/plainTextEditor.es6.js

   1 /**
   2  * @file
   3  * ContentEditable-based in-place editor for plain text content.
   4  */
   5
   6 (function($, _, Drupal) {
   7   Drupal.quickedit.editors.plain_text = Drupal.quickedit.EditorView.extend(
   8     /** @lends Drupal.quickedit.editors.plain_text# */ {
   9       /**
  10        * Stores the textual DOM element that is being in-place edited.
  11        */
  12       $textElement: null,
  13
  14       /**
  15        * @constructs
  16        *
  17        * @augments Drupal.quickedit.EditorView
  18        *
  19        * @param {object} options
  20        *   Options for the plain text editor.
  21        */
  22       initialize(options) {
  23         Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
  24
  25         const editorModel = this.model;
  26         const fieldModel = this.fieldModel;
  27
  28         // Store the original value of this field. Necessary for reverting
  29         // changes.
  30         const $fieldItems = this.$el.find('.quickedit-field');
  31         const $textElement = $fieldItems.length ? $fieldItems.eq(0) : this.$el;
  32         this.$textElement = $textElement;
  33         editorModel.set('originalValue', $.trim(this.$textElement.text()));
  34
  35         // Sets the state to 'changed' whenever the value changes.
  36         let previousText = editorModel.get('originalValue');
  37         $textElement.on('keyup paste', event => {
  38           const currentText = $.trim($textElement.text());
  39           if (previousText !== currentText) {
  40             previousText = currentText;
  41             editorModel.set('currentValue', currentText);
  42             fieldModel.set('state', 'changed');
  43           }
  44         });
  45       },
  46
  47       /**
  48        * @inheritdoc
  49        *
  50        * @return {jQuery}
  51        *   The text element for the plain text editor.
  52        */
  53       getEditedElement() {
  54         return this.$textElement;
  55       },
  56
  57       /**
  58        * @inheritdoc
  59        *
  60        * @param {object} fieldModel
  61        *   The field model that holds the state.
  62        * @param {string} state
  63        *   The state to change to.
  64        * @param {object} options
  65        *   State options, if needed by the state change.
  66        */
  67       stateChange(fieldModel, state, options) {
  68         const from = fieldModel.previous('state');
  69         const to = state;
  70         switch (to) {
  71           case 'inactive':
  72             break;
  73
  74           case 'candidate':
  75             if (from !== 'inactive') {
  76               this.$textElement.removeAttr('contenteditable');
  77             }
  78             if (from === 'invalid') {
  79               this.removeValidationErrors();
  80             }
  81             break;
  82
  83           case 'highlighted':
  84             break;
  85
  86           case 'activating':
  87             // Defer updating the field model until the current state change has
  88             // propagated, to not trigger a nested state change event.
  89             _.defer(() => {
  90               fieldModel.set('state', 'active');
  91             });
  92             break;
  93
  94           case 'active':
  95             this.$textElement.attr('contenteditable', 'true');
  96             break;
  97
  98           case 'changed':
  99             break;
 100
 101           case 'saving':
 102             if (from === 'invalid') {
 103               this.removeValidationErrors();
 104             }
 105             this.save(options);
 106             break;
 107
 108           case 'saved':
 109             break;
 110
 111           case 'invalid':
 112             this.showValidationErrors();
 113             break;
 114         }
 115       },
 116
 117       /**
 118        * @inheritdoc
 119        *
 120        * @return {object}
 121        *   A settings object for the quick edit UI.
 122        */
 123       getQuickEditUISettings() {
 124         return {
 125           padding: true,
 126           unifiedToolbar: false,
 127           fullWidthToolbar: false,
 128           popup: false,
 129         };
 130       },
 131
 132       /**
 133        * @inheritdoc
 134        */
 135       revert() {
 136         this.$textElement.html(this.model.get('originalValue'));
 137       },
 138     },
 139   );
 140 })(jQuery, _, Drupal);