Add a an "edit image size" popup link (see #5610)

Description
-----------

Fixes contao/contao#5390

Commits
-------

f837fa9b Added image size edit popup
9bbae923 Correctly remove the button title if the button is disabled
02c43e8e Merge remote-tracking branch 'upstream/5.x' into feature/edit-image-s…
deaa259d Update the scripts
93d8747f Merge remote-tracking branch 'upstream/5.x' into feature/edit-image-s…
1ee10611 Correctly enable the image size button
9aef364f Fixed the button title not using Contao tips
10ddcca1 Reset the cursor if a button is disabled

Co-authored-by: leofeyer <1192057+leofeyer@users.noreply.github.com>

assets/controllers/image-size-controller.js

@@ -0,0 +1,58 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static values = {
+        config: Object,
+    }
+
+    initialize () {
+        this.updateWizard = this.updateWizard.bind(this);
+        this.openModal = this.openModal.bind(this);
+    }
+
+    connect () {
+        this.select = this.element.querySelector('select');
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.title = '';
+        this.buttonImage = document.createElement('img');
+        this.button.append(this.buttonImage);
+        this.element.parentNode.classList.add('wizard');
+        this.element.after(this.button);
+
+        this.select.addEventListener('change', this.updateWizard);
+        this.button.addEventListener('click', this.openModal);
+
+        this.updateWizard();
+    }
+
+    disconnect () {
+        this.element.parentNode.classList.remove('wizard');
+        this.select.removeEventListener('change', this.updateWizard);
+        this.buttonImage.remove();
+        this.button.remove();
+    }
+
+    updateWizard () {
+        if (this.canEdit()) {
+            this.button.title = this.configValue.title;
+            this.button.disabled = false;
+            this.buttonImage.src = this.configValue.icon;
+        } else {
+            this.button.title = '';
+            this.button.disabled = true;
+            this.buttonImage.src = this.configValue.iconDisabled;
+        }
+    }
+
+    openModal () {
+        Backend.openModalIframe({
+            title: this.configValue.title,
+            url: `${ this.configValue.href }&id=${ this.select.value }`
+        });
+    }
+
+    canEdit () {
+        return this.configValue.ids.includes(Number(this.select.value));
+    }
+}

contao/languages/en/default.xlf

@@ -2108,6 +2108,9 @@
       <trans-unit id="MSC.showFromTo">
         <source>visible from %s to %s</source>
       </trans-unit>
+      <trans-unit id="MSC.editImageSize">
+        <source>Edit the image size</source>
+      </trans-unit>
       <trans-unit id="MSC.booleanNot">
         <source>Not %s</source>
       </trans-unit>

contao/themes/flexible/entrypoints.json

@@ -2,37 +2,37 @@
   "entrypoints": {
     "backend": {
       "css": [
-        "/system/themes/flexible/backend.6de2ed1d.css"
+        "/system/themes/flexible/backend.0c374b6e.css"
       ]
     },
     "confirm": {
       "css": [
-        "/system/themes/flexible/confirm.db87f830.css"
+        "/system/themes/flexible/confirm.df2be012.css"
       ]
     },
     "conflict": {
       "css": [
-        "/system/themes/flexible/conflict.b505718e.css"
+        "/system/themes/flexible/conflict.bdd0ad73.css"
       ]
     },
     "diff": {
       "css": [
-        "/system/themes/flexible/diff.8458d88d.css"
+        "/system/themes/flexible/diff.71a07c96.css"
       ]
     },
     "help": {
       "css": [
-        "/system/themes/flexible/help.51035033.css"
+        "/system/themes/flexible/help.9e70b126.css"
       ]
     },
     "login": {
       "css": [
-        "/system/themes/flexible/login.074d5c37.css"
+        "/system/themes/flexible/login.54c4a33d.css"
       ]
     },
     "popup": {
       "css": [
-        "/system/themes/flexible/popup.915ea82c.css"
+        "/system/themes/flexible/popup.56518a36.css"
       ]
     },
     "tinymce": {

contao/themes/flexible/manifest.json

@@ -1,20 +1,20 @@
 {
-  "backend.css": "/system/themes/flexible/backend.6de2ed1d.css",
-  "confirm.css": "/system/themes/flexible/confirm.db87f830.css",
-  "conflict.css": "/system/themes/flexible/conflict.b505718e.css",
-  "diff.css": "/system/themes/flexible/diff.8458d88d.css",
-  "help.css": "/system/themes/flexible/help.51035033.css",
-  "login.css": "/system/themes/flexible/login.074d5c37.css",
-  "popup.css": "/system/themes/flexible/popup.915ea82c.css",
+  "backend.css": "/system/themes/flexible/backend.0c374b6e.css",
+  "confirm.css": "/system/themes/flexible/confirm.df2be012.css",
+  "conflict.css": "/system/themes/flexible/conflict.bdd0ad73.css",
+  "diff.css": "/system/themes/flexible/diff.71a07c96.css",
+  "help.css": "/system/themes/flexible/help.9e70b126.css",
+  "login.css": "/system/themes/flexible/login.54c4a33d.css",
+  "popup.css": "/system/themes/flexible/popup.56518a36.css",
   "tinymce.css": "/system/themes/flexible/tinymce.e5009f94.css",
   "tinymce-dark.css": "/system/themes/flexible/tinymce-dark.596023db.css",
-  "backend.6de2ed1d.css.map": "/system/themes/flexible/backend.6de2ed1d.css.map",
-  "confirm.db87f830.css.map": "/system/themes/flexible/confirm.db87f830.css.map",
-  "conflict.b505718e.css.map": "/system/themes/flexible/conflict.b505718e.css.map",
-  "diff.8458d88d.css.map": "/system/themes/flexible/diff.8458d88d.css.map",
-  "help.51035033.css.map": "/system/themes/flexible/help.51035033.css.map",
-  "login.074d5c37.css.map": "/system/themes/flexible/login.074d5c37.css.map",
-  "popup.915ea82c.css.map": "/system/themes/flexible/popup.915ea82c.css.map",
+  "backend.0c374b6e.css.map": "/system/themes/flexible/backend.0c374b6e.css.map",
+  "confirm.df2be012.css.map": "/system/themes/flexible/confirm.df2be012.css.map",
+  "conflict.bdd0ad73.css.map": "/system/themes/flexible/conflict.bdd0ad73.css.map",
+  "diff.71a07c96.css.map": "/system/themes/flexible/diff.71a07c96.css.map",
+  "help.9e70b126.css.map": "/system/themes/flexible/help.9e70b126.css.map",
+  "login.54c4a33d.css.map": "/system/themes/flexible/login.54c4a33d.css.map",
+  "popup.56518a36.css.map": "/system/themes/flexible/popup.56518a36.css.map",
   "tinymce.e5009f94.css.map": "/system/themes/flexible/tinymce.e5009f94.css.map",
   "tinymce-dark.596023db.css.map": "/system/themes/flexible/tinymce-dark.596023db.css.map"
 }

contao/themes/flexible/styles/basic.css

@@ -171,6 +171,10 @@ button {
 	cursor: pointer;
 }
 
+button[disabled] {
+	cursor: default;
+}
+
 nav ul, nav li {
 	margin: 0;
 	padding: 0;
@@ -843,14 +847,18 @@ a.tl_submit {
 	vertical-align: middle;
 }
 
-.wizard .tl_text, .wizard .tl_select {
+.wizard .tl_text, .wizard .tl_select, .wizard .tl_image_size {
 	width: calc(100% - 24px);
 }
 
 .wizard .tl_text_2 {
 	width: 45%;
 }
 
+.wizard .tl_image_size {
+	display: inline-block;
+}
+
 .wizard img {
 	margin-left: 4px;
 }

contao/themes/flexible/styles/main.css

@@ -1951,7 +1951,7 @@ ul.sgallery li {
 }
 
 /* Wizards */
-.tl_modulewizard button, .tl_optionwizard button, .tl_key_value_wizard button, .tl_tablewizard button, .tl_listwizard button, .tl_checkbox_wizard button, .tl_metawizard button, .tl_sectionwizard button {
+.tl_modulewizard button, .tl_optionwizard button, .tl_key_value_wizard button, .tl_tablewizard button, .tl_listwizard button, .tl_checkbox_wizard button, .tl_metawizard button, .tl_sectionwizard button, .tl_image_size + button {
 	margin: 0;
 	padding: 0;
 	border: 0;

contao/widgets/ImageSize.php

@@ -10,6 +10,8 @@
 
 namespace Contao;
 
+use Contao\CoreBundle\Security\ContaoCorePermissions;
+
 /**
  * Provide methods to handle image size fields.
  *
@@ -175,6 +177,7 @@ public function generate()
 		$arrFields = array();
 		$arrOptions = array();
 		$arrAllOptions = $this->arrOptions;
+		$arrValues = array();
 
 		// Add an unknown option, so it is not lost when saving the record (see #920)
 		if (isset($this->unknownOption[2]))
@@ -192,6 +195,8 @@ public function generate()
 					$this->optionSelected($arrOption['value'] ?? null, $this->varValue[2] ?? null),
 					$arrOption['label'] ?? null
 				);
+
+				$arrValues[] = $arrOption['value'] ?? '';
 			}
 			else
 			{
@@ -205,6 +210,8 @@ public function generate()
 						$this->optionSelected($arrOptgroup['value'] ?? null, $this->varValue[2] ?? null),
 						$arrOptgroup['label'] ?? null
 					);
+
+					$arrValues[] = $arrOptgroup['value'] ?? '';
 				}
 
 				$arrOptions[] = sprintf('<optgroup label="&nbsp;%s">%s</optgroup>', StringUtil::specialchars($strKey), implode('', $arrOptgroups));
@@ -233,11 +240,44 @@ public function generate()
 		}
 
 		return sprintf(
-			'<div id="ctrl_%s" class="tl_image_size%s">%s</div>%s',
+			'<div id="ctrl_%s" class="tl_image_size%s"%s>%s</div>%s',
 			$this->strId,
 			$this->strClass ? ' ' . $this->strClass : '',
+			$this->getStimulusAttributes($arrValues),
 			implode(' ', $arrFields),
 			$this->wizard
 		);
 	}
+
+	private function getStimulusAttributes($arrValues): string
+	{
+		if ($this->wizard)
+		{
+			return '';
+		}
+
+		$ids = array_values(array_filter($arrValues, static fn ($v) => is_numeric($v)));
+
+		if (empty($ids))
+		{
+			return '';
+		}
+
+		$security = System::getContainer()->get('security.helper');
+
+		if (!$security->isGranted(ContaoCorePermissions::USER_CAN_ACCESS_MODULE, 'themes') || !$security->isGranted(ContaoCorePermissions::USER_CAN_ACCESS_IMAGE_SIZES))
+		{
+			return '';
+		}
+
+		$config = array(
+			'ids' => $ids,
+			'href' => System::getContainer()->get('router')->generate('contao_backend', array('do'=>'themes', 'table'=>'tl_image_size_item', 'popup'=>'1', 'nb'=>'1')),
+			'title' => $GLOBALS['TL_LANG']['MSC']['editImageSize'],
+			'icon' => Image::getUrl('edit.svg'),
+			'iconDisabled' => Image::getUrl('edit_.svg'),
+		);
+
+		return ' data-controller="contao--image-size" data-contao--image-size-config-value="' . StringUtil::specialchars(json_encode($config)) . '"';
+	}
 }

public/entrypoints.json

@@ -2,7 +2,7 @@
   "entrypoints": {
     "backend": {
       "js": [
-        "/bundles/contaocore/backend.53a22055.js"
+        "/bundles/contaocore/backend.5859b9cf.js"
       ]
     }
   }

public/manifest.json

@@ -1,4 +1,4 @@
 {
-  "backend.js": "/bundles/contaocore/backend.53a22055.js",
-  "backend.53a22055.js.map": "/bundles/contaocore/backend.53a22055.js.map"
+  "backend.js": "/bundles/contaocore/backend.5859b9cf.js",
+  "backend.5859b9cf.js.map": "/bundles/contaocore/backend.5859b9cf.js.map"
 }