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