SOW : Core Plugins

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

SOW : Button Toggle

Simple toggle button, also able to send ajax requests.
See examples for more! 


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

	:: Plugin Init
*/	$.SOW.core.btn_toggle.init('.btn-toggle');

Examples

Click Me 

<a href="#!" class="btn btn-primary btn-soft btn-toggle">
	<span class="group-icon">
		<i class="fi fi fi-arrow-end-slim"></i>
		<i class="fi fi-close"></i>
	</span>

	<span>Click Me</span>
</a>


<!-- 
	Fullscreen button that can be seen
	on each section, works using .btn-toggle

	Extra options:
		data-toggle-body-class="overflow-hidden" 	- extra toggle class for <body>
		
		data-target="#section_1"
		data-toggle-container-class="fullscreen"	- class added for specified data-target="#section_1"

		second extra container (see voting - help-center-article.html as example)
		data-target-2="#section_1"
		data-toggle-container-class-2="fullscreen"


	Important Note:
		Because bootstrap is using data-toggle="collapse", are situations where cannot be used both!!!
		Instead, use: data-toggle-target="..." 
-->
<a href="#" class="btn-toggle" data-toggle-container-class="fullscreen" data-toggle-body-class="overflow-hidden" data-target="#section_1">
	<span class="group-icon">
		<i class="fi fi-expand"></i>
		<i class="fi fi-shrink"></i>
	</span>
</a>
Temporized
Click Me 

<a href="#!" class="btn btn-primary btn-soft btn-toggle" data-toggle-temporized="1000">
	<span class="group-icon">
		<i class="fi fi fi-arrow-end-slim"></i>
		<i class="fi fi-close"></i>
	</span>

	<span>Click Me</span>
</a
Ajax Request : 2 way
Click 
<!-- toast message is optional -->

<a 	href="#" 
	class="btn-toggle btn btn-sm btn-outline-secondary"
	data-toggle-ajax-url-on="../demo.files/php/demo.ajax_request.php?item_id=1&favourite=1"
	data-toggle-ajax-url-off="../demo.files/php/demo.ajax_request.php?item_id=1&favourite=0"
	data-toast-success-message="Yay! Clicked me!"
	data-toast-success-position="bottom-center">
	<span class="group-icon">
		<i class="fi fi-star-empty text-muted"></i>
		<i class="fi fi-star-full text-warning"></i>
	</span>
	<span>Click</span>
</a>
Ajax Request : 1 way & disable
like 
<!-- toast message is optional -->

<!--
	Will send a request and on success, the
	button is disabled, blocking multiple requests!
	data-toggle-ajax-url-off  must NOT be set! Else become 2 way button!

	PLEASE NOTE: There is nothing implemented for page refresh!
	On page refresh, the button is again clickable!
	You need to handle this in your backend and add .disable + disable (attribute)
	to the button if already voted!

	This button is already used in blog layout!
-->


<a href="javascript:;" class="btn-toggle btn btn-primary py-1 px-2 fs--14"
	data-toggle-ajax-url-on="../demo.files/php/demo.ajax_request.php?comment_id=1&vote=1"
	data-toast-success-message="Yay! Clicked me!"
	data-toast-success-position="bottom-center">
	
	<span class="group-icon">
		<i class="fi fi-like"></i>
		<i class="fi fi-like text-warning"></i>
	</span>

	<span>like</span>
</a>
Jump To