https://lessons.ok-visual.ru/nassets/21b14ffb/abstract_field.js?v=1774347238

1window.gcCreateFieldWidget = function( el, type, options ) {
2    var typesMap = {
3        "select": "selectField",
4        "multi_select": "multiSelectField",
5        "string": "stringField",
6        "phone": "phoneField",
7		"phone_confirm": "phoneConfirmField",
8	    "password": "passwordField",
9        "text": "textField",
10        "date": "dateField",
11        "checkbox": "checkboxField",
12        "file": "fileField"
13    };
14    if ( ! typesMap[type] ) {
15		type = "string";
16        //alert("Не найден тип виджета. type=" + type )
17    }
18    var widget = el[typesMap[type]]( options )
19    return widget;
20};
21
22jQuery.widget( 'gc.abstractField', {
23	options: {
24		types: [],
25		field: null,
26        hideShowInTableInput: false
27	},
28	field: null,
29
30	_create: function() {
31		if ( ! this.options.field ) {
32			return false;
33		}
34        if ( this.options.field.required == "false" ) {
35            this.options.field.required = false;
36        }
37		this.field = this.options.field;
38        this.element.addClass( 'custom-field');
39		this.element.addClass( 'type-' + this.field.type );
40        this.element.data( 'fieldWidget', this );
41
42		this.labelEl = $("<label class='field-label'><span class='label-value'></span></label>")
43        if ( this.field.id ) {
44            this.labelEl.attr('for', 'field-input-' + this.field.id);
45        }
46		this.labelEl.appendTo( this.element )
47
48		this.requiredEl = $('<span class="required-sign">*</span>');
49		this.requiredEl.appendTo( this.labelEl )
50
51        this.inputBlock = $('<div class="field-input-block"></div>')
52		this.inputBlock.appendTo( this.element )
53
54		this.descriptionBlock = $('<div class="field-description-block"></div>');
55
56		if (window.params_52) {
57			this.htmlBlockBlock = $('<div class="field-html_block-block"></div>');
58
59			switch (this.field.html_block_position) {
60				case 'top':
61					this.htmlBlockBlock.insertBefore(this.element);
62					break;
63				case 'bottom':
64					this.htmlBlockBlock.insertAfter(this.inputBlock);
65					break;
66				case 'left':
67					this.htmlBlockBlock.addClass('html-block-left');
68					this.inputBlock.addClass('html-block-left');
69					this.htmlBlockBlock.insertBefore(this.inputBlock);
70					break;
71				case 'right':
72					this.htmlBlockBlock.addClass('html-block-right');
73					this.inputBlock.addClass('html-block-right');
74					this.htmlBlockBlock.insertAfter(this.inputBlock);
75					break;
76			}
77		}
78
79		this.build();
80		this.rebuild();
81	},
82
83	rebuild: function() {
84		this.labelEl.find('.label-value').html( this.field.label );
85        if ( this.field.required ) {
86			this.element.addClass( 'required' )
87		}
88		else {
89			this.element.removeClass( 'required' )
90		}
91        if ( this.field.label == "" ) {
92            this.labelEl.hide();
93        }
94        else {
95            this.labelEl.show();
96        }
97
98		this.descriptionBlock.appendTo(this.element);
99
100		if ( this.field.description && this.field.description.length > 0 ) {
101			this.descriptionBlock.html( this.field.description );
102			this.descriptionBlock.show();
103		}
104		else {
105			this.descriptionBlock.html( "" );
106			this.descriptionBlock.hide();
107		}
108
109		if (window.params_52) {
110			if (this.field.html_block && this.field.html_block.length > 0) {
111				this.htmlBlockBlock.html(this.field.html_block);
112				this.htmlBlockBlock.show();
113			}
114			else {
115				this.htmlBlockBlock.html("");
116				this.htmlBlockBlock.hide();
117			}
118		}
119	},
120
121	initEditor: function( parentEl ) {
122
123		this.settingsEl = $('<div class="field-settings"></div>');
124		this.settingsEl.hide();
125		this.settingsEl.appendTo( parentEl );
126
127		this.paramsEl = $('<div class="field-params"></div>')
128		this.paramsEl.appendTo( this.settingsEl )
129
130		var $labelInputEl = $(
131			"<label class=''>"
132			+ Yii.t("common", "Header")
133			+ "</label><input class='label-input' type='text' size='40'>"
134		);
135		$labelInputEl.val( this.field.label );
136		$labelInputEl.appendTo( this.paramsEl )

137		this._on( $labelInputEl, { input: this.fieldChanged } );
138
139		var $requiredInputWrapper = $(
140			"<label style='display: block'>" +  Yii.t("common", "Required") + "</label>"
141		);
142		$requiredInputWrapper.appendTo( this.paramsEl );
143		$requiredInputEl = $("<input class='required-input' type='checkbox' value='1'>");
144		$requiredInputEl.prependTo( $requiredInputWrapper );
145		$requiredInputEl.prop( "checked", this.field.required );
146		this._on( $requiredInputEl, { change: this.fieldChanged } );
147
148
149		var $hideFilledInputWrapper = $(
150			"<label style='display: block'> " +  Yii.t("common", "Hide if filled") + "</label>"
151		);
152        $hideFilledInputWrapper.appendTo( this.paramsEl );
153        $hideFilledInputEl = $("<input class='hide_filled-input' type='checkbox' value='1'>");
154        $hideFilledInputEl.prependTo( $hideFilledInputWrapper );
155        if ( this.field.hide_filled == "false" ) {
156            this.field.hide_filled = false;
157
158        }
159        $hideFilledInputEl.prop( "checked", this.field.hide_filled );
160        this._on( $hideFilledInputEl, { change: this.fieldChanged } );
161
162		this.descriptionInput = this.makeInputTextarea('description', window.tt('common', 'Description'));
163		this.descriptionInput.val( this.field.description );
164
165
166		if (window.params_52) {
167			this.htmlBlockInput = this.makeInputTextarea('html_block', window.tt('common', 'Custom HTML'));
168			this.htmlBlockInput.val(this.field.html_block);
169
170			var options = [
171				["top", window.tt('common', 'top')],
172				["right", window.tt('common', 'right')],
173				["bottom", window.tt('common', 'bottom')],
174				["left", window.tt('common', 'left')]
175			];
176
177			this.htmlBlockPosInput = this.makeSelector('html_block_position', window.tt('common', 'Custom HTML position'), options);
178			this.htmlBlockPosInput.val(this.field.html_block_position);
179		}
180
181		if (  ! this.options.hideShowInTableInput ) {
182            this.showInTableInput = this.makeInputCheckbox('show_in_table', window.tt('common', 'Show in the table of answers (for administrator)'))
183            this._on(this.showInTableInput, {change: this.fieldChanged});
184            this.showInTableInput.val(this.field.description);
185            this.showInTableInput.prop("checked", this.field.show_in_table);
186        }
187
188	},
189
190	getField: function() {
191		var result = this.field;
192		result.label = this.paramsEl.find('.label-input').val();
193		result.required = this.paramsEl.find('.required-input').is(':checked');
194        result.hide_filled = this.paramsEl.find('.hide_filled-input').is(':checked');
195		result.description = this.paramsEl.find('.description-input').val();
196		result.show_in_table = this.paramsEl.find('.show_in_table-input').is(':checked');
197
198		if (window.params_52) {
199			result.html_block = this.paramsEl.find('.html_block-input').val();
200			result.html_block_position = this.paramsEl.find('.html_block_position-input').val();
201		}
202
203        return result;
204	},
205
206	fieldChanged: function() {
207		this.field = this.getField();
208		this.rebuild();
209        if ( this.element.parents('.custom-form-editor').length > 0 ) {
210            this.element.parents('.custom-form-editor').customFormEditor('changed')
211        }
212        this._onChange();
213	},
214
215    _onChange: function() {
216
217    },
218
219	showEditor: function() {
220		this.settingsEl.show();
221	},
222
223	hideEditor: function() {
224		this.settingsEl.hide();
225	},
226
227	makeInputField: function( name, label, size ) {
228		if ( ! size ) size = 40;
229
230		$settingEl = $("<div class='field-" + name + "'/>");
231
232		$el = $("<input class='" + name + "-input' type='text' size='" + size + "'>");
233		$el.val( this.field.settings[name] );
234		this._on( $el, { input: this.fieldChanged } );
235		$( '<label>' + label + '</label>' ).appendTo( $settingEl );
236
237		$el.appendTo( $settingEl );
238
239		$settingEl.appendTo( this.paramsEl );
240		return $el;
241	},
242
243	makeInputTextarea: function( name, label ) {
244
245		$settingEl = $("<div class='field-" + name + "'/>");
246
247		$el = $("<textarea class='standard " + name + "-input' type='text'/>");
248		$el.val( this.field.settings[name] );
249		this._on( $el, { input: this.fieldChanged } );
250		$( '<label>' + label + '</label>' ).appendTo( $settingEl );
251		$el.appendTo( $settingEl );
252
253		$settingEl.appendTo( this.paramsEl )
254		return $el;
255	},
256
257	makeSelector: function (name, label, options) {
258		$settingEl = $("<label class='field-" + name + "'>" + label + " </label>");
259
260		$el = $( '<select class="'+name+'-input" />' );
261 		for (var i in options) {
262			var item = options[i];
263			$('<option />').val(item[0]).prop('selected', this.field[name] == item[0]).text(item[1]).appendTo($el);
264		}
265
266		$el.appendTo($settingEl);
267
268		this._on( $el, { change: this.fieldChanged } );
269		$settingEl.appendTo( this.paramsEl )
270
271		return $el;
272	},
273
274	makeInputCheckbox: function( name, label ) {
275
276		$settingEl = $("<label class='field-" + name + "'> " + label + "</label>");
277
278		$el = $("<input class='standard " + name + "-input' type='checkbox'/>");
279		$el.prop( 'checked', this.field.settings[name] );
280		this._on( $el, { change: this.fieldChanged } );
281		$el.prependTo( $settingEl );
282
283		$settingEl.appendTo( this.paramsEl )
284
285		return $el;
286	},
287
288	getValue: function() {
289		return null;
290	},
291
292	afterInit: function() {
293	}
294
295
296} );