Merge branch 'IIMAGE-13'

Author: AugustoMarcelo

gradle.properties

@@ -1,6 +1,6 @@
 # Gradle Project settings
 projectName = imageshop
-version = 2.0.7
+version = 2.0.8
 
 # XP App values
 appDisplayName = Imageshop

src/main/resources/admin/widgets/iimage/iimage.html

@@ -1,10 +1,7 @@
-<widget
-  class="iimage-wrapper"
-  th:data-import-image-service-url="${importImageServiceUrl}"
-  th:data-sync-image-info-service-url="${syncImageInfoServiceUrl}"
-  th:data-image-shop-url="${imageShopURL}"
-  th:data-strings="${stringsJson}"
->
+
+<widget class="iimage-wrapper">
+  <script type="application/json" id="widget-config-id" th:utext="${stringsJson}"></script>
+
   <link rel="stylesheet" th:href="${portal.assetUrl({'_path=/css/styles.css'})}" />
 
   <th:block th:if="${!#lists.isEmpty(inputsAllowedToUploadImage)}">

src/main/resources/admin/widgets/iimage/iimage.js

@@ -58,23 +58,29 @@ exports.get = function (req) {
   }
 
   const showSyncButton = content && content.type === 'media:image' && !!libs.objects.trySafe(() => content.x['io-99x-imageshop'].iimage.document_id)
+  const importImageServiceUrl = libs.portal.serviceUrl({
+    service: 'import-image',
+    type: 'absolute',
+    params: {
+      contentId: contentId || sitesWithIImageAppInstalled[0]._id
+    }
+  })
+
+  const syncImageInfoServiceUrl = showSyncButton ? libs.portal.serviceUrl({
+    service: 'sync-image-info',
+    type: 'absolute',
+    params: {
+      contentId
+    }
+  }) : undefined
+
+  const imageShopURL = libs.iimage.getImageShopURL(iimageAppConfig)
+
+  strings.importImageServiceUrl = importImageServiceUrl
+  strings.syncImageInfoServiceUrl = syncImageInfoServiceUrl
+  strings.imageShopURL = imageShopURL
 
   const model = {
-    importImageServiceUrl: libs.portal.serviceUrl({
-      service: 'import-image',
-      type: 'absolute',
-      params: {
-        contentId: contentId || sitesWithIImageAppInstalled[0]._id
-      }
-    }),
-    syncImageInfoServiceUrl: showSyncButton ? libs.portal.serviceUrl({
-      service: 'sync-image-info',
-      type: 'absolute',
-      params: {
-        contentId
-      }
-    }) : undefined,
-    imageShopURL: libs.iimage.getImageShopURL(iimageAppConfig),
     strings,
     stringsJson: JSON.stringify(strings),
     inputsAllowedToUploadImage: libs.iimage.getInputsAllowedToUploadImage(contentId),

src/main/resources/assets/js/main.js

@@ -1,5 +1,6 @@
 function main() {
-  const imageShopURL = document.querySelector('[data-image-shop-url]').getAttribute('data-image-shop-url');
+  const config = getWidgetConfig()
+  const imageShopURL = config.imageShopURL
   const openImageShopButton = document.getElementById('imageshop-button');
   const syncImageShopInfoButton = document.getElementById('imageshop-sync-info-button')
 
@@ -47,7 +48,9 @@ function syncImageInfo(e) {
   target.setAttribute('disabled', true)
   target.style.cursor = 'wait';
 
-  const syncImageInfoServiceURL = document.querySelector('[data-sync-image-info-service-url]').getAttribute('data-sync-image-info-service-url')
+  const config = getWidgetConfig()
+
+  const syncImageInfoServiceURL = config.syncImageInfoServiceUrl
 
   fetch(syncImageInfoServiceURL)
     .then(response => response.json())
@@ -71,9 +74,10 @@ function storeImageInEnonic(params) {
   const propertyName = params.propertyName
   const propertyPath = params.propertyPath
 
-  const importImageServiceUrl = document.querySelector('[data-import-image-service-url]').getAttribute('data-import-image-service-url');
+  const config = getWidgetConfig()
+
+  const importImageServiceUrl = config.importImageServiceUrl
   const openImageShopButton = document.getElementById('imageshop-button');
-  const strings = JSON.parse(document.querySelector('[data-strings]').getAttribute('data-strings'));
 
   fetch(importImageServiceUrl, {
     method: 'POST',
@@ -99,7 +103,7 @@ function storeImageInEnonic(params) {
     .catch(error => {
       console.error('Error:', error);
       if (document.querySelector('.edit-image-link')) document.querySelector('.edit-image-link').remove();
-      setMessageText(strings.generalError, 'error');
+      setMessageText(config.generalError, 'error');
     })
     .finally(() => {
       setTimeout(() => {
@@ -115,13 +119,13 @@ function storeImageInEnonic(params) {
  * @returns 
  */
 function createEditLink(editURL) {
-  const strings = JSON.parse(document.querySelector('[data-strings]').getAttribute('data-strings'));
+  const config = getWidgetConfig()
 
   const editLink = document.createElement('a');
   editLink.className = 'edit-image-link';
   editLink.href = editURL;
   editLink.target = '_blank';
-  editLink.innerHTML = strings.editImage;
+  editLink.innerHTML = config.editImage;
   return editLink
 }
 
@@ -131,19 +135,19 @@ function createEditLink(editURL) {
  * @returns 
  */
 function changeUploadButtonState(state) {
-  const strings = JSON.parse(document.querySelector('[data-strings]').getAttribute('data-strings'));
+  const config = getWidgetConfig()
   const openImageShopButton = document.getElementById('imageshop-button');
 
   if (state === 'loading') {
     openImageShopButton.setAttribute('disabled', true);
-    openImageShopButton.innerHTML = strings.importingImage;
+    openImageShopButton.innerHTML = config.importingImage;
     openImageShopButton.style.cursor = 'wait';
     return
   }
 
   if (state === 'default') {
     openImageShopButton.removeAttribute('disabled');
-    openImageShopButton.innerHTML = strings.openImageShop;
+    openImageShopButton.innerHTML = config.openImageShop;
     openImageShopButton.style.cursor = 'pointer';
     return
   }
@@ -162,4 +166,10 @@ function setMessageText(message, status) {
   messageElement.setAttribute('data-status', status);
 }
 
+function getWidgetConfig() {
+  const config = JSON.parse(document.getElementById("widget-config-id").innerText);
+  
+  return config;
+}
+
 main()

src/main/resources/i18n/phrases.properties

@@ -4,6 +4,7 @@ iimage.widget.context_panel.fragments.app_installed_in_multiples_sites = You hav
 iimage.widget.context_panel.fragments.app_misconfigured = The Imageshop app is not configured properly. Please fill in the required fields in the Imageshop app settings
 iimage.widget.context_panel.fragments.app_not_installed = The Imageshop app is not installed.
 iimage.widget.context_panel.fragments.app_not_installed_in_site_fetched = Ensure the content you selected is placed under a site with the Imageshop installed
+iimage.widget.context_panel.fragments.no_content_selected = No content selected
 
 iimage.site.iimage_imported_resources_folder = Imported resources folder
 iimage.site.settings = Imageshop Settings