SOW : Button toggle
SOW plugins are part of Smarty Core, written from scratch!
src/js/sow.core/sow.btn_toggle.js
Button Toggle Basic
Click Me
(basic button)
<!--
Options:
data-toggle-body-class="overflow-hidden" - extra toggle class for <body>
data-bs-target="#section_1"
data-toggle-container-class="fullscreen" - class added for specified data-bs-target="#section_1"
second extra container (see voting - help-center-article.html as example)
data-bs-target-2="#section_1"
data-toggle-container-class-2="fullscreen"
Important Note:
Because bootstrap is using data-bs-toggle="collapse", are situations where cannot be used both!!!
Instead, use: data-toggle-target="..."
-->
<a href="#" class="btn btn-primary 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>
Button Toggle Temporized
<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 and wait</span>
</a
Ajax Request 2 ways
<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
<!--
Button is disabled on success request (to avoid multiple requests - user clicks)
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!
-->
<a href="javascript:;" class="btn-toggle btn btn-primary py-1 px-2 fs-6"
data-toggle-ajax-url-on="../demo.files/php/demo.ajax_request.php?comment_id=1&vote=1"
data-toast-success-message="Thanks for your vote!"
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>