www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/quickedit/js/editors/plainTextEditor.js

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