jquery-element.github.io/slidebutton-1.1.0.js at master · jquery-element/jquery-element.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/*
	slidebutton - 1.1.0
	https://github.com/jquery-element/slidebutton
*/

$.element( {
	name: "slidebutton",
	htmlReplace:
		'<div class="slidebutton">'+
			'{{html}}'+
			'<div class="slidebutton-track">'+
				'<div class="slidebutton-on"></div>'+
			'</div>'+
			'<span class="slidebutton-thumb"></span>'+
		'</div>'
	,
	css: '\
		.slidebutton input {\
			display: none;\
		}\
		.slidebutton {\
			display: inline-block;\
			position: relative;\
			min-width: 20px;\
			min-height: 10px;\
			cursor: pointer;\
			-webkit-touch-callout: none;\
			-webkit-user-select: none;\
			   -moz-user-select: none;\
			    -ms-user-select: none;\
			        user-select: none;\
		}\
		.slidebutton-track {\
			overflow: hidden;\
			height: 100%;\
			border-radius: 9999px;\
			background-color: rgba( 0, 0, 0, .5 );\
		}\
		.slidebutton-on {\
			width: 0;\
			height: 100%;\
			background: #f33;\
		}\
		.slidebutton-thumb {\
			position: absolute;\
			height: 100%;\
			top: 0;\
			left: 0;\
			margin-left: -1px;\
			border-radius: 50%;\
			background: #fff;\
		}\
		.slidebutton-active .slidebutton-thumb {\
			margin-left: 1px;\
		}\
		.slidebutton-on,\
		.slidebutton-thumb {\
			transition: all .2s;\
		}\
	',
	init: function() {
		var
			jqElement = this.jqElement,
			jqThumb = jqElement.children( ".slidebutton-thumb" ),
			jqOn = jqElement.find( ".slidebutton-on" ),
			thumbH = jqThumb.height(),

			jqCheckbox = jqElement.children( "input" ),
			mutation = new MutationObserver( update )
				.observe( jqCheckbox[ 0 ], {
					attributes: true,
					attributeFilter: [ "checked" ]
				})
		;

		jqThumb.css( "width", thumbH );
		jqOn.css( "width", thumbH / 2 );

		function isChecked() {
			return typeof jqCheckbox.attr( "checked" ) === "string";
		}

		function update() {
			var
				elemW,
				thumbH = jqThumb.height(),
				checked = isChecked()
			;
			if ( checked ) {
				elemW = jqElement.width();
				jqOn.css( "width", elemW - thumbH / 2 );
				jqThumb.css( "left", elemW - thumbH );
			} else {
				jqOn.css( "width", thumbH / 2 );
				jqThumb.css( "left", 0 );
			}
			jqElement.toggleClass( "slidebutton-active", checked );
		}

		jqElement.click( function() {
			jqCheckbox.attr( "checked", isChecked() ? null : "checked" );
		});

		update();
	}
});