From b8f99916916e3be338468cb8e4fe271318177be4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?"J.=20Rene=CC=81e=20Beach"?= Date: Thu, 18 Apr 2013 16:36:27 -0400 Subject: [PATCH] Issue #1678002-63 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: J. ReneĢe Beach --- core/modules/edit/edit.module | 1 + core/modules/edit/js/app.js | 20 +++++++++ core/modules/edit/js/views/entity-view.js | 62 ++++++++++++++++++++++++++++ core/modules/edit/js/views/toolbar-view.js | 31 +++++++------- 4 files changed, 100 insertions(+), 14 deletions(-) create mode 100644 core/modules/edit/js/views/entity-view.js diff --git a/core/modules/edit/edit.module b/core/modules/edit/edit.module index a6ee046..85af15f 100644 --- a/core/modules/edit/edit.module +++ b/core/modules/edit/edit.module @@ -82,6 +82,7 @@ function edit_library_info() { $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 index 14d76a0..06f2051 100644 --- a/core/modules/edit/js/app.js +++ b/core/modules/edit/js/app.js @@ -18,6 +18,7 @@ // State. $entityElements: null, + entityViews: [], /** * Implements Backbone Views' initialize() function. @@ -63,10 +64,20 @@ findEditableProperties: function($context) { var that = this; var activeEntity = this.model.get('activeEntity'); + var entityView; this.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); + }); + // Ignore editable properties for which we've already set up Create.js. if (that.$entityElements.index($element) !== -1) { return; @@ -79,6 +90,7 @@ disabled: true, state: 'inactive', acceptStateChange: that.acceptEditorStateChange, + entityView: entityView, statechange: function(event, data) { that.editorStateChange(data.previous, data.current, data.propertyEditor); }, @@ -133,6 +145,14 @@ $(this).createEditable('setState', 'candidate'); }); + 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(); + } + } + this.entityViews + // Manage the page's tab indexes. }, diff --git a/core/modules/edit/js/views/entity-view.js b/core/modules/edit/js/views/entity-view.js new file mode 100644 index 0000000..5021dd0 --- /dev/null +++ b/core/modules/edit/js/views/entity-view.js @@ -0,0 +1,62 @@ +/** + * @file + * A Backbone View that decorates an entity. + */ +(function($, Backbone, Drupal) { + +"use strict"; + +Drupal.edit = Drupal.edit || {}; +Drupal.edit.views = Drupal.edit.views || {}; +Drupal.edit.views.EntityView = Backbone.View.extend({ + + events: {}, + + /** + * Implements Backbone Views' initialize() function. + */ + initialize: function(options) { + }, + + /** + * 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; + } + }, + + highlight: function () { + this.$el.css('outline', '2px dotted red'); + } + +}); + +})(jQuery, Backbone, Drupal); diff --git a/core/modules/edit/js/views/toolbar-view.js b/core/modules/edit/js/views/toolbar-view.js index f4b2123..abba602 100644 --- a/core/modules/edit/js/views/toolbar-view.js +++ b/core/modules/edit/js/views/toolbar-view.js @@ -58,6 +58,22 @@ Drupal.edit.views.ToolbarView = Backbone.View.extend({ // 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); + } }, /** @@ -394,20 +410,7 @@ Drupal.edit.views.ToolbarView = Backbone.View.extend({ * toolbar is being inserted into the DOM, it will be inserted differently. */ render: function () { - // 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); - } + return this; }, /** -- 1.7.10.4