slidebutton/slidebutton.js at master · jquery-element/slidebutton · 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/*
	slidebutton - 2.0.0
	https://github.com/jquery-element/slidebutton
*/

(function() {

function updateChecked( that ) {
	var chk = typeof that.attr.checked === "string";
	that.jqElement.toggleClass( "slidebutton-checked", chk );
	that.attr.checked = chk && "checked";
	that.jqCheckbox[ 0 ].checked = chk;
}

$.element( {
	name: "slidebutton",
	attributes: {
		filter: [ "checked" ],
		callback: function( name, val, oldval ) {
			if ( val !== oldval ) {
				updateChecked( this );
			}
		}
	},
	htmlReplace:
		'<div class="slidebutton">'+
			'{{html}}'+
			'<div class="slidebutton-track">'+
				'<div class="slidebutton-on"></div>'+
			'</div>'+
			'<span class="slidebutton-thumb"></span>'+
		'</div>'
	,
	init: function() {
		var that = this;

		this.jqOn = this.jqElement.find( ".slidebutton-on" );
		this.jqThumb = this.jqElement.children( ".slidebutton-thumb" );
		this.jqCheckbox = this.jqElement.children( "input" );
		this.okBlur = true;
		this.focused = false;

		updateChecked( this );

		this.jqCheckbox
			.focus( function() {
				if ( !that.focused ) {
					that.focused = true;
					that.jqElement.addClass( "slidebutton-focus" );
				}
			})
			.blur( function() {
				if ( that.okBlur ) {
					that.focused = false;
					that.jqElement.removeClass( "slidebutton-focus" );
				} else {
					that.okBlur = true;
					that.jqCheckbox.focus();
				}
			})
		;

		this.jqElement
			.mousedown( function() {
				that.okBlur = false;
				that.jqCheckbox.focus();
			})
			.click( function() {
				that.jqCheckbox
					.focus()
					.attr( "checked", that.attr.checked ? null : "" )
				;
			})
		;
	},
	css: '\
		.slidebutton input {\
			position: absolute;\
			top: -999999px;\
			opacity: .5;\
		}\
		.slidebutton {\
			display: inline-block;\
			position: relative;\
			width: 1.5em;\
			height: .7em;\
			cursor: pointer;\
			-webkit-touch-callout: none;\
			-webkit-user-select: none;\
			   -moz-user-select: none;\
			    -ms-user-select: none;\
			        user-select: none;\
		}\
		.slidebutton-track {\
			position: relative;\
			overflow: hidden;\
			box-sizing: border-box;\
			height: 100%;\
			border-radius: 999999px;\
			background-color: rgba( 0, 0, 0, .5 );\
		}\
		.slidebutton-focus .slidebutton-track {\
			border: .1em solid rgba( 255, 255, 255, .4 );\
		}\
		.slidebutton-on {\
			width: .35em;\
			height: 100%;\
			background: #f33;\
		}\
		.slidebutton-checked .slidebutton-on {\
			width: 100%;\
			margin-left: -.35em;\
		}\
		.slidebutton-thumb {\
			position: absolute;\
			width: .7em;\
			height: 100%;\
			top: 0;\
			left: 0;\
			margin-left: -1px;\
			border-radius: 50%;\
			background: #fff;\
		}\
		.slidebutton-checked .slidebutton-thumb {\
			left: 100%;\
			margin-left: -.7em;\
		}\
		.slidebutton-on,\
		.slidebutton-thumb {\
			transition: all .2s;\
		}\
	'
});

})();