document.addEventListener('DOMContentLoaded', function () { var movedNowCssFlag = 'moved-now', widgetExpandedDelay = 170, maxPhoneLength = 11, timer = null, timerVal = 15; var applyDataMask = function applyDataMask(field) { var mask = field.dataset.mask.split(''), maskSeparator = '-'; function stripMask(maskedData) { function isDigit(char) { return /\d/.test(char); } return maskedData.split('').filter(isDigit); } function applyMask(data) { return mask.map(function(char) { if (char != '_') { return char; } if (data.length == 0) { return char; } return data.shift(); }).join(''); } function reapplyMask(data) { return applyMask(stripMask(data)); } function changed(e) { var oldStart = field.selectionStart; var oldEnd = field.selectionEnd; field.value = reapplyMask(field.value); if (e.type == 'keyup') { if (e.key != 'ArrowRight' && e.key != 'ArrowLeft') { if (field.value.charAt(oldStart) == maskSeparator && e.key != 'Backspace') { ++oldStart; ++oldEnd; } } } field.selectionStart = oldStart; field.selectionEnd = oldEnd; } field.addEventListener('click', changed); field.addEventListener('keyup', changed); }; var setNewMask = function(domEl, mask) { var tmpDomEl; domEl.setAttribute('value', mask); domEl.value = mask; domEl.setAttribute('data-mask', mask); tmpDomEl = domEl.cloneNode(true); domEl.parentNode.replaceChild(tmpDomEl, domEl); applyDataMask(tmpDomEl); }; var createHtmlEl = function(htmlStr) { var frag = document.createDocumentFragment(), temp = document.createElement('div'); temp.innerHTML = htmlStr; while (temp.firstChild) { frag.appendChild(temp.firstChild); } return frag; }; var insertCssFile = function(cssPath) { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = cssPath; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var runCallbackCommand = function() { var el = document.getElementById('widgetPhoneNum'), phone = getWidgetCountryPrefix() + el.value.replace(/[_ -]/g, ''), body = 'userPhone=' + encodeURIComponent(phone) + '&userIp=' + encodeURIComponent('185.98.7.178') + '&userUrl=' + encodeURIComponent('www.apro.kz') + '&companyId=' + encodeURIComponent('3953') + '&elemId=' + encodeURIComponent('el-426299590'), xhr = new XMLHttpRequest(); if (phone && phone.length == maxPhoneLength) { el.parentElement.classList.remove('not-valid'); el.classList.remove('not-valid'); xhr.open('POST', 'https://ats.kts.kz/api/public.php?method=send-detail-callback', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { if (xhr.status == 200) { window.dataLayer && window.dataLayer.push({ 'event': 'user-callback-called' }); runCallbackTimer(); } } }; xhr.send(body); } else { el.parentElement.classList.add('not-valid'); } }; var runCallbackTimer = function() { var drawTimerValue = function(v) { if (v < 10) { v = '0' + v; } document.getElementById('widgetButtonTimer').innerHTML = '00:' + v; }; var drawTimerDomEl = function() { var str = "<div id='widgetButtonTimer'>00:" + timerVal + "</div>", el = document.getElementById('widgetButton'); el.innerHTML = str; }; if (!timer) { collapseCallbackForm(); drawTimerDomEl(); timer = setInterval(function() { drawTimerValue(--timerVal); if (timerVal == 0) { clearInterval(timer); timer = null; timerVal = 15; removeDomElement('widgetButtonTimer'); document.getElementById('widgetButton').innerHTML = "<i></i>"; } }, 1000); } }; var removeDomElement = function(domId) { document.getElementById(domId).parentNode.removeChild(document.getElementById(domId)); }; var getWidgetCountryPrefix = function() { var prefixDomEl = prefixDomEl = document.getElementById('widgetPhonePrefix'); return prefixDomEl.innerHTML.replace('+', ''); }; var changeWidgetCountryMask = function(domEl) { var countryClassList = domEl.classList, prefixDomEl = document.getElementById('widgetPhonePrefix'), inputDomEl = document.getElementById('widgetPhoneNum'), countryFlagDomEl = document.getElementById('widgetPhoneCountryFlag'), countryArr = ['kaz', 'rus', 'ukr', 'bel'], tmpDomEl; var getCurrentCountry = function() { for (var i=0; i<countryClassList.length-1; i++) { var c = countryClassList[i]; if (c != 'widgetCountryItem') { return(c.trim()); } } }; var removeCountryClass = function() { for (var i = 0; i < countryArr.length; i++) { var c = countryArr[i]; countryFlagDomEl.classList.remove(c); } }; var country = getCurrentCountry(); switch (country) { default: case 'kaz': prefixDomEl.innerHTML = '+77'; setNewMask(inputDomEl, '__-___-__-__'); break; case 'rus': prefixDomEl.innerHTML = '+7'; setNewMask(inputDomEl, '___-___-__-__'); break; case 'ukr': prefixDomEl.innerHTML = '+380'; setNewMask(inputDomEl, '_-___-__-__'); break; case 'bel': prefixDomEl.innerHTML = '+375'; setNewMask(inputDomEl, '_-___-___-__'); break; } removeCountryClass(); countryFlagDomEl.classList.add(country); collapseCountrySelectForm(); }; var expandCountrySelectForm = function() { var panelEl = document.getElementById('widgetCountrySelector'); if (panelEl) { panelEl.classList.remove('hidden'); } }; var collapseCountrySelectForm = function() { var panelEl = document.getElementById('widgetCountrySelector'); if (panelEl) { panelEl.classList.add('hidden'); } }; var collapseCallbackForm = function() { var a = document.getElementById('widgetButtonWrapper'), b = document.getElementById('widgetPanelWrapper'); b.classList.remove('widget-expand'); b.classList.remove('widget-expand-finish'); b.classList.add('widget-collapse'); setTimeout(function() { a.classList.remove('widget-collapse'); a.classList.remove('widget-collapse-finish'); a.classList.remove('hidden'); a.classList.add('widget-expand'); setTimeout(function() { b.classList.add('widget-collapse-finish'); a.classList.remove('widget-expand'); collapseCountrySelectForm(); }, 100); }, widgetExpandedDelay); }; var expandCallbackForm = function() { var a = document.getElementById('widgetButtonWrapper'), b = document.getElementById('widgetPanelWrapper'); a.classList.add('widget-collapse'); b.classList.remove('widget-collapse'); b.classList.remove('widget-collapse-finish'); setTimeout(function() { a.classList.add('hidden'); b.classList.remove('hidden'); b.style.display = 'table-cell'; b.classList.add('widget-expand'); setTimeout(function() { b.classList.add('widget-expand-finish'); a.classList.remove('widget-collapse'); }, 100); }, widgetExpandedDelay); }; var renderFullForm = function() { var str = "<div id='widgetPanelWrapper' class='widgetPanelWrapper down-right' style='position: fixed; z-index:2147483647; display: none;'> <div id='widgetPanel' class='widgetPanel bg-green border-white opacity-none'> <div id='widgetCloseBtn' class='widgetCloseBtn bg-green'> </div> <div id='widgetText' class='col widgetText txt-white'>Перезвоним через 10 секунд</div> <div id='widgetPhoneBlockWrapper' class='widgetPhoneBlockWrapper'> <div id='widgetPhoneBlock' class='widgetPhoneBlock'> <div id='widgetPhoneCountryWrapper' class='widgetPhoneCountryWrapper'> <div id='widgetPhoneCountry' class='widgetPhoneCountry'> <div id='widgetPhoneCountryFlag' class='widgetPhoneCountryFlag'> </div> <i></i> </div> </div> <div id='widgetCountrySelector' class='widgetCountrySelector hidden'> <div class='kaz widgetCountryItem'> <i></i> Казахстан +77 </div> <div class='rus widgetCountryItem'> <i></i> Россия +7 </div> <div class='ukr widgetCountryItem'> <i></i> Украина +380 </div> <div class='bel widgetCountryItem'> <i></i> Беларусь +375 </div> </div> <div id='widgetPhoneNumWrapper' class='widgetPhoneNumWrapper'> <span id='widgetPhonePrefix' class='widgetPhonePrefix'>+7</span> <input type='tel' id='widgetPhoneNum' class='widgetPhoneNum' value='___-___-__-__' data-mask='___-___-__-__' name='widgetPhoneNum'> </div> </div> </div> <div id='widgetSubmitBtnWrapper' class='widgetSubmitBtnWrapper'> <div id='widgetSubmitBtn' class='widgetSubmitBtn bg-green txt-white widget-icon-white'> <span>Заказать</span> <i></i> </div> </div> <div id='widgetOwnerAdvWrapper' class='widgetOwnerAdvWrapper' align='right'> <div id='widgetOwnerAdv' class='widgetOwnerAdv'>Сервис предоставлен <a href='https://kts.kz'>Казтехносвязь</a></div> </div> </div> </div>"; var fragment = createHtmlEl(str); document.body.insertBefore(fragment, document.body.childNodes[0]); }; var renderShortForm = function() { var str = "<div id='widgetButtonWrapper' class='draggable widgetButtonWrapper annimation-white down-right size-small widget-icon-white' style='position: fixed; z-index:2147483647'> <div id='widgetButton' class='widgetButton size-small border-white bg-green widget-icon-white'> <i></i> </div> </div>"; var fragment = createHtmlEl(str); document.body.insertBefore(fragment, document.body.childNodes[0]); }; insertCssFile('https://ats.kts.kz/css/callback-widget-h.css'); setTimeout(function() { renderShortForm(); renderFullForm(); var defaultCountreDomEl = document.querySelector('.widgetCountrySelector .kaz'); changeWidgetCountryMask(defaultCountreDomEl); document.getElementById('widgetSubmitBtn').addEventListener('click', function() { runCallbackCommand(); }, false); document.getElementById('widgetCloseBtn').addEventListener('click', function() { collapseCallbackForm(); }, false); document.getElementById('widgetButton').addEventListener('click', function() { var el = document.getElementById('widgetButtonWrapper'); if (!el.classList.contains(movedNowCssFlag)) { expandCallbackForm(); } }, false); document.getElementById('widgetPhoneCountry').addEventListener('click', function() { expandCountrySelectForm(); }, false); var widgetItemsElem = document.querySelectorAll('#widgetPanel .widgetCountryItem'); if (widgetItemsElem) { for (var i = 0; i < widgetItemsElem.length; i++) { var el = widgetItemsElem[i]; el.addEventListener('click', function(e) { changeWidgetCountryMask(e.target); }); } } }, 50); }, false );