Modal Base: Info Societe Loading

See "img upload" in sidebar snet/molecules for variants, or go to info panel and look for it in "references" (@snet-img-upload)

Refer to modal frame found in view tab for complete structure without content.

A modal's default size is 640px

Modifier classes for modals

  • modal-sm: 480px
  • modal-md: 720px (mainly used for modals containing images)
  • modal-lg: 896px
  • modal-xl: 1120px

Content loading

A modal with a content loading component behaves as follows:

  • It has a second body element with the -isLoading class that is hidden by default, and shown only when ...
  • ... the -contentLoading modifier is applied to the modal element ...
  • ... which in turn hides the regular modal body element which into which the content is injected
<div class="sds-modal modal fade -bodySecondary06" id="modalInfoSocieteLoading" aria-labelledby="modalInfoSocieteLoadingTitle" aria-modal="true" role="dialog" tabindex="-1">
    <div class="sds-modal__dialog modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="sds-modal__content modal-content">

            <div class="sds-modal__header modal-header">

                <h5 class="sds-modal__title modal-title" id="modalInfoSocieteLoadingTitle">Données société</h5>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true" class="sds-icon sds-icon-close"></span>

                </button>

            </div>

            <div class="sds-modal__body modal-body">

                <div class="sds-box -insetLg">
                    <form class="row row-md align-items-center">
                        <div class="col-auto">
                            <div class="sds-upload -uploadImage -uploadComplete" data-js-upload>
                                <input type="file" disabled id="uploadDisabled" class="sr-only">
                                <div class="sds-upload__inner">
                                    <div class="sds-upload__content">

                                        <div class="sds-media -mediaXs -mediaHasBg -mediaRounded sds-upload__img">

                                            <span class="sds-media__icon sds-icon sds-icon-photo"></span>

                                            <img src="../../media/spuerkeess-site/components/testimonial-slider/smiling-student-female.png" alt="">

                                        </div>

                                        <div class="sds-upload__text sds-headingColor">
                                            <p class="sds-upload__heading">
                                                <label for="uploadDisabled" class="sds-upload__label stretched-link">{Text}</label>
                                            </p>
                                            <p class="sds-upload__meta sds-textHelper">
                                                {Weight}
                                            </p>
                                        </div>
                                    </div>

                                    <div class="sds-upload__actions d-none" data-js-upload-actions>
                                        <ul class="sds-btnGroup -btnGroupAboveClickArea">

                                            <li>
                                                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" disabled>

                                                    <span aria-hidden="true" class="sds-icon sds-icon-visible"></span>

                                                </button>
                                            </li>

                                            <li>
                                                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="" disabled>

                                                    <span aria-hidden="true" class="sds-icon sds-icon-trash"></span>

                                                </button>
                                            </li>

                                        </ul>
                                    </div>

                                </div>
                                <div class="sds-upload__errorMsg invalid-feedback" role="alert">
                                    <p class="sds-hint sds-textHelperSmall -hintError">

                                        <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                        Error message

                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col sds-stackLg">
                            <div class="form-group">
                                <label for="" class="sds-label -labelForm">
                                    Nom de la société

                                </label>
                                <div class="sds-input">
                                    <input id="" class="sds-input form-control" type="text" placeholder="Nom de la société" value="Epicerie luxembourgeoise SARL" disabled>

                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="sds-label -labelForm">
                                    Nom affichage

                                </label>
                                <div class="sds-input">
                                    <input id="" class="sds-input form-control" type="text" placeholder="Nom affichage" value="Epicerie du coin" disabled>

                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </div>

            <div class="sds-modal__footer modal-footer">

                <ul class="sds-btnGroup">
                    <li>
                        <button type="button" class="sds-btn -btnSecondary -btnInverse" disabled>

                            <span class="sds-btn__text">
                                Annuler

                            </span>

                        </button>
                    </li>
                    <li>
                        <button type="button" class="sds-btn -btnPrimary -isLoading" disabled>

                            <span class="sds-btn__text">
                                Sauvegarder

                            </span>

                        </button>
                    </li>
                </ul>

            </div>

        </div>
    </div>
</div>
{% extends "@snet-modal-base-frame" %}
{% block header %}
	<h5 class="{{ namespace }}modal__title modal-title" id="{{ modalTitleID }}">{{ title }}</h5>
{% endblock %}
{% block body %}
	<div class="{{ namespace }}box -insetLg">
		<form class="row row-md align-items-center">
			<div class="col-auto">
				{% render "@snet-upload-image--disabled" %}
			</div>
			<div class="col {{ namespace }}stackLg">
				{% render "@form-group",{
					disabledState: true,
					labelText: "Nom de la société",
					placeholder: "Nom de la société",
					value: "Epicerie luxembourgeoise SARL"
				},true %}
				{% render "@form-group",{
					disabledState: true,
					labelText: "Nom affichage",
					placeholder: "Nom affichage",
					value: "Epicerie du coin"
				},true %}
			</div>
		</form>
	</div>
{% endblock %}
{% block footer %}
	<ul class="{{ namespace }}btnGroup">
		<li>
			{% render "@btn-secondary-inverse",{
				text: "Annuler",
				disabled: true,
				attrs: imgTextBtnModalAttrs
			},true %}
		</li>
		<li>
			{% render "@btn-primary",{
				text: "Sauvegarder",
				disabled: true,
				classes: ["-isLoading"],
				attrs: imgTextBtnModalAttrs
			},true %}
		</li>
	</ul>
{% endblock %}
  • Content:
    export default class ModalTrap {
    	constructor() {
    
    		// select all modals with the dialog role and modal classe.
    		// this ensures that only modals with the right attributes are selected
    		this.modals = document.querySelectorAll("[role='dialog'].modal");
    
    		// select all modal trigger buttons that don't have a data-dismiss attribute
    		// buttons with data-dismiss and data-toggle are typically only used within modals to trigger another modal
    		// we want to exclude these from the selection
    		this.modalToggles = document.querySelectorAll("[data-toggle='modal']:not([data-dismiss='modal'])");
    
    		// list of focusable elements inside a modal
    		this.focusableElements = [
    			"a[href]",
    			"button:not([disabled])",
    			"textarea:not([disabled])",
    			"input:not([disabled])",
    			"select:not([disabled])",
    			"[tabindex]:not([tabindex='-1'])"
    		];
    
    		// this will ensure that any modal with the dialog-scrollable modifier gets the intended behaviour
    		// all other modals will get ignored
    		this.modalScrollBody = ".modal-dialog-scrollable .modal-body"
    
    		// modal trigger element with same data-target value as id of triggered modal
    		this.modalTriggerElement = null;
    
    		// Used to store keydown handlers per modal
    		this.focusHandlers = new WeakMap();
    		this.init();
    
    	}
    
    	init() {
    
    		// loop over all modal trigger buttons
    		this.modalToggles.forEach(btn => {
    
    			// if data target value is erroneous or doesn't match any modal ID, return false
    			const targetSelector = btn.getAttribute('data-target');
    			if ((targetSelector === "#") || (!targetSelector)) return;
    
    			// on modal trigger interaction, set the modal trigger element's value to that of its DOM representation
    			// and store it
    			btn.addEventListener('click', (e) => {
    				e.preventDefault();
    				this.modalTriggerElement = e.target;
    			});
    
    		});
    
    		// loop over all modals
    		this.modals.forEach(modal => {
    
    			const closeBtn = modal.querySelector('.sds-modal__close');
    
    			// when a modal shown event is fired:
    			$(modal).on('shown.bs.modal', (e) => {
    
    				// check if a close button exists and focus it if so
    				if (closeBtn) {
    					closeBtn.focus();
    				}
    				else {
    
    					// if no close is present focus first focusable element instead
    					let focusableElements = this.getFocusableElements(modal);
    					let first = focusableElements[0];
    
    					first.focus()
    
    				}
    
    				// check for a scrollable body element inside the modal
    				// set focus trap inside modal while open
    				this.checkScrollabilityAndSetFocusTrap(modal);
    
    				/*
    				 * if the modal gets shown through the bootstrap method instead of
    				 * through a trigger element interaction, store the value of the trigger element
    				 * so it can be focused when closing the modal
    				 *
    				 * this will ensure that no matter how the modal is shown,
    				 * there's always an element to put the focus back on when closed
    				 *
    				 * closing a modal after navigating from modal to modal will also put the focus back on
    				 * the initial modal trigger element or corresponding modal's trigger element, if applicable
    				 * for this purpose, modal trigger elements inside modals that have the data-dismiss="modal" attribute are ignored
    				 */
    
    				let lastFocusedElement = document.querySelector("[data-toggle='modal']:not([data-dismiss='modal'])[data-target='#"+ e.target.getAttribute("id") +"']");
    
    				if (lastFocusedElement) {
    					this.modalTriggerElement = lastFocusedElement;
    				}
    
    			});
    
    			$(modal).on('hidden.bs.modal', (e) => {
    
    				// if it exists focus the modal's trigger element upon closing the modal
    				if (this.modalTriggerElement) {
    					this.modalTriggerElement.focus();
    				}
    			});
    
    		});
    	}
    
    	checkScrollabilityAndSetFocusTrap(modal) {
    
    		const modalBodySelector = this.modalScrollBody;
    
    		// check if the modal scrollable modifier is applied to the current modal
    		// if not, the last element to receive focus will be the modal itself
    		const modalBody = modal.querySelector(modalBodySelector) ? modal.querySelector(modalBodySelector) : modal;
    
    		// add or remove tabindex depending on whether the modal body area is scrollable
    		function setScrollability () {
    
    			const isScrollable = modalBody.scrollHeight > modalBody.clientHeight;
    
    			if (isScrollable) {
    				// Ensure it's focusable
    				if (!modalBody.hasAttribute('tabindex')) {
    					modalBody.setAttribute('tabindex', '0');
    				}
    			} else {
    				if (modalBody.hasAttribute('tabindex')) {
    					modalBody.removeAttribute('tabindex');
    				}
    			}
    
    		}
    
    		// check if modal body is scriollable or not on page load
    		setScrollability();
    		// Initial trap
    		this.trapFocus(modal);
    
    		// Observe scrollability changes
    		const observer = new ResizeObserver(() => {
    			// check if modal body becomes scrollable on resize
    			setScrollability();
    			this.trapFocus(modal);
    		});
    
    		// Required to detect resizing/scrollability
    		observer.observe(modalBody);
    	}
    
    	// trap the kesyboard focus navigfation inside the modal while it is shown
    	trapFocus(modal) {
    
    		const focusable = this.getFocusableElements(modal);
    
    		// abort if no focusable elements are found inside modal
    		if (!focusable.length) return;
    
    		// define first and last focusable elements inside modal
    		const first = focusable[0];
    		const last = focusable[focusable.length - 1];
    
    		// Remove old handler if exists
    		if (this.focusHandlers.has(modal)) {
    			modal.removeEventListener('keydown', this.focusHandlers.get(modal));
    		}
    
    		// move focus from first to last and vice-versa when using tab or shift+tab
    		const handleKeydown = (e) => {
    			if (e.key !== 'Tab') return;
    
    			if (e.shiftKey && document.activeElement === first) {
    				e.preventDefault();
    				last.focus();
    			} else if (!e.shiftKey && document.activeElement === last) {
    				e.preventDefault();
    				first.focus();
    			}
    		};
    
    		modal.addEventListener('keydown', handleKeydown);
    		this.focusHandlers.set(modal, handleKeydown);
    	}
    
    	// function to get list of focusable elements in modal
    	getFocusableElements(container) {
    
    		// stringify list of focusable element to pass it to querySelectorAll
    		const selector = this.focusableElements.join();
    		return container.querySelectorAll(selector);
    
    	}
    }
  • URL: /components/raw/snet-modal-base/ModalTrap.js
  • Filesystem Path: components/snet/organisms/modal/modal-base/ModalTrap.js
  • Size: 6.1 KB