SOW : Core Plugins

SOW = Step Of Web (Smarty author).
SOW plugins are part of Smarty Core, written from scratch!

SOW : Toasts

Based on bootstrap toasts!
.toast-on-load used only for on-load inline toasts. See examples for more! 


/* 
	:: Plugin File
	src/js/sow.core/sow.toast.js

	:: Plugin Init
*/	$.SOW.core.toast.init('.toast-on-load');

Quick Configurator

Test & Generate Clear 

// JS Code
$.SOW.core.toast.show('danger', '', 'Body Text Here', 'top-center', 0, true);



<!-- on page load, via html code -->
<div class="hide toast-on-load" 
	data-toast-type="danger" 
	data-toast-title="" 
	data-toast-body="Body Text Here" 
	data-toast-pos="top-center" 
	data-toast-delay="0" 
	data-toast-fill="true"></div>

Complete Documentation

PROGRAMATAICALLY (JS): 

/*
	type 			= '', success, danger, warning, info
	title 			= toast title 	(optional)
	body 			= toast body 	(required)
	pos 			= top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
	delay 			= autoclose in ms
	fill 			= background color [true|false]
*/	$.SOW.core.toast.show(type, title, body, pos, delay, fill);

// destroy
$.SOW.core.toast.destroy();


// ------------------------------------------------------------------------------
// VARIOUS EXAMPLES
// ------------------------------------------------------------------------------
// 1. NO AUTOHIDE
$.SOW.core.toast.show('', 'Default', 'Body Text Here', 'top-right');
$.SOW.core.toast.show('danger', 'Error', 'Body Text Here', 'top-right');
$.SOW.core.toast.show('success', 'Success', 'Body Text Here', 'top-right');
$.SOW.core.toast.show('warning', 'Warning', 'Body Text Here', 'top-right');
$.SOW.core.toast.show('info', 'Info', 'Body Text Here', 'top-right');

// 2. AUTOHIDE
$.SOW.core.toast.show('', 'Default', 'Body Text Here', 'top-right', 3000);
$.SOW.core.toast.show('danger', 'Error', 'Body Text Here', 'top-right', 3000);
$.SOW.core.toast.show('success', 'Success', 'Body Text Here', 'top-right', 3000);
$.SOW.core.toast.show('warning', 'Warning', 'Body Text Here', 'top-right', 3000);
$.SOW.core.toast.show('info', 'Info', 'Body Text Here', 'top-right', 3000);

// 3. NO TITLE
$.SOW.core.toast.show('', '', 'Body Text Here', 'top-right');
$.SOW.core.toast.show('danger', '', 'Body Text Here', 'top-right');
$.SOW.core.toast.show('success', '', 'Body Text Here', 'top-right');
$.SOW.core.toast.show('warning', '', 'Body Text Here', 'top-right');
$.SOW.core.toast.show('info', '', 'Body Text Here', 'top-right');

// 1. NO TITLE + BACKGROUND FILL
$.SOW.core.toast.show('', '', 'Body Text Here', 'top-right', 0, true);
$.SOW.core.toast.show('danger', '', 'Body Text Here', 'top-right', 0, true);
$.SOW.core.toast.show('success', '', 'Body Text Here', 'top-right', 0, true);
$.SOW.core.toast.show('warning', '', 'Body Text Here', 'top-right', 0, true);
$.SOW.core.toast.show('info', '', 'Body Text Here', 'top-right', 0, true);
ON-LOAD HTML CODE: 

<!--
	
	Toast On Load

		data-type 			= '', success, danger, warning, info
		data-title 			= toast title 	(optional)
		data-body 			= toast body 	(required)
		data-pos 			= top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
		data-delay 			= autoclose in ms
		data-fill 			= background color fill [true|false]

-->
<div class="hide toast-on-load"
	data-toast-type="danger" 
	data-toast-title="" 
	data-toast-body="Ajax navigation enabled! Yay!" 
	data-toast-pos="bottom-center" 
	data-toast-delay="4000" 
	data-toast-fill="true"></div>
Jump To