edit/design dialogs

wcm-io · Sep 2, 2023 · d8ff7cc · d8ff7cc
1 parent 4e9a5d0
commit d8ff7cc
Show file tree

Hide file tree

Showing 2 changed files with 187 additions and 2 deletions.
diff --git a/bundles/core/src/main/webapp/app-root/components/image/v3/README.md b/bundles/core/src/main/webapp/app-root/components/image/v3/README.md
@@ -13,7 +13,6 @@ wcm-io/wcm/core/components/image/v3/image
 
 * Inherits all features from its [super component][extends-component]
 * Uses [wcm.io Media Handler][wcmio-handler-media] for processing the image
-* There is no support for dynamic media in this component. If you want to use dynamic media, use the "wcm.io Responsive Image" core component.
 * Allows to select media format(s) and auto-cropping in the content policy
 * Automatically customizes the in-place image editor cropping ratios to  the selected/the applications media formats
 * Uses the enhanced Media Handler File Upload dialog widget with path field and media format validation

diff --git a/bundles/core/src/main/webapp/app-root/components/image/v3/image.json b/bundles/core/src/main/webapp/app-root/components/image/v3/image.json
@@ -5,6 +5,192 @@
   "sling:resourceSuperType": "core/wcm/components/image/v3/image",
 
   /* Fallback mode for Link Handler to support existing content that used a single property name */
-  "wcmio:linkTargetUrlFallbackProperty": "linkURL"
+  "wcmio:linkTargetUrlFallbackProperty": "linkURL",
+
+  "cq:editConfig": {
+    "jcr:primaryType": "cq:EditConfig",
+    "cq:inherit": true,
+    /* 
+     * Overwrite inplace edit config to:
+     * - Disable cropping on inline toolbar as it does not support predefined ratios
+     * - Remove default ratios as they are fetched from assigned media formats
+     * - Remove image/webp support
+     */
+    "cq:inplaceEditing": {
+      "jcr:primaryType": "cq:InplaceEditingConfig",
+      "editorType": "image",
+      "active": true,
+      "configPath": "inplaceEditingConfig",
+      "inplaceEditingConfig": {
+        "jcr:primaryType": "nt:unstructured",
+        "plugins": {
+          "crop": {
+            "features": "*",
+            "supportedMimeTypes": ["image/jpeg", "image/png", "image/tiff"]
+          },
+          "flip": {
+            "features": "-",
+            "supportedMimeTypes": ["image/jpeg", "image/png", "image/tiff"]
+          },
+          "map": {
+            "features": "*",
+            "supportedMimeTypes": ["image/jpeg", "image/png", "image/tiff", "image/svg+xml"]
+          },
+          "rotate": {
+            "features": "*",
+            "supportedMimeTypes": ["image/jpeg", "image/png", "image/tiff"]
+          },
+          "zoom": {
+            "features": "*",
+            "supportedMimeTypes": ["image/jpeg", "image/png", "image/tiff", "image/svg+xml"]
+          }
+        },
+        "ui": {
+          "inline": {
+            "toolbar": ["rotate#right", "history#undo", "history#redo", "fullscreen#fullscreen", "control#close", "control#finish"],
+            "replacementToolbars": {
+              "crop": ["crop#identifier", "crop#unlaunch", "crop#confirm"]
+            }
+          },
+          "fullscreen": {
+            "toolbar": {
+              "left": ["crop#launchwithratio", "rotate#right", "map#launch", "flip#horizontal", "flip#vertical", "zoom#reset100", "zoom#popupslider"],
+              "right": ["history#undo", "history#redo", "fullscreen#fullscreenexit"]
+            },
+            "replacementToolbars": {
+              "crop": {
+                "left": ["crop#identifier"],
+                "right": ["crop#unlaunch", "crop#confirm"]
+              },
+              "map": {
+                "left": ["map#rectangle", "map#circle", "map#polygon"],
+                "right": ["map#unlaunch", "map#confirm"]
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+
+  "cq:dialog": {
+    "jcr:primaryType": "nt:unstructured",
+    "extraClientlibs": ["io.wcm.wcm.core.components.image.v2.editor"],
+    "content": {
+      "items": {
+        "tabs": {
+          "items": {
+
+            "asset": {
+              "items": {
+                "columns": {
+                  "items": {
+                    "column": {
+                      "items": {
+
+                        /* Does not work with media handler */
+                        "pageImageThumbnail": {
+                          "sling:hideResource": true
+                        },
+
+                        /* Use wcm.io Media Handler FileUpload */
+                        "file": {
+                          "sling:resourceType": "wcm-io/handler/media/components/granite/form/fileupload",
+                          "allowUpload": "${not empty cqDesign.allowUpload ? cqDesign.allowUpload : true}"
+                        },
+
+                        /* Supported differently with media handler */
+                        "dynamicmediaGroup": {
+                          "sling:hideResource": true
+                        }
+
+                      }
+                    }
+                  }
+                }
+              }
+            },
+
+            "metadata": {
+              "items": {
+                "columns": {
+                  "items": {
+                    "column": {
+                      "items": {
+                        "link": {
+                          /* hide link pagefield and replace it with wcm.io Link dialog */
+                          "sling:hideResource": true
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            },
+
+            /* wcm.io Link Handler Tab */
+            "link": {
+              "sling:resourceType": "granite/ui/components/coral/foundation/include",
+              "path": "wcm-io/handler/link/components/global/include/linkRefNoTitleTab"
+            }
+
+          }
+        }
+      }
+    }
+  },
+
+  "cq:design_dialog": {
+    "jcr:primaryType": "nt:unstructured",
+    "content": {
+      "items": {
+        "tabs": {
+          "items": {
+
+            "properties": {
+              "items": {
+                "content": {
+                  "items": {
+
+                    "enableDmFeatures": {
+                      /* Dynamic Media gets active automatically with media handler */
+                      "sling:hideResource": true
+                    },
+
+                    /* Supported differently with media handler */
+                    "enableAssetDelivery": {
+                      "sling:hideResource": true
+                    },
+                    "resizeWidth": {
+                      "sling:hideResource": true
+                    },
+                    "heading": {
+                      "sling:hideResource": true
+                    },
+                    "responsiveGroup": {
+                      "sling:hideResource": true
+                    },
+
+                    /* Media format definition */
+                    "mediaFormatSelection": {
+                      "sling:resourceType": "granite/ui/components/coral/foundation/include",
+                      "path": "wcm-io/handler/media/components/global/include/mediaFormatSelection",
+                      "sling:orderBefore": "enableLazyLoading"
+                    },
+
+                    "jpegQuality": {
+                      /* JPEG quality is configured via media handler configuration */
+                      "sling:hideResource": true
+                    }
+                  }
+                }
+              }
+            }
+
+          }
+        }
+      }
+    }
+  }
 
 }