Merge pull request #6 from frega/7.x-1.x

=Rough initial work on addressing issue #5 - Abstract form AJAX handling
frega · Oct 6, 2012 · cc913db · cc913db
2 parents 3af8c94 + a4a53dd
commit cc913db
Show file tree

Hide file tree

Showing 4 changed files with 307 additions and 175 deletions.
diff --git a/js/ajax.js b/js/ajax.js
@@ -8,76 +8,15 @@
 
 // Hide these in a ready to ensure that Drupal.ajax is set up first.
 $(function() {
-  Drupal.ajax.prototype.commands.edit_field_form = function(ajax, response, status) {
-    console.log('edit_field_form', Drupal.edit.state.get('editedEditable'), ajax, response, status);
-
-    // Only apply the form immediately if this form is currently being edited.
-    if (Drupal.edit.state.get('editedEditable') == response.id && ajax.$field.hasClass('edit-type-form')) {
-      Drupal.ajax.prototype.commands.insert(ajax, {
-        data: response.data,
-        selector: '.edit-form-container .placeholder'
-      });
-
-      // Indicate in the 'info' toolgroup that the form has loaded.
-      Drupal.edit.toolbar.removeClass(ajax.$editable, 'primary', 'info', 'loading');
-
-      // Detect changes in this form.
-      Drupal.edit.form.get(ajax.$editable)
-      .delegate(':input', 'formUpdated.edit', function() {
-        ajax.$editable
-        .data('edit-content-changed', true)
-        .trigger('edit-content-changed.edit');
-      })
-      .delegate('input', 'keypress.edit', function(event) {
-        if (event.keyCode == 13) {
-          return false;
-        }
-      });
-
-      var $submit = Drupal.edit.form.get(ajax.$editable).find('.edit-form-submit');
-      var element_settings = {
-        url : $submit.closest('form').attr('action'),
-        setClick : true,
-        event : 'click.edit',
-        progress : { type : 'throbber' },
-        // IPE-specific settings.
-        $editable : ajax.$editable,
-        $field : ajax.$field
-      };
-      var base = $submit.attr('id');
-      Drupal.ajax[base] = new Drupal.ajax(base, $submit[0], element_settings);
-
-      // Give focus to the first input in the form.
-      //$('.edit-form').find('form :input:visible:enabled:first').focus()
-    }
-    else if (Drupal.edit.state.get('editedEditable') == response.id && ajax.$field.hasClass('edit-type-direct')) {
-      Drupal.edit.state.set('directEditableFormResponse', response);
-      $('#edit_backstage').append(response.data);
-
-      var $submit = $('#edit_backstage form .edit-form-submit');
-      var element_settings = {
-        url : $submit.closest('form').attr('action'),
-        setClick : true,
-        event : 'click.edit',
-        progress : { type : 'throbber' },
-        // IPE-specific settings.
-        $editable : ajax.$editable,
-        $field : ajax.$field
-      };
-      var base = $submit.attr('id');
-      Drupal.ajax[base] = new Drupal.ajax(base, $submit[0], element_settings);
-    }
-    else {
-      console.log('queueing', response);
-    }
-
-    // Animations.
-    Drupal.edit.toolbar.show(ajax.$editable, 'secondary', 'ops');
-    ajax.$editable.trigger('edit-form-loaded.edit');
-  };
+  // these function should never be called as they are overridden by setting the
+  // respective Drupal.ajax[{base}].commands.edit_field_form|_saved methods in
+  // create/loadForm/saveForm  in ui-editables.
+  Drupal.ajax.prototype.commands.edit_field_form = function(ajax, response, status) {};
+  Drupal.ajax.prototype.commands.edit_field_form_saved = function(ajax, response, status) {};
+  // @todo: refactor this in a similar fashion & figure out where this is
+  // needed - probably direct editables.
   Drupal.ajax.prototype.commands.edit_field_rendered_without_transformation_filters = function(ajax, response, status) {
     console.log('edit_field_rendered_without_transformation_filters', ajax, response, status);
-
     if (Drupal.edit.state.get('editedEditable') == response.id
         && ajax.$field.hasClass('edit-type-direct')
         && ajax.$field.hasClass('edit-text-with-transformation-filters')
@@ -91,34 +30,6 @@ $(function() {
       Drupal.edit.editables._wysiwygify(ajax.$editable);
     }
   };
-  Drupal.ajax.prototype.commands.edit_field_form_saved = function(ajax, response, status) {
-    console.log('edit_field_form_saved', ajax, response, status);
-
-    // Stop the editing.
-    var currentEditorView = Drupal.edit.state.get('editedFieldView');
-    if (currentEditorView) {
-      currentEditorView.disableEditor();
-    }
-
-    // Response.data contains the updated rendering of the field, if any.
-    if (response.data) {
-      // Replace the old content with the new content.
-      // FIXME: Update the VIE entity instead
-      var $field = $('.edit-field[data-edit-id="' + response.id  + '"]');
-      var $parent = $field.parent();
-      if ($field.css('display') == 'inline') {
-        $parent.html(response.data);
-      }
-      else {
-        $field.replaceWith(response.data);
-      }
-
-      // Make the freshly rendered field(s) in-place-editable again.
-      if (currentEditorView) {
-        currentEditorView.enableEditor();
-      }
-    }
-  };
 });
 
 })(jQuery);
diff --git a/js/formwidget.js b/js/formwidget.js
@@ -1,46 +1,55 @@
-(function (jQuery, undefined) {
+(function ($, undefined) {
   // # Drupal form-based editing widget for Create.js
-  jQuery.widget('Drupal.drupalFormWidget', jQuery.Create.editWidget, {
+  $.widget('Drupal.drupalFormWidget', $.Create.editWidget, {
     options: {
       editorOptions: {},
       disabled: true
     },
-
+    // @todo: add a callback to do this in an proper async fashion.
     enable: function () {
+      console.log('Drupal.drupalFormWidget.enable');
       this.options.disabled = false;
       this.loadForm();
     },
 
     loadForm: function () {
-      if (Drupal.edit.form.create(this.element)) {
-        this.element
-        .addClass('edit-belowoverlay')
-        .removeClass('edit-highlighted edit-editable');
+      // Create the form asynchronously.
+      // @todo: use a different "factory" depending on editable type.
+      Drupal.edit.form.create(this.element, function($editable, $field) {
+        $editable
+          .addClass('edit-belowoverlay')
+          .removeClass('edit-highlighted edit-editable');
 
-        Drupal.edit.form.get(this.element)
+        Drupal.edit.form.get($editable)
         .find('.edit-form')
         .addClass('edit-editable edit-highlighted edit-editing')
-        .css('background-color', this.element.data('edit-background-color'));
-      }
-
-      var field = Drupal.edit.util.findFieldForEditable(this.element);
-      //Drupal.edit.editables._loadForm(this.element, field);
+        .css('background-color', $editable.data('edit-background-color'));
+      });
     },
 
     disable: function () {
+      console.log('Drupal.drupalFormWidget.disable');
       this.options.disabled = true;
-
+      // @todo: handle this better on the basis of the editable type.
+      // Currently we stuff forms into two places ...
       Drupal.edit.form.get(this.element).remove();
+      $('#edit_backstage form').remove();
+
+      // Revert the changes to classes applied in the the enable/loadForm
+      // methods above.
+      this.element
+        .removeClass('edit-belowoverlay')
+        .addClass('edit-highlighted edit-editable');
     },
 
     _initialize: function () {
       var self = this;
-      jQuery(this.element).bind('focus', function (event) {
-        self.options.activated(); 
+      $(this.element).bind('focus', function (event) {
+        self.options.activated();
       });
-      
-      jQuery(this.element).bind('blur', function (event) {
-        self.options.deactivated(); 
+
+      $(this.element).bind('blur', function (event) {
+        self.options.deactivated();
       });
     }
   });