Skip to content

Commit 17b32b7

Browse files
LCweb-itaLCweb-ita
committed
v2.0
- 100% vanilla javascript - unique JS file - added enable/disable functions - added lcs_update() function to sync HTML changes - added compact mode - added custom "on" color
1 parent f966bbe commit 17b32b7

6 files changed

Lines changed: 701 additions & 302 deletions

File tree

‎README.md‎

Lines changed: 132 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,142 @@
1-
LC Switch
2-
==============
1+
# Superlight pure javascript form switch plugin by LCweb
32

4-
Superlight jQuery plugin improving forms look and functionality.
3+
Give a modern look to your applications and take advantage of javascript events and public functions.
54

6-
Give a modern and flat look to your applications and take advantage of events and public functions. Everything in **just 5KB**, all inclusive!
5+
Vanilla javascript. No dependencies. Everything in a **single 7KB** file, all inclusive!
76

8-
Requires at least jQuery v1.7 and supports all browsers (yes, also old IE, up to version 7)
97

10-
For **documentation** and usage notes check:
11-
https://lcweb.it/lc-switch-jquery-plugin
8+
![](preview.png)
9+
10+
11+
### Top features list:
12+
13+
- sigle 7KB file, no dependencies, 100% ES6 javascript
14+
- minimal integration efforts in existing forms
15+
- public functions to manage each field status
16+
- functions compatible with jQuery $('.selector') integration
17+
- complete events tracking
18+
- custom texts support
19+
- optional compact mode
20+
- optional custom active color (supporting gradients)
21+
22+
23+
Tested on all mordern browsers *(don't ask for old IE support please)*
24+
For live demos check: https://lcweb.it/lc-switch-jquery-plugin
25+
26+
27+
28+
## Installation & Usage
29+
30+
1. include lc_switch.min.js
31+
32+
2. initialize plugin targeting one/multiple fields
33+
34+
35+
```
36+
<script type="text/javascript>
37+
document.querySelectorAll('input[type=checkbox], input[type=radio]').lc_switch();
38+
39+
// for jQuery folks
40+
$('input[type=checkbox], input[type=radio]').lc_switch();
41+
</script>
42+
```
43+
44+
45+
46+
## Options
47+
48+
Available options with default values
49+
50+
51+
```
52+
<script type="text/javascript>
53+
document.querySelectorAll('input[type=checkbox], input[type=radio]').lc_switch({
54+
55+
// (string) "checked" status label text
56+
on_txt : 'ON',
57+
58+
// (string) "not checked" status label text
59+
off_txt : 'OFF',
60+
61+
// (string) custom "on" color. Supports also gradients
62+
on_color : false,
63+
64+
// (bool) whether to enable compact mode
65+
compact_mode: false
66+
});
67+
</script>
68+
```
69+
70+
71+
## Public Functions
72+
73+
Available public functions to be called on *initialized inputs*
74+
75+
76+
```
77+
<script type="text/javascript>
78+
const inputs = document.querySelectorAll('input[type=checkbox], input[type=radio]');
79+
inputs.lc_switch():
80+
81+
82+
// checks the field
83+
inputs.lcs_on();
84+
85+
// unchecks the field
86+
inputs.lcs_off();
87+
88+
// toggles targeted field
89+
inputs.lcs_toggle();
90+
91+
92+
// disables the field
93+
inputs.lcs_disable();
94+
95+
// enables the field
96+
inputs.lcs_enable();
97+
98+
99+
// refreshes plugin interface retrieving input attributes (useful while changing HTML attributes directly)
100+
inputs.lcs_update();
101+
102+
// destroys plugin initialization showing HTML fields again
103+
inputs.lcs_destroy();
104+
</script>
105+
```
106+
107+
108+
## Public Events
109+
110+
111+
```
112+
<script type="text/javascript>
113+
document.querySelectorAll('input[type=checkbox], input[type=radio]').forEach(function(el) {
114+
115+
// triggered each time input status changes (checked and disabled)
116+
el.addEventListener('lcs-statuschange', ...);
117+
118+
119+
// triggered each time input is checked
120+
el.addEventListener('lcs-on', ...);
121+
122+
// triggered each time input is uncheked
123+
el.addEventListener('lcs-off', ...);
124+
125+
126+
// triggered each time input is enabled
127+
el.addEventListener('lcs-enabled', ...);
128+
129+
// triggered each time input is disabled
130+
el.addEventListener('lcs-disabled', ...);
131+
132+
});
133+
</script>
134+
</script>
135+
```
12136

13137

14138

15139
* * *
16140

17141

18-
Copyright &copy; Luca Montanari - LCweb
142+
Copyright &copy; Luca Montanari - [LCweb](https://lcweb.it)

‎demo.html‎

Lines changed: 101 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,10 @@
1212
</style>
1313

1414

15-
16-
17-
<!-- //////////////////////////////////////////////// -->
18-
<!-- REQUIRED ELEMENTS -->
19-
20-
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
21-
<script src="lc_switch.js" type="text/javascript"></script>
22-
<link rel="stylesheet" href="lc_switch.css">
23-
24-
<!-- //////////////////////////////////////////////// -->
25-
26-
27-
2815
<style>
2916
#second_div{
3017
width: 90%;
31-
max-width: 600px;
18+
max-width: 700px;
3219
min-width: 340px;
3320
margin: 50px auto 0;
3421
background: #f3f3f3;
@@ -42,18 +29,21 @@
4229
}
4330
#third_div {
4431
width: 90%;
45-
max-width: 600px;
32+
max-width: 700px;
4633
min-width: 340px;
47-
margin: 30px auto 0;
34+
margin: 30px auto;
4835
}
4936
#third_div small {
5037
float: right;
51-
color: #aaa;
52-
cursor: pointer;
5338
padding-top: 5px;
5439
}
40+
small {
41+
color: #929292;
42+
cursor: pointer;
43+
font-size: 90%;
44+
}
5545
#third_div ul {
56-
padding-left: 12px;
46+
padding: 15px 0;
5747
max-height: 200px;
5848
overflow: auto;
5949
}
@@ -62,10 +52,16 @@
6252
font-size: 14px;
6353
line-height: normal;
6454
margin: 7px 0;
55+
padding: 6px 2px;
56+
margin: 0;
57+
transition: all .2s ease;
6558
}
59+
#third_div li:hover {
60+
background-color: #f3f3f3;
61+
}
6662
#third_div li em {
6763
display: inline-block;
68-
width: 130px;
64+
width: 200px;
6965
color: #555;
7066
font-style: normal;
7167
}
@@ -80,7 +76,7 @@ <h2>
8076
<img id="logo" src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAlCAMAAAD7q3BLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAxQTFRFS1NFfsJCx8jKNDQ0SyWmjgAAAAR0Uk5T////AEAqqfQAAACySURBVHja7JTLFsQgCEOD/P8/jw9EgjiLWU88XQi3sSoUSgJaQwrRRNqQ4EWgbQEVcfKTuQgwEGxQGZANXnlnUCzAS0Hf+WXTB3lA1vDAPBxHEMWbWnM+bnFXse1g2ZnOBjshlhuPbPVZIIzRk7+JGYnAr4R8J/RPXGcaxXd77i71JxHi7+pVY0KMEVTudKXji69aj5WVidUvSgwRiH1bEMi9n4jc+26zCdT/ICdi9CPAAHRlCGHRLtsqAAAAAElFTkSuQmCC" />
8177
LC Switch
8278
</h2>
83-
<h4>Superlight jQuery plugin improving forms look and functionality, by <a href="https://lcweb.it" target="_blank">LCweb</a></h4>
79+
<h4>Superlight javascript plugin improving forms look and functionality, by <a href="https://lcweb.it" target="_blank">LCweb</a></h4>
8480

8581
<svg width="100%" height="100%">
8682
<pattern id="pattern-cubes" x="0" patternUnits="userSpaceOnUse" viewBox="0 0 10 16" height="100" width="116" y="68">
@@ -112,16 +108,20 @@ <h4>Superlight jQuery plugin improving forms look and functionality, by <a href=
112108
<p><input type="checkbox" name="check-2" value="2" class="lcs_check" disabled="disabled" autocomplete="off" /></p>
113109

114110
<p><input type="checkbox" name="check-3" value="3" class="lcs_check lcs_tt1" checked="checked" autocomplete="off" /></p>
111+
112+
<p><br/><small id="enable_ckb">(enable all)</small> &nbsp; <small id="disable_ckb">(disable all)</small></p>
115113
</div>
116114

117115
<div style="float: right; width: 50%;">
118-
<p style="padding-bottom: 13px;"><em>Radio</em></p>
116+
<p style="padding-bottom: 13px;"><em>Radio<br/>(compact mode + custom color)</em></p>
119117

120118
<p><input type="radio" name="radio-1" value="1" class="lcs_check lcs_tt2" autocomplete="off" /></p>
121119

122120
<p><input type="radio" name="radio-1" value="2" class="lcs_check lcs_tt2" disabled="disabled" autocomplete="off" /></p>
123121

124122
<p><input type="radio" name="radio-1" value="3" class="lcs_check lcs_tt2" checked="checked" autocomplete="off" /></p>
123+
124+
<p><br/><small id="enable_radio">(enable all)</small> &nbsp; <small id="disable_radio">(disable all)</small></p>
125125
</div>
126126
</form>
127127
<div style=" clear: both;"></div>
@@ -147,8 +147,85 @@ <h3>
147147

148148
<!-- //////////////////////////////////////////////// -->
149149
<!-- REQUIRED JAVASCRIPT -->
150+
151+
152+
<script src="lc_switch.min.js" type="text/javascript"></script>
153+
150154
<script type="text/javascript">
151-
$(document).ready(function(e) {
155+
const checkboxes = document.querySelectorAll('input[type=checkbox]'),
156+
radios = document.querySelectorAll('input[type=radio]');
157+
158+
// initialization
159+
checkboxes.lc_switch();
160+
radios.lc_switch({
161+
compact_mode : true,
162+
on_color : 'teal',
163+
});
164+
165+
166+
167+
// enable/disable
168+
document.getElementById('enable_ckb').addEventListener('click', () => { checkboxes.lcs_enable(); });
169+
document.getElementById('disable_ckb').addEventListener('click', () => { checkboxes.lcs_disable(); });
170+
171+
document.getElementById('enable_radio').addEventListener('click', () => { radios.lcs_enable(); });
172+
document.getElementById('disable_radio').addEventListener('click', () => { radios.lcs_disable(); });
173+
174+
175+
176+
// events log
177+
const log_wrap = document.querySelector('#third_div ul');
178+
179+
const toLeadingZero = (val) => {
180+
return (val.toString().length < 2) ? '0'+val : val;
181+
};
182+
183+
const getTime = () => {
184+
const d = new Date;
185+
return '('+ toLeadingZero(d.getHours()) +':'+ toLeadingZero(d.getMinutes()) +':'+ toLeadingZero(d.getSeconds()) +')';
186+
};
187+
188+
document.querySelectorAll('input').forEach(function(el) {
189+
const subj = el.getAttribute('type') +' #'+ el.value;
190+
191+
el.addEventListener('lcs-statuschange', (e) => {
192+
let status = (el.checked) ? 'checked' : 'unchecked';
193+
status += (el.disabled) ? ' disabled' : ' enabled';
194+
195+
log_wrap.innerHTML = '<li><em>'+ getTime() +' [lcs-statuschange]</em>'+ subj +' changed status: '+ status +'</li>' + log_wrap.innerHTML;
196+
});
197+
198+
el.addEventListener('lcs-on', (e) => {
199+
const status = (el.checked) ? 'checked' : 'unchecked';
200+
log_wrap.innerHTML = '<li><em>'+ getTime() +' [lcs-on]</em>'+ subj +' changed status: '+ status +'</li>' + log_wrap.innerHTML;
201+
});
202+
203+
el.addEventListener('lcs-off', (e) => {
204+
const status = (el.checked) ? 'checked' : 'unchecked';
205+
log_wrap.innerHTML = '<li><em>'+ getTime() +' [lcs-off]</em>'+ subj +' changed status: '+ status +'</li>' + log_wrap.innerHTML;
206+
});
207+
208+
el.addEventListener('lcs-enabled', (e) => {
209+
const status = (el.disabled) ? 'disabled' : 'enabled';
210+
log_wrap.innerHTML = '<li><em>'+ getTime() +' [lcs-enabled]</em>'+ subj +' changed status: '+ status +'</li>' + log_wrap.innerHTML;
211+
});
212+
213+
el.addEventListener('lcs-disabled', (e) => {
214+
const status = (el.disabled) ? 'disabled' : 'enabled';
215+
log_wrap.innerHTML = '<li><em>'+ getTime() +' [lcs-disabled]</em>'+ subj +' changed status: '+ status +'</li>' + log_wrap.innerHTML;
216+
});
217+
});
218+
219+
220+
// clear events log
221+
document.querySelector('#third_div small').addEventListener('click', () => {
222+
log_wrap.innerHTML = '';
223+
});
224+
225+
226+
//$('input')[0].lc_switch();
227+
228+
/*$(document).ready(function(e) {
152229
$('input').lc_switch();
153230
154231
// triggered each time a field changes status
@@ -184,7 +261,7 @@ <h3>
184261
// clean events log
185262
$('#third_div small').click(function() {
186263
$('#third_div ul').empty();
187-
});
264+
});*/
188265
</script>
189266
<!-- //////////////////////////////////////////////// -->
190267

0 commit comments

Comments
 (0)