Issue #3265140 by Spokje, bnjmnm, lauriii, mstrelan, dww, Wim Leers, xjm,...

Issue #3265140 by Spokje, bnjmnm, lauriii, mstrelan, dww, Wim Leers, xjm, murilohp, daffie: Move QuickEditImageController from image to quickedit

core/modules/image/image.libraries.yml

@@ -3,19 +3,3 @@ admin:
   css:
     theme:
       css/image.admin.css: {}
-
-quickedit.inPlaceEditor.image:
-  version: VERSION
-  js:
-    js/editors/image.js: {}
-    js/theme.js: {}
-  css:
-    component:
-      css/editors/image.css: {}
-    theme:
-      css/editors/image.theme.css: {}
-  dependencies:
-    - core/jquery
-    - core/drupal
-    - core/internal.underscore
-    - quickedit/quickedit

core/modules/image/image.routing.yml

@@ -71,29 +71,3 @@ image.effect_edit_form:
 
 route_callbacks:
   - '\Drupal\image\Routing\ImageStyleRoutes::routes'
-
-image.upload:
-  path: '/quickedit/image/upload/{entity_type}/{entity}/{field_name}/{langcode}/{view_mode_id}'
-  defaults:
-    _controller: '\Drupal\image\Controller\QuickEditImageController::upload'
-  options:
-    parameters:
-      entity:
-        type: entity:{entity_type}
-  requirements:
-    _permission: 'access in-place editing'
-    _access_quickedit_entity_field: 'TRUE'
-    _method: 'POST'
-
-image.info:
-  path: '/quickedit/image/info/{entity_type}/{entity}/{field_name}/{langcode}/{view_mode_id}'
-  defaults:
-    _controller: '\Drupal\image\Controller\QuickEditImageController::getInfo'
-  options:
-    parameters:
-      entity:
-        type: entity:{entity_type}
-  requirements:
-    _permission: 'access in-place editing'
-    _access_quickedit_entity_field: 'TRUE'
-    _method: 'GET'

core/modules/image/js/theme.es6.js

-/**
- * @file
- * Provides theme functions for image Quick Edit's client-side HTML.
- */
-
-(function (Drupal) {
-  /**
-   * Theme function for validation errors of the Image in-place editor.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} settings.errors
-   *   Already escaped HTML representing error messages.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
-  Drupal.theme.quickeditImageErrors = function (settings) {
-    return `<div class="quickedit-image-errors">${settings.errors}</div>`;
-  };
-
-  /**
-   * Theme function for the dropzone element of the Image module's in-place
-   * editor.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} settings.state
-   *   State of the upload.
-   * @param {string} settings.text
-   *   Text to display inline with the dropzone element.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
-  Drupal.theme.quickeditImageDropzone = function (settings) {
-    return (
-      `<div class="quickedit-image-dropzone ${settings.state}">` +
-      '  <i class="quickedit-image-icon"></i>' +
-      `  <span class="quickedit-image-text">${settings.text}</span>` +
-      '</div>'
-    );
-  };
-
-  /**
-   * Theme function for the toolbar of the Image module's in-place editor.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {bool} settings.alt_field
-   *   Whether or not the "Alt" field is enabled for this field.
-   * @param {bool} settings.alt_field_required
-   *   Whether or not the "Alt" field is required for this field.
-   * @param {string} settings.alt
-   *   The current value for the "Alt" field.
-   * @param {bool} settings.title_field
-   *   Whether or not the "Title" field is enabled for this field.
-   * @param {bool} settings.title_field_required
-   *   Whether or not the "Title" field is required for this field.
-   * @param {string} settings.title
-   *   The current value for the "Title" field.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
-  Drupal.theme.quickeditImageToolbar = function (settings) {
-    let html = '<form class="quickedit-image-field-info">';
-    if (settings.alt_field) {
-      html +=
-        `<div><label for="alt" class="${
-          settings.alt_field_required ? 'required' : ''
-        }">${Drupal.t('Alternative text')}</label>` +
-        `<input type="text" placeholder="${settings.alt}" value="${
-          settings.alt
-        }" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` +
-        '  </div>';
-    }
-    if (settings.title_field) {
-      html +=
-        `<div><label for="title" class="${
-          settings.title_field_required ? 'form-required' : ''
-        }">${Drupal.t('Title')}</label>` +
-        `<input type="text" placeholder="${settings.title}" value="${
-          settings.title
-        }" name="title" ${settings.title_field_required ? 'required' : ''}/>` +
-        '</div>';
-    }
-    html += '</form>';
-
-    return html;
-  };
-})(Drupal);

core/modules/image/js/theme.js

-/**
-* DO NOT EDIT THIS FILE.
-* See the following change record for more information,
-* https://www.drupal.org/node/2815083
-* @preserve
-**/
-
-(function (Drupal) {
-  Drupal.theme.quickeditImageErrors = function (settings) {
-    return `<div class="quickedit-image-errors">${settings.errors}</div>`;
-  };
-
-  Drupal.theme.quickeditImageDropzone = function (settings) {
-    return `<div class="quickedit-image-dropzone ${settings.state}">` + '  <i class="quickedit-image-icon"></i>' + `  <span class="quickedit-image-text">${settings.text}</span>` + '</div>';
-  };
-
-  Drupal.theme.quickeditImageToolbar = function (settings) {
-    let html = '<form class="quickedit-image-field-info">';
-
-    if (settings.alt_field) {
-      html += `<div><label for="alt" class="${settings.alt_field_required ? 'required' : ''}">${Drupal.t('Alternative text')}</label>` + `<input type="text" placeholder="${settings.alt}" value="${settings.alt}" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` + '  </div>';
-    }
-
-    if (settings.title_field) {
-      html += `<div><label for="title" class="${settings.title_field_required ? 'form-required' : ''}">${Drupal.t('Title')}</label>` + `<input type="text" placeholder="${settings.title}" value="${settings.title}" name="title" ${settings.title_field_required ? 'required' : ''}/>` + '</div>';
-    }
-
-    html += '</form>';
-    return html;
-  };
-})(Drupal);
\ No newline at end of file

core/modules/image/css/editors/image.css → core/modules/quickedit/css/editors/image.css

 /**
  * @file
- * Functional styles for the Image module's in-place editor.
+ * Functional styles for the Quick Edit image in-place editor.
  */
 
 /**

core/themes/stable9/css/image/editors/image.theme.css → core/modules/quickedit/css/editors/image.theme.css

 /**
  * @file
- * Theme styles for the Image module's in-place editor.
+ * Theme styles for the Quick Edit image in-place editor.
  */
 
 .quickedit-image-dropzone {
@@ -22,11 +22,11 @@
 }
 
 .quickedit-image-dropzone.upload .quickedit-image-icon {
-  background-image: url("../../../../../modules/image/images/upload.svg");
+  background-image: url("../../../../../modules/quickedit/images/upload.svg");
 }
 
 .quickedit-image-dropzone.error .quickedit-image-icon {
-  background-image: url("../../../../../modules/image/images/error.svg");
+  background-image: url("../../../../../modules/quickedit/images/error.svg");
 }
 
 .quickedit-image-dropzone.loading .quickedit-image-icon {

core/modules/quickedit/images/error.svg

+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+</svg>

core/modules/quickedit/images/upload.svg

+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
+</svg>

core/modules/quickedit/js/theme.es6.js

@@ -182,4 +182,89 @@
     html += '</div>';
     return html;
   };
+
+  /**
+   * Theme function for validation errors of the Image in-place editor.
+   *
+   * @param {object} settings
+   *   Settings object used to construct the markup.
+   * @param {string} settings.errors
+   *   Already escaped HTML representing error messages.
+   *
+   * @return {string}
+   *   The corresponding HTML.
+   */
+  Drupal.theme.quickeditImageErrors = function (settings) {
+    return `<div class="quickedit-image-errors">${settings.errors}</div>`;
+  };
+
+  /**
+   * Theme function for the dropzone element of the in-place editor.
+   *
+   * @param {object} settings
+   *   Settings object used to construct the markup.
+   * @param {string} settings.state
+   *   State of the upload.
+   * @param {string} settings.text
+   *   Text to display inline with the dropzone element.
+   *
+   * @return {string}
+   *   The corresponding HTML.
+   */
+  Drupal.theme.quickeditImageDropzone = function (settings) {
+    return (
+      `<div class="quickedit-image-dropzone ${settings.state}">` +
+      '  <i class="quickedit-image-icon"></i>' +
+      `  <span class="quickedit-image-text">${settings.text}</span>` +
+      '</div>'
+    );
+  };
+
+  /**
+   * Theme function for the toolbar of the Image module's in-place editor.
+   *
+   * @param {object} settings
+   *   Settings object used to construct the markup.
+   * @param {bool} settings.alt_field
+   *   Whether or not the "Alt" field is enabled for this field.
+   * @param {bool} settings.alt_field_required
+   *   Whether or not the "Alt" field is required for this field.
+   * @param {string} settings.alt
+   *   The current value for the "Alt" field.
+   * @param {bool} settings.title_field
+   *   Whether or not the "Title" field is enabled for this field.
+   * @param {bool} settings.title_field_required
+   *   Whether or not the "Title" field is required for this field.
+   * @param {string} settings.title
+   *   The current value for the "Title" field.
+   *
+   * @return {string}
+   *   The corresponding HTML.
+   */
+  Drupal.theme.quickeditImageToolbar = function (settings) {
+    let html = '<form class="quickedit-image-field-info">';
+    if (settings.alt_field) {
+      html +=
+        `<div><label for="alt" class="${
+          settings.alt_field_required ? 'required' : ''
+        }">${Drupal.t('Alternative text')}</label>` +
+        `<input type="text" placeholder="${settings.alt}" value="${
+          settings.alt
+        }" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` +
+        '  </div>';
+    }
+    if (settings.title_field) {
+      html +=
+        `<div><label for="title" class="${
+          settings.title_field_required ? 'form-required' : ''
+        }">${Drupal.t('Title')}</label>` +
+        `<input type="text" placeholder="${settings.title}" value="${
+          settings.title
+        }" name="title" ${settings.title_field_required ? 'required' : ''}/>` +
+        '</div>';
+    }
+    html += '</form>';
+
+    return html;
+  };
 })(jQuery, Drupal);

core/modules/quickedit/js/theme.js

@@ -87,4 +87,27 @@
     html += '</div>';
     return html;
   };
+
+  Drupal.theme.quickeditImageErrors = function (settings) {
+    return `<div class="quickedit-image-errors">${settings.errors}</div>`;
+  };
+
+  Drupal.theme.quickeditImageDropzone = function (settings) {
+    return `<div class="quickedit-image-dropzone ${settings.state}">` + '  <i class="quickedit-image-icon"></i>' + `  <span class="quickedit-image-text">${settings.text}</span>` + '</div>';
+  };
+
+  Drupal.theme.quickeditImageToolbar = function (settings) {
+    let html = '<form class="quickedit-image-field-info">';
+
+    if (settings.alt_field) {
+      html += `<div><label for="alt" class="${settings.alt_field_required ? 'required' : ''}">${Drupal.t('Alternative text')}</label>` + `<input type="text" placeholder="${settings.alt}" value="${settings.alt}" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` + '  </div>';
+    }
+
+    if (settings.title_field) {
+      html += `<div><label for="title" class="${settings.title_field_required ? 'form-required' : ''}">${Drupal.t('Title')}</label>` + `<input type="text" placeholder="${settings.title}" value="${settings.title}" name="title" ${settings.title_field_required ? 'required' : ''}/>` + '</div>';
+    }
+
+    html += '</form>';
+    return html;
+  };
 })(jQuery, Drupal);
\ No newline at end of file

core/modules/quickedit/quickedit.libraries.yml

@@ -54,3 +54,18 @@ quickedit.inPlaceEditor.plainText:
     js/editors/plainTextEditor.js: {}
   dependencies:
     - quickedit/quickedit
+
+quickedit.inPlaceEditor.image:
+  version: VERSION
+  js:
+    js/editors/image.js: {}
+  css:
+    component:
+      css/editors/image.css: {}
+    theme:
+      css/editors/image.theme.css: {}
+  dependencies:
+    - core/jquery
+    - core/drupal
+    - core/underscore
+    - quickedit/quickedit

core/modules/quickedit/quickedit.routing.yml

@@ -35,3 +35,29 @@ quickedit.entity_save:
     parameters:
       entity:
         type: entity:{entity_type}
+
+quickedit.image_upload:
+  path: '/quickedit/image/upload/{entity_type}/{entity}/{field_name}/{langcode}/{view_mode_id}'
+  defaults:
+    _controller: '\Drupal\quickedit\Controller\QuickEditImageController::upload'
+  options:
+    parameters:
+      entity:
+        type: entity:{entity_type}
+  requirements:
+    _permission: 'access in-place editing'
+    _access_quickedit_entity_field: 'TRUE'
+    _method: 'POST'
+
+quickedit.image_info:
+  path: '/quickedit/image/info/{entity_type}/{entity}/{field_name}/{langcode}/{view_mode_id}'
+  defaults:
+    _controller: '\Drupal\quickedit\Controller\QuickEditImageController::getInfo'
+  options:
+    parameters:
+      entity:
+        type: entity:{entity_type}
+  requirements:
+    _permission: 'access in-place editing'
+    _access_quickedit_entity_field: 'TRUE'
+    _method: 'GET'

core/modules/image/src/Controller/QuickEditImageController.php → core/modules/quickedit/src/Controller/QuickEditImageController.php

 <?php
 
-namespace Drupal\image\Controller;
+namespace Drupal\quickedit\Controller;
 
 use Drupal\Core\Cache\CacheableJsonResponse;
 use Drupal\Core\Controller\ControllerBase;

core/modules/image/src/Plugin/InPlaceEditor/Image.php → core/modules/quickedit/src/Plugin/InPlaceEditor/Image.php

 <?php
 
-namespace Drupal\image\Plugin\InPlaceEditor;
+namespace Drupal\quickedit\Plugin\InPlaceEditor;
 
 use Drupal\Core\Field\FieldItemListInterface;
 use Drupal\quickedit\Plugin\InPlaceEditorBase;
@@ -31,7 +31,7 @@ public function isCompatible(FieldItemListInterface $items) {
   public function getAttachments() {
     return [
       'library' => [
-        'image/quickedit.inPlaceEditor.image',
+        'quickedit/quickedit.inPlaceEditor.image',
       ],
     ];
   }

core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php

@@ -3,7 +3,7 @@
 namespace Drupal\Tests\quickedit\FunctionalJavascript;
 
 /**
- * @see \Drupal\image\Plugin\InPlaceEditor\Image
+ * @see \Drupal\quickedit\Plugin\InPlaceEditor\Image
  * @see \Drupal\Tests\quickedit\FunctionalJavascript\QuickEditJavascriptTestBase
  */
 trait QuickEditImageEditorTestTrait {

core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditImageTest.php

@@ -7,7 +7,7 @@
 use Drupal\Tests\TestFileCreationTrait;
 
 /**
- * @coversDefaultClass \Drupal\image\Plugin\InPlaceEditor\Image
+ * @coversDefaultClass \Drupal\quickedit\Plugin\InPlaceEditor\Image
  * @group quickedit
  */
 class QuickEditImageTest extends QuickEditJavascriptTestBase {

core/themes/stable/css/image/editors/image.css → core/themes/stable/css/quickedit/editors/editors/image.css

 /**
  * @file
- * Functional styles for the Image module's in-place editor.
+ * Functional styles for the Quick Edit image in-place editor.
  */
 
 /**

core/themes/stable/css/image/editors/image.theme.css → core/themes/stable/css/quickedit/editors/editors/image.theme.css

 /**
  * @file
- * Theme styles for the Image module's in-place editor.
+ * Theme styles for the Quick Edit image in-place editor.
  */
 
 .quickedit-image-dropzone {