diff --git a/core/modules/edit/css/edit.css b/core/modules/edit/css/edit.css index 6a5ac83..1ceea82 100644 --- a/core/modules/edit/css/edit.css +++ b/core/modules/edit/css/edit.css @@ -121,6 +121,10 @@ */ } +[data-edit-entity].edit-active { + outline: 2px dotted red; +} + diff --git a/core/modules/edit/edit.module b/core/modules/edit/edit.module index 85af15f..99e110c 100644 --- a/core/modules/edit/edit.module +++ b/core/modules/edit/edit.module @@ -74,15 +74,6 @@ function edit_library_info() { 'js' => array( // Core. $path . '/js/edit.js' => $options, - $path . '/js/app.js' => $options, - // Models. - $path . '/js/models/edit-app-model.js' => $options, - // Views. - $path . '/js/views/propertyeditordecoration-view.js' => $options, - $path . '/js/views/contextuallink-view.js' => $options, - $path . '/js/views/modal-view.js' => $options, - $path . '/js/views/toolbar-view.js' => $options, - $path . '/js/views/entity-view.js' => $options, // Backbone.sync implementation on top of Drupal forms. $path . '/js/backbone.drupalform.js' => $options, // VIE service. diff --git a/core/modules/edit/js/app.js b/core/modules/edit/js/app.js deleted file mode 100644 index 623edc9..0000000 --- a/core/modules/edit/js/app.js +++ /dev/null @@ -1,340 +0,0 @@ -/** - * @file - * A Backbone View that is the central app controller. - */ -(function ($, _, Backbone, Drupal, VIE) { - -"use strict"; - - Drupal.edit = Drupal.edit || {}; - $.extend(Drupal.edit, { - EditAppView: Backbone.View.extend({ - vie: null, - domService: null, - - // Configuration for state handling. - states: [], - activeEditorStates: [], - singleEditorStates: [], - - // State. - $entityElements: null, - editables: [], - entityViews: [], - - /** - * Implements Backbone Views' initialize() function. - */ - initialize: function() { - _.bindAll(this, 'appStateChange', 'acceptEditorStateChange', 'editorStateChange'); - - // VIE instance for Edit. - this.vie = new VIE(); - // Use our custom DOM parsing service until RDFa is available. - this.vie.use(new this.vie.EditService()); - this.domService = this.vie.service('edit'); - - // Instantiate configuration for state handling. - this.states = [ - null, 'inactive', 'candidate', 'highlighted', - 'activating', 'active', 'changed', 'saving', 'saved', 'invalid' - ]; - this.activeEditorStates = ['activating', 'active']; - this.singleEditorStates = _.union(['highlighted'], this.activeEditorStates); - - this.$entityElements = $([]); - - // Use Create's Storage widget. - this.$el.createStorage({ - vie: this.vie, - editableNs: 'createeditable' - }); - - // When view/edit mode is toggled in the menu, update the editor widgets. - this.model.on('change:activeEntity', this.appStateChange); - }, - - /** - * Sets the state of PropertyEditor widgets when edit mode begins or ends. - * - * Should be called whenever EditAppModel's "activeEntity" changes. - */ - appStateChange: function() { - // @todo: BLOCKED_ON(Create.js, https://github.com/bergie/create/issues/133, https://github.com/bergie/create/issues/140) - // We're currently setting the state on EditableEntity widgets instead of - // PropertyEditor widgets, because of - // https://github.com/bergie/create/issues/133. - - var editables = this.editables; - var activeEntity = this.model.get('activeEntity'); - - // First, change the status of all PropertyEditor widgets to 'inactive'. - for (var i = 0, il = editables.length; i < il; i++) { - var editable = editables[i]; - editable.invoke('setState', 'inactive', null, {reason: 'stop'}); - // Then, change the status of PropertyEditor widgets of the currently - // active entity to 'candidate'. - var entityOfProperty = editable.invoke('get', 'model'); - // If the new PropertyEditor is for the entity that's currently being - // edited, then transition it to the 'candidate' state. - // (This happens when a field was modified and is re-rendered.) - if (entityOfProperty.getSubjectUri() === activeEntity) { - editable.invoke('setState', 'candidate'); - } - } - }, - - /** - * Accepts or reject editor (PropertyEditor) state changes. - * - * This is what ensures that the app is in control of what happens. - * - * @param from - * The previous state. - * @param to - * The new state. - * @param predicate - * The predicate of the property for which the state change is happening. - * @param context - * The context that is trying to trigger the state change. - * @param callback - * The callback function that should receive the state acceptance result. - */ - acceptEditorStateChange: function(from, to, predicate, context, callback) { - var accept = true; - - // If the app is in view mode, then reject all state changes except for - // those to 'inactive'. - if (context && context.reason === 'stop') { - if (from === 'candidate' && to === 'inactive') { - accept = true; - } - } - // Handling of edit mode state changes is more granular. - else { - // In general, enforce the states sequence. Disallow going back from a - // "later" state to an "earlier" state, except in explicitly allowed - // cases. - if (_.indexOf(this.states, from) > _.indexOf(this.states, to)) { - accept = false; - // Allow: activating/active -> candidate. - // Necessary to stop editing a property. - 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. - else if ((from === 'changed' || from === 'invalid') && to === 'candidate') { - accept = true; - } - // Allow: highlighted -> candidate. - // Necessary to stop highlighting a property. - else if (from === 'highlighted' && to === 'candidate') { - accept = true; - } - // Allow: saved -> candidate. - // Necessary when successfully saved a property. - else if (from === 'saved' && to === 'candidate') { - accept = true; - } - // Allow: invalid -> saving. - // Necessary to be able to save a corrected, invalid property. - else if (from === 'invalid' && to === 'saving') { - 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; - } - } - // Reject going from activating/active to candidate because of a - // mouseleave. - else if (_.indexOf(this.activeEditorStates, from) !== -1 && to === 'candidate') { - if (context && context.reason === 'mouseleave') { - accept = false; - } - } - // When attempting to stop editing a changed/invalid property, ask for - // confirmation. - else if ((from === 'changed' || from === 'invalid') && to === 'candidate') { - if (context && context.reason === 'mouseleave') { - accept = false; - } - else { - // Check whether the transition has been confirmed? - if (context && context.confirmed) { - accept = true; - } - // Confirm this transition. - else { - // The callback will be called from the helper function. - this._confirmStopEditing(callback); - return; - } - } - } - } - } - - callback(accept); - }, - - /** - * Asks the user to confirm whether he wants to stop editing via a modal. - * - * @param acceptCallback - * The callback function as passed to acceptEditorStateChange(). This - * callback function will be called with the user's choice. - * - * @see acceptEditorStateChange() - */ - _confirmStopEditing: function(acceptCallback) { - // Only instantiate if there isn't a modal instance visible yet. - if (!this.model.get('activeModal')) { - var that = this; - var modal = new Drupal.edit.views.ModalView({ - 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') } - ], - callback: function(action) { - // The active modal has been removed. - that.model.set('activeModal', null); - if (action === 'discard') { - acceptCallback(true); - } - else { - acceptCallback(false); - var editor = that.model.get('activeEditor'); - editor.options.widget.setState('saving', editor.options.property); - } - } - }); - this.model.set('activeModal', modal); - // The modal will set the activeModal property on the model when rendering - // to prevent multiple modals from being instantiated. - modal.render(); - } - else { - // Reject as there is still an open transition waiting for confirmation. - acceptCallback(false); - } - }, - - /** - * Reacts to editor (PropertyEditor) state changes; tracks global state. - * - * @param from - * The previous state. - * @param to - * The new state. - * @param editor - * The PropertyEditor widget object. - */ - editorStateChange: function(from, to, editor) { - // @todo: BLOCKED_ON(Create.js, https://github.com/bergie/create/issues/133) - // Get rid of this once that issue is solved. - if (!editor) { - return; - } - else { - editor.stateChange(from, to); - } - - // Keep track of the highlighted editor in the global state. - if (_.indexOf(this.singleEditorStates, to) !== -1 && this.model.get('highlightedEditor') !== editor) { - this.model.set('highlightedEditor', editor); - } - else if (this.model.get('highlightedEditor') === editor && to === 'candidate') { - this.model.set('highlightedEditor', null); - } - - // Keep track of the active editor in the global state. - if (_.indexOf(this.activeEditorStates, to) !== -1 && this.model.get('activeEditor') !== editor) { - this.model.set('activeEditor', editor); - } - else if (this.model.get('activeEditor') === editor && to === 'candidate') { - // Discarded if it transitions from a changed state to 'candidate'. - if (from === 'changed' || from === 'invalid') { - // Retrieve the storage widget from DOM. - var createStorageWidget = this.$el.data('DrupalCreateStorage'); - // Revert changes in the model, this will trigger the direct editable - // content to be reset and redrawn. - createStorageWidget.revertChanges(editor.options.entity); - } - this.model.set('activeEditor', null); - } - - // Propagate the state change to the decoration and toolbar views. - // @todo: BLOCKED_ON(Create.js, https://github.com/bergie/create/issues/133) - // Uncomment this once that issue is solved. - // editor.decorationView.stateChange(from, to); - // editor.toolbarView.stateChange(from, to); - }, - - /** - * Decorates an editor (PropertyEditor). - * - * Upon the page load, all appropriate editors are initialized and decorated - * (i.e. even before anything of the editing UI becomes visible; even before - * edit mode is enabled). - * - * @param editor - * The PropertyEditor widget object. - */ - decorateEditor: function(editor) { - // Toolbars are rendered "on-demand" (highlighting or activating). - // They are a sibling element before the editor's DOM element. - editor.toolbarView = new Drupal.edit.views.ToolbarView({ - editor: editor, - $storageWidgetEl: this.$el - }); - - // Decorate the editor's DOM element depending on its state. - editor.decorationView = new Drupal.edit.views.PropertyEditorDecorationView({ - el: editor.element, - editor: editor, - toolbarId: editor.toolbarView.getId() - }); - - // @todo: BLOCKED_ON(Create.js, https://github.com/bergie/create/issues/133) - // Get rid of this once that issue is solved. - editor.options.widget.options.stateChange.add(function(data) { - editor.decorationView.stateChange(data.previous, data.current); - editor.toolbarView.stateChange(data.previous, data.current); - }); - }, - - /** - * Undecorates an editor (PropertyEditor). - * - * Whenever a property has been updated, the old HTML will be replaced by - * the new (re-rendered) HTML. The EditableEntity widget will be destroyed, - * as will be the PropertyEditor widget. This method ensures Edit's editor - * views also are removed properly. - * - * @param editor - * The PropertyEditor widget object. - */ - undecorateEditor: function(editor) { - editor.toolbarView.undelegateEvents(); - editor.toolbarView.remove(); - delete editor.toolbarView; - editor.decorationView.undelegateEvents(); - // Don't call .remove() on the decoration view, because that would remove - // a potentially rerendered field. - delete editor.decorationView; - } - - }) - }); - -})(jQuery, _, Backbone, Drupal, VIE); diff --git a/core/modules/edit/js/edit.js b/core/modules/edit/js/edit.js index a819587..7e20f74 100644 --- a/core/modules/edit/js/edit.js +++ b/core/modules/edit/js/edit.js @@ -15,36 +15,45 @@ Drupal.edit.metadataCache = Drupal.edit.metadataCache || {}; Drupal.behaviors.edit = { views: { - contextualLinks: [] + contextualLinks: {}, + entities: {}, + editables: [] }, - models: {}, + collections: { + entities: null, + editables: null + }, attach: function(context) { var that = this; var $context = $(context); var $fields = $context.find('[data-edit-id]'); - var options = $.extend({}, this.defaults, (Drupal.edit || {})); + var options = $.extend({}, this.defaults, (drupalSettings.edit || {})); + var Collection; - // Initialize the Edit app. - $('body').once('edit-init', $.proxy(this.init, this, options)); + // Store a collection of entity models. + if (!this.collections.entities) { + Collection = Backbone.Collection.extend({ + model: Drupal.edit.EntityModel + }); + this.collections.entities = new Collection(); + } - var annotateField = function(field) { - if (_.has(Drupal.edit.metadataCache, field.editID)) { - var meta = Drupal.edit.metadataCache[field.editID]; + // Store a collection of editables models. + if (!this.collections.editables) { + Collection = Backbone.Collection.extend({ + model: Drupal.edit.EditableModel + }); + this.collections.editables = new Collection(); + } - field.$el.addClass((meta.access) ? 'edit-allowed' : 'edit-disallowed'); - if (meta.access) { - field.$el - .attr('data-edit-field-label', meta.label) - .attr('aria-label', meta.aria) - .addClass('edit-field edit-type-' + ((meta.editor === 'form') ? 'form' : 'direct')); - } + // Respond to entity model change events. + this.collections.entities + .on('change:isActive', this.onEntityActiveChange, this); - return true; - } - return false; - }; + // Initialize the Edit app. + $('body').once('edit-init', $.proxy(this.init, this, options)); // Find all fields in the context without metadata. var fieldsToAnnotate = _.map($fields.not('.edit-allowed, .edit-disallowed'), function(el) { @@ -55,16 +64,15 @@ Drupal.behaviors.edit = { // Fields whose metadata is known (typically when they were just modified) // can be annotated immediately, those remaining must be requested. var remainingFieldsToAnnotate = _.reduce(fieldsToAnnotate, function(result, field) { - if (!annotateField(field)) { + var isAnnotated = $.proxy(that.annotateField, that, field)(); + if (!isAnnotated) { result.push(field); } return result; }, []); // Make fields that could be annotated immediately available for editing. - $.proxy(this.findEditableProperties, Drupal.edit.app, $context)(); - - + this.findEditableProperties($context, options); if (remainingFieldsToAnnotate.length) { $(window).ready(function() { @@ -80,10 +88,10 @@ Drupal.behaviors.edit = { }); // Annotate the remaining fields based on the updated access cache. - _.each(remainingFieldsToAnnotate, annotateField); + _.each(remainingFieldsToAnnotate, $.proxy(that.annotateField, that)); // Make fields that could be annotated immediately available for editing. - $.proxy(that.findEditableProperties, Drupal.edit.app, $context)(); + that.findEditableProperties($context, options); } }); }); @@ -94,24 +102,44 @@ Drupal.behaviors.edit = { var that = this; // Instantiate EditAppView, which is the controller of it all. EditAppModel // instance tracks global state (viewing/editing in-place). - var appModel = new Drupal.edit.models.EditAppModel(); - var app = new Drupal.edit.EditAppView({ + var appModel = new Drupal.edit.AppModel(); + var app = new Drupal.edit.AppView({ el: $('body').get(0), model: appModel }); + var entityModel; + + // Create a view for the Entity just once. + $('[data-edit-entity]').once('editEntity', function (index) { + var $this = $(this); + var id = $this.data('edit-entity'); + + entityModel = new Drupal.edit.EntityModel({ + uri: id + }); + that.collections.entities.add(entityModel); + + // Create a View for the entity. + that.views.entities[id] = new Drupal.edit.EntityView($.extend({ + el: this, + model: entityModel + }, options)); + + // Create a view for the contextual links. + $this.find('.contextual-links') + .each(function () { + // Instantiate ContextualLinkView. + that.views.contextualLinks[id] = new Drupal.edit.ContextualLinkView($.extend({ + el: this, + model: entityModel + }, options)); + }); + }); // Add "Quick edit" links to all contextual menus where editing the full // node is possible. // @todo Generalize this to work for all entities. - $('ul.contextual-links') - .each(function() { - // Instantiate ContextualLinkView. - that.views.contextualLinks.push(new Drupal.edit.views.ContextualLinkView($.extend({ - el: this, - model: appModel, - entity: $(this).parents('[data-edit-entity]').attr('data-edit-entity') - }, options))); - }); + // For now, we work with a singleton app, because for Drupal.behaviors to be // able to discover new editable properties that get AJAXed in, it must know @@ -119,13 +147,6 @@ Drupal.behaviors.edit = { Drupal.edit.app = app; }, - defaults: { - strings: { - quickEdit: Drupal.t('Quick edit'), - stopQuickEdit: Drupal.t('Stop quick edit') - } - }, - /** * Finds editable properties within a given context. * @@ -135,54 +156,61 @@ Drupal.behaviors.edit = { * @param $context * A jQuery-wrapped context DOM element within which will be searched. */ - findEditableProperties: function($context) { + findEditableProperties: function($context, options) { var that = this; - var model = this.model; + var app = Drupal.edit.app; + var model = app.model; var activeEntity = model.get('activeEntity'); - var entityView; + options = options || {}; Drupal.edit.app.domService.findSubjectElements($context).each(function() { var $element = $(this); - - // Create a view for the Entity just once. - $element.closest('.node').once('editEntity', function (index) { - entityView = new Drupal.edit.views.EntityView({ - el: this, - model: Drupal.edit.app.model - }); - that.entityViews.push(entityView); - }); + var entityId = $element.closest('[data-edit-entity]').data('edit-entity'); + var editableModel, editableView; // Ignore editable properties for which we've already set up Create.js. - if (that.$entityElements.index($element) !== -1) { + if (app.$entityElements.index($element) !== -1) { return; } // Instantiate an Editable. var editable = new Drupal.edit.Editable({ element: $element, - vie: that.vie, + vie: app.vie, disabled: true, state: 'inactive', acceptStateChange: that.acceptEditorStateChange, - entityView: entityView, + entityView: that.views.entities[entityId], stateChange: jQuery.Callbacks(), decoratePropertyEditor: function(data) { - that.decorateEditor(data.propertyEditor); + app.decorateEditor(data.propertyEditor); } }); editable.options.stateChange.add(function(data) { - that.editorStateChange(data.previous, data.current, data.propertyEditor); + app.editorStateChange(data.previous, data.current, data.propertyEditor); }); // Add this new Editable widget element to the list. - that.editables.push(editable); + app.editables.push(editable); + + // Make a real editable. This isn't doing anything yet. + editableModel = new Drupal.edit.EditableModel({ + state: 'inactive' + }); + that.collections.editables.add(editableModel); + + editableView = new Drupal.edit.EditableView($.extend({ + el: this, + model: editableModel, + entityModel: that.collections.entities.where({uri: entityId})[0] + }, options)); + that.views.editables.push(editable); // This event is triggered just before Edit removes an EditableEntity // widget, so that we can do proper clean-up. editable.options.element .on('destroyedPropertyEditor.edit', function(event, editor) { - that.undecorateEditor(editor); + app.undecorateEditor(editor); // that.$entityElements = that.$entityElements.not($(this)); }); // Transition the new PropertyEditor into the default state. @@ -196,23 +224,1555 @@ Drupal.behaviors.edit = { editable.invoke('setState', 'candidate'); } }); + }, + + annotateField: function (field) { + if (_.has(Drupal.edit.metadataCache, field.editID)) { + var meta = Drupal.edit.metadataCache[field.editID]; - for (var i = 0, il = this.entityViews.length; i < il; i++) { - var entityView = this.entityViews[i]; - if (entityView.$el.data('edit-entity') === activeEntity) { - entityView.highlight(); + field.$el.addClass((meta.access) ? 'edit-allowed' : 'edit-disallowed'); + if (meta.access) { + field.$el + .attr('data-edit-field-label', meta.label) + .attr('aria-label', meta.aria) + .addClass('edit-field edit-type-' + ((meta.editor === 'form') ? 'form' : 'direct')); } + + return true; + } + return false; + }, + + /** + * + */ + onEntityActiveChange: function (changedModel, index, options) { + var uri = changedModel.get('uri'); + _.each(changedModel.collection.models, function (model, index, collection, options) { + // Don't set the state of the changed model, just the others. + if (model.get('uri') !== uri && !('isActive' in model.changed)) { + model.set({'isActive': false}); + } + }); + }, + + defaults: { + strings: { + quickEdit: Drupal.t('Quick edit'), + stopQuickEdit: Drupal.t('Stop quick edit') } - this.entityViews } }; $.extend(Drupal.edit, { + + /** + * + */ + AppModel: Backbone.Model.extend({ + defaults: { + activeEntity: null, + highlightedEditor: null, + activeEditor: null, + // Reference to a ModalView-instance if a transition requires confirmation. + activeModal: null + } + }), + + /** + * + */ + AppView: Backbone.View.extend({ + vie: null, + domService: null, + + // Configuration for state handling. + states: [], + activeEditorStates: [], + singleEditorStates: [], + + // State. + $entityElements: null, + editables: [], + entityViews: [], + + /** + * Implements Backbone Views' initialize() function. + */ + initialize: function() { + _.bindAll(this, 'appStateChange', 'acceptEditorStateChange', 'editorStateChange'); + + // VIE instance for Edit. + this.vie = new VIE(); + // Use our custom DOM parsing service until RDFa is available. + this.vie.use(new this.vie.EditService()); + this.domService = this.vie.service('edit'); + + // Instantiate configuration for state handling. + this.states = [ + null, 'inactive', 'candidate', 'highlighted', + 'activating', 'active', 'changed', 'saving', 'saved', 'invalid' + ]; + this.activeEditorStates = ['activating', 'active']; + this.singleEditorStates = _.union(['highlighted'], this.activeEditorStates); + + this.$entityElements = $([]); + + // Use Create's Storage widget. + this.$el.createStorage({ + vie: this.vie, + editableNs: 'createeditable' + }); + + // When view/edit mode is toggled in the menu, update the editor widgets. + this.model.on('change:activeEntity', this.appStateChange); + }, + + /** + * Sets the state of PropertyEditor widgets when edit mode begins or ends. + * + * Should be called whenever EditAppModel's "activeEntity" changes. + */ + appStateChange: function() { + // @todo: BLOCKED_ON(Create.js, https://github.com/bergie/create/issues/133, https://github.com/bergie/create/issues/140) + // We're currently setting the state on EditableEntity widgets instead of + // PropertyEditor widgets, because of + // https://github.com/bergie/create/issues/133. + + var editables = this.editables; + var activeEntity = this.model.get('activeEntity'); + + // First, change the status of all PropertyEditor widgets to 'inactive'. + for (var i = 0, il = editables.length; i < il; i++) { + var editable = editables[i]; + editable.invoke('setState', 'inactive', null, {reason: 'stop'}); + // Then, change the status of PropertyEditor widgets of the currently + // active entity to 'candidate'. + var entityOfProperty = editable.invoke('get', 'model'); + // If the new PropertyEditor is for the entity that's currently being + // edited, then transition it to the 'candidate' state. + // (This happens when a field was modified and is re-rendered.) + if (entityOfProperty.getSubjectUri() === activeEntity) { + editable.invoke('setState', 'candidate'); + } + } + }, + + /** + * Accepts or reject editor (PropertyEditor) state changes. + * + * This is what ensures that the app is in control of what happens. + * + * @param from + * The previous state. + * @param to + * The new state. + * @param predicate + * The predicate of the property for which the state change is happening. + * @param context + * The context that is trying to trigger the state change. + * @param callback + * The callback function that should receive the state acceptance result. + */ + acceptEditorStateChange: function(from, to, predicate, context, callback) { + var accept = true; + + // If the app is in view mode, then reject all state changes except for + // those to 'inactive'. + if (context && context.reason === 'stop') { + if (from === 'candidate' && to === 'inactive') { + accept = true; + } + } + // Handling of edit mode state changes is more granular. + else { + // In general, enforce the states sequence. Disallow going back from a + // "later" state to an "earlier" state, except in explicitly allowed + // cases. + if (_.indexOf(this.states, from) > _.indexOf(this.states, to)) { + accept = false; + // Allow: activating/active -> candidate. + // Necessary to stop editing a property. + 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. + else if ((from === 'changed' || from === 'invalid') && to === 'candidate') { + accept = true; + } + // Allow: highlighted -> candidate. + // Necessary to stop highlighting a property. + else if (from === 'highlighted' && to === 'candidate') { + accept = true; + } + // Allow: saved -> candidate. + // Necessary when successfully saved a property. + else if (from === 'saved' && to === 'candidate') { + accept = true; + } + // Allow: invalid -> saving. + // Necessary to be able to save a corrected, invalid property. + else if (from === 'invalid' && to === 'saving') { + 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; + } + } + // Reject going from activating/active to candidate because of a + // mouseleave. + else if (_.indexOf(this.activeEditorStates, from) !== -1 && to === 'candidate') { + if (context && context.reason === 'mouseleave') { + accept = false; + } + } + // When attempting to stop editing a changed/invalid property, ask for + // confirmation. + else if ((from === 'changed' || from === 'invalid') && to === 'candidate') { + if (context && context.reason === 'mouseleave') { + accept = false; + } + else { + // Check whether the transition has been confirmed? + if (context && context.confirmed) { + accept = true; + } + // Confirm this transition. + else { + // The callback will be called from the helper function. + this._confirmStopEditing(callback); + return; + } + } + } + } + } + + callback(accept); + }, + + /** + * Asks the user to confirm whether he wants to stop editing via a modal. + * + * @param acceptCallback + * The callback function as passed to acceptEditorStateChange(). This + * callback function will be called with the user's choice. + * + * @see acceptEditorStateChange() + */ + _confirmStopEditing: function(acceptCallback) { + // Only instantiate if there isn't a modal instance visible yet. + if (!this.model.get('activeModal')) { + var that = this; + var modal = new Drupal.edit.ModalView({ + 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') } + ], + callback: function(action) { + // The active modal has been removed. + that.model.set('activeModal', null); + if (action === 'discard') { + acceptCallback(true); + } + else { + acceptCallback(false); + var editor = that.model.get('activeEditor'); + editor.options.widget.setState('saving', editor.options.property); + } + } + }); + this.model.set('activeModal', modal); + // The modal will set the activeModal property on the model when rendering + // to prevent multiple modals from being instantiated. + modal.render(); + } + else { + // Reject as there is still an open transition waiting for confirmation. + acceptCallback(false); + } + }, + + /** + * Reacts to editor (PropertyEditor) state changes; tracks global state. + * + * @param from + * The previous state. + * @param to + * The new state. + * @param editor + * The PropertyEditor widget object. + */ + editorStateChange: function(from, to, editor) { + // @todo: BLOCKED_ON(Create.js, https://github.com/bergie/create/issues/133) + // Get rid of this once that issue is solved. + if (!editor) { + return; + } + else { + editor.stateChange(from, to); + } + + // Keep track of the highlighted editor in the global state. + if (_.indexOf(this.singleEditorStates, to) !== -1 && this.model.get('highlightedEditor') !== editor) { + this.model.set('highlightedEditor', editor); + } + else if (this.model.get('highlightedEditor') === editor && to === 'candidate') { + this.model.set('highlightedEditor', null); + } + + // Keep track of the active editor in the global state. + if (_.indexOf(this.activeEditorStates, to) !== -1 && this.model.get('activeEditor') !== editor) { + this.model.set('activeEditor', editor); + } + else if (this.model.get('activeEditor') === editor && to === 'candidate') { + // Discarded if it transitions from a changed state to 'candidate'. + if (from === 'changed' || from === 'invalid') { + // Retrieve the storage widget from DOM. + var createStorageWidget = this.$el.data('DrupalCreateStorage'); + // Revert changes in the model, this will trigger the direct editable + // content to be reset and redrawn. + createStorageWidget.revertChanges(editor.options.entity); + } + this.model.set('activeEditor', null); + } + + // Propagate the state change to the decoration and toolbar views. + // @todo: BLOCKED_ON(Create.js, https://github.com/bergie/create/issues/133) + // Uncomment this once that issue is solved. + // editor.decorationView.stateChange(from, to); + // editor.toolbarView.stateChange(from, to); + }, + + /** + * Decorates an editor (PropertyEditor). + * + * Upon the page load, all appropriate editors are initialized and decorated + * (i.e. even before anything of the editing UI becomes visible; even before + * edit mode is enabled). + * + * @param editor + * The PropertyEditor widget object. + */ + decorateEditor: function(editor) { + // Toolbars are rendered "on-demand" (highlighting or activating). + // They are a sibling element before the editor's DOM element. + editor.toolbarView = new Drupal.edit.ToolbarView({ + editor: editor, + $storageWidgetEl: this.$el + }); + + // Decorate the editor's DOM element depending on its state. + editor.decorationView = new Drupal.edit.PropertyEditorDecorationView({ + el: editor.element, + editor: editor, + toolbarId: editor.toolbarView.getId() + }); + + // @todo: BLOCKED_ON(Create.js, https://github.com/bergie/create/issues/133) + // Get rid of this once that issue is solved. + editor.options.widget.options.stateChange.add(function(data) { + editor.decorationView.stateChange(data.previous, data.current); + editor.toolbarView.stateChange(data.previous, data.current); + }); + }, + + /** + * Undecorates an editor (PropertyEditor). + * + * Whenever a property has been updated, the old HTML will be replaced by + * the new (re-rendered) HTML. The EditableEntity widget will be destroyed, + * as will be the PropertyEditor widget. This method ensures Edit's editor + * views also are removed properly. + * + * @param editor + * The PropertyEditor widget object. + */ + undecorateEditor: function(editor) { + editor.toolbarView.undelegateEvents(); + editor.toolbarView.remove(); + delete editor.toolbarView; + editor.decorationView.undelegateEvents(); + // Don't call .remove() on the decoration view, because that would remove + // a potentially rerendered field. + delete editor.decorationView; + } + + }), + + /** + * + */ + EntityModel: Backbone.Model.extend({ + defaults: { + isActive: false + } + }), + + /** + * + */ + EntityView: Backbone.View.extend({ + + events: {}, + + /** + * Implements Backbone Views' initialize() function. + */ + initialize: function (options) { + this.strings = this.options.strings; + this.model.on('change:isActive', this.render, this); + }, + + /** + * Implements Backbone.View.prototype.render(). + */ + render: function (model, value, options) { + var isActive = this.model.get('isActive'); + this.$el.toggleClass('edit-active', isActive); + + return this; + }, + + /** + * Listens to editor state changes. + */ + stateChange: function (from, to) { + switch (to) { + case 'inactive': + console.log(to); + break; + case 'candidate': + console.log(to); + break; + case 'highlighted': + console.log(to); + break; + case 'activating': + console.log(to); + break; + case 'active': + console.log(to); + break; + case 'changed': + console.log(to); + break; + case 'saving': + console.log(to); + break; + case 'saved': + console.log(to); + break; + case 'invalid': + console.log(to); + break; + } + } + }), + + /** + * + */ EditableModel: Backbone.Model.extend({ defaults: { state: 'inactive', propertyEditor: null, } + }), + + /** + * + */ + EditableView: Backbone.View.extend({ + events: {}, + initialize: function () { + this.entityModel = this.options.entityModel; + + this.model.on('change:state', this.stateChange, this); + this.entityModel.on('change:isActive', this.onEntityActiveChange, this); + }, + render: function () { + + }, + onEntityActiveChange: function (model, value, options) { + this.model.set('state', (value) ? 'candidate' : 'inactive'); + }, + /** + * Listens to editor state changes. + */ + stateChange: function (model, value, options) { + var from = model._previousAttributes.state || ''; + var to = value || ''; + switch (to) { + case 'inactive': + console.log(to); + break; + case 'candidate': + console.log(to); + break; + case 'highlighted': + console.log(to); + break; + case 'activating': + console.log(to); + break; + case 'active': + console.log(to); + break; + case 'changed': + console.log(to); + break; + case 'saving': + console.log(to); + break; + case 'saved': + console.log(to); + break; + case 'invalid': + console.log(to); + break; + } + this.render(); + } + }), + + /** + * + */ + ToolbarView: Backbone.View.extend({ + + editor: null, + $storageWidgetEl: null, + + entity: null, + predicate : null, + editorName: 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' + }, + + /** + * Implements Backbone Views' initialize() function. + * + * @param options + * An object with the following keys: + * - editor: the editor object with an 'options' object that has these keys: + * * entity: the VIE entity for the property. + * * property: the predicate of the property. + * * editorName: the editor name. + * * element: the jQuery-wrapped editor DOM element + * - $storageWidgetEl: the DOM element on which the Create Storage widget is + * initialized. + */ + initialize: function(options) { + + $(document) + .on('editStateChange', $.proxy(this.stateChange, this)); + + this.editor = options.editor; + this.$storageWidgetEl = options.$storageWidgetEl; + + this.entity = this.editor.options.entity; + this.predicate = this.editor.options.property; + this.editorName = this.editor.options.editorName; + + this._loader = null; + this._loaderVisibleStart = 0; + + // Generate a DOM-compatible ID for the toolbar DOM element. + this._id = Drupal.edit.util.calcPropertyID(this.entity, this.predicate).replace(/\//g, '_'); + + + // Render toolbar. + this.setElement($(Drupal.theme('editToolbarContainer', { + id: this.getId() + }))); + + // Insert in DOM. + if (this.editor.element.css('display') === 'inline') { + this.$el.prependTo(this.editor.element.offsetParent()); + var pos = this.editor.element.position(); + this.$el.css('left', pos.left).css('top', pos.top); + } + else { + this.$el.insertBefore(this.editor.element); + } + }, + + /** + * Listens to editor state changes. + */ + stateChange: function(from, to) { + switch (to) { + case 'inactive': + if (from) { + this.remove(); + if (this.editorName !== 'form') { + Backbone.syncDirectCleanUp(); + } + } + break; + case 'candidate': + if (from === 'inactive') { + this.render(); + } + else { + if (this.editorName !== 'form') { + Backbone.syncDirectCleanUp(); + } + // 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.getEditUISetting('padding')) { + this._unpad(); + } + } + 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); + if (this.getEditUISetting('fullWidthToolbar')) { + this.$el.addClass('edit-toolbar-fullwidth'); + } + + if (this.getEditUISetting('padding')) { + this._pad(); + } + if (this.getEditUISetting('unifiedToolbar')) { + this.insertWYSIWYGToolGroups(); + } + break; + case 'changed': + this.$el + .find('button.save') + .addClass('blue-button') + .removeClass('gray-button'); + break; + case 'saving': + this.setLoadingIndicator(true); + this.save(); + break; + case 'saved': + this.setLoadingIndicator(false); + break; + case 'invalid': + this.setLoadingIndicator(false); + break; + } + }, + + /** + * Saves a property. + * + * This method deals with the complexity of the editor-dependent ways of + * inserting updated content and showing validation error messages. + * + * One might argue that this does not belong in a view. However, there is no + * actual "save" logic here, that lives in Backbone.sync. This is just some + * glue code, along with the logic for inserting updated content as well as + * showing validation error messages, the latter of which is certainly okay. + */ + save: function() { + var that = this; + var editor = this.editor; + var editableEntity = editor.options.widget; + var entity = editor.options.entity; + var predicate = editor.options.property; + + // Use Create.js' Storage widget to handle saving. (Uses Backbone.sync.) + this.$storageWidgetEl.createStorage('saveRemote', entity, { + editor: editor, + + // Successfully saved without validation errors. + success: function (model) { + editableEntity.setState('saved', predicate); + + // Now that the changes to this property have been saved, the saved + // attributes are now the "original" attributes. + entity._originalAttributes = entity._previousAttributes = _.clone(entity.attributes); + + // Get data necessary to rerender property before it is unavailable. + var updatedProperty = entity.get(predicate + '/rendered'); + var $propertyWrapper = editor.element.closest('.edit-field'); + var $context = $propertyWrapper.parent(); + + editableEntity.setState('candidate', predicate); + // Unset the property, because it will be parsed again from the DOM, iff + // its new value causes it to still be rendered. + entity.unset(predicate, { silent: true }); + entity.unset(predicate + '/rendered', { silent: true }); + // Trigger event to allow for proper clean-up of editor-specific views. + editor.element.trigger('destroyedPropertyEditor.edit', editor); + + // Replace the old content with the new content. + $propertyWrapper.replaceWith(updatedProperty); + Drupal.attachBehaviors($context); + }, + + // Save attempted but failed due to validation errors. + error: function (validationErrorMessages) { + editableEntity.setState('invalid', predicate); + + if (that.editorName === 'form') { + editor.$formContainer + .find('.edit-form') + .addClass('edit-validation-error') + .find('form') + .prepend(validationErrorMessages); + } + else { + var $errors = $('
') + .append(validationErrorMessages); + editor.element + .addClass('edit-validation-error') + .after($errors); + } + } + }); + }, + + /** + * When the user clicks the info label, nothing should happen. + * @note currently redirects the click.edit-event to the editor DOM element. + * + * @param event + */ + onClickInfoLabel: function(event) { + event.stopPropagation(); + event.preventDefault(); + // Redirects the event to the editor DOM element. + this.editor.element.trigger('click.edit'); + }, + + /** + * A mouseleave to the editor doesn't matter; a mouseleave to something else + * counts as a mouseleave on the editor itself. + * + * @param event + */ + onMouseLeave: function(event) { + var el = this.editor.element[0]; + if (event.relatedTarget != el && !$.contains(el, event.relatedTarget)) { + this.editor.element.trigger('mouseleave.edit'); + } + event.stopPropagation(); + }, + + /** + * Upon clicking "Save", trigger a custom event to save this property. + * + * @param event + */ + onClickSave: function(event) { + event.stopPropagation(); + event.preventDefault(); + this.editor.options.widget.setState('saving', this.predicate); + }, + + /** + * Upon clicking "Close", trigger a custom event to stop editing. + * + * @param event + */ + onClickClose: function(event) { + event.stopPropagation(); + event.preventDefault(); + this.editor.options.widget.setState('candidate', this.predicate, { 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 bool 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; + } + }, + + startHighlight: function() { + // We get the label to show for this property from VIE's type system. + var label = this.predicate; + var attributeDef = this.entity.get('@type').attributes.get(this.predicate); + if (attributeDef && attributeDef.metadata) { + label = attributeDef.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); + }, + + 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'); + }, + + /** + * Retrieves a setting of the editor-specific Edit UI integration. + * + * @see Drupal.edit.util.getEditUISetting(). + */ + getEditUISetting: function(setting) { + return Drupal.edit.util.getEditUISetting(this.editor, setting); + }, + + /** + * Adjusts the toolbar to accomodate padding on the PropertyEditor widget. + * + * @see PropertyEditorDecorationView._pad(). + */ + _pad: function() { + // The whole toolbar must move to the top when the property's DOM element + // is displayed inline. + if (this.editor.element.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.getEditUISetting('fullWidthToolbar')) { + $hf.css({ width: this.editor.element.width() + 10 }); + } + }, + + /** + * Undoes the changes made by _pad(). + * + * @see PropertyEditorDecorationView._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.getEditUISetting('fullWidthToolbar')) { + $hf.css({ width: '' }); + } + }, + + insertWYSIWYGToolGroups: function() { + this.$el + .find('.edit-toolbar') + .append(Drupal.theme('editToolgroup', { + id: this.getFloatedWysiwygToolgroupId(), + classes: 'wysiwyg-floated', + buttons: [] + })) + .append(Drupal.theme('editToolgroup', { + id: this.getMainWysiwygToolgroupId(), + classes: 'wysiwyg-main', + buttons: [] + })); + + // Animate the toolgroups into visibility. + var that = this; + setTimeout(function () { + that.show('wysiwyg-floated'); + that.show('wysiwyg-main'); + }, 0); + }, + + /** + * Renders the Toolbar's markup into the DOM. + * + * Note: depending on whether the 'display' property of the $el for which a + * toolbar is being inserted into the DOM, it will be inserted differently. + */ + render: function () { + return this; + }, + + /** + * Retrieves the ID for this toolbar's container. + * + * Only used to make sane hovering behavior possible. + * + * @return string + * A string that can be used as the ID for this toolbar's container. + */ + getId: function () { + return 'edit-toolbar-for-' + this._id; + }, + + /** + * Retrieves the ID for this toolbar's floating WYSIWYG toolgroup. + * + * Used to provide an abstraction for any WYSIWYG editor to plug in. + * + * @return string + * A string that can be used as the ID. + */ + getFloatedWysiwygToolgroupId: function () { + return 'edit-wysiwyg-floated-toolgroup-for-' + this._id; + }, + + /** + * Retrieves the ID for this toolbar's main WYSIWYG toolgroup. + * + * Used to provide an abstraction for any WYSIWYG editor to plug in. + * + * @return string + * A string that can be used as the ID. + */ + getMainWysiwygToolgroupId: function () { + return 'edit-wysiwyg-main-toolgroup-for-' + this._id; + }, + + /** + * 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. + */ + addClass: function (toolgroup, classes) { + this._find(toolgroup).addClass(classes); + }, + + /** + * Removes classes from a toolgroup. + * + * @param string toolgroup + * A toolgroup name. + */ + removeClass: function (toolgroup, classes) { + this._find(toolgroup).removeClass(classes); + }, + + /** + * Finds a toolgroup. + * + * @param string toolgroup + * A toolgroup name. + */ + _find: function (toolgroup) { + return this.$el.find('.edit-toolbar .edit-toolgroup.' + toolgroup); + } + }), + + /** + * + */ + ContextualLinkView: Backbone.View.extend({ + + entity: null, + + events: { + 'click .quick-edit a': 'onClick' + }, + + /** + * Implements Backbone Views' initialize() function. + * + * @param options + * An object with the following keys: + * - entity: the entity ID (e.g. node/1) of the entity + */ + initialize: function (options) { + this.entity = options.entity; + this.strings = options.strings; + + // Build the DOM elements. + this.$el + .find('li.node-edit, li.taxonomy-edit, li.comment-edit, li.custom-block-edit') + .before('