Pro 7808 image widget upload (#5009)

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 * Adds any alt text found in an attribute to the media library attachment during import of rich text inline images by API
 * Adds `prependNodes` and `appendNodes` methods to every module. These methods allow you to inject HTML to every page using a `node` declaration.
+* Adds quick image upload UI to `@apostrophecms/image-widget`.
 
 ### Changes
 

modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue

@@ -631,7 +631,8 @@ export default {
           widget: clipboard,
           index
         });
-      } else if (this.widgetIsContextual(name)) {
+      }
+      if (this.widgetIsContextual(name)) {
         return this.insert({
           widget: {
             type: name,
@@ -640,7 +641,8 @@ export default {
           },
           index
         });
-      } else if (!this.widgetHasInitialModal(name)) {
+      }
+      if (!this.widgetHasInitialModal(name)) {
         const widget = this.newWidget(name);
         return this.insert({
           widget: {
@@ -649,26 +651,26 @@ export default {
           },
           index
         });
-      } else {
-        const componentName = this.widgetEditorComponent(name);
-        apos.area.activeEditor = this;
-        const preview = this.widgetPreview(name, index, true);
-        const widget = await apos.modal.execute(componentName, {
-          modelValue: null,
-          options: this.widgetOptionsByType(name),
-          type: name,
-          docId: this.docId,
-          areaFieldId: this.fieldId,
-          parentFollowingValues: this.followingValues,
-          preview
+      }
+
+      const componentName = this.widgetEditorComponent(name);
+      apos.area.activeEditor = this;
+      const preview = this.widgetPreview(name, index, true);
+      const widget = await apos.modal.execute(componentName, {
+        modelValue: null,
+        options: this.widgetOptionsByType(name),
+        type: name,
+        docId: this.docId,
+        areaFieldId: this.fieldId,
+        parentFollowingValues: this.followingValues,
+        preview
+      });
+      apos.area.activeEditor = null;
+      if (widget) {
+        return this.insert({
+          widget,
+          index
         });
-        apos.area.activeEditor = null;
-        if (widget) {
-          return this.insert({
-            widget,
-            index
-          });
-        }
       }
     },
     widgetOptionsByType(name) {

modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

@@ -156,6 +156,7 @@
         :doc-id="docId"
         :rendering="rendering"
         @edit="$emit('edit', i);"
+        @update="$emit('update', $event);"
       />
       <div
         class="
@@ -327,12 +328,12 @@ export default {
     },
     widgetLabel() {
       const moduleName = `${this.widget.type}-widget`;
-      const module = window.apos.modules[moduleName];
-      if (!module) {
+      const mod = window.apos.modules[moduleName];
+      if (!mod) {
         // eslint-disable-next-line no-console
         console.warn(`No ${moduleName} module found for widget type ${this.widget.type}`);
       }
-      return module.label;
+      return mod.label;
     },
     widgetOptions() {
       return this.widgets[this.widget.type];

modules/@apostrophecms/asset/lib/globalIcons.js

@@ -70,6 +70,7 @@ module.exports = {
   'help-circle-icon': 'HelpCircle',
   'image-edit-outline': 'ImageEditOutline',
   'image-icon': 'Image',
+  'image-plus-icon': 'ImagePlus',
   'image-size-select-actual-icon': 'ImageSizeSelectActual',
   'information-icon': 'Information',
   'information-outline-icon': 'InformationOutline',

modules/@apostrophecms/attachment/index.js

@@ -1188,7 +1188,8 @@ module.exports = {
           // for bc
           uploadsUrl: self.uploadfs.getUrl(),
           croppable: self.croppable,
-          sized: self.sized
+          sized: self.sized,
+          maxSize: self.options.maxSize
         };
       },
       // Middleware method used when only those with attachment privileges

modules/@apostrophecms/i18n/i18n/de.json

@@ -247,6 +247,9 @@
   "imagePlaceholder": "Bild-Platzhalter",
   "imageTag": "Bild-Tag",
   "imageTags": "Bild-Tags",
+  "imageUploadMsg": "Wählen Sie aus der {{ mediaLibrary }}, {{ yourDevice }} oder legen Sie eine Datei hier ab",
+  "imageUploadSupport": "Unterstützt {{ formats }} oder {{ last }} Formate{{ upTo }}",
+  "imageUploadUpTo": "bis zu {{ maxSize }}",
   "images": "Bilder",
   "inputFieldIsDisabled": "Dieses Feld ist deaktiviert",
   "insertAndNew": "{{ saveLabel }} {{ typeLabel }} und ein neues Erstellen.",
@@ -322,6 +325,7 @@
   "mediaDimensions": "Dimensionen: {{ width }} 𝗑 {{ height }}",
   "mediaFileSize": "Dateigrösse: {{ fileSize }}",
   "mediaKB": "{{ size }}KB",
+  "mediaLibrary": "Mediathek",
   "mediaLibraryEndReached": "Sie haben das Ende der Mediathek erreicht.",
   "mediaMB": "{{ size }}MB",
   "mediaManagerErrorRestoring": "Fehler bei der Wiederherstellung",
@@ -331,6 +335,7 @@
   "mergeCells": "Zellen zusammenführen",
   "minLabel": "Min:",
   "minSize": "Minimale Grösse {{ width }}x{{ height }}",
+  "minimumSize": "Mindestgröße von {{ width }} x {{ height }} px",
   "minUi": "Min: {{ number }}",
   "modalBreadcrumbsDefaultLabel": "Eine Bezeichnung festlegen",
   "modalTabsError": "Fehler",
@@ -627,5 +632,6 @@
   "willMoveImageToArchive": "Bild ins Archiv verschieben.",
   "yes": "Ja",
   "yesLocalizeAndSwitchLocales": "Ja, diese Seite übersetzen und zu der Sprache wechseln.",
-  "youTookControl": "Du hast die Kontrolle über dieses Dokument in einer anderen Registerkarte oder einem anderen Fenster übernommen. Ein Dokument kann immer nur an einer Stelle bearbeitet werden."
+  "youTookControl": "Du hast die Kontrolle über dieses Dokument in einer anderen Registerkarte oder einem anderen Fenster übernommen. Ein Dokument kann immer nur an einer Stelle bearbeitet werden.",
+  "yourDevice": "Ihr Gerät"
 }

modules/@apostrophecms/i18n/i18n/en.json

@@ -249,6 +249,9 @@
   "imagePlaceholder": "Image placeholder",
   "imageTag": "Image Tag",
   "imageTags": "Image Tags",
+  "imageUploadMsg": "Choose from the {{ mediaLibrary }}, {{ yourDevice }}, or drop a file here",
+  "imageUploadSupport": "Supports {{ formats }} or {{ last }} formats{{ upTo }}",
+  "imageUploadUpTo": "up to {{ maxSize }}",
   "images": "Images",
   "inputFieldIsDisabled": "This field is disabled",
   "insertAndNew": "{{ saveLabel }} {{ typeLabel }} and create a new one.",
@@ -324,6 +327,7 @@
   "mediaDimensions": "Dimensions: {{ width }} 𝗑 {{ height }}",
   "mediaFileSize": "File Size: {{ fileSize }}",
   "mediaKB": "{{ size }}KB",
+  "mediaLibrary": "media library",
   "mediaLibraryEndReached": "You've reached the end of the media library.",
   "mediaMB": "{{ size }}MB",
   "mediaManagerErrorRestoring": "Error Restoring",
@@ -333,6 +337,7 @@
   "mergeCells": "Merge Cells",
   "minLabel": "Min:",
   "minSize": "Min size of {{ width }}x{{ height }}",
+  "minimumSize": "Minimum size of {{ width }} x {{ height }} px",
   "minUi": "Min: {{ number }}",
   "modalBreadcrumbsDefaultLabel": "Set a label",
   "modalTabsError": "Error",
@@ -631,5 +636,6 @@
   "willMoveImageToArchive": "This will move the image to the archive.",
   "yes": "Yes",
   "yesLocalizeAndSwitchLocales": "Yes, localize this page and switch locales",
-  "youTookControl": "You took control of this document in another tab or window. A document can only be edited in one place at a time."
+  "youTookControl": "You took control of this document in another tab or window. A document can only be edited in one place at a time.",
+  "yourDevice": "your device"
 }

modules/@apostrophecms/i18n/i18n/es.json

@@ -247,6 +247,9 @@
   "imagePlaceholder": "Marcador de posición de imagen",
   "imageTag": "Etiqueta de Imagen",
   "imageTags": "Etiquetas de Imágenes",
+  "imageUploadMsg": "Elija entre {{ mediaLibrary }}, {{ yourDevice }} o suelte un archivo aquí",
+  "imageUploadSupport": "Admite {{ formats }} o {{ last }} formatos{{ upTo }}",
+  "imageUploadUpTo": "hasta {{ maxSize }}",
   "images": "Imágenes",
   "inputFieldIsDisabled": "Este campo está deshabilitado",
   "insertAndNew": "{{ saveLabel }} {{ typeLabel }} y crear uno nuevo.",
@@ -322,6 +325,7 @@
   "mediaDimensions": "Dimensiones: {{ width }} 𝗑 {{ height }}",
   "mediaFileSize": "Tamaño del Archivo: {{ fileSize }}",
   "mediaKB": "{{ size }}KB",
+  "mediaLibrary": "biblioteca multimedia",
   "mediaLibraryEndReached": "Has alcanzado el final de la biblioteca de medios.",
   "mediaMB": "{{ size }}MB",
   "mediaManagerErrorRestoring": "Error al restaurar",
@@ -331,6 +335,7 @@
   "mergeCells": "Combinar celdas",
   "minLabel": "Mín:",
   "minSize": "Tamaño mínimo de {{ width }}x{{ height }}",
+  "minimumSize": "Tamaño mínimo de {{ ancho }} x {{ alto }} px",
   "minUi": "Mín: {{ number }}",
   "modalBreadcrumbsDefaultLabel": "Establecer una etiqueta",
   "modalTabsError": "Error",
@@ -627,5 +632,6 @@
   "willMoveImageToArchive": "Esto moverá la imagen al archivo de documentos.",
   "yes": "Sí",
   "yesLocalizeAndSwitchLocales": "Sí, traducir esta página y cambiar de configuración regional",
-  "youTookControl": "Tomó el control de este documento en otra pestaña o ventana. Un documento sólo puede ser editado en un lugar a la vez."
+  "youTookControl": "Tomó el control de este documento en otra pestaña o ventana. Un documento sólo puede ser editado en un lugar a la vez.",
+  "yourDevice": "su dispositivo"
 }

modules/@apostrophecms/i18n/i18n/fr.json

@@ -247,6 +247,9 @@
   "imagePlaceholder": "Espace réservé pour l'image",
   "imageTag": "Tag d'image",
   "imageTags": "Tags d'image",
+  "imageUploadMsg": "Choisissez parmi la {{mediaLibrary}}, {{yourDevice}} ou déposez un fichier ici",
+  "imageUploadSupport": "Prend en charge les formats {{ formats }} ou {{ last }} {{ upTo }}",
+  "imageUploadUpTo": "jusqu'à {{ maxSize }}",
   "images": "Images",
   "inputFieldIsDisabled": "Ce champ est désactivé",
   "insertAndNew": "{{ saveLabel }} {{ typeLabel }} et en créer un/une autre.",
@@ -322,6 +325,7 @@
   "mediaDimensions": "Dimensions : {{ width }} 𝗑 {{ height }}",
   "mediaFileSize": "Taille du fichier : {{ fileSize }}",
   "mediaKB": "{{ size }} Ko",
+  "mediaLibrary": "médiathèque",
   "mediaLibraryEndReached": "Vous avez atteint la fin de la bibliothèque multimédia.",
   "mediaMB": "{{ size }} Mo",
   "mediaManagerErrorRestoring": "Erreur de restauration",
@@ -331,6 +335,7 @@
   "mergeCells": "Fusionner les cellules",
   "minLabel": "Min :",
   "minSize": "Taille minimale de {{ width }}x{{ height }}",
+  "minimumSize": "Taille minimale de {{ width }} x {{ height }} px",
   "minUi": "Min : {{ number }}",
   "modalBreadcrumbsDefaultLabel": "Définir une étiquette",
   "modalTabsError": "Erreur",
@@ -627,5 +632,6 @@
   "willMoveImageToArchive": "Cela déplacera l'image vers l'archive.",
   "yes": "Oui",
   "yesLocalizeAndSwitchLocales": "Oui, changer la langue de cette page et basculer de langue",
-  "youTookControl": "Vous avez pris le contrôle de ce document dans un autre onglet ou une autre fenêtre. Un document ne peut être modifié qu'à un seul endroit à la fois."
+  "youTookControl": "Vous avez pris le contrôle de ce document dans un autre onglet ou une autre fenêtre. Un document ne peut être modifié qu'à un seul endroit à la fois.",
+  "yourDevice": "votre appareil"
 }

modules/@apostrophecms/i18n/i18n/it.json

@@ -247,6 +247,9 @@
   "imagePlaceholder": "Immagine placeholder",
   "imageTag": "Tag dell'immagine",
   "imageTags": "Tag delle immagini",
+  "imageUploadMsg": "Scegli tra {{ mediaLibrary }}, {{ yourDevice }} o trascina un file qui",
+  "imageUploadSupport": "Supporta i formati {{ formats }} o {{ last }}{{ upTo }}",
+  "imageUploadUpTo": "fino a {{ maxSize }}",
   "images": "Immagini",
   "inputFieldIsDisabled": "Questo campo è disabilitato",
   "insertAndNew": "{{ saveLabel }} {{ typeLabel }} e crea una nuova.",
@@ -322,6 +325,7 @@
   "mediaDimensions": "Dimensioni: {{ width }} 𝗑 {{ height }}",
   "mediaFileSize": "Dimensione del File: {{ fileSize }}",
   "mediaKB": "{{ size }}KB",
+  "mediaLibrary": "biblioteca multimediale",
   "mediaLibraryEndReached": "Hai raggiunto la fine della libreria multimediale.",
   "mediaMB": "{{ size }}MB",
   "mediaManagerErrorRestoring": "Errore nel ripristino",
@@ -331,6 +335,7 @@
   "mergeCells": "Unisci celle",
   "minLabel": "Minimo:",
   "minSize": "Dimensione minima di {{ width }}x{{ height }}",
+  "minimumSize": "Dimensione minima di {{ width }} x {{ height }} px",
   "minUi": "Minimo: {{ number }}",
   "modalBreadcrumbsDefaultLabel": "Imposta un'etichetta",
   "modalTabsError": "Errore",
@@ -627,5 +632,6 @@
   "willMoveImageToArchive": "Ciò sposterà l'immagine nell'archivio.",
   "yes": "Sì",
   "yesLocalizeAndSwitchLocales": "Sì, localizza questa pagina e passa alle località",
-  "youTookControl": "Hai preso il controllo di questo documento in un'altra scheda o finestra. Un documento può essere modificato in un solo luogo alla volta."
+  "youTookControl": "Hai preso il controllo di questo documento in un'altra scheda o finestra. Un documento può essere modificato in un solo luogo alla volta.",
+  "yourDevice": "il tuo dispositivo"
 }

modules/@apostrophecms/i18n/i18n/pt-BR.json

@@ -247,6 +247,9 @@
   "imagePlaceholder": "Espaço reservado para imagem",
   "imageTag": "Tag de Imagem",
   "imageTags": "Tags de Imagem",
+  "imageUploadMsg": "Escolha entre {{ mediaLibrary }}, {{ yourDevice }} ou solte um arquivo aqui",
+  "imageUploadSupport": "Suporta os formatos {{ formats }} ou {{ last }} {{ upTo }}",
+  "imageUploadUpTo": "até {{ maxSize }}",
   "images": "Imagens",
   "inputFieldIsDisabled": "Este campo está desativado",
   "insertAndNew": "{{ saveLabel }} {{ typeLabel }} e crie um novo(a).",
@@ -322,6 +325,7 @@
   "mediaDimensions": "Dimensões: {{ width }} 𝗑 {{ height }}",
   "mediaFileSize": "Tamanho do Arquivo: {{ fileSize }}",
   "mediaKB": "{{ size }}KB",
+  "mediaLibrary": "biblioteca de mídia",
   "mediaLibraryEndReached": "Você atingiu o final da biblioteca de mídia.",
   "mediaMB": "{{ size }}MB",
   "mediaManagerErrorRestoring": "Erro ao Restaurar",
@@ -331,6 +335,7 @@
   "mergeCells": "Mesclar Células",
   "minLabel": "Mín:",
   "minSize": "Tamanho mínimo de {{ width }}x{{ height }}",
+  "minimumSize": "Tamanho mínimo de {{ width }} x {{ height }} px",
   "minUi": "Mín: {{ number }}",
   "modalBreadcrumbsDefaultLabel": "Defina uma etiqueta",
   "modalTabsError": "Erro",
@@ -627,5 +632,6 @@
   "willMoveImageToArchive": "Isso moverá a imagem para o arquivo.",
   "yes": "Sim",
   "yesLocalizeAndSwitchLocales": "Sim, localize esta página e mude de local",
-  "youTookControl": "Você assumiu o controle deste documento em outra guia ou janela. Um documento só pode ser editado em um lugar de cada vez."
+  "youTookControl": "Você assumiu o controle deste documento em outra guia ou janela. Um documento só pode ser editado em um lugar de cada vez.",
+  "yourDevice": "seu dispositivo"
 }

modules/@apostrophecms/i18n/i18n/sk.json

@@ -247,6 +247,9 @@
   "imagePlaceholder": "Zástupný symbol obrázka",
   "imageTag": "Značku obrázku",
   "imageTags": "Značky obrázkov",
+  "imageUploadMsg": "Vyberte si z {{ mediaLibrary }}, {{ yourDevice }} alebo sem presuňte súbor",
+  "imageUploadSupport": "Podporuje formáty {{ formats }} alebo {{ last }} {{ upTo }}",
+  "imageUploadUpTo": "až do {{ maxSize }}",
   "images": "Obrázky",
   "inputFieldIsDisabled": "Toto pole je zakázané",
   "insertAndNew": "{{ saveLabel }} {{ typeLabel }} a vytvorte nový.",
@@ -322,6 +325,7 @@
   "mediaDimensions": "Rozmery: {{ width }} 𝗑 {{ height }}",
   "mediaFileSize": "Veľkosť súboru: {{ fileSize }}",
   "mediaKB": "{{ size }}KB",
+  "mediaLibrary": "mediálna knižnica",
   "mediaLibraryEndReached": "Dosiahli ste koniec mediálnej knižnice.",
   "mediaMB": "{{ size }}MB",
   "mediaManagerErrorRestoring": "Chyba pri obnove",
@@ -331,6 +335,7 @@
   "mergeCells": "Zlúčiť bunky",
   "minLabel": "Min:",
   "minSize": "Minimálna veľkosť {{ width }}x{{ height }}",
+  "minimumSize": "Minimálna veľkosť {{ šírka }} x {{ výška }} px",
   "minUi": "Min: {{ number }}",
   "modalBreadcrumbsDefaultLabel": "Nastaviť názov",
   "modalTabsError": "Chyba",
@@ -627,5 +632,6 @@
   "willMoveImageToArchive": "Tým sa obrázok presunie do archívu.",
   "yes": "Áno",
   "yesLocalizeAndSwitchLocales": "Áno, preložte túto stránku a prepnite jazykovú mutáciu",
-  "youTookControl": "Nad týmto dokumentom ste prevzali kontrolu na inej karte alebo v inom okne. Dokument je možné naraz upravovať iba na jednom mieste."
+  "youTookControl": "Nad týmto dokumentom ste prevzali kontrolu na inej karte alebo v inom okne. Dokument je možné naraz upravovať iba na jednom mieste.",
+  "yourDevice": "vaše zariadenie"
 }

modules/@apostrophecms/image-widget/index.js

@@ -6,11 +6,13 @@ module.exports = {
     icon: 'image-icon',
     dimensionAttrs: false,
     placeholder: true,
-    placeholderClass: false,
-    placeholderImage: 'jpg',
+    initialModal: false,
     linkWithType: [ '@apostrophecms/any-page-type' ],
     // Should we write e.g. a reset style for the `figure` element?
-    inlineStyles: true
+    inlineStyles: true,
+    components: {
+      widget: 'AposImageWidget'
+    }
   },
   widgetOperations(self, options) {
     const {
@@ -135,6 +137,8 @@ module.exports = {
     };
   },
   init(self) {
+    self.showPlaceholder = self.options.placeholder !== false;
+    self.options.placeholder = true;
     self.determineBestAssetUrl('placeholder');
   },
   handlers(self) {
@@ -175,5 +179,16 @@ module.exports = {
         }
       }
     };
+  },
+  extendMethods(self) {
+    return {
+      getBrowserData(_super, req) {
+        return {
+          ..._super(req),
+          showPlaceholder: self.showPlaceholder,
+          placeholderUrl: self.options.placeholderUrl
+        };
+      }
+    };
   }
 };