Pro 7810 quick upload placeholder (#5019)

* Supports placeholder with new UI
* Forces option placeholder to be true to avoid unexpected bugs, user still can disable it (handed internally)
* Drag and drop style with placeholder
* Remove label and better handling of all events in image uploader UI

Author: ValJed

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

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

modules/@apostrophecms/image-widget/ui/apos/components/AposImageWidget.vue

@@ -6,6 +6,7 @@
     <AposMediaUploaderUi
       :min-size="props.options?.minSize"
       :accept="accept"
+      :placeholder="placeholder"
       @upload="upload"
       @media="selectFromManager"
     />
@@ -25,8 +26,9 @@ import {
 import { useAposWidget } from 'Modules/@apostrophecms/widget-type/composables/AposWidget';
 import aposWidgetProps from 'Modules/@apostrophecms/widget-type/composables/AposWidgetProps';
 
-const moduleOptions = window.apos.modules['@apostrophecms/image'];
-const accept = moduleOptions.schema.find(field => field.name === 'attachment').accept;
+const imgModuleOptions = apos.modules['@apostrophecms/image'];
+const widgetModuleOptions = apos.modules['@apostrophecms/image-widget'];
+const accept = imgModuleOptions.schema.find(field => field.name === 'attachment').accept;
 
 const emit = defineEmits([ 'edit', 'update' ]);
 
@@ -39,14 +41,21 @@ const hasImage = computed(() => {
   return Boolean(props.modelValue?._image?.length);
 });
 
+const placeholder = computed(() => {
+  return widgetModuleOptions.showPlaceholder === false
+    ? null
+    : widgetModuleOptions.placeholderUrl;
+});
+
 watch(() => props.modelValue, async (newVal) => {
   if (hasImage.value) {
     await renderContent();
   }
 }, { immediate: true });
 
 async function selectFromManager() {
-  const modalItem = apos.modal.modals.find((modal) => modal.itemName === '@apostrophecms/image:manager');
+  const modalItem = apos.modal.modals
+    .find((modal) => modal.itemName === '@apostrophecms/image:manager');
   if (!modalItem) {
     return;
   }
@@ -151,7 +160,7 @@ async function upload(files = []) {
   }
 
   try {
-    const emptyDoc = await apos.http.post(moduleOptions.action, {
+    const emptyDoc = await apos.http.post(imgModuleOptions.action, {
       busy: true,
       body: {
         _newInstance: true
@@ -173,7 +182,7 @@ async function upload(files = []) {
       attachment
     });
 
-    const imgPiece = await apos.http.post(moduleOptions.action, {
+    const imgPiece = await apos.http.post(imgModuleOptions.action, {
       busy: true,
       body: imageData,
       draft: true

modules/@apostrophecms/image/ui/apos/components/AposMediaUploaderUi.vue

@@ -1,17 +1,19 @@
 <template>
-  <label
+  <div
     ref="mediaUploaderEl"
     class="apos-media-uploader"
+    :style="uploaderStyle"
     :class="{
       'apos-media-uploader--disabled': props.disabled,
       'apos-is-dragging': dragging,
-      'apos-is-dragging--over': dragover
+      'apos-is-dragging--over': dragover,
+      'apos-has-placeholder': hasPlaceholder
     }"
     @drop.prevent="uploadMedia"
     @dragover.prevent=""
     @dragenter="dragOverEnter"
     @dragleave="dragOverLeave"
-    @drop="dragOverLeave"
+    @click.stop="openMedia"
   >
     <div class="apos-media-uploader__inner">
       <!-- if we want animations.. -->
@@ -46,12 +48,12 @@
       tabindex="-1"
       @input="uploadMedia"
     >
-  </label>
+  </div>
 </template>
 
 <script setup>
 import {
-  ref, inject, useTemplateRef, onMounted, onUnmounted, computed
+  ref, inject, useTemplateRef, onMounted, onUnmounted, computed, onBeforeUnmount
 } from 'vue';
 
 const $t = inject('i18n');
@@ -71,6 +73,10 @@ const props = defineProps({
   accept: {
     type: String,
     default: 'gif,.jpg,.png,.svg,.webp,.jpeg'
+  },
+  placeholder: {
+    type: String,
+    default: null
   }
 });
 const emit = defineEmits([ 'media', 'upload' ]);
@@ -112,6 +118,20 @@ const dragover = computed(() => {
   return dragOverCounter.value > 0;
 });
 
+const hasPlaceholder = computed(() => {
+  return Boolean(props.placeholder);
+});
+
+const uploaderStyle = computed(() => {
+  if (!props.placeholder) {
+    return {};
+  }
+
+  return {
+    'background-image': `url(${props.placeholder})`
+  };
+});
+
 /**
  * @returns {String} - Formatted string containing configured maximum size
  */
@@ -170,6 +190,10 @@ onMounted(() => {
   document.addEventListener('drop', dropListener);
 });
 
+onBeforeUnmount(() => {
+  unbindEmits();
+});
+
 onUnmounted(() => {
   document.removeEventListener('dragenter', dragEnterListener);
   document.removeEventListener('dragleave', dragLeaveListener);
@@ -179,17 +203,28 @@ onUnmounted(() => {
 /** Bind click events on links contained in translated texts */
 function bindEmits() {
   mediaUploaderEl.value.querySelectorAll('[data-apos-click]').forEach((el) => {
-    el.addEventListener('click', (event) => {
-      const action = event.currentTarget.getAttribute('data-apos-click');
-      if (action === 'openMedia') {
-        openMedia();
-      } else if (action === 'searchFile') {
-        searchFile();
-      }
-    });
+    el.addEventListener('click', btnClickEvent);
+  });
+}
+
+/** Unbind click events on links contained in translated texts */
+function unbindEmits() {
+  mediaUploaderEl.value.querySelectorAll('[data-apos-click]').forEach((el) => {
+    el.removeEventListener('click', btnClickEvent);
   });
 }
 
+/** Bind each button event */
+function btnClickEvent(event) {
+  event.stopPropagation();
+  const action = event.currentTarget.getAttribute('data-apos-click');
+  if (action === 'openMedia') {
+    openMedia();
+  } else if (action === 'searchFile') {
+    searchFile();
+  }
+};
+
 function openMedia() {
   emit('media');
 }
@@ -206,7 +241,7 @@ function searchFile() {
  * @param {DragEvent} event - Dropped file event
  */
 async function uploadMedia (event) {
-  // Set `dragover` in case the media was dropped.
+  // Reset drag over counter when dropping file
   dragOverCounter.value = 0;
   const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
   if (!props.accept) {
@@ -232,6 +267,7 @@ async function uploadMedia (event) {
 </script>
 <style>
   .apos-is-highlighted .apos-media-uploader {
+    /* stylelint-disable-next-line declaration-no-important */
     outline-color: transparent !important;
   }
 </style>
@@ -240,7 +276,10 @@ async function uploadMedia (event) {
   @include apos-button-reset();
 
   & {
+    font-family: var(--a-family-default);
+    position: relative;
     display: flex;
+    overflow: hidden;
     box-sizing: border-box;
     align-items: center;
     justify-content: center;
@@ -251,15 +290,34 @@ async function uploadMedia (event) {
     grid-row: 1 / 3;
     min-height: 350px;
     background-color: var(--a-base-10);
+    background-size: cover;
+  }
+
+  &::before {
+    content: '';
+    z-index: $z-index-base;
+    position: absolute;
+    inset: 0;
+    background: rgba(255 255 255 / 70%);
   }
 
   &.apos-is-dragging {
-    border: 1px solid var(--a-primary);
-    box-shadow: 0 0 0 3px var(--a-primary-transparent-50),
+    outline: 1px solid var(--a-primary);
+    box-shadow: 0 0 0 3px var(--a-primary-transparent-50);
   }
 
   &.apos-is-dragging--over {
-    background-color: var(--a-primary-transparent-05);
+    background-color: var(--a-white);
+
+    &::before {
+      background-color: var(--a-primary-transparent-05);
+    }
+  }
+
+  &.apos-has-placeholder {
+    &.apos-is-dragging--over::before {
+     background-color: var(--a-primary-transparent-25);
+    }
   }
 }
 
@@ -278,6 +336,7 @@ async function uploadMedia (event) {
 }
 
 .apos-media-uploader__inner {
+  z-index: $z-index-default;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -303,10 +362,10 @@ async function uploadMedia (event) {
 }
 
 :deep(.apos-media-uploader__btn) {
-  all: unset;
   @include apos-button-reset();
 
   & {
+    all: unset;
     color: var(--a-primary);
     font-weight: var(--a-weight-light);
     text-decoration: underline;
@@ -322,5 +381,4 @@ async function uploadMedia (event) {
   color: var(--a-background-inverted);
   font-size: var(--a-type-large);
 }
-
 </style>

modules/@apostrophecms/widget-type/ui/apos/composables/AposWidget.js

@@ -52,23 +52,24 @@ export async function _renderContent(props) {
     _docId: props.docId,
     widget,
     areaFieldId: props.areaFieldId,
-    type: props.type,
-    livePreview: props.aposLivePreview
+    type: props.type
   };
   try {
     if (props.rendering && (isEqual(props.rendering.parameters, body))) {
       return props.rendering.html;
-    } else {
-      // Don't use a placeholder here, it causes flickering in live preview
-      // mode. It is better to display the old until we display the new, we
-      // have "busy" for clarity
-      const result = await apos.http.post(`${apos.area.action}/render-widget?aposEdit=1&aposMode=${props.mode}`, {
-        busy: !props.aposLivePreview,
-        body
-      });
-      if (result !== 'aposLivePreviewSchemaNotYetValid') {
-        return result;
+    }
+    // Don't use a placeholder here, it causes flickering in live preview
+    // mode. It is better to display the old until we display the new, we
+    // have "busy" for clarity
+    const result = await apos.http.post(`${apos.area.action}/render-widget?aposEdit=1&aposMode=${props.mode}`, {
+      busy: !aposLivePreview,
+      body: {
+        ...body,
+        livePreview: aposLivePreview
       }
+    });
+    if (result !== 'aposLivePreviewSchemaNotYetValid') {
+      return result;
     }
   } catch (e) {
     // eslint-disable-next-line no-console