lcweb-ita/lc-switch

Superlight vanilla javascript plugin improving forms look and functionality

Superlight pure javascript form switch plugin by LCweb

Give a modern look to your applications and take advantage of javascript events and public functions.
Vanilla javascript. No dependencies. Everything in a single 7KB file, all inclusive!

Top features list:

• sigle 7KB file, no dependencies, 100% ES6 javascript
• minimal integration efforts in existing forms
• public functions to manage each field status
• hook through textual selector or DOM object (yes also jQuery ones)
• complete events tracking
• custom texts support
• optional compact mode
• optional custom active color (supporting gradients)

Tested on all mordern browsers (don't ask for old IE support please)
For live demos check: https://lcweb.it/lc-switch-javascript-plugin

Installation & Usage

1. include lc_switch.min.js

2. initialize plugin targeting one/multiple fields.
   NB: first parameter may be a textual selector or a DOM object (yes, also jQuery objects)

<script type="text/javascript">
lc_switch('input[type=checkbox], input[type=radio]');
</script>

Options

Available options with default values

<script type="text/javascript>
lc_switch('input[type=checkbox], input[type=radio]', {

    // (string) "checked" status label text
    on_txt      : 'ON',
    
    // (string) "not checked" status label text
    off_txt     : 'OFF',

    // (string) custom "on" color. Supports also gradients
    on_color    : false,

    // (bool) whether to enable compact mode
    compact_mode: false
});
</script>

Public Functions

Available public functions to be called on initialized inputs

<script type="text/javascript">
const inputs = document.querySelectorAll('input[type=checkbox], input[type=radio]');
lc_switch(inputs):


// checks the field
lcs_on(inputs);

// unchecks the field
lcs_off(inputs);

// toggles targeted field
lcs_toggle(inputs);


// disables the field
lcs_disable(inputs);

// enables the field
lcs_enable(inputs);


// refreshes plugin interface retrieving input attributes (useful while changing HTML attributes directly)
lcs_update(inputs);

// destroys plugin initialization showing HTML fields again
lcs_destroy(inputs);
</script>

Public Events

<script type="text/javascript">
document.querySelectorAll('input[type=checkbox], input[type=radio]').forEach(function(el) {

    // triggered each time input status changes (checked and disabled)
    el.addEventListener('lcs-statuschange', ...);
    
    
    // triggered each time input is checked
    el.addEventListener('lcs-on', ...);
    
    // triggered each time input is uncheked
    el.addEventListener('lcs-off', ...);
    
    
    // triggered each time input is enabled
    el.addEventListener('lcs-enabled', ...);
    
    // triggered each time input is disabled
    el.addEventListener('lcs-disabled', ...);

});
</script>

---

Copyright © Luca Montanari - LCweb

lc-switch's Issues

Public Event Listener for input type checkbox that is unchecked

Js Code event listener for lcs_off :
document.querySelectorAll('input[type=checkbox]').forEach(function(el) { // triggered each time input is uncheked el.addEventListener('lcs_off', function() { var styleElem = document.head.appendChild(document.createElement("style")); styleElem.innerHTML = '.lcs_cursor: after { content: "\00D7" }'; }); });

       Html code for lcs switch:
       `<form><input type="checkbox" class="status" checked name="sample" value="1" /></form>`
       
       Switch Initialization:
       `lc_switch('.status', {
                // (string) "checked" status label text
                on_txt: 'Active',
                // (string) "not checked" status label text
                off_txt: 'Inactive',
            });`
            
            But the event listener for lsc switch off is not initiated on unchecked event.

Resizing the switch

Is there a dynamic way of resizing the switch as I need to different sizes.

Is it possible to theme only one checkbox on a page ?

Hi,

I'd like to use your switches for a webpage of mine, but I can't make it work on only a specific checkbox and not all of them.

If you have any clue, that would be a great help !

Thank you.

Sincerly

Method to toggle state

Can you add a public method like lcs_on() and lcs_off() to toggle the switch eg: lcs_toggle(). It will be really useful.

Typo on the homepage

Hi - thanks for this great plugin! I forked it absent-mindedly because I thought the homepage for it was in the git repo and I was going to create a PR, but I realize it's not. You have a small typo in your docs.

onsole.log should be console.log

Thanks again!

Feature Request: make events bubbling or dispatch a bubbling change event on toggle

That way code that listens on document does not need to be changed after converting a checkbox to a switch.

jQuery example: $(document).on("change lcs-statuschange", 'input' ...

does not trigger (except when clicking on the <label for="input_id">, because browser does that).

jQuery Ui

Hi,
is a theme support planned?

onclick event

Sometimes there are differences between setting the state programmatically (eg on initialization) and setting the state on click. My application sets the initial state based on values from database but I need to change it based on parameters. The problem is that there is only one event so I can not distinguish between them.
Any easy way to agregate an onclick event?

function lcs_toggle() doesn't exist

Hi,

Thanks for your great plugin. The documentation talks about an lcs_toggle() function but this funbction doesn't exist.

Method to enable or disable switch

A disabled input initializes with an lcs_disabled class but if you want to programmatically enable it you need to remove the class and also remove the disabled attribute from the input.

Adding .lcs_enable() and .lcs_disable() methods would wrap these two changes into one method.

label with "for" attribute toggles the radio / checkbox but the switches do not change

All is explained in the issue title.

Unsafe assignment to innerHTML

I use lc_switch.js and have to get rid of "Unsafe assignment to innerHTML" warning.
So i changed this part of the code :

LC-switch/lc_switch.js

Line 165 in 02a930e

// labels structure

            // labels structure
            const on_label 	= (options.on_txt) ? '<div class="lcs_label lcs_label_on">'+ options.on_txt +'</div>' : '',
                  off_label = (options.off_txt) ? '<div class="lcs_label lcs_label_off">'+ options.off_txt +'</div>' : '';

 
            // default states
            let classes = 'lcs_'+ el.getAttribute('type');
                
            classes += (el.checked) ? ' lcs_on' : ' lcs_off'; 
            
            if(el.disabled) {
                classes += ' lcs_disabled';
            } 
            
            
            // enabled and apply custom color?
            const custom_style = (options.on_color && el.checked) ? 'style="background: '+ options.on_color +';"' : '',
                  custom_on_col_attr = (options.on_color) ? 'data-on-color="'+ options.on_color +'"' : '';
            

            // wrap and append
            const wrapper = document.createElement('div');
            
            wrapper.classList.add('lcs_wrap');
            wrapper.innerHTML = 
            '<div class="lcs_switch '+ classes +'" '+ custom_on_col_attr +' '+ custom_style +'>' +
                '<div class="lcs_cursor"></div>' +
                on_label + off_label +
            '</div>';

To not use variable assignment to innerHTML

        ```
        // wrap and append MOD Removed Unsafe assignment to innerHTML by Netquik (https://github.com/netquik)
        const wrapper = document.createElement('div');
        wrapper.classList.add('lcs_wrap');

        const wrapper_inner = document.createElement('div');
        wrapper_inner.classList.add("lcs_switch", 'lcs_'+ el.getAttribute('type'), (el.checked) ? 'lcs_on' : 'lcs_off');
        if (el.disabled) wrapper_inner.classList.add('lcs_disabled');
        if (options.on_color) {
            wrapper_inner.setAttribute("data-on-color", options.on_color);
        }
        if (options.on_color && el.checked) {
            wrapper_inner.setAttribute("style", 'background: '+ options.on_color +';');
        }
        const wrapper_inner2 = document.createElement('div');
        wrapper_inner2.classList.add("lcs_cursor");
        wrapper_inner.appendChild(wrapper_inner2);
        if (options.on_txt) {
            const l_on = document.createElement('div');
            l_on.classList.add("lcs_label", "lcs_label_on");
            l_on.textContent = options.on_txt
            wrapper_inner.appendChild(l_on);
        }
        if (options.off_txt) {
            const l_off = document.createElement('div');
            l_off.classList.add("lcs_label", "lcs_label_off");
            l_off.textContent = options.off_txt
            wrapper_inner.appendChild(l_off);
        }
        wrapper.appendChild(wrapper_inner);

Not sure if it can be done better but here is working as expected.

jQuery's delegated becomes deprecated...

$('body').delegate('.lcs_check', 'lcs-on', ...) does not seem to do anything. It's still in the documentation likes this. Alternative?

classes on input element is removed on initialising

The class 'test_class' on this 'input' element is getting ridden after calling the 'lc_switch() method'.

It is not possible to do proper styling if this is the case. You guyz should copy the class as well to the toggle button.

Addon-reviewers security risk

Hi i use your lib in an browser extension i wrote. Mozilla AMO reviewers rejected the add-on for some reasons among which:

This add-on is creating DOM nodes from HTML strings containing potentially unsanitized data, by assigning to innerHTML, jQuery.html, or through similar means. Aside from being inefficient, this is a major security risk. For more information, see https://developer.mozilla.org/en/XUL_School/DOM_Building_and_HTML_Insertion . Here are some examples that were discovered:

• libs/lc_switch.js#111

Is there a way to solve this? escaping html?
Thanks