@madgex/design-system 13.5.1 → 13.6.0

package/src/components/inputs/file-upload/file-upload.config.js

@@ -7,11 +7,18 @@ module.exports = {
     name: 'file',
     id: 'file',
     fileTypes: '.doc,.docx,.pdf,.rtf',
+    cropper: {
+      i18n: {
+        tBtnReset: 'Cancel',
+        tBtnCommit: 'Crop and save',
+      },
+    },
   },
   variants: [
     {
       name: 'Selected file version',
       context: {
+        labelText: 'Selected file version',
         value: 'myCV.doc',
         name: 'selected-file',
         id: 'selected-file',
@@ -24,13 +31,60 @@ module.exports = {
       name: 'Errored file input',
       context: {
         labelText: 'Error with uploaded file',
-        name: 'selected-file',
-        id: 'selected-file',
+        name: 'selected-file-with-error',
+        id: 'selected-file-with-error',
         validationError: 'There was an error',
         i18n: {
           fallbackSelectedFileText: 'Use my saved CV or upload a different one',
         },
       },
     },
+    {
+      name: 'Image upload 320px x 160px',
+      context: {
+        labelText: 'Image upload 320px x 160px',
+        name: 'image-upload',
+        id: 'image-upload',
+        helpText: 'Your file must be a .jpg or.png. No larger than 244KB',
+        fileTypes: '.jpg,.png',
+        i18n: {
+          fallbackSelectedFileText: 'Add an image',
+        },
+        cropper: {
+          outputWidth: 320,
+          outputHeight: 160,
+          restrictPosition: false,
+          minZoom: '0.5',
+        },
+      },
+    },
+    {
+      name: 'Image upload - No auto open image cropper modal',
+      context: {
+        labelText: 'Image upload - No auto open image cropper modal',
+        name: 'image-upload-no-auto-open',
+        id: 'image-upload-no-auto-open',
+        helpText: 'Your file must be a .jpg or.png. No larger than 244KB',
+        fileTypes: '.jpg,.png',
+        i18n: {
+          fallbackSelectedFileText: 'Add an image',
+        },
+        noAutoOpenImageCropper: true,
+      },
+    },
+    {
+      name: 'Image upload without cropper',
+      context: {
+        labelText: 'Image upload without cropper',
+        name: 'image-upload-no-cropper',
+        id: 'image-upload-no-cropper',
+        helpText: 'Your file must be a .jpg or.png. No larger than 244KB',
+        fileTypes: '.jpg,.png',
+        i18n: {
+          fallbackSelectedFileText: 'Add an image',
+        },
+        noImageCropper: true,
+      },
+    },
   ],
 };

package/src/components/inputs/file-upload/file-upload.js

@@ -1,63 +1,173 @@
-const fileUploadClass = '.mds-form-element--file';
-const selectedFileClass = 'mds-form-element--selected-file';
-const dragOverClass = 'mds-form-element--dragover';
-const fileNameContainerClass = '.mds-file-upload__file-name';
-const removeButtonClass = '.mds-file-upload__remove-button';
-const supportedClass = 'mds-form-element--file-supported';
+/**
+ * MdsFileUpload
+ *
+ * Requires HTML rendered by MdsFileUpload Nunjucks macro.
+ *
+ *Image Cropper and Modal are optionally rendered by Nunjucks, this Web Component will gracefully continue if they do not exist.
+ */
+export class MdsFileUpload extends HTMLElement {
+  static selectedFileClass = 'mds-file-upload--selected-file';
+  static selectedFileIsImageClass = 'mds-file-upload--selected-file-is-image';
+  static dragOverClass = 'mds-file-upload--dragover';
 
-const fileUpload = {
-  init: () => {
-    if (!fileUpload.isBrowserIE()) {
-      const fileUploads = Array.from(document.querySelectorAll(fileUploadClass));
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.classList.add('mds-form-element--file-supported'); // useless?
 
-      fileUploads.forEach((uploader) => {
-        uploader.classList.add(supportedClass);
-        const fileNameContainer = uploader.querySelector(fileNameContainerClass);
-        const input = uploader.querySelector('input[type=file]');
-        const removeButton = uploader.querySelector(removeButtonClass);
+    this.#elInput.addEventListener('change', this.#onChangeInput);
+    this.#elRemoveButton.addEventListener('click', this.#onClickRemoveButton);
+    this.#elInput.addEventListener('dragover', this.#onDragOver);
+    this.#elInput.addEventListener('dragenter', this.#onDragOver);
+    this.#elInput.addEventListener('dragleave', this.#onDragEnd);
+    this.#elInput.addEventListener('dragend', this.#onDragEnd);
+    this.#elInput.addEventListener('drop', this.#onDragEnd);
+    this.#imageCropper?.addEventListener('commit', this.#onCommitImageCropper);
+    this.#imageCropper?.addEventListener('reset', this.#onResetImageCropper);
 
-        document.addEventListener('readystatechange', () => {
-          if (input.files && input.files.length) {
-            fileNameContainer.textContent = input.files[0].name;
-            uploader.classList.add(selectedFileClass);
-          }
-        });
+    this.#syncFileInputPopulated(true);
+  }
+  disconnectedCallback() {
+    this.#elInput?.removeEventListener('change', this.#onChangeInput);
+    this.#elRemoveButton?.removeEventListener('click', this.#onClickRemoveButton);
+    this.#elInput?.removeEventListener('dragover', this.#onDragOver);
+    this.#elInput?.removeEventListener('dragenter', this.#onDragOver);
+    this.#elInput?.removeEventListener('dragleave', this.#onDragEnd);
+    this.#elInput?.removeEventListener('dragend', this.#onDragEnd);
+    this.#elInput?.removeEventListener('drop', this.#onDragEnd);
+    this.#imageCropper?.removeEventListener('commit', this.#onCommitImageCropper);
+    this.#imageCropper?.removeEventListener('reset', this.#onResetImageCropper);
+  }
 
-        input.addEventListener('change', () => {
-          if (input.files && input.files.length) {
-            fileNameContainer.textContent = input.files[0].name;
-            uploader.classList.add(selectedFileClass);
-            removeButton.focus();
-          }
-        });
+  get rootNode() {
+    return this;
+  }
+  get #document() {
+    return this.getRootNode({ composed: true });
+  }
+  /** @type {File?} the file populated (we only handle single file) */
+  get #file() {
+    return this.#elInput?.files?.[0];
+  }
+  get #isFileImage() {
+    return this.#file?.type?.startsWith('image/');
+  }
+  /* Attributes */
+  get #noAutoOpenImageCropper() {
+    const attr = this.rootNode.getAttribute('no-auto-open-image-cropper');
+    return attr !== null && attr !== 'false';
+  }
+  /* Elements */
+  get #elFileNameContainer() {
+    return this.rootNode.querySelector('.mds-file-upload__file-name');
+  }
+  get #elInput() {
+    return this.rootNode.querySelector('input[type=file]');
+  }
+  get #elRemoveButton() {
+    return this.rootNode.querySelector('.mds-file-upload__remove-button');
+  }
+  get #elPreviewImage() {
+    return this.rootNode.querySelector('.mds-file-upload__preview-image');
+  }
+  get #imageCropperModalTriggerButton() {
+    return this.rootNode.querySelector('.mds-file-upload__open-modal');
+  }
+  get #imageCropperModal() {
+    return this.rootNode.querySelector('.mds-modal');
+  }
+  get #imageCropper() {
+    return this.rootNode.querySelector('mds-image-cropper');
+  }
 
-        removeButton.addEventListener('click', (elem) => {
-          elem.preventDefault();
-          input.value = '';
-          fileNameContainer.textContent = '';
-          uploader.classList.remove(selectedFileClass);
-          input.focus();
-        });
-
-        ['dragover', 'dragenter'].forEach((event) => {
-          input.addEventListener(event, (e) => {
-            e.stopPropagation();
-            uploader.classList.add(dragOverClass);
-          });
-        });
-
-        ['dragleave', 'dragend', 'drop'].forEach((event) => {
-          input.addEventListener(event, (e) => {
-            e.stopPropagation();
-            uploader.classList.remove(dragOverClass);
-          });
-        });
-      });
+  /* Event handlers */
+  #onChangeInput = (e) => {
+    const { dontOpenModal = false } = e?.detail || {};
+    this.#syncFileInputPopulated();
+    if (this.#file) {
+      this.#elRemoveButton.focus();
+    }
+    if (!dontOpenModal && this.#isFileImage && !this.#noAutoOpenImageCropper) {
+      // automatically open image cropper modal if file is image
+      this.#openModal();
     }
-  },
-  isBrowserIE: () => {
-    return !!window.document.documentMode;
-  },
-};
+  };
+  #onClickRemoveButton = (e) => {
+    e.preventDefault();
+    this.removeFile();
+    this.#elInput.focus();
+  };
+  #onDragOver = (e) => {
+    e.stopPropagation();
+    this.classList.add(MdsFileUpload.dragOverClass);
+  };
+  #onDragEnd = (e) => {
+    e.stopPropagation();
+    this.classList.remove(MdsFileUpload.dragOverClass);
+  };
+  /** on receiving a new Blob from image cropper, update file input with new data */
+  #onCommitImageCropper = (e) => {
+    /** @type {Blob?} */
+    const blob = e.detail;
+    if (blob) {
+      // load blob back into fileinput using DataTransfer
+      const croppedFile = new File([blob], this.#file?.name || 'cropped-image', { type: blob.type });
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(croppedFile);
+      this.#elInput.files = dataTransfer.files;
+      // trigger 'change' as if a user selected a file, which in turn will run `#onChangeInput`
+      // eslint-disable-next-line n/no-unsupported-features/node-builtins
+      this.#elInput.dispatchEvent(new CustomEvent('change', { detail: { dontOpenModal: true }, bubbles: true }));
+      // close modal
+      this.#closeModal();
+    }
+  };
+  #onResetImageCropper = () => {
+    // close modal - TODO: convert modal js into web component so we can call `close` method instead of knowing this classname?
+    this.#closeModal();
+  };
 
-export default fileUpload;
+  /* Methods */
+  /**
+   * sync filename, image preview and selected state based on `this.#elInput` files
+   * @param {boolean} [dontResetState=false] used on connectedCallback, if there is no real file, we still want to display a populated state!
+   *  */
+  #syncFileInputPopulated(dontResetState = false) {
+    if (this.#file) {
+      // has file
+      this.#elFileNameContainer.textContent = this.#file.name;
+      this.classList.add(MdsFileUpload.selectedFileClass);
+      // if file is image, load and show preview, populate cropper src
+      if (this.#isFileImage) {
+        this.classList.add(MdsFileUpload.selectedFileIsImageClass);
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          this.#elPreviewImage.src = e.target.result;
+          this.#imageCropper?.setAttribute('src', e.target.result);
+        };
+        reader.readAsDataURL(this.#file);
+      } else {
+        this.classList.remove(MdsFileUpload.selectedFileIsImageClass);
+      }
+    } else if (!dontResetState) {
+      // no file, empty state
+      this.#elFileNameContainer.textContent = '';
+      this.classList.remove(MdsFileUpload.selectedFileClass);
+      this.classList.remove(MdsFileUpload.selectedFileIsImageClass);
+    }
+  }
+  #openModal() {
+    // TODO: When `modal code` is Web Component, use that instead of triggering click events on DOM elements...
+    this.#imageCropperModalTriggerButton?.dispatchEvent(new Event('click'));
+  }
+  #closeModal() {
+    // TODO: When `modal code` is Web Component, use that instead of triggering click events on DOM elements...
+    this.#imageCropperModal?.querySelector('.js-mds-modal-close').dispatchEvent(new Event('click'));
+  }
+  /** remove file from input */
+  removeFile() {
+    this.#elInput.value = '';
+    this.#elInput.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+}

package/src/components/inputs/file-upload/file-upload.njk

@@ -1,5 +1,4 @@
 {% from "./inputs/file-upload/_macro.njk" import MdsFileUpload %}
-
 <div class="mds-grid-row">
   <div class="mds-grid-col-12 mds-grid-col-lg-9">
     <div class="mds-form-field">
@@ -18,7 +17,11 @@
         classes: classes,
         tooltipMessage: tooltipMessage,
         fileTypes: fileTypes,
-        i18n: i18n
+        i18n: i18n,
+        siteContainerId:siteContainerId, 
+        noImageCropper: noImageCropper,
+        noAutoOpenImageCropper: noAutoOpenImageCropper,
+        cropper: cropper
       }) }}
     </div>
   </div>

package/src/components/inputs/file-upload/file-upload.scss

@@ -1,137 +1,129 @@
-.mds-file-upload__input .mds-file-upload__input-controls {
+/* container for fancy file upload, hidden without `.js` */
+.mds-file-upload__wrapper {
   display: none;
 }
 
-.js .mds-form-element--file-supported .mds-file-upload {
-  display: flex;
-  flex-direction: column;
-  background-color: $constant-color-neutral-lightest;
-  padding: $constant-size-baseline;
-
-  @include mq($from: $constant-size-breakpoint-md) {
-    flex-direction: row;
+/* all styling is only relevant if JS is enabled  */
+.js {
+  .mds-file-upload__selected-file-fallback {
+    display: none;
   }
-}
-
-.js .mds-form-element--file-supported .mds-file-upload__input {
-  position: relative;
-  border: 1px dashed $constant-color-neutral-lighter;
-  width: 100%;
-  padding: ($constant-size-baseline * 4) ($constant-size-baseline * 2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & .mds-form-label {
+  .mds-file-upload {
     position: relative;
-    @include z-index;
     display: block;
-    cursor: pointer;
-    margin-bottom: 0;
+    background-color: $constant-color-neutral-lightest;
+    max-width: 100%;
+    width: 100%;
+    padding: $constant-size-baseline;
+    .mds-form-label {
+      position: relative;
+      @include z-index;
+      display: block;
+      cursor: pointer;
+      margin-bottom: 0;
+    }
+    .mds-form-label__label {
+      @extend .mds-button;
+      @extend .mds-button--small;
+      font-weight: normal;
+    }
+  }
+  .mds-file-upload__wrapper {
+    display: block;
+    padding: ($constant-size-baseline * 3);
+    border: 1px dashed $constant-color-neutral-lighter;
+  }
+  .mds-file-upload--dragover {
+    .mds-file-upload__wrapper {
+      background-color: #fff;
+    }
+    .mds-form-label {
+      pointer-events: none; // avoid label blocking drag action
+    }
+  }
+  .mds-file-upload__state {
+    display: flex;
+    align-items: center;
+  }
+  .mds-file-upload__state--no-file {
+    flex-direction: column;
+    row-gap: $constant-size-baseline * 5;
+    & .mds-icon {
+      fill: var(--mds-color-button-bg-base, #000);
+    }
+  }
+  .mds-file-upload__state--selected {
+    display: none;
+  }
+  .mds-file-upload__preview .mds-file-upload__preview-image {
+    display: none;
+    max-width: 100%;
+    max-height: 100%;
+  }
+  .mds-file-upload:not(.mds-file-upload--selected-file-is-image) .mds-file-upload__open-modal {
+    display: none;
+  }
+  .mds-file-upload--selected-file-is-image .mds-file-upload__preview-icon {
+    display: none;
+  }
+  .mds-file-upload--selected-file-is-image .mds-file-upload__preview-image {
+    display: block;
+    width: 70px;
+    height: 70px;
+    object-fit: contain;
   }
 
-  & label {
-    @extend .mds-button;
-    @extend .mds-button--small;
-    font-weight: normal;
+  .mds-file-upload__file-name-container {
+    display: flex;
+    align-items: center;
   }
 
-  & .mds-form-control {
+  .mds-file-upload__input {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     opacity: 0;
   }
-
-  & .mds-file-upload__input-controls {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-
-  & .mds-form-control:focus ~ .mds-file-upload__input-controls {
+  .mds-file-upload__input:focus ~ .mds-file-upload__wrapper {
     // Apply some focus styling to the 'button' when the input has focus and can be keyboard-activated
-    label {
+    .mds-form-label__label {
       border: 1px solid $focus-color;
       outline-color: $focus-color;
       box-shadow: 0 0 4px 2px $focus-color;
     }
   }
-}
-
-.js .mds-form-element--file-supported .mds-file-upload__prompt {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: $constant-size-baseline * 5;
-
-  & .mds-icon {
-    fill: var(--mds-color-button-bg-base, #000);
-  }
-}
-
-.mds-file-upload__selected-state {
-  display: none;
-}
-.mds-file-upload__file-name-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: $constant-size-baseline * 2 $constant-size-baseline * 3;
-}
-.mds-file-upload__remove-button {
-  @include z-index;
-}
-
-.js .mds-form-element--file-supported.mds-form-element--selected-file {
-  @include mq($from: $constant-size-breakpoint-md) {
-    width: 50%;
-  }
 
-  & .mds-file-upload {
+  /* Selected state */
+  .mds-file-upload--selected-file {
     border: $regular-border;
-  }
-  & .mds-file-upload__input {
-    border: 0;
-  }
-  /* When a file is selected, we reduce the input size to 0 (.mds-form-control)
+    @include mq($from: $constant-size-breakpoint-md) {
+      width: 50%;
+      min-width: fit-content;
+    }
+    .mds-file-upload__wrapper {
+      border: none;
+    }
+
+    /* When a file is selected, we reduce the input size to 0 (.mds-form-control)
   * so the user can't click or drag and drop in the grey area anymore.
   * Will mostly be useful when used with the cloud services buttons
   * as the user will need to clear the input to see the buttons again.
   * We also remove the dotted border to indicate the change
   */
-  & .mds-form-control {
-    display: none;
-  }
-  & .mds-file-upload__input-controls {
-    display: block;
-  }
-
-  & .mds-file-upload__selection-state {
-    display: none;
-  }
-  & .mds-file-upload__selected-state {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
-}
-
-.js .mds-form-element--file-supported.mds-form-element--dragover {
-  & .mds-file-upload__input {
-    background-color: #fff;
+    .mds-file-upload__input {
+      display: none;
+    }
+    .mds-file-upload__state--no-file {
+      display: none;
+    }
+    .mds-file-upload__state--selected {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $constant-size-baseline * 4; // spacing between preview image/icon and filename, also works when flex wrapping occurs on small screens
+      .mds-button {
+        padding-left: 0;
+      }
+    }
   }
 }
-
-/* If the drag and drop is supported, we hide the "selected file" fallback sentence.
- * The text will show by default when there is no javascript
- * or for browsers like IE that don't support drag and drop,
- * as they will both get the default file input.
-*/
-.js .mds-form-element--file-supported .mds-file-upload__selected-file-fallback {
-  display: none;
-}

package/src/components/inputs/text-editor/_template.njk

@@ -34,7 +34,7 @@
   <textarea
       class="mds-form-control"
       name="{{ params.id }}"
-      id="text-editor-fallback-{{ params.id }}"
+      id="{{ params.id }}"
       {%- if params.validationError %}
         aria-invalid="true"
       {% endif -%}

package/src/components/inputs/text-editor/text-editor.config.js

@@ -14,7 +14,7 @@ module.exports = {
       name: 'Custom toolbar and translated editor',
       context: {
         variantTitle: 'Custom toolbar and translated editor',
-        id: 'custom-toolbar',
+        id: 'custom.toolbar',
         labelText: 'Ajouter un commentaire',
         menuButtons: [
           {

package/src/components/modal/modal.js

@@ -61,10 +61,10 @@ const modals = {
     focusedElementBeforeModal = document.activeElement;
     modal.classList.add(modalActiveClass);
     firstTabStop.focus();
-    siteContainer.setAttribute('aria-hidden', 'true');
+    siteContainer?.setAttribute('aria-hidden', 'true');
   },
   close: (modal, previousActiveElement, siteContainer) => {
-    siteContainer.removeAttribute('aria-hidden');
+    siteContainer?.removeAttribute('aria-hidden');
     modal.classList.remove(modalActiveClass);
     previousActiveElement.focus();
   },

package/src/js/index.js

@@ -5,7 +5,7 @@ import subnavigation from '../components/subnavigation/subnavigation';
 import checkboxList from '../components/inputs/checkbox-list/checkbox-list';
 import popovers from '../components/popover/popover';
 import modals from '../components/modal/modal';
-import fileUpload from '../components/inputs/file-upload/file-upload';
+import { MdsFileUpload } from '../components/inputs/file-upload/file-upload';
 import characterCount from '../components/inputs/textarea/character-count';
 import button from '../components/button/button';
 import prose from '../helpers/prose/prose';
@@ -31,6 +31,9 @@ if (!window.customElements.get('mds-conditional-section')) {
 if (!window.customElements.get('mds-image-cropper')) {
   window.customElements.define('mds-image-cropper', MdsImageCropper);
 }
+if (!window.customElements.get('mds-file-upload')) {
+  window.customElements.define('mds-file-upload', MdsFileUpload);
+}
 if (!window.customElements.get('mds-category-picker')) {
   window.customElements.define('mds-category-picker', MdsCategoryPicker);
 }
@@ -41,7 +44,6 @@ const initAll = () => {
   subnavigation.init();
   checkboxList.init();
   modals.init();
-  fileUpload.init();
   characterCount.init();
   popovers.init();
   button.init();