https://iot.ru/bitrix/templates/.default/js/libs/jcf.checkbox.js

1/*!
2 * JavaScript Custom Forms : Checkbox Module
3 *
4 * Copyright 2014-2015 PSD2HTML - http://psd2html.com/jcf
5 * Released under the MIT license (LICENSE.txt)
6 *
7 * Version: 1.2.0
8 */
9jcf.addModule(function($) {
10	'use strict';
11
12	return {
13		name: 'Checkbox',
14		selector: 'input[type="checkbox"]',
15		options: {
16			wrapNative: true,
17			checkedClass: 'jcf-checked',
18			uncheckedClass: 'jcf-unchecked',
19			labelActiveClass: 'jcf-label-active',
20			fakeStructure: '<span class="jcf-checkbox"><span></span></span>'
21		},
22		matchElement: function(element) {
23			return element.is(':checkbox');
24		},
25		init: function() {
26			this.initStructure();
27			this.attachEvents();
28			this.refresh();
29		},
30		initStructure: function() {
31			// prepare structure
32			this.doc = $(document);
33			this.realElement = $(this.options.element);
34			this.fakeElement = $(this.options.fakeStructure).insertAfter(this.realElement);
35			this.labelElement = this.getLabelFor();
36
37			if (this.options.wrapNative) {
38				// wrap native checkbox inside fake block
39				this.realElement.appendTo(this.fakeElement).css({
40					position: 'absolute',
41					height: '100%',
42					width: '100%',
43					opacity: 0,
44					margin: 0
45				});
46			} else {
47				// just hide native checkbox
48				this.realElement.addClass(this.options.hiddenClass);
49			}
50		},
51		attachEvents: function() {
52			// add event handlers
53			this.realElement.on({
54				focus: this.onFocus,
55				click: this.onRealClick
56			});
57			this.fakeElement.on('click', this.onFakeClick);
58			this.fakeElement.on('jcf-pointerdown', this.onPress);
59		},
60		onRealClick: function(e) {
61			// just redraw fake element (setTimeout handles click that might be prevented)
62			var self = this;
63			this.savedEventObject = e;
64			setTimeout(function() {
65				self.refresh();
66			}, 0);
67		},
68		onFakeClick: function(e) {
69			// skip event if clicked on real element inside wrapper
70			if (this.options.wrapNative && this.realElement.is(e.target)) {
71				return;
72			}
73
74			// toggle checked class
75			if (!this.realElement.is(':disabled')) {
76				delete this.savedEventObject;
77				this.stateChecked = this.realElement.prop('checked');
78				this.realElement.prop('checked', !this.stateChecked);
79				this.fireNativeEvent(this.realElement, 'click');
80				if (this.savedEventObject && this.savedEventObject.isDefaultPrevented()) {
81					this.realElement.prop('checked', this.stateChecked);
82				} else {
83					this.fireNativeEvent(this.realElement, 'change');
84				}
85				delete this.savedEventObject;
86			}
87		},
88		onFocus: function() {
89			if (!this.pressedFlag || !this.focusedFlag) {
90				this.focusedFlag = true;
91				this.fakeElement.addClass(this.options.focusClass);
92				this.realElement.on('blur', this.onBlur);
93			}
94		},
95		onBlur: function() {
96			if (!this.pressedFlag) {
97				this.focusedFlag = false;
98				this.fakeElement.removeClass(this.options.focusClass);
99				this.realElement.off('blur', this.onBlur);
100			}
101		},
102		onPress: function(e) {
103			if (!this.focusedFlag && e.pointerType === 'mouse') {
104				this.realElement.focus();
105			}
106			this.pressedFlag = true;
107			this.fakeElement.addClass(this.options.pressedClass);
108			this.doc.on('jcf-pointerup', this.onRelease);
109		},
110		onRelease: function(e) {
111			if (this.focusedFlag && e.pointerType === 'mouse') {
112				this.realElement.focus();
113			}
114			this.pressedFlag = false;
115			this.fakeElement.removeClass(this.options.pressedClass);
116			this.doc.off('jcf-pointerup', this.onRelease);
117		},
118		getLabelFor: function() {
119			var parentLabel = this.realElement.closest('label'),
120				elementId = this.realElement.prop('id');
121
122			if (!parentLabel.length && elementId) {
123				parentLabel = $('label[for="' + elementId + '"]');
124			}
125			return parentLabel.length ? parentLabel : null;
126		},
127		refresh: function() {
128			// redraw custom checkbox
129			var isChecked = this.realElement.is(':checked'),
130				isDisabled = this.realElement.is(':disabled');
131
132			this.fakeElement.toggleClass(this.options.checkedClass, isChecked)
133							.toggleClass(this.options.uncheckedClass, !isChecked)
134							.toggleClass(this.options.disabledClass, isDisabled);
135
136			if (this.labelElement) {
137				this.labelElement.toggleClass(this.options.labelActiveClass, isChecked);
138			}
139		},
140		destroy: function() {
141			// restore structure
142			if (this.options.wrapNative) {
143				this.realElement.insertBefore(this.fakeElement).css({
144					position: '',
145					width: '',
146					height: '',
147					opacity: '',
148					margin: ''
149				});
150			} else {
151				this.realElement.removeClass(this.options.hiddenClass);
152			}
153
154			// removing element will also remove its event handlers
155			this.fakeElement.off('jcf-pointerdown', this.onPress);
156			this.fakeElement.remove();
157
158			// remove other event handlers
159			this.doc.off('jcf-pointerup', this.onRelease);
160			this.realElement.off({
161				focus: this.onFocus,
162				click: this.onRealClick
163			});
164		}
165	};
166});