';
return html;
};
/**
+ * Theme function for a toolbar container of the Edit module.
+ *
+ * @param settings
+ * An object with the following keys:
+ * - id: the id to apply to the toolbar container.
+ * @return
+ * The corresponding HTML.
+ */
+Drupal.theme.editFieldToolbar = function (settings) {
+ return '
';
+};
+
+/**
* Theme function for a toolbar toolgroup of the Edit module.
*
* @param Object settings
@@ -68,9 +82,11 @@ Drupal.theme.editToolbarContainer = function (settings) {
* The corresponding HTML.
*/
Drupal.theme.editToolgroup = function (settings) {
- var classes = 'edit-toolgroup edit-animate-slow edit-animate-invisible edit-animate-delay-veryfast';
+ // Classes.
+ var classes = (settings.classes || []);
+ classes.unshift('edit-toolgroup');
var html = '';
- html += '
';
+ html += button.label;
html += '';
}
return html;
diff --git a/core/modules/edit/js/util.js b/core/modules/edit/js/util.js
index ad7136ec..9d63b97 100644
--- a/core/modules/edit/js/util.js
+++ b/core/modules/edit/js/util.js
@@ -46,6 +46,8 @@ Drupal.edit.util.form = {
* field for which this form will be loaded.
* - Boolean nocssjs: (required) boolean indicating whether no CSS and JS
* should be returned (necessary when the form is invisible to the user).
+ * - Boolean reset: (required) boolean indicating whether the data stored
+ * for this field's entity in TempStore should be used or reset.
* @param Function callback
* A callback function that will receive the form to be inserted, as well as
* the ajax object, necessary if the callback wants to perform other AJAX
@@ -56,18 +58,23 @@ Drupal.edit.util.form = {
var fieldID = options.fieldID;
// Create a Drupal.ajax instance to load the form.
- Drupal.ajax[fieldID] = new Drupal.ajax(fieldID, $el, {
+ var formLoaderAjax = new Drupal.ajax(fieldID, $el, {
url: Drupal.edit.util.buildUrl(fieldID, drupalSettings.edit.fieldFormURL),
event: 'edit-internal.edit',
- submit: { nocssjs : options.nocssjs },
+ submit: {
+ nocssjs : options.nocssjs,
+ reset : options.reset
+ },
progress: { type : null } // No progress indicator.
});
// Implement a scoped editFieldForm AJAX command: calls the callback.
- Drupal.ajax[fieldID].commands.editFieldForm = function (ajax, response, status) {
+ formLoaderAjax.commands = {
+ settings: Drupal.ajax.prototype.commands.settings,
+ insert: Drupal.ajax.prototype.commands.insert,
+ add_css: Drupal.ajax.prototype.commands.add_css
+ };
+ formLoaderAjax.commands.editFieldForm = function (ajax, response, status) {
callback(response.data, ajax);
- // Delete the Drupal.ajax instance that called this very function.
- delete Drupal.ajax[fieldID];
- $el.off('edit-internal.edit');
};
// This will ensure our scoped editFieldForm AJAX command gets called.
$el.trigger('edit-internal.edit');
@@ -80,8 +87,8 @@ Drupal.edit.util.form = {
* An object with the following keys:
* - nocssjs: (required) boolean indicating whether no CSS and JS should be
* returned (necessary when the form is invisible to the user).
- * @return String
- * The key of the Drupal.ajax instance.
+ * @return Drupal.ajax
+ * A Drupal.ajax instance.
*/
ajaxifySaving: function (options, $submit) {
// Re-wire the form to handle submit.
@@ -94,10 +101,10 @@ Drupal.edit.util.form = {
};
var base = $submit.attr('id');
- Drupal.ajax[base] = new Drupal.ajax(base, $submit[0], element_settings);
+ var formSaveAjax = new Drupal.ajax(base, $submit[0], element_settings);
// Reimplement the success handler to ensure Drupal.attachBehaviors() does
// not get called on the form.
- Drupal.ajax[base].success = function (response, status) {
+ formSaveAjax.success = function (response, status) {
for (var i in response) {
if (response.hasOwnProperty(i) && response[i].command && this.commands[response[i].command]) {
this.commands[response[i].command](this, response[i], status);
@@ -105,18 +112,7 @@ Drupal.edit.util.form = {
}
};
- return base;
- },
-
- /**
- * Cleans up the Drupal.ajax instance that is used to save the form.
- *
- * @param jQuery $submit
- * The jQuery-wrapped submit DOM element that should be unajaxified.
- */
- unajaxifySaving: function ($submit) {
- delete Drupal.ajax[$submit.attr('id')];
- $submit.off('click.edit');
+ return formSaveAjax;
}
};
diff --git a/core/modules/edit/js/views/AppView.js b/core/modules/edit/js/views/AppView.js
index 6302356..4ae153b 100644
--- a/core/modules/edit/js/views/AppView.js
+++ b/core/modules/edit/js/views/AppView.js
@@ -1,4 +1,4 @@
-(function ($, _, Backbone, Drupal) {
+(function ($, _, Backbone, Drupal, drupalSettings) {
"use strict";
@@ -7,10 +7,6 @@
*/
Drupal.edit.AppView = Backbone.View.extend({
- // Configuration for state handling.
- activeEditorStates: [],
- singleEditorStates: [],
-
/**
* {@inheritdoc}
*
@@ -25,10 +21,12 @@ Drupal.edit.AppView = Backbone.View.extend({
// @see Drupal.edit.FieldModel.states
this.activeEditorStates = ['activating', 'active'];
this.singleEditorStates = ['highlighted', 'activating', 'active'];
+ this.changedEditorStates = ['changed', 'saving', 'saved', 'invalid'];
+ this.fieldReadyStates = ['candidate', 'highlighted'];
options.entitiesCollection
// Track app state.
- .on('change:isActive', this.appStateChange, this)
+ .on('change:state', this.appStateChange, this)
.on('change:isActive', this.enforceSingleActiveEntity, this);
options.fieldsCollection
@@ -47,30 +45,45 @@ Drupal.edit.AppView = Backbone.View.extend({
*
* @param Drupal.edit.EntityModel entityModel
* An instance of the EntityModel class.
- * @param Boolean isActive
- * A boolean that represents the changed active state of the entityModel.
+ * @param String state
+ * The state of the associated field. One of Drupal.edit.EntityModel.states.
*/
- appStateChange: function (entityModel, isActive) {
+ appStateChange: function (entityModel, state) {
var app = this;
- if (isActive) {
- // Move all fields of this entity from the 'inactive' state to the
- // 'candidate' state.
- entityModel.get('fields').each(function (fieldModel) {
- // First, set up editors; they must be notified of state changes.
- app.setupEditor(fieldModel);
- // Second, change the field's state.
- fieldModel.set('state', 'candidate');
- });
- }
- else {
- // Move all fields of this entity from whatever state they are in to
- // the 'inactive' state.
- entityModel.get('fields').each(function (fieldModel) {
- // First, change the field's state.
- fieldModel.set('state', 'inactive', { reason: 'stop' });
- // Second, tear down editors.
- app.teardownEditor(fieldModel);
- });
+ var entityToolbarView;
+ switch (state) {
+ case 'launching':
+ // First, create an entity toolbar view.
+ entityToolbarView = new Drupal.edit.EntityToolbarView({
+ model: entityModel,
+ appModel: this.model
+ });
+ entityModel.toolbarView = entityToolbarView;
+ // Second, set up in-place editors.
+ // They must be notified of state changes, hence this must happen while
+ // the associated fields are still in the 'inactive' state.
+ entityModel.get('fields').each(function (fieldModel) {
+ app.setupEditor(fieldModel);
+ });
+ // Third, transition the entity to the 'opening' state, which will
+ // transition all fields from 'inactive' to 'candidate'.
+ _.defer(function () {
+ entityModel.set('state', 'opening');
+ });
+ break;
+ case 'closed':
+ entityToolbarView = entityModel.toolbarView;
+ // First, tear down the entity toolbar view.
+ // @todo @jesse Why shouldn't this happen last?
+ if (entityToolbarView) {
+ entityToolbarView.remove();
+ delete entityModel.toolbarView;
+ }
+ // Second, tear down the in-place editors.
+ entityModel.get('fields').each(function (fieldModel) {
+ app.teardownEditor(fieldModel);
+ });
+ break;
}
},
@@ -85,10 +98,10 @@ Drupal.edit.AppView = Backbone.View.extend({
* The new state.
* @param null|Object context
* The context that is trying to trigger the state change.
- * @param Function callback
- * The callback function that should receive the state acceptance result.
+ * @param Drupal.edit.FieldModel fieldModel
+ * The fieldModel to which this change applies.
*/
- acceptEditorStateChange: function (from, to, context, callback) {
+ acceptEditorStateChange: function (from, to, context, fieldModel) {
var accept = true;
// If the app is in view mode, then reject all state changes except for
@@ -106,39 +119,79 @@ Drupal.edit.AppView = Backbone.View.extend({
if (!Drupal.edit.FieldModel.followsStateSequence(from, to)) {
accept = false;
// Allow: activating/active -> candidate.
- // Necessary to stop editing a property.
+ // Necessary to stop editing a field.
if (_.indexOf(this.activeEditorStates, from) !== -1 && to === 'candidate') {
accept = true;
}
// Allow: changed/invalid -> candidate.
- // Necessary to stop editing a property when it is changed or invalid.
+ // Necessary to stop editing a field when it is changed or invalid.
else if ((from === 'changed' || from === 'invalid') && to === 'candidate') {
accept = true;
}
// Allow: highlighted -> candidate.
- // Necessary to stop highlighting a property.
+ // Necessary to stop highlighting a field.
else if (from === 'highlighted' && to === 'candidate') {
accept = true;
}
// Allow: saved -> candidate.
- // Necessary when successfully saved a property.
+ // Necessary when successfully saved a field.
else if (from === 'saved' && to === 'candidate') {
accept = true;
}
// Allow: invalid -> saving.
- // Necessary to be able to save a corrected, invalid property.
+ // Necessary to be able to save a corrected, invalid field.
else if (from === 'invalid' && to === 'saving') {
accept = true;
}
+ // Allow: invalid -> activating.
+ // Necessary to be able to correct a field that turned out to be invalid
+ // after the user already had moved on to the next field (which we
+ // explicitly allow to have a fluent UX).
+ else if (from === 'invalid' && to === 'activating') {
+ accept = true;
+ }
}
// If it's not against the general principle, then here are more
// disallowed cases to check.
if (accept) {
- // Ensure only one editor (field) at a time may be higlighted or active.
- if (from === 'candidate' && _.indexOf(this.singleEditorStates, to) !== -1) {
- if (this.model.get('highlightedEditor') || this.model.get('activeEditor')) {
- accept = false;
+ var activeEditor, activeEditorState;
+ // Ensure only one editor (field) at a time is active … but allow a user
+ // to hop from one field to the next, even if we still have to start
+ // saving the field that is currently active: assume it will be valid,
+ // to allow for a fluent UX. (If it turns out to be invalid, this block
+ // of code also handles that.)
+ if ((this.fieldReadyStates.indexOf(from) !== -1 || from === 'invalid') && this.activeEditorStates.indexOf(to) !== -1) {
+ activeEditor = this.model.get('activeEditor');
+ if (activeEditor && activeEditor !== fieldModel) {
+ activeEditorState = activeEditor.get('state');
+ // Allow the state change. If the state of the active editor is:
+ // - 'activating' or 'active': change it to 'candidate'
+ // - 'changed' or 'invalid': change it to 'saving'
+ // - 'saving'or 'saved': don't do anything.
+ if (this.activeEditorStates.indexOf(activeEditorState) !== -1) {
+ activeEditor.set('state', 'candidate');
+ }
+ else if (activeEditorState === 'changed' || activeEditorState === 'invalid') {
+ activeEditor.set('state', 'saving');
+ }
+
+ // If the field that's being activated is in fact already in the
+ // invalid state (which can only happen because above we allowed the
+ // user to move on to another field to allow for a fluent UX; we
+ // assumed it would be saved successfully), then we shouldn't allow
+ // the field to enter the 'activating' state, instead, we simply
+ // change the active editor. All guarantees and assumptions for this
+ // field still hold!
+ if (from === 'invalid') {
+ this.model.set('activeEditor', fieldModel);
+ accept = false;
+ }
+ else {
+ // Do not reject: the field is either in the 'candidate' or
+ // 'highlighted' state and we allow it to enter the 'activating'
+ // state!
+ }
}
}
// Reject going from activating/active to candidate because of a
@@ -165,7 +218,7 @@ Drupal.edit.AppView = Backbone.View.extend({
// that will ask the user to confirm his choice.
accept = false;
// The callback will be called from the helper function.
- this._confirmStopEditing(callback);
+ this._confirmStopEditing();
}
}
}
@@ -184,6 +237,11 @@ Drupal.edit.AppView = Backbone.View.extend({
* The field for which an in-place editor must be set up.
*/
setupEditor: function (fieldModel) {
+ // Get the corresponding entity toolbar.
+ var entityModel = fieldModel.get('entity');
+ var entityToolbarView = entityModel.toolbarView;
+ // Get the field toolbar DOM root from the entity toolbar.
+ var fieldToolbarRoot = entityToolbarView.getToolbarRoot();
// Create in-place editor.
var editorName = fieldModel.get('metadata').editor;
var editorModel = new Drupal.edit.EditorModel();
@@ -196,9 +254,14 @@ Drupal.edit.AppView = Backbone.View.extend({
// Create in-place editor's toolbar — positions appropriately above the
// edited element.
var toolbarView = new Drupal.edit.FieldToolbarView({
+ el: fieldToolbarRoot,
model: fieldModel,
$editedElement: $(editorView.getEditedElement()),
- editorView: editorView
+ // @todo editorView is needed for the getEditUISetting method. Maybe we
+ // can factor out this dependency and put it in the metadata of the
+ // Drupal.edit.Metadata object for this field.
+ editorView: editorView,
+ entityModel: entityModel
});
// Create decoration for edited element: padding if necessary, sets classes
@@ -206,8 +269,7 @@ Drupal.edit.AppView = Backbone.View.extend({
var decorationView = new Drupal.edit.EditorDecorationView({
el: $(editorView.getEditedElement()),
model: fieldModel,
- editorView: editorView,
- toolbarId: toolbarView.getId()
+ editorView: editorView
});
// Track these three views in FieldModel so that we can tear them down
@@ -252,6 +314,7 @@ Drupal.edit.AppView = Backbone.View.extend({
* @see acceptEditorStateChange()
*/
_confirmStopEditing: function () {
+ var activeEntity = Drupal.edit.collections.entities.where({ isActive: true })[0];
// Only instantiate if there isn't a modal instance visible yet.
if (!this.model.get('activeModal')) {
var that = this;
@@ -259,15 +322,31 @@ Drupal.edit.AppView = Backbone.View.extend({
model: this.model,
message: Drupal.t('You have unsaved changes'),
buttons: [
- { action: 'discard', classes: 'gray-button', label: Drupal.t('Discard changes') },
- { action: 'save', type: 'submit', classes: 'blue-button', label: Drupal.t('Save') }
+ {
+ action: 'save',
+ type: 'submit',
+ classes: 'action-save edit-button',
+ label: Drupal.t('Save')
+ },
+ {
+ action: 'discard',
+ classes: 'action-cancel edit-button',
+ label: Drupal.t('Discard changes')
+ }
],
callback: function (action) {
// The active modal has been removed.
that.model.set('activeModal', null);
- // Set the state that matches the user's action.
- var targetState = (action === 'discard') ? 'candidate' : 'saving';
- that.model.get('activeEditor').set('state', targetState, { confirmed: true });
+ // If the targetState is saving, the field must be saved, then the
+ // entity must be saved.
+ if (action === 'save') {
+ activeEntity.set('state', 'committing');
+ }
+ else {
+ activeEntity.get('fields').each(function (fieldModel) {
+ fieldModel.set('state', 'candidate', { confirmed : true });
+ });
+ }
}
});
this.model.set('activeModal', modal);
@@ -310,6 +389,36 @@ Drupal.edit.AppView = Backbone.View.extend({
},
/**
+ *
+ */
+ enableEditor: function (fieldModel) {
+ // check if there's an active editor.
+ var activeEditor = this.model.get('activeEditor');
+
+ // Do nothing if the fieldModel is already the active editor.
+ if (fieldModel === activeEditor) {
+ return;
+ }
+ if (activeEditor) {
+ // If there is, check if the model is changed.
+ if (activeEditor.get('state') === 'changed') {
+ // Attempt to save the field.
+ activeEditor.set('state', 'saving');
+ }
+ // else, set it to a candidate.
+ else {
+ activeEditor.set('state', 'candidate');
+ // Set the new fieldModel to activating.
+ fieldModel.set('state', 'activating');
+ }
+ }
+ else {
+ // Set the new fieldModel to activating.
+ fieldModel.set('state', 'activating');
+ }
+ },
+
+ /**
* Render an updated field (a field whose 'html' attribute changed).
*
* @param Drupal.edit.FieldModel fieldModel
@@ -351,7 +460,7 @@ Drupal.edit.AppView = Backbone.View.extend({
* A field that was just added to the collection of fields.
*/
rerenderedFieldToCandidate: function (fieldModel) {
- var activeEntity = Drupal.edit.collections.entities.where({ isActive: true })[0];
+ var activeEntity = Drupal.edit.collections.entities.where({isActive: true})[0];
// Early-return if there is no active entity.
if (activeEntity === null) {
@@ -389,4 +498,4 @@ Drupal.edit.AppView = Backbone.View.extend({
}
});
-}(jQuery, _, Backbone, Drupal));
+}(jQuery, _, Backbone, Drupal, drupalSettings));
diff --git a/core/modules/edit/js/views/ContextualLinkView.js b/core/modules/edit/js/views/ContextualLinkView.js
index 4b4d075..61199e2 100644
--- a/core/modules/edit/js/views/ContextualLinkView.js
+++ b/core/modules/edit/js/views/ContextualLinkView.js
@@ -17,7 +17,7 @@ Drupal.edit.ContextualLinkView = Backbone.View.extend({
return {
'click a': function (event) {
event.preventDefault();
- this.model.set('isActive', !this.model.get('isActive'));
+ this.model.set('state', 'launching');
},
'touchEnd a': touchEndToClick
};
@@ -33,36 +33,22 @@ Drupal.edit.ContextualLinkView = Backbone.View.extend({
* - strings: the strings for the "Quick edit" link
*/
initialize: function (options) {
+ // Insert the text of the quick edit toggle.
+ this.$el.find('a').text(this.options.strings.quickEdit);
// Initial render.
this.render();
-
// Re-render whenever this entity's isActive attribute changes.
this.model.on('change:isActive', this.render, this);
-
- // Hide the contextual links whenever an in-place editor is active.
- this.options.appModel.on('change:activeEditor', this.toggleContextualLinksVisibility, this);
},
/**
* {@inheritdoc}
*/
- render: function () {
- var strings = this.options.strings;
- var text = !this.model.get('isActive') ? strings.quickEdit : strings.stopQuickEdit;
- this.$el.find('a').text(text);
- return this;
- },
+ render: function (entityModel, isActive) {
+ // Hides the contextual links if an in-place editor is active.
+ this.$el.parents('.contextual').toggle(!isActive);
- /**
- * Hides the contextual links if an in-place editor is active.
- *
- * @param Drupal.edit.AppModel appModel
- * The application state model.
- * @param null|Drupal.edit.FieldModel activeEditor
- * The model of the field that is currently being edited, or, if none, null.
- */
- toggleContextualLinksVisibility: function (appModel, activeEditor) {
- this.$el.parents('.contextual').toggle(activeEditor === null);
+ return this;
}
});
diff --git a/core/modules/edit/js/views/EditorDecorationView.js b/core/modules/edit/js/views/EditorDecorationView.js
index b9efdc2..3f8e144 100644
--- a/core/modules/edit/js/views/EditorDecorationView.js
+++ b/core/modules/edit/js/views/EditorDecorationView.js
@@ -1,13 +1,15 @@
/**
* @file
* A Backbone View that decorates the in-place edited element.
+ *
+ * @todo Rename to FieldDecorationView? This is not decorating the in-place
+ * editor, but the in-place edited element, i.e.: the field.
*/
(function ($, Backbone, Drupal) {
"use strict";
Drupal.edit.EditorDecorationView = Backbone.View.extend({
- toolbarId: null,
_widthAttributeIsEmpty: null,
@@ -25,15 +27,12 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({
* @param Object options
* An object with the following keys:
* - Drupal.edit.EditorView editorView: the editor object view.
- * - String toolbarId: the ID attribute of the toolbar as rendered in the
- * DOM.
*/
initialize: function (options) {
this.editorView = options.editorView;
- this.toolbarId = options.toolbarId;
-
this.model.on('change:state', this.stateChange, this);
+ this.model.on('change:isChanged change:inTempStore', this.renderChanged, this);
},
/**
@@ -65,6 +64,7 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({
if (from !== 'inactive') {
this.stopHighlight();
if (from !== 'highlighted') {
+ this.model.set('isChanged', false);
this.stopEdit();
}
}
@@ -84,6 +84,7 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({
this.startEdit();
break;
case 'changed':
+ this.model.set('isChanged', true);
break;
case 'saving':
break;
@@ -95,16 +96,23 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({
},
/**
+ * Adds a class to the edited element that indicates whether the field has
+ * been changed by the user (i.e. locally) or the field has already been
+ * changed and stored before by the user (i.e. remotely, stored in TempStore).
+ */
+ renderChanged: function () {
+ this.$el.toggleClass('edit-changed', this.model.get('isChanged') || this.model.get('inTempStore'));
+ },
+
+ /**
* Starts hover; transitions to 'highlight' state.
*
* @param jQuery event
*/
onMouseEnter: function (event) {
var that = this;
- this._ignoreHoveringVia(event, '#' + this.toolbarId, function () {
- that.model.set('state', 'highlighted');
- event.stopPropagation();
- });
+ that.model.set('state', 'highlighted');
+ event.stopPropagation();
},
/**
@@ -114,10 +122,8 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({
*/
onMouseLeave: function (event) {
var that = this;
- this._ignoreHoveringVia(event, '#' + this.toolbarId, function () {
- that.model.set('state', 'candidate', { reason: 'mouseleave' });
- event.stopPropagation();
- });
+ that.model.set('state', 'candidate', { reason: 'mouseleave' });
+ event.stopPropagation();
},
/**
@@ -135,7 +141,7 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({
* Adds classes used to indicate an elements editable state.
*/
decorate: function () {
- this.$el.addClass('edit-animate-fast edit-candidate edit-editable');
+ this.$el.addClass('edit-candidate edit-editable');
},
/**
@@ -169,9 +175,6 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({
*/
prepareEdit: function () {
this.$el.addClass('edit-editing');
-
- // While editing, do not show any other editors.
- $('.edit-candidate').not('.edit-editing').removeClass('edit-editable');
},
/**
@@ -332,26 +335,6 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({
pos = '0px';
}
return pos;
- },
-
- /**
- * Ignores hovering to/from the given closest element.
- *
- * When a hover occurs to/from another element, invoke the callback.
- *
- * @param jQuery event
- * @param jQuery closest
- * A jQuery-wrapped DOM element or compatibale jQuery input. The element
- * whose mouseenter and mouseleave events should be ignored.
- * @param Function callback
- */
- _ignoreHoveringVia: function (event, closest, callback) {
- if ($(event.relatedTarget).closest(closest).length > 0) {
- event.stopPropagation();
- }
- else {
- callback();
- }
}
});
diff --git a/core/modules/edit/js/views/EditorView.js b/core/modules/edit/js/views/EditorView.js
index 221765d..15408ad 100644
--- a/core/modules/edit/js/views/EditorView.js
+++ b/core/modules/edit/js/views/EditorView.js
@@ -43,6 +43,7 @@ Drupal.edit.EditorView = Backbone.View.extend({
// The el property is the field, which should not be removed. Remove the
// pointer to it, then call Backbone.View.prototype.remove().
this.setElement();
+ this.fieldModel.off(null, null, this);
Backbone.View.prototype.remove.call(this);
},
@@ -186,7 +187,14 @@ Drupal.edit.EditorView = Backbone.View.extend({
var formOptions = {
fieldID: this.fieldModel.id,
$el: this.$el,
- nocssjs: true
+ nocssjs: true,
+ // Reset an existing entry for this entity in the TempStore (if any) when
+ // saving the field. Logically speaking, this should happen in a separate
+ // request because this is an entity-level operation, not a field-level
+ // operation. But that would require an additional request, that might not
+ // even be necessary: it is only when a user saves a first changed field
+ // for an entity that this needs to happen: precisely now!
+ reset: !this.fieldModel.get('entity').get('inTempStore')
};
Drupal.edit.util.form.load(formOptions, function (form, ajax) {
// Create a backstage area for storing forms that are hidden from view
@@ -201,15 +209,16 @@ Drupal.edit.EditorView = Backbone.View.extend({
// forms.)
$('#edit_backstage form').prop('novalidate', true);
var $submit = $('#edit_backstage form .edit-form-submit');
- var base = Drupal.edit.util.form.ajaxifySaving(formOptions, $submit);
+ var formSaveAjax = Drupal.edit.util.form.ajaxifySaving(formOptions, $submit);
function removeHiddenForm () {
- Drupal.edit.util.form.unajaxifySaving($submit);
$('#edit_backstage').remove();
}
+ formSaveAjax.commands = {};
+
// Successfully saved.
- Drupal.ajax[base].commands.editFieldFormSaved = function (ajax, response, status) {
+ formSaveAjax.commands.editFieldFormSaved = function (ajax, response, status) {
removeHiddenForm();
// First, transition the state to 'saved'.
@@ -220,20 +229,13 @@ Drupal.edit.EditorView = Backbone.View.extend({
};
// Unsuccessfully saved; validation errors.
- Drupal.ajax[base].commands.editFieldFormValidationErrors = function (ajax, response, status) {
+ formSaveAjax.commands.editFieldFormValidationErrors = function (ajax, response, status) {
removeHiddenForm();
editorModel.set('validationErrors', response.data);
fieldModel.set('state', 'invalid');
};
- // The editFieldForm AJAX command is only called upon loading the form
- // for the first time, and when there are validation errors in the form;
- // Form API then marks which form items have errors. This is useful for
- // the form-based in-place editor, but pointless for any other: the form
- // itself won't be visible at all anyway! So, we just ignore it.
- Drupal.ajax[base].commands.editFieldForm = function () {};
-
fillAndSubmitForm(editorModel.get('currentValue'));
});
},
@@ -246,7 +248,7 @@ Drupal.edit.EditorView = Backbone.View.extend({
showValidationErrors: function () {
var $errors = $('
')
.append(this.model.get('validationErrors'));
- $(this.fieldModel.get('el'))
+ this.getEditedElement()
.addClass('edit-validation-error')
.after($errors);
},
@@ -260,7 +262,7 @@ Drupal.edit.EditorView = Backbone.View.extend({
* invalid value was discarded.
*/
removeValidationErrors: function () {
- $(this.fieldModel.get('el'))
+ this.getEditedElement()
.removeClass('edit-validation-error')
.next('.edit-validation-errors')
.remove();
diff --git a/core/modules/edit/js/views/EntityToolbarView.js b/core/modules/edit/js/views/EntityToolbarView.js
new file mode 100644
index 0000000..81ba03f
--- /dev/null
+++ b/core/modules/edit/js/views/EntityToolbarView.js
@@ -0,0 +1,310 @@
+/**
+ * @file
+ * A Backbone View that provides an entity level toolbar.
+ */
+(function ($, Backbone, Drupal, debounce) {
+
+"use strict";
+
+Drupal.edit.EntityToolbarView = Backbone.View.extend({
+
+ _fieldToolbarRoot: null,
+
+ events: function () {
+ var map = {
+ 'click.edit button.action-save': 'onClickSave',
+ 'click.edit button.action-cancel': 'onClickCancel',
+ 'mouseenter.edit': 'onMouseenter'
+ };
+ return map;
+ },
+
+ /**
+ * {@inheritdoc}
+ */
+ initialize: function (options) {
+ this.appModel = options.appModel;
+ this.$entity = $(this.model.get('el'));
+
+ // Rerender whenever the entity state changes.
+ this.model.on('change:isActive change:isDirty change:state', this.render, this);
+ // Also rerender whenever the highlighted or active in-place editor changes.
+ this.appModel.on('change:highlightedEditor change:activeEditor', this.render, this);
+
+ // Reposition the entity toolbar as the viewport and the position within the
+ // viewport changes.
+ $(window).on('resize.edit scroll.edit', debounce($.proxy(this.windowChangeHandler, this), 150));
+
+ // Set the entity toolbar DOM element as the el for this view.
+ var $toolbar = this.buildToolbarEl();
+ this.setElement($toolbar);
+ this._fieldToolbarRoot = $toolbar.find('.edit-toolbar-field').get(0);
+
+ // Initial render.
+ this.render();
+ },
+
+ /**
+ * {@inheritdoc}
+ */
+ render: function () {
+ if (this.model.get('isActive')) {
+ // If the toolbar container doesn't exist, create it.
+ if ($('body').children('#edit-entity-toolbar').length === 0) {
+ $('body').append(this.$el);
+ }
+ // Adds the entity title to the toolbar.
+ this.label();
+
+ // Show the save and cancel buttons.
+ this.show('ops');
+ // If render is being called and the toolbar is already visible, just
+ // reposition it.
+ this.position();
+ }
+
+ // The save button text and state varies with the state of the entity model.
+ var $button = this.$el.find('.edit-button.action-save');
+ var isDirty = this.model.get('isDirty');
+ // Adjust the save button according to the state of the model.
+ switch (this.model.get('state')) {
+ // Quick editing is active, but no field is being edited.
+ case 'opened':
+ // The saving throbber is not managed by AJAX system. The
+ // EntityToolbarView manages this visual element.
+ $button
+ .removeClass('action-saving icon-throbber icon-end')
+ .text(Drupal.t('Save'))
+ .removeAttr('disabled')
+ .attr('aria-hidden', !isDirty);
+ break;
+ // The changes to the fields of the entity are being committed.
+ case 'committing':
+ $button
+ .addClass('action-saving icon-throbber icon-end')
+ .text(Drupal.t('Saving'))
+ .attr('disabled', 'disabled');
+ break;
+ default:
+ $button.attr('aria-hidden', true);
+ break;
+ }
+
+ return this;
+ },
+
+ /**
+ * Repositions the entity toolbar on window scroll and resize.
+ *
+ * @param jQuery.Eevent event
+ */
+ windowChangeHandler: function (event) {
+ this.position();
+ },
+
+ /**
+ * Uses the jQuery.ui.position() method to position the entity toolbar.
+ *
+ * @param jQuery|DOM element
+ * (optional) The element against which the entity toolbar is positioned.
+ */
+ position: function (element) {
+ clearTimeout(this.timer);
+ var that = this;
+ // Vary the edge of the positioning according to the direction of language
+ // in the document.
+ var edge = (document.documentElement.dir === 'rtl') ? 'right' : 'left';
+ // If a field in this entity is active, position against it.
+ var activeEditor = Drupal.edit.app.model.get('activeEditor');
+ var activeEditorView = activeEditor && activeEditor.editorView;
+ var activeEditedElement = activeEditorView && activeEditorView.getEditedElement();
+ // Label of a highlighted field, if it exists.
+ var highlightedEditor = Drupal.edit.app.model.get('highlightedEditor');
+ var highlightedEditorView = highlightedEditor && highlightedEditor.editorView;
+ var highlightedEditedElement = highlightedEditorView && highlightedEditorView.getEditedElement();
+ // Prefer the specified element from the parameters, then the active field
+ // and finally the entity itself to determine the position of the toolbar.
+ var of = element || activeEditedElement || highlightedEditedElement || this.$entity;
+ // Uses the jQuery.ui.position() method. Use a timeout to move the toolbar
+ // only after the user has focused on an editable for 250ms. This prevents
+ // the toolbar from jumping around the screen.
+ this.timer = setTimeout(function () {
+ that.$el
+ .position({
+ my: edge + '-2 bottom-3',
+ at: edge + ' top',
+ of: of,
+ collision: 'flipfit',
+ // Eliminate some of the placement jitteriness by flooring the suggested
+ // values.
+ using: function (suggested, info) {
+ info.element.element.css({
+ left: Math.floor(suggested.left),
+ top: Math.floor(suggested.top)
+ });
+ }
+ })
+ // Resize the toolbar to match the dimensions of the field, up to a max
+ // width that is equal to the field's width.
+ .css({
+ 'max-width': $(of).outerWidth(),
+ 'width': '100%'
+ });
+ }, 250);
+ },
+
+ /**
+ * Set the model state to 'saving' when the save button is clicked.
+ *
+ * @param jQuery event
+ */
+ onClickSave: function (event) {
+ event.stopPropagation();
+ event.preventDefault();
+ // Save the model.
+ this.model.set('state', 'committing');
+ },
+
+ /**
+ * Sets the model state to candidate when the cancel button is clicked.
+ *
+ * @param jQuery event
+ */
+ onClickCancel: function (event) {
+ event.preventDefault();
+ this.model.set('state', 'deactivating');
+ },
+
+ /**
+ * Clears the timeout that will eventually reposition the entity toolbar.
+ *
+ * Without this, it may reposition itself, away from the user's cursor!
+ *
+ * @param jQuery event
+ */
+ onMouseenter: function (event) {
+ clearTimeout(this.timer);
+ },
+
+ /**
+ * Builds the entity toolbar HTML; attaches to DOM; sets starting position.
+ */
+ buildToolbarEl: function () {
+ var $toolbar = $(Drupal.theme('editEntityToolbar', {
+ id: 'edit-entity-toolbar'
+ }));
+
+ $toolbar
+ .find('.edit-toolbar-entity')
+ // Append the "ops" toolgroup into the toolbar.
+ .prepend(Drupal.theme('editToolgroup', {
+ classes: ['ops'],
+ buttons: [
+ {
+ label: Drupal.t('Save'),
+ type: 'submit',
+ classes: 'action-save edit-button icon',
+ attributes: {
+ 'aria-hidden': true
+ }
+ },
+ {
+ label: Drupal.t('Close'),
+ classes: 'action-cancel edit-button icon icon-close icon-only'
+ }
+ ]
+ }));
+
+ // Give the toolbar a sensible starting position so that it doesn't animate
+ // on to the screen from a far off corner.
+ $toolbar
+ .css({
+ left: this.$entity.offset().left,
+ top: this.$entity.offset().top
+ });
+
+ return $toolbar;
+ },
+
+ /**
+ * Returns the DOM element that fields will attach their toolbars to.
+ *
+ * @return jQuery
+ * The DOM element that fields will attach their toolbars to.
+ */
+ getToolbarRoot: function () {
+ return this._fieldToolbarRoot;
+ },
+
+ /**
+ * Generates a state-dependent label for the entity toolbar.
+ */
+ label: function () {
+ // The entity label.
+ var label = '"' + this.model.get('label') + '"';
+
+ // Label of an active field, if it exists.
+ var activeEditor = Drupal.edit.app.model.get('activeEditor');
+ var activeFieldLabel = activeEditor && activeEditor.get('metadata').label;
+ activeFieldLabel = activeFieldLabel && activeFieldLabel + ' — ' + label;
+
+ // Label of a highlighted field, if it exists.
+ var highlightedEditor = Drupal.edit.app.model.get('highlightedEditor');
+ var highlightedFieldLabel = highlightedEditor && highlightedEditor.get('metadata').label;
+ highlightedFieldLabel = highlightedFieldLabel && highlightedFieldLabel + ' — ' + label;
+
+ this.$el
+ .find('.edit-toolbar-label')
+ .text(activeFieldLabel || highlightedFieldLabel || label);
+ },
+
+ /**
+ * Adds classes to a toolgroup.
+ *
+ * @param String toolgroup
+ * A toolgroup name.
+ * @param String classes
+ * A string of space-delimited class names that will be applied to the
+ * wrapping element of the toolbar group.
+ */
+ addClass: function (toolgroup, classes) {
+ this._find(toolgroup).addClass(classes);
+ },
+
+ /**
+ * Removes classes from a toolgroup.
+ *
+ * @param String toolgroup
+ * A toolgroup name.
+ * @param String classes
+ * A string of space-delimited class names that will be removed from the
+ * wrapping element of the toolbar group.
+ */
+ removeClass: function (toolgroup, classes) {
+ this._find(toolgroup).removeClass(classes);
+ },
+
+ /**
+ * Finds a toolgroup.
+ *
+ * @param String toolgroup
+ * A toolgroup name.
+ * @return jQuery
+ * The toolgroup DOM element.
+ */
+ _find: function (toolgroup) {
+ return this.$el.find('.edit-toolbar .edit-toolgroup.' + toolgroup);
+ },
+
+ /**
+ * Shows a toolgroup.
+ *
+ * @param String toolgroup
+ * A toolgroup name.
+ */
+ show: function (toolgroup) {
+ this.$el.removeClass('edit-animate-invisible');
+ }
+});
+
+})(jQuery, Backbone, Drupal, Drupal.debounce);
diff --git a/core/modules/edit/js/views/EntityView.js b/core/modules/edit/js/views/EntityView.js
new file mode 100644
index 0000000..a2e771a
--- /dev/null
+++ b/core/modules/edit/js/views/EntityView.js
@@ -0,0 +1,31 @@
+(function ($, Backbone) {
+
+"use strict";
+
+Drupal.edit.EntityView = Backbone.View.extend({
+ /**
+ * {@inheritdoc}
+ *
+ * Associated with the DOM root node of an editable entity.
+ */
+ initialize: function () {
+ this.model.on('change', this.render, this);
+ },
+
+ /**
+ * {@inheritdoc}
+ */
+ render: function () {
+ this.$el.toggleClass('edit-entity-active', this.model.get('isActive'));
+ },
+
+ /**
+ * {@inheritdoc}
+ */
+ remove: function () {
+ this.setElement(null);
+ Backbone.View.prototype.remove.call(this);
+ }
+});
+
+}(jQuery, Backbone));
diff --git a/core/modules/edit/js/views/FieldToolbarView.js b/core/modules/edit/js/views/FieldToolbarView.js
index 4cdd53d..b261a7b 100644
--- a/core/modules/edit/js/views/FieldToolbarView.js
+++ b/core/modules/edit/js/views/FieldToolbarView.js
@@ -14,27 +14,15 @@ Drupal.edit.FieldToolbarView = Backbone.View.extend({
// A reference to the in-place editor.
editorView: null,
- _loader: null,
- _loaderVisibleStart: 0,
-
_id: null,
- events: {
- 'click.edit button.label': 'onClickInfoLabel',
- 'mouseleave.edit': 'onMouseLeave',
- 'click.edit button.field-save': 'onClickSave',
- 'click.edit button.field-close': 'onClickClose'
- },
-
/**
* {@inheritdoc}
*/
initialize: function (options) {
this.$editedElement = options.$editedElement;
this.editorView = options.editorView;
-
- this._loader = null;
- this._loaderVisibleStart = 0;
+ this.$root = this.$el;
// Generate a DOM-compatible ID for the form container DOM element.
this._id = 'edit-toolbar-for-' + this.model.id.replace(/\//g, '_');
@@ -46,19 +34,22 @@ Drupal.edit.FieldToolbarView = Backbone.View.extend({
* {@inheritdoc}
*/
render: function () {
- // Render toolbar.
- this.setElement($(Drupal.theme('editToolbarContainer', {
+ // Render toolbar and set it as the view's element.
+ this.setElement($(Drupal.theme('editFieldToolbar', {
id: this._id
})));
// Insert in DOM.
+ // @todo @Jesse I think this if statement can be removed, because the entity
+ // toolbar positions its correctly above any element, including
+ // display:inline ones presumably.
if (this.$editedElement.css('display') === 'inline') {
- this.$el.prependTo(this.$editedElement.offsetParent());
- var pos = this.$editedElement.position();
- this.$el.css('left', pos.left).css('top', pos.top);
+ this.$el.prependTo(this.$field);
}
else {
- this.$el.insertBefore(this.$editedElement);
+ // The $root is the DOM element in the entity toolbar that field toolbars
+ // attach to.
+ this.$el.prependTo(this.$root);
}
return this;
@@ -76,245 +67,61 @@ Drupal.edit.FieldToolbarView = Backbone.View.extend({
var to = state;
switch (to) {
case 'inactive':
- if (from) {
- this.remove();
- }
break;
case 'candidate':
- if (from === 'inactive') {
- this.render();
- }
- else {
- // Remove all toolgroups; they're no longer necessary.
- this.$el
- .removeClass('edit-highlighted edit-editing')
- .find('.edit-toolbar .edit-toolgroup').remove();
- if (from !== 'highlighted' && this.editorView.getEditUISettings().padding) {
- this._unpad();
- }
+ // Remove the view's existing element if we went to the 'activating'
+ // state or later, because it will be recreated. Not doing this would
+ // result in memory leaks.
+ if (from !== 'inactive' && from !== 'highlighted') {
+ this.$el.remove();
+ this.setElement();
}
break;
case 'highlighted':
- // As soon as we highlight, make sure we have a toolbar in the DOM (with
- // at least a title).
- this.startHighlight();
break;
case 'activating':
- this.setLoadingIndicator(true);
- break;
- case 'active':
- this.startEdit();
- this.setLoadingIndicator(false);
+ this.render();
+
if (this.editorView.getEditUISettings().fullWidthToolbar) {
this.$el.addClass('edit-toolbar-fullwidth');
}
- if (this.editorView.getEditUISettings().padding) {
- this._pad();
- }
if (this.editorView.getEditUISettings().unifiedToolbar) {
this.insertWYSIWYGToolGroups();
}
break;
+ case 'active':
+ break;
case 'changed':
- this.$el
- .find('button.save')
- .addClass('blue-button')
- .removeClass('gray-button');
break;
case 'saving':
- this.setLoadingIndicator(true);
break;
case 'saved':
- this.setLoadingIndicator(false);
break;
case 'invalid':
- this.setLoadingIndicator(false);
break;
}
},
/**
- * Redirects the click.edit-event to the editor DOM element.
- *
- * @param jQuery event
- */
- onClickInfoLabel: function (event) {
- event.stopPropagation();
- event.preventDefault();
- // Redirects the event to the editor DOM element.
- this.$editedElement.trigger('click.edit');
- },
-
- /**
- * Controls mouseleave events.
- *
- * A mouseleave to the editor doesn't matter; a mouseleave to something else
- * counts as a mouseleave on the editor itself.
- *
- * @param jQuery event
- */
- onMouseLeave: function (event) {
- if (event.relatedTarget !== this.$editedElement[0] && !$.contains(this.$editedElement, event.relatedTarget)) {
- this.$editedElement.trigger('mouseleave.edit');
- }
- event.stopPropagation();
- },
-
- /**
- * Set the model state to 'saving' when the save button is clicked.
- *
- * @param jQuery event
- */
- onClickSave: function (event) {
- event.stopPropagation();
- event.preventDefault();
- this.model.set('state', 'saving');
- },
-
- /**
- * Sets the model state to candidate when the cancel button is clicked.
- *
- * @param jQuery event
- */
- onClickClose: function (event) {
- event.stopPropagation();
- event.preventDefault();
- this.model.set('state', 'candidate', { reason: 'cancel' });
- },
-
- /**
- * Indicates in the 'info' toolgroup that we're waiting for a server reponse.
- *
- * Prevents flickering loading indicator by only showing it after 0.6 seconds
- * and if it is shown, only hiding it after another 0.6 seconds.
- *
- * @param Boolean enabled
- * Whether the loading indicator should be displayed or not.
- */
- setLoadingIndicator: function (enabled) {
- var that = this;
- if (enabled) {
- this._loader = setTimeout(function () {
- that.addClass('info', 'loading');
- that._loaderVisibleStart = new Date().getTime();
- }, 600);
- }
- else {
- var currentTime = new Date().getTime();
- clearTimeout(this._loader);
- if (this._loaderVisibleStart) {
- setTimeout(function () {
- that.removeClass('info', 'loading');
- }, this._loaderVisibleStart + 600 - currentTime);
- }
- this._loader = null;
- this._loaderVisibleStart = 0;
- }
- },
-
- /**
- * Decorate the field with markup to indicate it is highlighted.
- */
- startHighlight: function () {
- // Retrieve the lavel to show for this field.
- var label = this.model.get('metadata').label;
-
- this.$el
- .addClass('edit-highlighted')
- .find('.edit-toolbar')
- // Append the "info" toolgroup into the toolbar.
- .append(Drupal.theme('editToolgroup', {
- classes: 'info edit-animate-only-background-and-padding',
- buttons: [
- { label: label, classes: 'blank-button label' }
- ]
- }));
-
- // Animations.
- var that = this;
- setTimeout(function () {
- that.show('info');
- }, 0);
- },
-
- /**
- * Decorate the field with markup to indicate edit state; append a toolbar.
- */
- startEdit: function () {
- this.$el
- .addClass('edit-editing')
- .find('.edit-toolbar')
- // Append the "ops" toolgroup into the toolbar.
- .append(Drupal.theme('editToolgroup', {
- classes: 'ops',
- buttons: [
- { label: Drupal.t('Save'), type: 'submit', classes: 'field-save save gray-button' },
- { label: '
' + Drupal.t('Close') + '', classes: 'field-close close gray-button' }
- ]
- }));
- this.show('ops');
- },
-
- /**
- * Adjusts the toolbar to accomodate padding on the editor.
- *
- * @see EditorDecorationView._pad().
- */
- _pad: function () {
- // The whole toolbar must move to the top when the property's DOM element
- // is displayed inline.
- if (this.$editedElement.css('display') === 'inline') {
- this.$el.css('top', parseInt(this.$el.css('top'), 10) - 5 + 'px');
- }
-
- // The toolbar must move to the top and the left.
- var $hf = this.$el.find('.edit-toolbar-heightfaker');
- $hf.css({ bottom: '6px', left: '-5px' });
-
- if (this.editorView.getEditUISettings().fullWidthToolbar) {
- $hf.css({ width: this.$editedElement.width() + 10 });
- }
- },
-
- /**
- * Undoes the changes made by _pad().
- *
- * @see EditorDecorationView._unpad().
- */
- _unpad: function () {
- // Move the toolbar back to its original position.
- var $hf = this.$el.find('.edit-toolbar-heightfaker');
- $hf.css({ bottom: '1px', left: '' });
-
- if (this.editorView.getEditUISettings().fullWidthToolbar) {
- $hf.css({ width: '' });
- }
- },
-
- /**
* Insert WYSIWYG markup into the associated toolbar.
*/
insertWYSIWYGToolGroups: function () {
this.$el
- .find('.edit-toolbar')
.append(Drupal.theme('editToolgroup', {
id: this.getFloatedWysiwygToolgroupId(),
- classes: 'wysiwyg-floated',
+ classes: ['wysiwyg-floated', 'edit-animate-slow', 'edit-animate-invisible', 'edit-animate-delay-veryfast'],
buttons: []
}))
.append(Drupal.theme('editToolgroup', {
id: this.getMainWysiwygToolgroupId(),
- classes: 'wysiwyg-main',
+ classes: ['wysiwyg-main', 'edit-animate-slow', 'edit-animate-invisible', 'edit-animate-delay-veryfast'],
buttons: []
}));
// Animate the toolgroups into visibility.
- var that = this;
- setTimeout(function () {
- that.show('wysiwyg-floated');
- that.show('wysiwyg-main');
- }, 0);
+ this.show('wysiwyg-floated');
+ this.show('wysiwyg-main');
},
/**
@@ -354,49 +161,36 @@ Drupal.edit.FieldToolbarView = Backbone.View.extend({
},
/**
- * Shows a toolgroup.
- *
- * @param String toolgroup
- * A toolgroup name.
- */
- show: function (toolgroup) {
- this._find(toolgroup).removeClass('edit-animate-invisible');
- },
-
- /**
- * Adds classes to a toolgroup.
- *
- * @param String toolgroup
- * A toolgroup name.
- * @param String classes
- * A space delimited list of class names to add to the toolgroup.
- */
- addClass: function (toolgroup, classes) {
- this._find(toolgroup).addClass(classes);
- },
-
- /**
- * Removes classes from a toolgroup.
+ * Finds a toolgroup.
*
* @param String toolgroup
* A toolgroup name.
- * @param String classes
- * A space delimited list of class names to remove from the toolgroup.
+ * @return jQuery
*/
- removeClass: function (toolgroup, classes) {
- this._find(toolgroup).removeClass(classes);
+ _find: function (toolgroup) {
+ return this.$el.find('.edit-toolgroup.' + toolgroup);
},
/**
- * Finds a toolgroup.
+ * Shows a toolgroup.
*
* @param String toolgroup
* A toolgroup name.
- * @return jQuery
*/
- _find: function (toolgroup) {
- return this.$el.find('.edit-toolbar .edit-toolgroup.' + toolgroup);
- }
+ show: function (toolgroup) {
+ var $group = this._find(toolgroup);
+ // Attach a transitionEnd event handler to the toolbar group so that update
+ // events can be triggered after the animations have ended.
+ $group.on(Drupal.edit.util.constants.transitionEnd, function (event) {
+ $group.off(Drupal.edit.util.constants.transitionEnd);
+ });
+ // The call to remove the class and start the animation must be started in
+ // the next animation frame or the event handler attached above won't be
+ // triggered.
+ window.setTimeout(function () {
+ $group.removeClass('edit-animate-invisible');
+ }, 0);
+ }
});
})(jQuery, _, Backbone, Drupal);
diff --git a/core/modules/edit/lib/Drupal/edit/EditController.php b/core/modules/edit/lib/Drupal/edit/EditController.php
index ee9c269..8d2bcb0 100644
--- a/core/modules/edit/lib/Drupal/edit/EditController.php
+++ b/core/modules/edit/lib/Drupal/edit/EditController.php
@@ -58,6 +58,8 @@ public function metadata(Request $request) {
if (!isset($fields)) {
throw new NotFoundHttpException();
}
+ $entities = $request->request->get('entities');
+
$metadataGenerator = $this->container->get('edit.metadata.generator');
$metadata = array();
@@ -81,7 +83,13 @@ public function metadata(Request $request) {
throw new NotFoundHttpException();
}
- $metadata[$field] = $metadataGenerator->generate($entity, $instance, $langcode, $view_mode);
+ // If the entity information for this field is requested, include it.
+ $entity_id = $entity->entityType() . '/' . $entity_id;
+ if (in_array($entity_id, $entities) && !isset($metadata[$entity_id])) {
+ $metadata[$entity_id] = $metadataGenerator->generateEntity($entity, $langcode);
+ }
+
+ $metadata[$field] = $metadataGenerator->generateField($entity, $instance, $langcode, $view_mode);
}
return new JsonResponse($metadata);
diff --git a/core/modules/edit/lib/Drupal/edit/MetadataGenerator.php b/core/modules/edit/lib/Drupal/edit/MetadataGenerator.php
index cecc676..5492914 100644
--- a/core/modules/edit/lib/Drupal/edit/MetadataGenerator.php
+++ b/core/modules/edit/lib/Drupal/edit/MetadataGenerator.php
@@ -56,9 +56,18 @@ public function __construct(EditEntityFieldAccessCheckInterface $access_checker,
}
/**
- * Implements \Drupal\edit\MetadataGeneratorInterface::generate().
+ * {@inheritdoc}
*/
- public function generate(EntityInterface $entity, FieldInstance $instance, $langcode, $view_mode) {
+ public function generateEntity(EntityInterface $entity, $langcode) {
+ return array(
+ 'label' => $entity->label($langcode),
+ );
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function generateField(EntityInterface $entity, FieldInstance $instance, $langcode, $view_mode) {
$field_name = $instance['field_name'];
// Early-return if user does not have access.
diff --git a/core/modules/edit/lib/Drupal/edit/MetadataGeneratorInterface.php b/core/modules/edit/lib/Drupal/edit/MetadataGeneratorInterface.php
index 16db770..7baaf5b 100644
--- a/core/modules/edit/lib/Drupal/edit/MetadataGeneratorInterface.php
+++ b/core/modules/edit/lib/Drupal/edit/MetadataGeneratorInterface.php
@@ -11,11 +11,24 @@
use Drupal\field\Plugin\Core\Entity\FieldInstance;
/**
- * Interface for generating in-place editing metadata for an entity field.
+ * Interface for generating in-place editing metadata.
*/
interface MetadataGeneratorInterface {
/**
+ * Generates in-place editing metadata for an entity.
+ *
+ * @param \Drupal\Core\Entity\EntityInterface $entity
+ * The entity being edited.
+ * @param string $langcode
+ * The name of the language for which the field is being edited.
+ * @return array
+ * An array containing metadata with the following keys:
+ * - label: the user-visible label for the entity in the given language.
+ */
+ public function generateEntity(EntityInterface $entity, $langcode);
+
+ /**
* Generates in-place editing metadata for an entity field.
*
* @param \Drupal\Core\Entity\EntityInterface $entity
@@ -34,6 +47,6 @@
* - aria: the ARIA label.
* - custom: (optional) any additional metadata that the editor provides.
*/
- public function generate(EntityInterface $entity, FieldInstance $instance, $langcode, $view_mode);
+ public function generateField(EntityInterface $entity, FieldInstance $instance, $langcode, $view_mode);
}
diff --git a/core/modules/editor/js/editor.formattedTextEditor.js b/core/modules/editor/js/editor.formattedTextEditor.js
index 91e3521..6db2ecf 100644
--- a/core/modules/editor/js/editor.formattedTextEditor.js
+++ b/core/modules/editor/js/editor.formattedTextEditor.js
@@ -163,7 +163,7 @@ Drupal.edit.editors.editor = Drupal.edit.EditorView.extend({
var fieldID = this.fieldModel.id;
// Create a Drupal.ajax instance to load the form.
- Drupal.ajax[fieldID] = new Drupal.ajax(fieldID, this.$el, {
+ var textLoaderAjax = new Drupal.ajax(fieldID, this.$el, {
url: Drupal.edit.util.buildUrl(fieldID, drupalSettings.editor.getUntransformedTextURL),
event: 'editor-internal.editor',
submit: { nocssjs : true },
@@ -172,11 +172,9 @@ Drupal.edit.editors.editor = Drupal.edit.EditorView.extend({
// Implement a scoped editorGetUntransformedText AJAX command: calls the
// callback.
- Drupal.ajax[fieldID].commands.editorGetUntransformedText = function (ajax, response, status) {
+ textLoaderAjax.commands = {};
+ textLoaderAjax.commands.editorGetUntransformedText = function (ajax, response, status) {
callback(response.data);
- // Delete the Drupal.ajax instance that called this very function.
- delete Drupal.ajax[fieldID];
- this.$el.off('editor-internal.editor');
};
// This will ensure our scoped editorGetUntransformedText AJAX command