Aware Controls | JavaScript (ES5) Toast Demos

The Toast control is a small, temporary message that appears on the screen to deliver important information without interrupting the user's flow.

Default Behavior

Demonstrates the default behavior of the Toast control.

const cntlDefaultToast = new ac.notifications.Toast(
	{
		position: {
			X: "Right",
			Y: "Top"
		}
	},
	"#cntlDefaultToastContainer"
);

const cntlShowDefault = new ac.buttons.Button({ isPrimary: true }, "#cntlShowDefault");

cntlShowDefault.element.onclick = () => {
	cntlDefaultToast.show({
		title: "Ahoy, hoy",
		content: "Welcome to Aware Controls!"
	});
};

<div id="cntlDefaultToastContainer"></div>
<div class="d-flex flex-wrap" style="justify-content: center">
	<button id="cntlShowDefault">Show Toast</button>
</div>

With Sound

Demonstrates the playing a sound when the Toast notification is opened.

const cntlDefaultToast = new ac.notifications.Toast(
	{
		position: {
			X: "Right",
			Y: "Top"
		}
	},
	"#cntlDefaultToastContainer"
);

const cntlShowDefault = new ac.buttons.Button({ isPrimary: true }, "#cntlShowDefault");

cntlShowDefault.element.onclick = () => {
	cntlDefaultToast.show({
		title: "Ahoy, hoy",
		content: "Did you hear the chime sound play?",
		cssClass: "a-toast-succes",
		soundPath: "../assets/media/smallbox.mp3",
		showProgressBar: true,
		timeout: 3000
	});
};

<div id="cntlDefaultToastContainer"></div>
<div class="d-flex flex-wrap" style="justify-content: center">
	<button id="cntlShowDefault">Show Toast</button>
</div>

Types

Demonstrates the different types of Toasts notification.

Information

Success

Warning

Error

const cntlDefaultToast = new ac.notifications.Toast(
	{
		position: {
			X: "Right",
			Y: "Top"
		}
	},
	"#cntlDefaultToastContainer"
);

const cntlShowInfo = new ac.buttons.Button({ cssClass: "a-info" }, "#cntlShowInfo");
cntlShowInfo.element.onclick = () => {
	cntlDefaultToast.show({
		title: "Ahoy, hoy",
		content: "Welcome to Aware Controls!",
		cssClass: "a-toast-info"
	});
};

const cntlShowSuccess = new ac.buttons.Button({ cssClass: "a-success" }, "#cntlShowSuccess");
cntlShowSuccess.element.onclick = () => {
	cntlDefaultToast.show({
		title: "Ahoy, hoy",
		content: "Welcome to Aware Controls!",
		cssClass: "a-toast-success"
	});
};

const cntlShowWarning = new ac.buttons.Button({ cssClass: "a-warning" }, "#cntlShowWarning");
cntlShowWarning.element.onclick = () => {
	cntlDefaultToast.show({
		title: "Ahoy, hoy",
		content: "Welcome to Aware Controls!",
		cssClass: "a-toast-warning"
	});
};

const cntlShowError = new ac.buttons.Button({ cssClass: "a-danger" }, "#cntlShowError");
cntlShowError.element.onclick = () => {
	cntlDefaultToast.show({
		title: "Ahoy, hoy",
		content: "Welcome to Aware Controls!",
		cssClass: "a-toast-danger"
	});
};

const cntlTypeHideAll = new ac.buttons.Button({}, "#cntlTypeHideAll");
cntlTypeHideAll.element.onclick = () => {
	cntlDefaultToast.hide("All");
};

<div class="form-horizontal form-bordered">
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Information</label>
		<div class="col-lg-8">
			<button id="cntlShowInfo">Show Info</button>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Success</label>
		<div class="col-lg-8">
			<button id="cntlShowSuccess">Show Success</button>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Warning</label>
		<div class="col-lg-8">
			<button id="cntlShowWarning">Show Warning</button>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Error</label>
		<div class="col-lg-8">
			<button id="cntlShowError">Show Error</button>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4"></label>
		<div class="col-lg-8">
			<button id="cntlTypeHideAll">Hide All</button>
		</div>
	</div>
</div>

Positioning

Demonstrates positioning options for the Toasts notification.

Position

Target

const cntlPositionToastContainer = new ac.notifications.Toast(
	{
		title: "Ahoy, hoy",
		content: "This is an example of positioning the toast notfication.",
		target: document.body,
		showProgressBar: true,
		timeout: 3000
	},
	"#cntlPositionToastContainer"
);

const initialWidth = cntlPositionToastContainer.width.toString();

new ac.dropdowns.DropDownList(
	{
		select: function (e) {
			cntlPositionToastContainer.hide("All");
			cntlPositionToastContainer.width = initialWidth;

			const pos = e.itemData.value;

			switch (pos) {
				case "topleft":
					cntlPositionToastContainer.position.X = "Left";
					cntlPositionToastContainer.position.Y = "Top";
					break;
				case "topright":
					cntlPositionToastContainer.position.X = "Right";
					cntlPositionToastContainer.position.Y = "Top";
					break;
				case "topcenter":
					cntlPositionToastContainer.position.X = "Center";
					cntlPositionToastContainer.position.Y = "Top";
					break;
				case "topfullwidth":
					cntlPositionToastContainer.width = "100%";
					cntlPositionToastContainer.position.X = "Center";
					cntlPositionToastContainer.position.Y = "Top";
					break;
				case "bottomleft":
					cntlPositionToastContainer.position.X = "Left";
					cntlPositionToastContainer.position.Y = "Bottom";
					break;
				case "bottomright":
					cntlPositionToastContainer.position.X = "Right";
					cntlPositionToastContainer.position.Y = "Bottom";
					break;
				case "bottomcenter":
					cntlPositionToastContainer.position.X = "Center";
					cntlPositionToastContainer.position.Y = "Bottom";
					break;
				case "bottomfullwidth":
					cntlPositionToastContainer.width = "100%";
					cntlPositionToastContainer.position.X = "Center";
					cntlPositionToastContainer.position.Y = "Bottom";
					break;
			}
		}
	},
	"#cntlToastPosition"
);

new ac.dropdowns.DropDownList(
	{
		select: function (e) {
			cntlPositionToastContainer.hide("All");

			const target = e.itemData.value;

			switch (target) {
				case "thispanel":
					cntlPositionToastContainer.target = document.getElementById("panelToast");
					break;
				default:
					cntlPositionToastContainer.target = document.body;
					break;
			}
		}
	},
	"#cntlToastTarget"
);

const cntlPositionShow = new ac.buttons.Button({}, "#cntlPositionShow");
cntlPositionShow.element.onclick = () => {
	cntlPositionToastContainer.show();
};

<div id="cntlPositionToastContainer"></div>
<div class="form-horizontal form-bordered">
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Position</label>
		<div class="col-lg-8">
			<select id="cntlToastPosition">
				<option value="topleft">Top Left</option>
				<option value="topright">Top Right</option>
				<option value="topcenter">Top Center</option>
				<option value="topfullwidth">Top Full Width</option>
				<option value="bottomleft">Bottom Left</option>
				<option value="bottomright">Bottom Right</option>
				<option value="bottomcenter">Bottom Center</option>
				<option value="bottomfullwidth">Bottom Full Width</option>
			</select>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Target</label>
		<div class="col-lg-8">
			<select id="cntlToastTarget">
				<option value="body">Document Body</option>
				<option value="thispanel">This Panel</option>
			</select>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4"></label>
		<div class="col-lg-8">
			<button id="cntlPositionShow">Show Toast</button>
		</div>
	</div>
</div>