Component Library
Sign out

Toast 

<div style="display:flex;">
    <div onclick="toastDemo1.showToast()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        Upload - Show Toast
    </div>

    <div onclick="toastDemo1.hideToast()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 20px; border-radius: 6px">
        Upload - Hide Toast
    </div>

    <div onclick="toastDemo2.showToast()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        Warning - Show Toast
    </div>

    <div onclick="toastDemo2.hideToast()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 20px; border-radius: 6px">
        Warning - Hide Toast
    </div>

    <div onclick="toastDemo3.showToast()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        Error - Show Toast
    </div>

    <div onclick="toastDemo3.hideToast()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        Error - Hide Toast
    </div>

    <div onclick="toastDemo4.showToast()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        Info - Show Toast
    </div>

    <div onclick="toastDemo4.hideToast()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        Info - Hide Toast
    </div>
</div>

<div class="acl-toast__container acl-toast__white-text acl-toast__success acl-toast__rounded-corners animated slideInUp toast-demo-1" style="margin: 20px 0">
    <div class="acl-toast__content-container animated fadeIn">
        <div class="acl-toast__content-spinner">
            <svg class="acl-loader__circular" width="15px" height="15px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle class="acl-loader__circular-background" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                <circle class="acl-loader__circular-path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
            </svg>
        </div>
        <div class="acl-toast__content-title">
            Uploading files
        </div>
        <div class="acl-toast__content-counter">
            12/50 Added
        </div>
    </div>

    <div class="acl-toast__divider animated fadeIn"></div>

    <div class="acl-toast__action-container">
        <div class="acl-toast__dismiss-icon">
            <i class="aforza-icons">acl_close_small</i>
        </div>
    </div>
</div>

<div class="acl-toast__container acl-toast__white-text acl-toast__warning acl-toast__rounded-corners animated slideInUp toast-demo-2" style="margin: 20px 0">
    <div class="acl-toast__content-container animated fadeIn">
        <i class="aforza-icons acl-toast__content-icon">acl_notification_warning</i>
        <div class="acl-toast__content-info-container">
            <div class="acl-toast__content-title">
                Warning Notification
            </div>
            <div class="acl-toast__content-text">
                This is what a really long error or notification message looks like - it could even have an error code like: E-12345GregsFault6789
            </div>
        </div>
    </div>

    <div class="acl-toast__divider animated fadeIn"></div>

    <div class="acl-toast__action-container">
        <div class="acl-toast__dismiss-icon">
            <i class="aforza-icons">acl_close_small</i>
        </div>
    </div>
</div>

<div class="acl-toast__container acl-toast__white-text acl-toast__error acl-toast__rounded-corners animated slideInUp toast-demo-3" style="margin: 20px 0">
    <div class="acl-toast__content-container animated fadeIn">
        <i class="aforza-icons acl-toast__content-icon">acl_notification_error</i>
        <div class="acl-toast__content-info-container">
            <div class="acl-toast__content-title">
                Failed to update object
            </div>
            <div class="acl-toast__content-text">
                Null pointer exception.
            </div>
        </div>
    </div>

    <div class="acl-toast__divider animated fadeIn"></div>

    <div class="acl-toast__action-container">
        <div class="acl-toast__dismiss-icon">
            <i class="aforza-icons">acl_close_small</i>
        </div>
    </div>
</div>

<div class="acl-toast__container acl-toast__white-text acl-toast__info acl-toast__rounded-corners animated slideInUp toast-demo-4" style="margin: 20px 0">
    <div class="acl-toast__content-container animated fadeIn">
        <i class="aforza-icons acl-toast__content-icon">acl_notification_info</i>
        <div class="acl-toast__content-info-container">
            <div class="acl-toast__content-title">
                Info Notification
            </div>
            <div class="acl-toast__content-text">
                Can be used to give user general information
            </div>
        </div>
    </div>

    <div class="acl-toast__divider animated fadeIn"></div>

    <div class="acl-toast__action-container">
        <div class="acl-toast__dismiss-icon">
            <i class="aforza-icons">acl_close_small</i>
        </div>
    </div>
</div>

<script>
    const toastElement = document.querySelector('.toast-demo-1');
    const toastDemo1 = new acl.ACLToast(toastElement);
    const toastElement2 = document.querySelector('.toast-demo-2');
    const toastDemo2 = new acl.ACLToast(toastElement2);
    const toastElement3 = document.querySelector('.toast-demo-3');
    const toastDemo3 = new acl.ACLToast(toastElement3);
    const toastElement4 = document.querySelector('.toast-demo-4');
    const toastDemo4 = new acl.ACLToast(toastElement4);
    toastElement.addEventListener('toastdismissed', () => {
        console.log('toast dismissed');
    })
</script>
 
<div style="display:flex;">
	<div
		onclick="toastDemo1.showToast()"
		style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px"
	>
		Upload - Show Toast
	</div>

	<div
		onclick="toastDemo1.hideToast()"
		style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 20px; border-radius: 6px"
	>
		Upload - Hide Toast
	</div>

	<div
		onclick="toastDemo2.showToast()"
		style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px"
	>
		Warning - Show Toast
	</div>

	<div
		onclick="toastDemo2.hideToast()"
		style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 20px; border-radius: 6px"
	>
		Warning - Hide Toast
	</div>

	<div
		onclick="toastDemo3.showToast()"
		style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px"
	>
		Error - Show Toast
	</div>

	<div
		onclick="toastDemo3.hideToast()"
		style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px"
	>
		Error - Hide Toast
	</div>

	<div
		onclick="toastDemo4.showToast()"
		style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px"
	>
		Info - Show Toast
	</div>

	<div
		onclick="toastDemo4.hideToast()"
		style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px"
	>
		Info - Hide Toast
	</div>
</div>

<div
	class="acl-toast__container acl-toast__white-text acl-toast__success acl-toast__rounded-corners animated slideInUp toast-demo-1"
	style="margin: 20px 0"
>
	<div class="acl-toast__content-container animated fadeIn">
		<div class="acl-toast__content-spinner">
			<svg
				class="acl-loader__circular"
				width="15px"
				height="15px"
				viewBox="0 0 66 66"
				xmlns="http://www.w3.org/2000/svg"
			>
				<circle
					class="acl-loader__circular-background"
					fill="none"
					stroke-width="6"
					cx="33"
					cy="33"
					r="30"
				></circle>
				<circle class="acl-loader__circular-path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
			</svg>
		</div>
		<div class="acl-toast__content-title">
			Uploading files
		</div>
		<div class="acl-toast__content-counter">
			12/50 Added
		</div>
	</div>

	<div class="acl-toast__divider animated fadeIn"></div>

	<div class="acl-toast__action-container">
		<div class="acl-toast__dismiss-icon">
			<i class="aforza-icons">acl_close_small</i>
		</div>
	</div>
</div>

<div
	class="acl-toast__container acl-toast__white-text acl-toast__warning acl-toast__rounded-corners animated slideInUp toast-demo-2"
	style="margin: 20px 0"
>
	<div class="acl-toast__content-container animated fadeIn">
		<i class="aforza-icons acl-toast__content-icon">acl_notification_warning</i>
		<div class="acl-toast__content-info-container">
			<div class="acl-toast__content-title">
				Warning Notification
			</div>
			<div class="acl-toast__content-text">
				This is what a really long error or notification message looks like - it could even have an error code like: E-12345GregsFault6789
			</div>
		</div>
	</div>

	<div class="acl-toast__divider animated fadeIn"></div>

	<div class="acl-toast__action-container">
		<div class="acl-toast__dismiss-icon">
			<i class="aforza-icons">acl_close_small</i>
		</div>
	</div>
</div>

<div
	class="acl-toast__container acl-toast__white-text acl-toast__error acl-toast__rounded-corners animated slideInUp toast-demo-3"
	style="margin: 20px 0"
>
	<div class="acl-toast__content-container animated fadeIn">
		<i class="aforza-icons acl-toast__content-icon">acl_notification_error</i>
		<div class="acl-toast__content-info-container">
			<div class="acl-toast__content-title">
				Failed to update object
			</div>
			<div class="acl-toast__content-text">
				Null pointer exception.
			</div>
		</div>
	</div>

	<div class="acl-toast__divider animated fadeIn"></div>

	<div class="acl-toast__action-container">
		<div class="acl-toast__dismiss-icon">
			<i class="aforza-icons">acl_close_small</i>
		</div>
	</div>
</div>

<div
	class="acl-toast__container acl-toast__white-text acl-toast__info acl-toast__rounded-corners animated slideInUp toast-demo-4"
	style="margin: 20px 0"
>
	<div class="acl-toast__content-container animated fadeIn">
		<i class="aforza-icons acl-toast__content-icon">acl_notification_info</i>
		<div class="acl-toast__content-info-container">
			<div class="acl-toast__content-title">
				Info Notification
			</div>
			<div class="acl-toast__content-text">
				Can be used to give user general information
			</div>
		</div>
	</div>

	<div class="acl-toast__divider animated fadeIn"></div>

	<div class="acl-toast__action-container">
		<div class="acl-toast__dismiss-icon">
			<i class="aforza-icons">acl_close_small</i>
		</div>
	</div>
</div>

<script>
	const toastElement = document.querySelector('.toast-demo-1');
	const toastDemo1 = new acl.ACLToast(toastElement);
	const toastElement2 = document.querySelector('.toast-demo-2');
	const toastDemo2 = new acl.ACLToast(toastElement2);
	const toastElement3 = document.querySelector('.toast-demo-3');
	const toastDemo3 = new acl.ACLToast(toastElement3); 
	const toastElement4 = document.querySelector('.toast-demo-4');
	const toastDemo4 = new acl.ACLToast(toastElement4); 

	toastElement.addEventListener('toastdismissed', () => {
		console.log('toast dismissed');
	})
</script>
 
/* No context defined. */
  • Content: 
    .acl-toast {
	&__container {
		align-items: center;
		min-height: 46px;
		padding: 5px 20px;
		display: none;
	}

	&--show {
		display: flex;
	}

	&__content-container {
		display: flex;
		flex: 1;
		align-items: center;
	}

	&__content-spinner {
		padding: 2px 10px 0px 0px;
	}

	&__content-icon {
		margin-right: 10px;
		font-size: 16px;
	}

	&__content-title {
		font-weight: bold;
		flex: 1;
		font-size: 12px;
	}

	&__content-text {
		flex: 1;
		font-size: 12px;
	}

	&__content-counter {
		text-decoration: underline;
		padding: 5px 20px;
		font-size: 14px;
	}

	&__action-container {
		margin: 0 -3px 0 13px;
		padding: 0px 2px;
	}

	&__success {
		background-color: #2cbcb2;
	}

	&__warning {
		background-color: rgb(250, 177, 42);
	}

	&__error {
		background-color: rgb(194, 9, 9);
	}

	&__info {
		background-color: rgb(40, 136, 214);
	}

	&__divider {
		min-height: 46px;
		width: 1px;
		background-color: rgba(255, 255, 255, 0.3);
	}

	&__white-text {
		color: $white;
	}

	&__rounded-corners {
		border-radius: 6px;
	}

	&__dismiss-icon {
		display: flex;
		cursor: pointer;

		i {
			user-select: none;
			font-size: 23px;
		}
	}
}
  • URL: /components/raw/toast/acl-toast.scss
  • Filesystem Path: src/components/toast/acl-toast.scss
  • Size: 1.1 KB
  • Content: 
    class ACLToast {
	constructor(toastEl) {
		this.selector = Object.freeze({
			ACL_TOAST: 'acl-toast',
			DISMISS_ICON: '.acl-toast__dismiss-icon',
		});

		this.customEvent = Object.freeze({
			CLICK: 'click',
			TOAST_DISMISSED: 'toastdismissed',
		});

		this.modifier = Object.freeze({
			SHOW: '--show',
		});

		this.toastElement = toastEl;
		const dismissButton = this.toastElement.querySelector(this.selector.DISMISS_ICON);

		if (dismissButton) dismissButton.addEventListener(this.customEvent.CLICK, () => this.hideToast());
	}

	showToast() {
		if (this.toastElement) {
			this.toastElement.classList.add(`${this.selector.ACL_TOAST}${this.modifier.SHOW}`);
		}
	}

	hideToast() {
		if (this.toastElement) {
			this.toastElement.classList.remove(`${this.selector.ACL_TOAST}${this.modifier.SHOW}`);
			this.toastElement.dispatchEvent(new CustomEvent(this.customEvent.TOAST_DISMISSED));
		}
	}
}

export { ACLToast };
  • URL: /components/raw/toast/index.js
  • Filesystem Path: src/components/toast/index.js
  • Size: 924 Bytes

No notes defined.