www.aleph1.co.uk 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(/** @lends Drupal.quickedit.editors.plain_text# */{
   8
   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       let $textElement;
  31       const $fieldItems = this.$el.find('.quickedit-field');
  32       if ($fieldItems.length) {
  33         $textElement = this.$textElement = $fieldItems.eq(0);
  34       }
  35       else {
  36         $textElement = this.$textElement = this.$el;
  37       }
  38       editorModel.set('originalValue', $.trim(this.$textElement.text()));
  39
  40       // Sets the state to 'changed' whenever the value changes.
  41       let previousText = editorModel.get('originalValue');
  42       $textElement.on('keyup paste', (event) => {
  43         const currentText = $.trim($textElement.text());
  44         if (previousText !== currentText) {
  45           previousText = currentText;
  46           editorModel.set('currentValue', currentText);
  47           fieldModel.set('state', 'changed');
  48         }
  49       });
  50     },
  51
  52     /**
  53      * @inheritdoc
  54      *
  55      * @return {jQuery}
  56      *   The text element for the plain text editor.
  57      */
  58     getEditedElement() {
  59       return this.$textElement;
  60     },
  61
  62     /**
  63      * @inheritdoc
  64      *
  65      * @param {object} fieldModel
  66      *   The field model that holds the state.
  67      * @param {string} state
  68      *   The state to change to.
  69      * @param {object} options
  70      *   State options, if needed by the state change.
  71      */
  72     stateChange(fieldModel, state, options) {
  73       const from = fieldModel.previous('state');
  74       const to = state;
  75       switch (to) {
  76         case 'inactive':
  77           break;
  78
  79         case 'candidate':
  80           if (from !== 'inactive') {
  81             this.$textElement.removeAttr('contenteditable');
  82           }
  83           if (from === 'invalid') {
  84             this.removeValidationErrors();
  85           }
  86           break;
  87
  88         case 'highlighted':
  89           break;
  90
  91         case 'activating':
  92           // Defer updating the field model until the current state change has
  93           // propagated, to not trigger a nested state change event.
  94           _.defer(() => {
  95             fieldModel.set('state', 'active');
  96           });
  97           break;
  98
  99         case 'active':
 100           this.$textElement.attr('contenteditable', 'true');
 101           break;
 102
 103         case 'changed':
 104           break;
 105
 106         case 'saving':
 107           if (from === 'invalid') {
 108             this.removeValidationErrors();
 109           }
 110           this.save(options);
 111           break;
 112
 113         case 'saved':
 114           break;
 115
 116         case 'invalid':
 117           this.showValidationErrors();
 118           break;
 119       }
 120     },
 121
 122     /**
 123      * @inheritdoc
 124      *
 125      * @return {object}
 126      *   A settings object for the quick edit UI.
 127      */
 128     getQuickEditUISettings() {
 129       return { padding: true, unifiedToolbar: false, fullWidthToolbar: false, popup: false };
 130     },
 131
 132     /**
 133      * @inheritdoc
 134      */
 135     revert() {
 136       this.$textElement.html(this.model.get('originalValue'));
 137     },
 138
 139   });
 140 }(jQuery, _, Drupal));