%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/bitrix/www/bitrix/components/bitrix/landing.site_edit/templates/.default/
Upload File :
Create Path :
Current File : /home/bitrix/www/bitrix/components/bitrix/landing.site_edit/templates/.default/landing-forms.js

(function() {

	'use strict';

	BX.namespace('BX.Landing');

	/**
	 * For change domain name.
	 */
	BX.Landing.EditDomainForm = function (node, params)
	{
		this.domain = node.querySelector('.ui-domain-input-btn-js');
		this.postfix = node.querySelectorAll('.ui-postfix');
		this.domains = node.querySelectorAll('.ui-domainname');
		this.content = params.content || '';
		this.messages = params.messages || {};
		this.popup = BX.Landing.UI.Tool.ActionDialog.getInstance();

		BX.bind(this.domain, 'click', BX.delegate(this.editDomain, this));
	};
	BX.Landing.EditDomainForm.prototype =
	{
		editDomain: function (event)
		{
			event.stopPropagation();

			var promise = this.popup.show({
				title: this.messages.title,
				content: this.content,
				contentColor: 'grey'
			});
			this.content.style.display = 'block';

			promise
				.then(function()
					{
						var domainName = '';
						for (var i = 0, c = this.postfix.length; i < c; i++)
						{
							if (
								this.postfix[i].checked &&
								typeof this.domains[i] !== 'undefined'
							)
							{
								this.domains[i].value = BX.util.trim(this.domains[i].value);
								if (this.domains[i].value !== '')
								{
									domainName = this.domains[i].value + this.postfix[i].value;
								}
							}
						}
						if (domainName === '')
						{
							alert(this.messages.errorEmpty);
							this.editDomain(event);
						}
						else
						{
							BX('ui-domainname-title').textContent = domainName;
							BX('ui-domainname-text').value = domainName;
						}
					}.bind(this),
					function()
					{
					}
				);
		}
	};

	/**
	 * For edit title.
	 */
	BX.Landing.EditTitleForm = function (node, additionalWidth, isEventTargetNode)
	{
		this.btn = node.querySelector('.ui-title-input-btn-js');
		this.label = node.querySelector('.ui-editable-field-label-js');
		this.input = node.querySelector('.ui-editable-field-input-js');
		this.additionalWidth = additionalWidth || 0;

		this.hideInput = this.hideInput.bind(this);
		this.showInput = this.showInput.bind(this);

		if(isEventTargetNode)
			BX.bind(node, 'click', this.showInput);
		else
			BX.bind(this.btn, 'click', this.showInput);
	};
	BX.Landing.EditTitleForm.prototype =
	{
		showInput : function (event)
		{
			event.stopPropagation();

			this.input.style.width = this.label.offsetWidth + this.additionalWidth + 17 + 'px';
			if(this.input.tagName === 'TEXTAREA')
			{
				this.input.style.height = this.label.offsetHeight + 'px';
			}
			this.label.style.display = 'none';
			this.btn.style.display = 'none';
			this.input.style.display = 'block';
			this.input.focus();

			BX.bind(document, 'click', this.hideInput);
		},
		hideInput : function (event)
		{
			if(event.target == this.input)
				return;

			this.label.textContent = this.input.value;
			this.label.style.display = 'inline-block';
			this.input.style.display = 'none';
			this.btn.style.display = 'block';

			BX.unbind(document, 'click', this.hideInput);
		}
	};

	/**
	 * For additional fields.
	 */
	BX.Landing.ToggleFormFields = function (node)
	{
		this.form = node;
		this.toggleBtn = node.querySelector('.landing-form-collapse-block-js');
		this.formInner = node.querySelector('.landing-form-inner-js');
		this.tableWparp = node.querySelector('.landing-form-table-wrap-js');
		this.startHeight = 0;
		this.endHeight = 0;
		this.isHidden = true;

		this.clickHandler = this.clickHandler.bind(this);
		this.setHeightAuto = this.setHeightAuto.bind(this);
		this.removeClassName = this.removeClassName.bind(this);

		BX.bind(this.toggleBtn, 'click', this.clickHandler);
	};
	BX.Landing.ToggleFormFields.prototype =
	{
		showRows : function ()
		{
			this.startHeight = this.formInner.offsetHeight;
			this.formInner.style.height = this.startHeight + 'px';
			this.form.classList.add('landing-form-collapsed-open');
			this.endHeight = this.tableWparp.offsetHeight + parseInt(BX.style(this.tableWparp, 'marginBottom'));
			this.formInner.style.height = this.endHeight + 'px';

			BX.bind(this.formInner, 'transitionend', this.setHeightAuto);

			this.isHidden = false;
		},
		closeRows  : function ()
		{
			this.formInner.style.height = this.endHeight + 'px';

			setTimeout(function () {
				this.formInner.style.height = this.startHeight + 'px';
			}.bind(this),70);

			BX.bind(this.formInner, 'transitionend', this.removeClassName);

			this.isHidden = true;
		},
		clickHandler : function ()
		{
			if(this.isHidden)
				this.showRows();
			else
				this.closeRows();
		},
		setHeightAuto : function ()
		{
			this.formInner.style.height = 'auto';
			BX.unbind(this.formInner, 'transitionend', this.setHeightAuto);
		},
		removeClassName : function ()
		{
			this.form.classList.remove('landing-form-collapsed-open');
			BX.unbind(this.formInner, 'transitionend', this.removeClassName);
		}
	};

	/**
	 * Colorpicker.
	 */
	BX.Landing.ColorPicker = function(node)
	{
		this.picker = new BX.ColorPicker({
			bindElement: node,
			popupOptions: {angle: false, offsetTop: 5},
			onColorSelected: this.onColorSelected.bind(this),
			colors: this.setColors()
		});

		this.colorPickerNode = node;

		this.colorIcon = node.querySelector('.ui-colorpicker-color-js');
		this.clearBtn = node.querySelector('.ui-colorpicker-clear');
		this.input = node.querySelector('.landing-colorpicker-inp-js');

		BX.bind(this.colorPickerNode, 'click', this.show.bind(this));
		BX.bind(this.clearBtn, 'click', this.clear.bind(this));

	};
	BX.Landing.ColorPicker.prototype =
	{
		onColorSelected : function (color)
		{
			this.colorPickerNode.classList.add('ui-colorpicker-selected');
			this.colorIcon.style.backgroundColor = color;
			this.input.value = color;
		},
		show : function (event)
		{
			if(event.target == this.clearBtn)
				return;

			this.picker.open();
		},
		clear : function ()
		{
			this.colorPickerNode.classList.remove('ui-colorpicker-selected');
			this.input.value = '';
			this.picker.setSelectedColor(null);
		},
		setColors :function () {
			return [
				["#f5f5f5", "#eeeeee", "#e0e0e0", "#9e9e9e", "#757575", "#616161", "#212121"],
				["#cfd8dc", "#b0bec5", "#90a4ae", "#607d8b", "#546e7a", "#455a64", "#263238"],
				["#d7ccc8", "#bcaaa4", "#a1887f", "#795548", "#6d4c41", "#5d4037", "#3e2723"],
				["#ffccbc", "#ffab91", "#ff8a65", "#ff5722", "#f4511e", "#e64a19", "#bf360c"],
				["#ffe0b2", "#ffcc80", "#ffb74d", "#ff9800", "#fb8c00", "#f57c00", "#e65100"],
				["#ffecb3", "#ffe082", "#ffd54f", "#ffc107", "#ffb300", "#ffa000", "#ff6f00"],
				["#fff9c4", "#fff59d", "#fff176", "#ffeb3b", "#fdd835", "#fbc02d", "#f57f17"],
				["#f0f4c3", "#e6ee9c", "#dce775", "#cddc39", "#c0ca33", "#afb42b", "#827717"],
				["#dcedc8", "#c5e1a5", "#aed581", "#8bc34a", "#7cb342", "#689f38", "#33691e"],
				["#c8e6c9", "#a5d6a7", "#81c784", "#4caf50", "#43a047", "#388e3c", "#1b5e20"],
				["#b2dfdb", "#80cbc4", "#4db6ac", "#009688", "#00897b", "#00796b", "#004d40"],
				["#b2ebf2", "#80deea", "#4dd0e1", "#00bcd4", "#00acc1", "#0097a7", "#006064"],
				["#b3e5fc", "#81d4fa", "#4fc3f7", "#03a9f4", "#039be5", "#0288d1", "#01579b"],
				["#bbdefb", "#90caf9", "#64b5f6", "#2196f3", "#1e88e5", "#1976d2", "#0d47a1"],
				["#c5cae9", "#9fa8da", "#7986cb", "#3f51b5", "#3949ab", "#303f9f", "#1a237e"],
				["#d1c4e9", "#b39ddb", "#9575cd", "#673ab7", "#5e35b1", "#512da8", "#311b92"],
				["#e1bee7", "#ce93d8", "#ba68c8", "#9c27b0", "#8e24aa", "#7b1fa2", "#4a148c"],
				["#f8bbd0", "#f48fb1", "#f06292", "#e91e63", "#d81b60", "#c2185b", "#880e4f"],
				["#ffcdd2", "#ef9a9a", "#e57373", "#f44336", "#e53935", "#d32f2f", "#b71c1c"]
			].map(function(item, index, arr) {
				return arr.map(function(row) {
					return row[index];
				});
			})
		}
	};

	/**
	 * Some additional JS.
	 */
	BX.Landing.CustomFields = function (list)
	{
		list.forEach(function(item)
		{
			BX.bind(item.field, 'keyup', function ()
			{
				if(item.length)
				{
					if(item.field.value.length <= item.length)
					{
						item.node.textContent = item.field.value;
					}
					else
					{
						item.node.textContent = item.field.value.substring(0, item.length);
					}
				}
				else {
					item.node.textContent = item.field.value;
				}
			});
		})
	};

	/**
	 * Domain name popup.
	 */
	BX.Landing.DomainNamePopup = function(params)
	{
		var messages = params.messages || {};
		var dialog = new BX.Landing.EditDomainForm(BX('ui-editable-domain'), {
			messages: {
				title: messages.title || '',
				errorEmpty: messages.errorEmpty || ''
			},
			content: BX('ui-editable-domain-content')
		});
		BX.addCustomEvent(dialog.popup.popup, 'onPopupShow', function(obj)
		{
			var inp = obj.contentContainer.querySelector('#landing-form-domain-name-field');
			var textNode1 = obj.contentContainer.querySelector('#landing-form-domain-name-text');
			var textNode2 = obj.contentContainer.querySelector('#landing-form-domain-any-name-text');

			// keyup domain name
			BX.bind(inp, 'keyup', BX.debounce(function()
			{
				var domainName = inp.value;

				// fill instruction
				var fillInstruction = function(domainName)
				{
					var domainParts = inp.value.split('.');
					var domainRe = /^(com|net|org)\.[a-z]{2}$/;

					textNode2.parentNode.style.display = 'none';

					textNode1.textContent = domainName ? domainName : 'landing.mydomain';

					if (
						(domainParts.length === 2) ||
						(domainParts.length === 3 && domainParts[0] === 'www') ||
						(domainParts.length === 3 && (domainParts[1] + '.' + domainParts[2]).match(domainRe))
					)
					{
						textNode2.parentNode.style.display = 'table-row';
						if ((domainParts.length === 3 && domainParts[0] === 'www'))
						{
							textNode2.textContent = domainParts[1] + '.' + domainParts[2];
						}
						else
						{

							textNode1.textContent = 'www.' + domainName;
							textNode2.textContent = domainName;
						}
					}

					textNode1.textContent = BX.util.trim(textNode1.textContent) + '.';
					textNode2.textContent = BX.util.trim(textNode2.textContent) + '.';
				};

				if (domainName.match(/[^a-z0-9\.\-]+/i) === null)
				{
					fillInstruction(domainName);
				}
				else
				{
					BX.ajax({
						url: '/bitrix/tools/landing/ajax.php?action=Domain::punycode',
						method: 'POST',
						data: {
							data: {
								domain: domainName
							},
							sessid: BX.message('bitrix_sessid')
						},
						dataType: 'json',
						onsuccess: function (data) {
							if (typeof data.result !== 'undefined')
							{
								if (data.result !== false)
								{
									fillInstruction(data.result);
								}
							}
						}
					});
				}

			}, 200));

			BX.fireEvent(inp, 'keyup');

			// domain type
			var inpList = obj.contentContainer.querySelectorAll('input.ui-domainname');
			for(var i=0; i<inpList.length; i++)
			{
				BX.bind(inpList[i], 'focus', function ()
				{
					this.parentNode.parentNode.querySelector('input').checked = true;
				})
			}
		});
	};

	/**
	 * Favicon change.
	 */
	BX.Landing.Favicon = function()
	{
		var editLink = BX('landing-form-favicon-change');
		var editInput = BX('landing-form-favicon-input');
		var editValue = BX('landing-form-favicon-value');
		var editForm = BX('landing-form-favicon-form');
		var editSrc = BX('landing-form-favicon-src');
		var editError = BX('landing-form-favicon-error');

		if (!editForm || !editInput ||!editLink)
		{
			return;
		}

		// open file dialog
		BX.bind(editLink, 'click', function(e)
		{
			BX.fireEvent(editInput, 'click');
			BX.PreventDefault(e);
		});
		// upload picture
		BX.bind(editInput, 'change', function(e)
		{
			BX.ajax.submitAjax(editForm, {
				method: 'POST',
				dataType: 'json',
				onsuccess: function (data) {
					if (
						data.type === 'success' &&
						typeof data.result !== 'undefined' &&
						data.result !== false
					)
					{
						editValue.value = data.result.id;
						editSrc.setAttribute('src', data.result.src);
					}
					else
					{
						editError.style.color = 'red';
					}
				}
			});
			BX.PreventDefault(e);
		});
	};

	/**
	 * Custom 404.
	 */
	BX.Landing.Custom404 = function()
	{
		var select = BX('landing-form-404-select');
		BX.bind(select, 'change', function ()
		{
			if(this.value === '')
			{
				this.parentNode.style.height = getComputedStyle(this.parentNode).height;
				BX('checkbox-404-use').checked = false;
			}
		});
		BX.bind(BX('checkbox-404-use'), 'change', function ()
		{
			if(!this.checked)
			{
				select.value = ''
			}
		});
	};

	/**
	 * Custom 503.
	 */
	BX.Landing.Custom503 = function()
	{
		var select = BX('landing-form-503-select');
		BX.bind(select, 'change', function ()
		{
			if(this.value === '')
			{
				this.parentNode.style.height = getComputedStyle(this.parentNode).height;
				BX('checkbox-503-use').checked = false;
			}
		});
		BX.bind(BX('checkbox-503-use'), 'change', function ()
		{
			if(!this.checked)
			{
				select.value = ''
			}
		});
	};

	/**
	 * Layout.
	 */
	BX.Landing.Layout = function(params)
	{
		var layoutBlockContainer = document.querySelector('.landing-form-layout-block-container');
		var area = [];
		var layouts = document.querySelectorAll('.landing-form-layout-item');
		var detailLayoutContainer = document.querySelector('.landing-form-layout-detail');
		var layoutForm = document.querySelector('.landing-form-page-layout');
		layouts = Array.prototype.slice.call(layouts, 0);
		params.messages = params.messages || {};

		createBlocks(layouts[0].dataset.block);

		layouts.forEach(function (item)
		{
			item.addEventListener('click', handleLayoutClick.bind(this));
		});

		function handleLayoutClick(event) {
			var layoutItem = event.target.parentNode;

			var layoutItemSelected = document.querySelector('.landing-form-layout-item-selected');
			if(layoutItemSelected) {
				layoutItemSelected.classList.remove('landing-form-layout-item-selected');
			}

			changeLayout (layoutItem.dataset.block, layoutItem.dataset.layout);
		}

		function changeLayout(block, layout)
		{
			layoutForm.classList.remove('landing-form-page-layout-short');
			detailLayoutContainer.classList.remove('landing-form-layout-detail-hidden');

			createBlocks(block);

			if (typeof layout !== 'undefined')
			{
				changeLayoutImg(layout);
			}

			BX('layout-tplrefs').value = '';
		}

		if (typeof params.areasCount !== 'undefined')
		{
			changeLayout(params.areasCount, params.current);
		}

		function changeLayoutImg(layout)
		{

			var layoutDetail = document.querySelectorAll('.landing-form-layout-img');
			for (var i = 0; i < layoutDetail.length; i++)
			{
				if (layoutDetail[i].dataset.layout === layout)
				{
					layoutDetail[i].style.display = 'block';
				}
				else
				{
					layoutDetail[i].style.display = 'none';
				}
			}
		}

		function createBlocks(blocks)
		{
			var saveRefs = BX('layout-tplrefs').value.split(',');
			area = [];
			layoutBlockContainer.innerHTML = '';
			for (var i = 0; i < blocks; i++)
			{
				var block = BX.create('div', {
					attrs: {
						className: 'landing-form-layout-block-item'
					}
				});

				var numberBlock = i + 1;
				var linkContent = '';

				if (
					typeof saveRefs[i] !== 'undefined' &&
					saveRefs[i].indexOf(':') !== -1
				)
				{
					linkContent = parseInt(saveRefs[i].split(':')[1]);
					if (linkContent > 0)
					{
						linkContent = '#landing' + linkContent;
					}
					else
					{
						linkContent = '';
					}
				}

				var layoutField = new BX.Landing.UI.Field.LinkURL({
					title: params.messages.area + ' #' + numberBlock,
					content: linkContent,
					textOnly: true,
					disableCustomURL: true,
					disableBlocks: true,
					disallowType: true,
					enableAreas: true,
					allowedTypes: [
						BX.Landing.UI.Field.LinkURL.TYPE_PAGE
					],
					options: {
						siteId: params.siteId,
						landingId: params.landingId,
						filter: {
							'=TYPE': params.type
						}
					},
					onInput: function()
					{
						var refs = '';
						for (var i= 0, c = area.length; i < c; i++)
						{
							refs += (i+1) + ':' +
									(area[i].getValue() ? area[i].getValue().substr(8) : 0) +
									',';
						}
						BX('layout-tplrefs').value = refs;
					}
				});

				area[i] = layoutField;
				block.appendChild(layoutField.layout);
				layoutBlockContainer.appendChild(block);
			}
		}

		var tplCheck = BX('layout-tplrefs-check');

		tplCheck.addEventListener('click', handleCheckBoxClick.bind(this));

		function handleCheckBoxClick()
		{

				BX('layout-tplrefs').value = '';
				detailLayoutContainer.classList.add('landing-form-layout-detail--hidden');
				layoutForm.classList.add('landing-form-page-layout-short');

				var inputs = document.querySelectorAll('.layout-switcher');
				inputs = Array.prototype.slice.call(inputs, 0);

				inputs.forEach(function (item)
				{
					item.checked = false;
				});
		}

		var arrowContainer = document.querySelector('.landing-form-select-buttons');
		var layoutContainer = document.querySelector('.landing-form-list-inner');
		var layoutWithoutRight = BX('layout-radio-6');
		arrowContainer.addEventListener('click', handleArrowClick.bind(this));

		function handleArrowClick(event) {
			if(event.target.classList.contains('landing-form-select-next')) {
				layoutContainer.classList.add('landing-form-list-inner-prev');
			} else {
				layoutContainer.classList.remove('landing-form-list-inner-prev');
			}
		}

		if(layoutWithoutRight.checked) {
			layoutContainer.classList.add('landing-form-list-inner-prev');
		}
	};

	/**
	 * GA metrika.
	 */

	BX.Landing.Metrika = function()
	{
		var inputGa = BX('field-gacounter_counter-use');
		var inputGaClick = BX('field-gacounter_send_click-use');
		var inputGaShow = BX('field-gacounter_send_show-use');

		if(inputGa.value === '') {
			inputGaClick.disabled = true;
			inputGaShow.disabled = true;
		}

		inputGa.addEventListener('input', onInput.bind(this));

		function onInput() {
			if(inputGa.value === '') {
				inputGaClick.disabled = true;
				inputGaClick.checked = false;

				inputGaShow.disabled = true;
				inputGaShow.checked = false;
			} else {
				inputGaClick.disabled = false;
				inputGaShow.disabled = false;
			}
		}
	};

	/**
	 * Change save button.
	 */

	BX.Landing.SaveBtn = function(saveBtn)
	{
		saveBtn.addEventListener('click', changeSaveBtn.bind(this));

		function changeSaveBtn() {
			saveBtn.classList.add('ui-btn-clock');
			saveBtn.style.cursor = "default";
			saveBtn.style.pointerEvents = "none";
		}
	};

	/**
	 * Change iblock select.
	 */

	BX.Landing.IblockSelect = function()
	{
		this.section = BX("row_section_id");
		this.init(this.section);
	};

	BX.Landing.IblockSelect.prototype = {

		init: function(section) {
			if(!BX("settings_iblock_id").value) {
				section.classList.add("landing-form-field-section-hidden");
			} else {
				section.classList.remove("landing-form-field-section-hidden");
			}
		}
	}

})();

Zerion Mini Shell 1.0