%PDF- %PDF-
Direktori : /home/bitrix/www/bitrix/components/bitrix/landing.site_edit/templates/.default/ |
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"); } } } })();