From bceb85e8d469f14b211d9c8c8a9ff8388d696d2f Mon Sep 17 00:00:00 2001 From: webchick Date: Fri, 26 Apr 2013 08:52:01 -0700 Subject: [PATCH] Issue #1943776 by Wim Leers, nod_: In-place editors (Create.js PropertyEditor widgets) should be loaded lazily. --- core/modules/edit/edit.module | 5 +- core/modules/edit/js/edit.js | 45 ++-- .../edit/lib/Drupal/edit/Ajax/BaseCommand.php | 2 +- .../lib/Drupal/edit/Ajax/FieldFormCommand.php | 2 +- .../edit/Ajax/FieldFormSavedCommand.php | 2 +- .../Ajax/FieldFormValidationErrorsCommand.php | 2 +- .../lib/Drupal/edit/Ajax/MetadataCommand.php | 27 +++ .../edit/lib/Drupal/edit/EditController.php | 22 +- .../edit/lib/Drupal/edit/EditorSelector.php | 17 +- .../Drupal/edit/EditorSelectorInterface.php | 5 +- .../lib/Drupal/edit/Tests/EditLoadingTest.php | 198 ++++++++++++++++++ core/modules/editor/js/editor.createjs.js | 2 +- 12 files changed, 290 insertions(+), 39 deletions(-) create mode 100644 core/modules/edit/lib/Drupal/edit/Ajax/MetadataCommand.php create mode 100644 core/modules/edit/lib/Drupal/edit/Tests/EditLoadingTest.php diff --git a/core/modules/edit/edit.module b/core/modules/edit/edit.module index 0125d45f70..1b94b913bf 100644 --- a/core/modules/edit/edit.module +++ b/core/modules/edit/edit.module @@ -53,9 +53,7 @@ function edit_contextual_links_view_alter(&$element, $items) { return; } - // Include the attachments and settings for all available editors. - $attachments = drupal_container()->get('edit.editor.selector')->getAllEditorAttachments(); - $element['#attached'] = NestedArray::mergeDeep($element['#attached'], $attachments); + $element['#attached']['library'][] = array('edit', 'edit'); } /** @@ -65,7 +63,6 @@ function edit_library_info() { $path = drupal_get_path('module', 'edit'); $options = array( 'scope' => 'footer', - 'attributes' => array('defer' => TRUE), ); $libraries['edit'] = array( 'title' => 'Edit: in-place editing', diff --git a/core/modules/edit/js/edit.js b/core/modules/edit/js/edit.js index f924e7b9b8..bf181ede15 100644 --- a/core/modules/edit/js/edit.js +++ b/core/modules/edit/js/edit.js @@ -57,24 +57,37 @@ Drupal.behaviors.edit = { if (remainingFieldsToAnnotate.length) { $(window).ready(function() { - $.ajax({ + var id = 'edit-load-metadata'; + // Create a temporary element to be able to use Drupal.ajax. + var $el = jQuery('
').appendTo('body'); + // Create a Drupal.ajax instance to load the form. + Drupal.ajax[id] = new Drupal.ajax(id, $el, { url: drupalSettings.edit.metadataURL, - type: 'POST', - data: { 'fields[]' : _.pluck(remainingFieldsToAnnotate, 'editID') }, - dataType: 'json', - success: function(results) { - // Update the metadata cache. - _.each(results, function(metadata, editID) { - Drupal.edit.metadataCache[editID] = metadata; - }); - - // Annotate the remaining fields based on the updated access cache. - _.each(remainingFieldsToAnnotate, annotateField); - - // Find editable fields, make them editable. - Drupal.edit.app.findEditableProperties($context); - } + event: 'edit-internal.edit', + submit: { 'fields[]' : _.pluck(remainingFieldsToAnnotate, 'editID') }, + progress: { type : null } // No progress indicator. }); + // Implement a scoped editMetaData AJAX command: calls the callback. + Drupal.ajax[id].commands.editMetadata = function(ajax, response, status) { + // Update the metadata cache. + _.each(response.data, function(metadata, editID) { + Drupal.edit.metadataCache[editID] = metadata; + }); + + // Annotate the remaining fields based on the updated access cache. + _.each(remainingFieldsToAnnotate, annotateField); + + // Find editable fields, make them editable. + Drupal.edit.app.findEditableProperties($context); + + // Delete the Drupal.ajax instance that called this very function. + delete Drupal.ajax[id]; + + // Also delete the temporary element. + // $el.remove(); + }; + // This will ensure our scoped editMetadata AJAX command gets called. + $el.trigger('edit-internal.edit'); }); } } diff --git a/core/modules/edit/lib/Drupal/edit/Ajax/BaseCommand.php b/core/modules/edit/lib/Drupal/edit/Ajax/BaseCommand.php index 32d325d656..3a07b7f981 100644 --- a/core/modules/edit/lib/Drupal/edit/Ajax/BaseCommand.php +++ b/core/modules/edit/lib/Drupal/edit/Ajax/BaseCommand.php @@ -2,7 +2,7 @@ /** * @file - * Definition of Drupal\Edit\Ajax\BaseCommand. + * Contains \Drupal\edit\Ajax\BaseCommand. */ namespace Drupal\edit\Ajax; diff --git a/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormCommand.php b/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormCommand.php index 76b01c5299..781e2ffe7b 100644 --- a/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormCommand.php +++ b/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormCommand.php @@ -2,7 +2,7 @@ /** * @file - * Definition of Drupal\edit\Ajax\FieldFormCommand. + * Contains \Drupal\edit\Ajax\FieldFormCommand. */ namespace Drupal\edit\Ajax; diff --git a/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormSavedCommand.php b/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormSavedCommand.php index d2a963060a..bdee56ec4d 100644 --- a/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormSavedCommand.php +++ b/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormSavedCommand.php @@ -2,7 +2,7 @@ /** * @file - * Definition of Drupal\edit\Ajax\FieldFormSavedCommand. + * Contains \Drupal\edit\Ajax\FieldFormSavedCommand. */ namespace Drupal\edit\Ajax; diff --git a/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormValidationErrorsCommand.php b/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormValidationErrorsCommand.php index a70372533a..a44be4b07d 100644 --- a/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormValidationErrorsCommand.php +++ b/core/modules/edit/lib/Drupal/edit/Ajax/FieldFormValidationErrorsCommand.php @@ -2,7 +2,7 @@ /** * @file - * Definition of Drupal\edit\Ajax\FieldFormValidationErrorsCommand. + * Contains \Drupal\edit\Ajax\FieldFormValidationErrorsCommand. */ namespace Drupal\edit\Ajax; diff --git a/core/modules/edit/lib/Drupal/edit/Ajax/MetadataCommand.php b/core/modules/edit/lib/Drupal/edit/Ajax/MetadataCommand.php new file mode 100644 index 0000000000..5f291cacaf --- /dev/null +++ b/core/modules/edit/lib/Drupal/edit/Ajax/MetadataCommand.php @@ -0,0 +1,27 @@ +request->get('fields'); if (!isset($fields)) { throw new NotFoundHttpException(); @@ -63,7 +66,20 @@ public function metadata(Request $request) { $metadata[$field] = $metadataGenerator->generate($entity, $instance, $langcode, $view_mode); } - return new JsonResponse($metadata); + $response->addCommand(new MetaDataCommand($metadata)); + + // Determine in-place editors and ensure their attachments are loaded. + $editors = array(); + foreach ($metadata as $edit_id => $field_metadata) { + if (isset($field_metadata['editor'])) { + $editors[] = $field_metadata['editor']; + } + } + $editorSelector = $this->container->get('edit.editor.selector'); + $elements['#attached'] = $editorSelector->getEditorAttachments($editors); + drupal_process_attached($elements); + + return $response; } /** diff --git a/core/modules/edit/lib/Drupal/edit/EditorSelector.php b/core/modules/edit/lib/Drupal/edit/EditorSelector.php index fe71340041..ce80defc92 100644 --- a/core/modules/edit/lib/Drupal/edit/EditorSelector.php +++ b/core/modules/edit/lib/Drupal/edit/EditorSelector.php @@ -41,7 +41,7 @@ public function __construct(PluginManagerInterface $editor_manager) { } /** - * Implements \Drupal\edit\EditorSelectorInterface::getEditor(). + * {@inheritdoc} */ public function getEditor($formatter_type, FieldInstance $instance, array $items) { // Build a static cache of the editors that have registered themselves as @@ -90,24 +90,20 @@ public function getEditor($formatter_type, FieldInstance $instance, array $items } /** - * Implements \Drupal\edit\EditorSelectorInterface::getAllEditorAttachments(). - * - * @todo Instead of loading all JS/CSS for all editors, load them lazily when - * needed. - * @todo The NestedArray stuff is wonky. + * {@inheritdoc} */ - public function getAllEditorAttachments() { + public function getEditorAttachments(array $editor_ids) { $attachments = array(); - $definitions = $this->editorManager->getDefinitions(); + $editor_ids = array_unique($editor_ids); // Editor plugins' attachments. - $editor_ids = array_keys($definitions); foreach ($editor_ids as $editor_id) { $editor = $this->editorManager->createInstance($editor_id); - $attachments[] = $editor->getAttachments();; + $attachments[] = $editor->getAttachments(); } // JavaScript settings for Edit. + $definitions = $this->editorManager->getDefinitions(); foreach ($definitions as $definition) { $attachments[] = array( // This will be used in Create.js' propertyEditorWidgetsConfiguration. @@ -124,4 +120,5 @@ public function getAllEditorAttachments() { return NestedArray::mergeDeepArray($attachments); } + } diff --git a/core/modules/edit/lib/Drupal/edit/EditorSelectorInterface.php b/core/modules/edit/lib/Drupal/edit/EditorSelectorInterface.php index e09dd1287b..990c207ac6 100644 --- a/core/modules/edit/lib/Drupal/edit/EditorSelectorInterface.php +++ b/core/modules/edit/lib/Drupal/edit/EditorSelectorInterface.php @@ -32,10 +32,13 @@ public function getEditor($formatter_type, FieldInstance $instance, array $items /** * Returns the attachments for all editors. * + * @param array $editor_ids + * A list of all in-place editor IDs that should be attached. + * * @return array * An array of attachments, for use with #attached. * * @see drupal_process_attached() */ - public function getAllEditorAttachments(); + public function getEditorAttachments(array $editor_ids); } diff --git a/core/modules/edit/lib/Drupal/edit/Tests/EditLoadingTest.php b/core/modules/edit/lib/Drupal/edit/Tests/EditLoadingTest.php new file mode 100644 index 0000000000..e1ce8514c3 --- /dev/null +++ b/core/modules/edit/lib/Drupal/edit/Tests/EditLoadingTest.php @@ -0,0 +1,198 @@ + 'In-place editing loading', + 'description' => 'Tests loading of in-place editing functionality and lazy loading of its in-place editors.', + 'group' => 'Edit', + ); + } + + function setUp() { + parent::setUp(); + + // Create a text format. + $filtered_html_format = entity_create('filter_format', array( + 'format' => 'filtered_html', + 'name' => 'Filtered HTML', + 'weight' => 0, + 'filters' => array(), + )); + $filtered_html_format->save(); + + // Create a node type. + $this->drupalCreateContentType(array( + 'type' => 'article', + 'name' => 'Article', + )); + + // Create one node of the above node type using the above text format. + $this->drupalCreateNode(array( + 'type' => 'article', + 'body' => array( + 0 => array( + 'value' => '

How are you?

', + 'format' => 'filtered_html', + ) + ) + )); + + // Create 2 users, the only difference being the ability to use in-place + // editing + $basic_permissions = array('access content', 'create article content', 'edit any article content', 'use text format filtered_html', 'access contextual links'); + $this->author_user = $this->drupalCreateUser($basic_permissions); + $this->editor_user = $this->drupalCreateUser(array_merge($basic_permissions, array('access in-place editing'))); + } + + /** + * Test the loading of Edit when a user doesn't have access to it. + */ + function testUserWithoutPermission() { + $this->drupalLogin($this->author_user); + $this->drupalGet('node/1'); + + // Settings, library and in-place editors. + $settings = $this->drupalGetSettings(); + $this->assertFalse(isset($settings['edit']), 'Edit settings do not exist.'); + $this->assertFalse(isset($settings['ajaxPageState']['js']['core/modules/edit/js/edit.js']), 'Edit library not loaded.'); + $this->assertFalse(isset($settings['ajaxPageState']['js']['core/modules/edit/js/createjs/editingWidgets/formwidget.js']), "'form' in-place editor not loaded."); + + // HTML annotation must always exist (to not break the render cache). + $this->assertRaw('data-edit-entity="node/1"'); + $this->assertRaw('data-edit-id="node/1/body/und/full"'); + + // Retrieving the metadata should result in an empty 403 response. + $response = $this->retrieveMetadata(array('node/1/body/und/full')); + $this->assertIdentical('{}', $response); + $this->assertResponse(403); + } + + /** + * Tests the loading of Edit when a user does have access to it. + * + * Also ensures lazy loading of in-place editors works. + */ + function testUserWithPermission() { + $this->drupalLogin($this->editor_user); + $this->drupalGet('node/1'); + + // Settings, library and in-place editors. + $settings = $this->drupalGetSettings(); + $this->assertTrue(isset($settings['edit']), 'Edit settings exist.'); + $this->assertTrue(isset($settings['ajaxPageState']['js']['core/modules/edit/js/edit.js']), 'Edit library loaded.'); + $this->assertFalse(isset($settings['ajaxPageState']['js']['core/modules/edit/js/createjs/editingWidgets/formwidget.js']), "'form' in-place editor not loaded."); + + // HTML annotation must always exist (to not break the render cache). + $this->assertRaw('data-edit-entity="node/1"'); + $this->assertRaw('data-edit-id="node/1/body/und/full"'); + + // Retrieving the metadata should result in a 200 response, containing: + // 1. a settings command with correct in-place editor metadata + // 2. an insert command that loads the required in-place editors + // 3. a metadata command with correct per-field metadata + $response = $this->retrieveMetadata(array('node/1/body/und/full')); + $this->assertResponse(200); + $ajax_commands = drupal_json_decode($response); + $this->assertIdentical(3, count($ajax_commands), 'The metadata HTTP request results in three AJAX commands.'); + + // First command: settings. + $this->assertIdentical('settings', $ajax_commands[0]['command'], 'The first AJAX command is a settings command.'); + $edit_editors = array( + 'direct' => array('widget' => 'direct'), + 'form' => array('widget' => 'formEditEditor'), + ); + $this->assertIdentical($edit_editors, $ajax_commands[0]['settings']['edit']['editors'], 'The settings command contains the expected settings.'); + + // Second command: insert libraries into DOM. + $this->assertIdentical('insert', $ajax_commands[1]['command'], 'The second AJAX command is an append command.'); + $command = new AppendCommand('body', '' . "\n"); + $this->assertIdentical($command->render(), $ajax_commands[1], 'The append command contains the expected data.'); + + // Third command: actual metadata. + $this->assertIdentical('editMetadata', $ajax_commands[2]['command'], 'The third AJAX command is an Edit metadata command.'); + $command = new MetadataCommand(array( + 'node/1/body/und/full' => array( + 'label' => 'Body', + 'access' => TRUE, + 'editor' => 'form', + 'aria' => 'Entity node 1, field Body' + ) + )); + $this->assertIdentical($command->render(), $ajax_commands[2], 'The Edit metadata command contains the expected metadata.'); + } + + /** + * Retrieve Edit metadata from the server. May also result in additional + * JavaScript settings and CSS/JS being loaded. + * + * @param array $ids + * An array of edit ids. + * + * @return string + * The response body. + */ + protected function retrieveMetadata($ids) { + // Build POST values. + $post = array(); + for ($i = 0; $i < count($ids); $i++) { + $post['fields[' . $i . ']'] = $ids[$i]; + } + + // Serialize POST values. + foreach ($post as $key => $value) { + // Encode according to application/x-www-form-urlencoded + // Both names and values needs to be urlencoded, according to + // http://www.w3.org/TR/html4/interact/forms.html#h-17.13.4.1 + $post[$key] = urlencode($key) . '=' . urlencode($value); + } + $post = implode('&', $post); + + // Add extra information to the POST data as ajax.js does. + $extra_post = ''; + $drupal_settings = $this->drupalSettings; + if (isset($drupal_settings['ajaxPageState'])) { + $extra_post .= '&' . urlencode('ajax_page_state[theme]') . '=' . urlencode($drupal_settings['ajaxPageState']['theme']); + $extra_post .= '&' . urlencode('ajax_page_state[theme_token]') . '=' . urlencode($drupal_settings['ajaxPageState']['theme_token']); + foreach ($drupal_settings['ajaxPageState']['css'] as $key => $value) { + $extra_post .= '&' . urlencode("ajax_page_state[css][$key]") . '=1'; + } + foreach ($drupal_settings['ajaxPageState']['js'] as $key => $value) { + $extra_post .= '&' . urlencode("ajax_page_state[js][$key]") . '=1'; + } + } + + // Perform HTTP request. + return $this->curlExec(array( + CURLOPT_URL => url('edit/metadata', array('absolute' => TRUE)), + CURLOPT_POST => TRUE, + CURLOPT_POSTFIELDS => $post . $extra_post, + CURLOPT_HTTPHEADER => array( + 'Accept: application/json', + 'Content-Type: application/x-www-form-urlencoded', + ), + )); + } +} diff --git a/core/modules/editor/js/editor.createjs.js b/core/modules/editor/js/editor.createjs.js index de15c7796c..693d9d91fc 100644 --- a/core/modules/editor/js/editor.createjs.js +++ b/core/modules/editor/js/editor.createjs.js @@ -18,7 +18,7 @@ // @todo D8: use jQuery UI Widget bridging. // @see http://drupal.org/node/1874934#comment-7124904 -jQuery.widget('Midgard.editor', jQuery.Midgard.direct, { +jQuery.widget('Midgard.editor', jQuery.Midgard.editWidget, { textFormat: null, textFormatHasTransformations: null, -- GitLab