(function(){ var root = document.querySelector('[data-role="vb-chat"]'); if (!root) return; var fab = root.querySelector('[data-role="vb-chat-fab"]'); var badge = root.querySelector('[data-role="vb-chat-badge"]'); var panel = root.querySelector('[data-role="vb-chat-panel"]'); var closeBtn = root.querySelector('[data-role="vb-chat-close"]'); var body = root.querySelector('[data-role="vb-chat-body"]'); var greeting = root.querySelector('[data-role="vb-chat-greeting"]'); var form = root.querySelector('[data-role="vb-chat-form"]'); var input = root.querySelector('[data-role="vb-chat-input"]'); var callfab = root.querySelector('[data-role="vb-chat-callfab"]'); var callpanel = root.querySelector('[data-role="vb-chat-callpanel"]'); var callpanelClose = root.querySelector('[data-role="vb-chat-callpanel-close"]'); var callform = root.querySelector('[data-role="vb-chat-callform"]'); var callNameInput = root.querySelector('[data-role="vb-chat-call-name"]'); var callPhoneInput = root.querySelector('[data-role="vb-chat-call-phone"]'); var callSubmitBtn = root.querySelector('[data-role="vb-chat-call-submit"]'); var callError = root.querySelector('[data-role="vb-chat-call-error"]'); var callDone = root.querySelector('[data-role="vb-chat-call-done"]'); var callSending = false; var sending = false; var maxId = 0; var historyLoaded = false; var pollTimer = null; var pollBusy = false, pollFailures = 0, nextPollAt = 0, deliveryActive = false; var unread = 0; // id последнего сообщения, которое посетитель уже видел: без этого при каждой // загрузке страницы вся история ответов менеджера снова считалась «новой» var seenId = 0; try { seenId = parseInt(localStorage.getItem('vb_chat_seen') || '0', 10) || 0; } catch (e) {} function saveSeen() { if (maxId > seenId) { seenId = maxId; try { localStorage.setItem('vb_chat_seen', String(seenId)); } catch (e) {} } } function getSessionId() { try { var id = localStorage.getItem('vb_chat_session'); if (!id) { id = (window.crypto && crypto.randomUUID) ? crypto.randomUUID() : (Date.now().toString(16) + Math.random().toString(16).slice(2)); localStorage.setItem('vb_chat_session', id); } return id; } catch (e) { if (!window.__vbChatFallbackId) window.__vbChatFallbackId = Date.now().toString(16) + Math.random().toString(16).slice(2); return window.__vbChatFallbackId; } } var sessionId = getSessionId(); function leadRequestId() { return (window.crypto && crypto.randomUUID) ? crypto.randomUUID() : Date.now().toString(36)+'_'+Math.random().toString(36).slice(2)+'_'+Math.random().toString(36).slice(2); } var pendingChatRequest = null, pendingCallRequest = null; var deliveryStorageKey = 'vb_chat_delivery_until_'+sessionId; try {deliveryActive = Number(localStorage.getItem(deliveryStorageKey)||0) > Date.now();} catch(e) {} function activateDelivery() { deliveryActive = true; try {localStorage.setItem(deliveryStorageKey,String(Date.now()+2*60*60*1000));} catch(e) {} } var soundButton = root.querySelector('[data-role="vb-chat-sound"]'); var soundEnabled = true, soundContext = null, soundUnlocked = false; try {soundEnabled = localStorage.getItem('vb_chat_sound') !== 'off';} catch(e) {} function updateSoundButton() { soundButton.setAttribute('aria-pressed', soundEnabled ? 'true' : 'false'); soundButton.setAttribute('aria-label', soundEnabled ? 'Выключить звук сообщений' : 'Включить звук сообщений'); soundButton.title = soundEnabled ? 'Выключить звук сообщений' : 'Включить звук сообщений'; } updateSoundButton(); function unlockSound() { if (!soundEnabled) return; try { var Audio = window.AudioContext || window.webkitAudioContext; if (!Audio) return; if (!soundContext) soundContext = new Audio({latencyHint:"interactive"}); // Resume happens in the trusted gesture, before network callbacks. var resumed = soundContext.resume(); if (resumed && resumed.catch) resumed.catch(function(){}); var primer = soundContext.createOscillator(), silent = soundContext.createGain(); silent.gain.value = 0; primer.connect(silent);silent.connect(soundContext.destination); primer.onended = function(){primer.disconnect();silent.disconnect();}; primer.start();primer.stop(soundContext.currentTime + .01); soundUnlocked = true; if (resumed && resumed.then) resumed.then(flushIncomingSound).catch(function(){}); else flushIncomingSound(); } catch(e) {} } root.addEventListener('pointerdown', unlockSound, {passive:true}); root.addEventListener('keydown', unlockSound); soundButton.addEventListener('click', function(){ soundEnabled = !soundEnabled; try {localStorage.setItem('vb_chat_sound', soundEnabled ? 'on' : 'off');} catch(e) {} updateSoundButton(); if (soundEnabled) unlockSound(); }); var lastIncomingSoundId = 0, incomingSoundInFlight = 0, pendingIncomingSound = null; function playMessageSound(kind) { if (!soundEnabled || !soundUnlocked || !soundContext) return Promise.resolve(false); function play() { if (!soundEnabled || soundContext.state !== 'running') return false; try { var start = soundContext.currentTime; var notes = kind === 'sent' ? [660,880] : [880,1174.66]; notes.forEach(function(frequency,i){ var oscillator = soundContext.createOscillator(), gain = soundContext.createGain(); var at = start + i * (kind === 'sent' ? .045 : .085), duration = kind === 'sent' ? .075 : .14; oscillator.type = 'sine';oscillator.frequency.value = frequency; gain.gain.setValueAtTime(0,at); gain.gain.linearRampToValueAtTime(kind === 'sent' ? .055 : .08,at+.006); gain.gain.exponentialRampToValueAtTime(.0001,at+duration); oscillator.connect(gain);gain.connect(soundContext.destination); oscillator.onended = function(){oscillator.disconnect();gain.disconnect();}; oscillator.start(at);oscillator.stop(at+duration+.01); }); return true; } catch(e) {return false;} } if (soundContext.state === 'running') return Promise.resolve(play()); // Mobile browsers may suspend or interrupt audio after opening a keyboard, // switching applications, or waiting for a reply. Resume before scheduling. try { return Promise.resolve(soundContext.resume()).then(play).catch(function(){return false;}); } catch(e) {return Promise.resolve(false);} } function notifyIncoming(id) { if (!soundEnabled || id <= lastIncomingSoundId || id <= incomingSoundInFlight) return; incomingSoundInFlight = id; playMessageSound('received').then(function(played){ if (played) { lastIncomingSoundId = Math.max(lastIncomingSoundId,id); if (pendingIncomingSound && pendingIncomingSound.id <= id) pendingIncomingSound = null; } else { pendingIncomingSound = {id:id,at:Date.now()}; } if (incomingSoundInFlight === id) incomingSoundInFlight = 0; }); } function flushIncomingSound() { if (!pendingIncomingSound || !soundEnabled) return; var pending = pendingIncomingSound;pendingIncomingSound = null; if (Date.now()-pending.at < 15000) notifyIncoming(pending.id); } document.addEventListener('visibilitychange',function(){ if (!document.hidden && soundContext && soundUnlocked) { try {Promise.resolve(soundContext.resume()).then(flushIncomingSound).catch(function(){});} catch(e) {} } }); function setBadge(n) { unread = Math.max(0,Number(n)||0); if (unread > 0) {badge.hidden=false;badge.textContent=unread>9?'9+':String(unread);} else {badge.hidden=true;badge.textContent='';} var action=root.querySelector('[data-role="vb-contact-chat"]'); var counter=root.querySelector('[data-role="vb-contact-unread"]'); var hint=root.querySelector('[data-role="vb-contact-unread-text"]'); if (!action || !counter || !hint) return; action.classList.toggle('vb-contact-menu__action--unread',unread>0); counter.hidden=unread===0;hint.hidden=unread===0; counter.textContent=unread>99?'99+':String(unread); hint.textContent=unread===1?'Новое сообщение':'Новые сообщения'; var tail=unread%100; var word=tail>=11&&tail<=14?'непрочитанных сообщений':unread%10===1?'непрочитанное сообщение':unread%10>=2&&unread%10<=4?'непрочитанных сообщения':'непрочитанных сообщений'; action.setAttribute('aria-label','Онлайн чат с менеджером'+(unread?': '+unread+' '+word:'')); } var renderedMessageIds = Object.create(null); function addMsg(text, dir, id) { id = Number(id) || 0; if (id && renderedMessageIds[id]) return; var el = document.createElement('div'); el.className = 'vb-chat__msg vb-chat__msg--' + dir; el.textContent = text; if (id) { el.setAttribute('data-message-id', String(id)); renderedMessageIds[id] = true; } // A send confirmation can beat a poll containing an earlier manager reply. var later = null; if (id) { var existing = body.querySelectorAll('[data-message-id]'); for (var i = 0; i < existing.length; i++) { if (Number(existing[i].getAttribute('data-message-id')) > id) { later = existing[i]; break; } } } body.insertBefore(el, later); body.scrollTop = body.scrollHeight; } function renderIncoming(messages) { var soundMessageId = 0; messages.forEach(function(m){ if (Number(m.id) <= maxId) return; if (historyLoaded && m.direction === 'in' && Number(m.id) > maxId) soundMessageId = Math.max(soundMessageId,Number(m.id)); if (m.id > maxId) maxId = m.id; if (m.direction === 'in') { addMsg(m.text, 'in', m.id); if (!root.classList.contains('vb-chat--open') && m.id > seenId) setBadge(unread + 1); } else { // Render both history and newly accepted outgoing messages once. addMsg(m.text, 'out', m.id); } }); if (root.classList.contains('vb-chat--open')) saveSeen(); if (soundMessageId) notifyIncoming(soundMessageId); } function poll() { if (pollBusy || Date.now() < nextPollAt || (typeof navigator !== 'undefined' && navigator.onLine === false)) return; pollBusy = true; var controller = typeof AbortController !== 'undefined' ? new AbortController() : null; var timeout = controller ? setTimeout(function(){controller.abort();},10000) : null; var options = {cache:'no-store'}; if (controller) options.signal = controller.signal; return fetch('/local/tools/vb_chat/poll.php?session_id='+encodeURIComponent(sessionId)+'&after_id='+maxId,options) .then(function(r){if(!r.ok)throw new Error('poll');return r.json();}) .then(function(data){ if (!data || !data.ok) throw new Error('poll'); if (!historyLoaded && data.messages && data.messages.length) { greeting.style.display = 'none'; activateDelivery(); startPolling(false); } renderIncoming(data.messages || []); historyLoaded = true; pollFailures = 0;nextPollAt = 0; }) .catch(function(){pollFailures++;nextPollAt=Date.now()+Math.min(30000,1000*Math.pow(2,pollFailures));}) .finally(function(){if(timeout)clearTimeout(timeout);pollBusy=false;}); } function startPolling(fast) { if (fast) activateDelivery(); stopPolling(); // Collapsing the widget must not slow down an established conversation. var delay = deliveryActive ? 1000 : 20000; if (document.hidden && deliveryActive) delay = 5000; root.setAttribute('data-vb-delivery-ms',String(delay)); pollTimer = setInterval(poll,delay); } function stopPolling() { if (pollTimer) {clearInterval(pollTimer);pollTimer=null;} } document.addEventListener('visibilitychange',function(){ if (!document.hidden) {nextPollAt=0;poll();} startPolling(false); }); window.addEventListener('online',function(){nextPollAt=0;poll();startPolling(false);}); function clamp(val, min, max) { return Math.max(min, Math.min(max, val)); } // в очень редких случаях (замечено при восстановлении размера панели сразу // после перехода на новую страницу) window.innerWidth/innerHeight на самом // раннем этапе загрузки может на мгновение вернуть 0 - тогда Math.min(w, 0) // обнулял размер панели ("0px"). Подстраховываемся резервными источниками. function viewportW() { return window.innerWidth || document.documentElement.clientWidth || 1024; } function viewportH() { return window.innerHeight || document.documentElement.clientHeight || 768; } // у сайта есть html{zoom:0.9} на десктопе (шаблон template_styles.css) - CSS "px" // внутри зумленного документа физически меньше, чем px из getBoundingClientRect/ // mouse-событий. Без поправки позиция "уезжает" пропорционально масштабу. function getZoom() { var z = parseFloat(getComputedStyle(document.documentElement).zoom); return (z && isFinite(z) && z > 0) ? z : 1; } function setFixedPx(el, left, top) { var zoom = getZoom(); el.style.left = (left / zoom) + 'px'; el.style.top = (top / zoom) + 'px'; } // offsetWidth/offsetHeight (и CSS min/max-width из стилей) у зумленной страницы // приходят БЕЗ учёта zoom ("номинальные" px), а getBoundingClientRect/clientX/ // window.innerWidth/innerHeight - "физические" (уже с учётом масштаба). Перед // сравнением/клэмпом их всегда нужно приводить к одним единицам через zoom. function nominalToPhysical(px) { return px * getZoom(); } // если окно браузера стало короче/уже текущего размера панели (изменили // размер окна, открыли на маленьком экране, повернули устройство и т.п.), // одной перестановки left/top уже не хватает - clamp упирается в 0 и панель // всё равно вылезает за край снизу/справа. Поэтому перед каждым позиционированием // принудительно уменьшаем панель, если она физически не помещается в вьюпорт. function clampPanelToViewport() { var zoom = getZoom(); var w = nominalToPhysical(panel.offsetWidth || 392); var h = nominalToPhysical(panel.offsetHeight || 553); var maxW = viewportW(), maxH = viewportH(); if (w > maxW || h > maxH) { panel.style.width = (Math.min(w, maxW) / zoom) + 'px'; panel.style.height = (Math.min(h, maxH) / zoom) + 'px'; } } // панель - отдельный position:fixed элемент (не завязан на бокс root). // Открывается на месте кружка: правый нижний угол панели совпадает с // правым нижним углом кружка (кружок при этом скрыт). Отступ от края экрана - // 0: панель может доходить точно до границы вьюпорта, но клэмп не даёт ей // вылезти за эту границу ни при открытии, ни при ресайзе/перетаскивании. var mobileChatLocked = false, mobileChatScroll = 0, mobileChatFullHeight = 0; var mobileChatSettleTimers = []; function syncMobileChat() { var active = window.innerWidth <= 767 && root.classList.contains('vb-chat--open'); if (active) { if (!mobileChatLocked) { mobileChatScroll = window.pageYOffset || 0; mobileChatFullHeight = Math.max(window.innerHeight, window.visualViewport ? window.visualViewport.height : 0); document.body.style.setProperty('--vb-chat-page-top', -mobileChatScroll+'px'); document.body.classList.add('vb-chat-mobile-active'); mobileChatLocked = true; } var view = window.visualViewport; var visibleHeight = view ? view.height : window.innerHeight; var focused = document.activeElement === input; if (!focused || !mobileChatFullHeight) mobileChatFullHeight = Math.max(window.innerHeight, visibleHeight); var keyboardOpen = focused && mobileChatFullHeight - visibleHeight > 100; panel.classList.toggle('vb-chat--keyboard', keyboardOpen); // Keyboard already covers the home-indicator area. Keeping its safe-area // padding here creates an empty strip with Gboard on iOS browsers. panel.style.setProperty('--vb-chat-bottom-safe', keyboardOpen ? '0px' : 'env(safe-area-inset-bottom, 0px)'); var zoom = getZoom(); panel.style.setProperty('--vb-chat-view-height', (visibleHeight / zoom)+'px'); panel.style.setProperty('--vb-chat-view-top', ((view ? view.offsetTop : 0) / zoom)+'px'); panel.setAttribute('data-vb-keyboard', keyboardOpen ? 'open' : 'closed'); panel.setAttribute('aria-modal', 'true'); } else { panel.removeAttribute('aria-modal'); panel.classList.remove('vb-chat--keyboard'); mobileChatSettleTimers.forEach(clearTimeout);mobileChatSettleTimers = []; if (mobileChatLocked) { document.body.classList.remove('vb-chat-mobile-active'); document.body.style.removeProperty('--vb-chat-page-top'); mobileChatLocked = false; window.scrollTo(0, mobileChatScroll); } } } var mobileChatFrame = 0; function scheduleMobileChat() { if (mobileChatFrame) cancelAnimationFrame(mobileChatFrame); mobileChatFrame = requestAnimationFrame(function(){mobileChatFrame=0;syncMobileChat();}); } if (window.visualViewport) { window.visualViewport.addEventListener('resize', scheduleMobileChat); window.visualViewport.addEventListener('scroll', scheduleMobileChat); } window.addEventListener('resize', scheduleMobileChat); function settleMobileKeyboard() { mobileChatSettleTimers.forEach(clearTimeout); mobileChatSettleTimers = []; scheduleMobileChat(); // Third-party keyboards and the browser autofill toolbar can finish // resizing after the last visualViewport event. [100,250,450,750,1100].forEach(function(delay){ mobileChatSettleTimers.push(setTimeout(scheduleMobileChat,delay)); }); } input.addEventListener('focus', settleMobileKeyboard); input.addEventListener('blur', settleMobileKeyboard); window.addEventListener('orientationchange', function(){mobileChatFullHeight=0;settleMobileKeyboard();}); panel.addEventListener('keydown', function(e){ if (!mobileChatLocked || e.key !== 'Tab') return; var focusable = Array.prototype.filter.call(panel.querySelectorAll('button,input,a[href]'), function(el){ return !el.disabled && el.getClientRects().length && getComputedStyle(el).visibility !== 'hidden'; }); if (!focusable.length) return; var first = focusable[0], last = focusable[focusable.length-1]; if (e.shiftKey && document.activeElement === first) {e.preventDefault();last.focus();} else if (!e.shiftKey && document.activeElement === last) {e.preventDefault();first.focus();} }); function positionPanel() { if (window.innerWidth <= 767) {syncMobileChat();return;} clampPanelToViewport(); var fr = fab.getBoundingClientRect(); var pw = nominalToPhysical(panel.offsetWidth || 392); var ph = nominalToPhysical(panel.offsetHeight || 553); var left = fr.right - pw; // правый край панели у правого края кнопки left = clamp(left, 0, viewportW() - pw); if (viewportW() <= 480) left = Math.max(0, (viewportW() - pw) / 2); // мобильная версия: по центру экрана var top = clamp(fr.bottom - ph, 0, viewportH() - ph); // нижний край панели у нижнего края кнопки setFixedPx(panel, left, top); } // панель обратного звонка - без drag/resize, но та же логика позиционирования // и та же поправка на zoom: нижний правый угол панели = нижний правый угол // кружка звонка, клэмп не даёт вылезти за экран (в т.ч. если панель по высоте // не помещается на очень низком экране - тогда сначала сжимаем её). function clampCallPanelToViewport() { var zoom = getZoom(); var w = nominalToPhysical(callpanel.offsetWidth || 300); var h = nominalToPhysical(callpanel.offsetHeight || 260); var maxW = viewportW(), maxH = viewportH(); if (w > maxW || h > maxH) { callpanel.style.width = (Math.min(w, maxW) / zoom) + 'px'; callpanel.style.maxHeight = (Math.min(h, maxH) / zoom) + 'px'; callpanel.style.overflowY = 'auto'; } } function positionCallPanel() { clampCallPanelToViewport(); var cr = fab.getBoundingClientRect(); var pw = nominalToPhysical(callpanel.offsetWidth || 300); var ph = nominalToPhysical(callpanel.offsetHeight || 260); var left = cr.right - pw; left = clamp(left, 0, viewportW() - pw); var top = clamp(cr.bottom - ph, 0, viewportH() - ph); setFixedPx(callpanel, left, top); } // реальный drag мышью даёт события реже/неравномернее, чем программный сдвиг - // при быстром перетаскивании/ресайзе к краю экрана накопленный сдвиг может // чуть-чуть не долететь до границы (виден зазор) или последнее событие может // прийти уже за её пределами (виден перехлёст). Поэтому по отпусканию мыши // "довинчиваем" ближний к краю отступ панели вплотную, если она и так // остановилась в пределах SNAP_PX от него, и жёстко клэмпим на случай перехлёста. var SNAP_PX = 32; // ресайз теперь доступен за любой из 4 углов - примагничиваем только те 2 // края, что реально двигались при ЭТОМ ресайзе (соответствуют утянутому // углу); противоположный (заякоренный) угол никогда не трогаем - иначе он // сам "прыгнет" к краю экрана, хотя пользователь его не двигал. function snapPanelToEdges(corner) { var r = panel.getBoundingClientRect(); var zoom = getZoom(); var vw = viewportW(), vh = viewportH(); var left = r.left, top = r.top, right = r.right, bottom = r.bottom; if (corner === 'nw' || corner === 'sw') { if (left <= SNAP_PX) left = 0; left = Math.max(left, 0); } else { if (vw - right <= SNAP_PX) right = vw; right = Math.min(right, vw); } if (corner === 'nw' || corner === 'ne') { if (top <= SNAP_PX) top = 0; top = Math.max(top, 0); } else { if (vh - bottom <= SNAP_PX) bottom = vh; bottom = Math.min(bottom, vh); } var w = right - left, h = bottom - top; panel.style.width = (w / zoom) + 'px'; panel.style.height = (h / zoom) + 'px'; setFixedPx(panel, left, top); return { w: w, h: h }; } // перетаскивание всего окна (см. initPanelDrag) может закончиться у любого из // 4 краёв экрана - примагничиваем к тому, что оказался рядом (независимо по // каждой оси), без изменения размера панели. function snapDraggedPanelToEdge() { var r = panel.getBoundingClientRect(); var vw = viewportW(), vh = viewportH(); var left = r.left, top = r.top; if (left <= SNAP_PX) left = 0; else if (vw - r.right <= SNAP_PX) left = vw - r.width; if (top <= SNAP_PX) top = 0; else if (vh - r.bottom <= SNAP_PX) top = vh - r.height; left = clamp(left, 0, Math.max(0, vw - r.width)); top = clamp(top, 0, Math.max(0, vh - r.height)); if (vw <= 480) left = Math.max(0, (vw - r.width) / 2); // мобильная версия: по центру экрана setFixedPx(panel, left, top); } function resetPosition() { panel.style.left = ''; panel.style.top = ''; try { localStorage.removeItem('vb_chat_pos'); } catch (e) {} } // позицию, которую пользователь задал перетаскиванием, запоминаем - чтобы // при открытии на новой странице (или вкладке) окно появлялось там же, а не // снова у кружка по умолчанию. function savePanelPosition() { var r = panel.getBoundingClientRect(); try { localStorage.setItem('vb_chat_pos', JSON.stringify({ left: r.left, top: r.top })); } catch (e) {} } function restorePanelPosition() { try { var saved = JSON.parse(localStorage.getItem('vb_chat_pos') || 'null'); if (!saved || typeof saved.left !== 'number' || typeof saved.top !== 'number') return false; clampPanelToViewport(); var pw = nominalToPhysical(panel.offsetWidth || 392); var ph = nominalToPhysical(panel.offsetHeight || 553); var left = clamp(saved.left, 0, Math.max(0, viewportW() - pw)); var top = clamp(saved.top, 0, Math.max(0, viewportH() - ph)); if (viewportW() <= 480) left = Math.max(0, (viewportW() - pw) / 2); // мобильная версия: по центру экрана setFixedPx(panel, left, top); return true; } catch (e) { return false; } } function open(opts) { closeContactMenu(); closeCallPanel(); // окна чата и обратного звонка не открываем одновременно root.classList.add('vb-chat--open'); fab.setAttribute('aria-expanded', 'true'); // если пользователь ранее перетащил окно - открываем там же; иначе (как и // раньше) позиционируем панель относительно текущего (дефолтного, CSS) // места кружка. Сам кружок не трогаем, чтобы не зафиксировать инлайн- // стилями его позицию и не сломать автоподъём над кнопкой "наверх" при // скролле (vb-chat--raised). if (window.innerWidth <= 767) syncMobileChat(); else if (!restorePanelPosition()) positionPanel(); setBadge(0); saveSeen(); // чат остаётся открытым на новой странице/вкладке (см. autoReopen ниже) - // фокус там переносить не нужно, это не результат клика пользователя. if (!opts || !opts.silent) setTimeout(function(){ input.focus(); }, 150); try { localStorage.setItem('vb_chat_open', '1'); } catch (e) {} poll(); startPolling(true); } function close() { root.classList.remove('vb-chat--open'); syncMobileChat(); fab.setAttribute('aria-expanded', 'false'); resetPosition(); startPolling(false); try { localStorage.setItem('vb_chat_open', '0'); } catch (e) {} } var contactMenu = root.querySelector('#vb-contact-menu'); var chatAction = root.querySelector('[data-role="vb-contact-chat"]'); function closeContactMenu(returnFocus) { if (!contactMenu) return; contactMenu.hidden = true; root.classList.remove('vb-contact--open'); fab.setAttribute('aria-expanded', 'false'); fab.setAttribute('aria-label', 'Связаться'); if (returnFocus) fab.focus(); } function openContactMenu() { contactMenu.hidden = false; root.classList.add('vb-contact--open'); fab.setAttribute('aria-expanded', 'true'); fab.setAttribute('aria-label', 'Закрыть меню связи'); contactMenu.querySelector('a,button').focus(); } function toggle() { if (root.classList.contains('vb-chat--open')) {close();return;} if (root.classList.contains('vb-chat--call-open')) {closeCallPanel();return;} contactMenu.hidden ? openContactMenu() : closeContactMenu(true); } fab.addEventListener('click', toggle); chatAction.addEventListener('click', function(){open();}); closeBtn.addEventListener('click', function(){close();fab.focus();}); root.querySelector('[data-role="vb-chat-mobile-back"]').addEventListener('click', function(){close();fab.focus();}); document.addEventListener('pointerdown', function(e){ if (!contactMenu.hidden && !root.contains(e.target)) closeContactMenu(); }); document.addEventListener('focusin', function(e){ if (!contactMenu.hidden && !root.contains(e.target)) closeContactMenu(); }); document.addEventListener('keydown', function(e){ if (e.key === 'Escape') { var active = !contactMenu.hidden || root.classList.contains('vb-chat--open') || root.classList.contains('vb-chat--call-open'); closeContactMenu();close();closeCallPanel(); if (active) fab.focus(); } }); function openCallPanel() { closeContactMenu(); close(); // окна чата и обратного звонка не открываем одновременно root.classList.add('vb-chat--call-open'); positionCallPanel(); setTimeout(function(){ callNameInput.focus(); }, 150); } function closeCallPanel() { root.classList.remove('vb-chat--call-open'); callpanel.style.left = ''; callpanel.style.top = ''; // сбрасываем форму, чтобы при следующем открытии не показывался // "спасибо" или ошибка от прошлой отправки setTimeout(function(){ callform.reset(); callform.hidden = false; callDone.hidden = true; callError.hidden = true; }, 250); } function toggleCallPanel() { root.classList.contains('vb-chat--call-open') ? closeCallPanel() : openCallPanel(); } callfab.addEventListener('click', toggleCallPanel); callpanelClose.addEventListener('click', function(){closeCallPanel();fab.focus();}); function setCallSending(v) { callSending = v; callSubmitBtn.disabled = v; callSubmitBtn.textContent = v ? 'Отправляем…' : 'Перезвоните мне'; } // автоформат телефона: код страны всегда +7 - если начали набор сразу с // цифры после кода (напр. "9...") или набрали "8" вместо кода - "+7" // подставляется/заменяется сама, дальше цифры собираются в маску. function formatPhone(raw) { var digits = raw.replace(/\D/g, ''); if (digits === '') return ''; if (digits.charAt(0) === '7' || digits.charAt(0) === '8') digits = digits.slice(1); digits = digits.slice(0, 10); var out = '+7'; if (digits.length > 0) out += ' (' + digits.slice(0, 3); if (digits.length >= 3) out += ')'; if (digits.length > 3) out += ' ' + digits.slice(3, 6); if (digits.length > 6) out += '-' + digits.slice(6, 8); if (digits.length > 8) out += '-' + digits.slice(8, 10); return out; } callPhoneInput.addEventListener('input', function(){ callPhoneInput.value = formatPhone(callPhoneInput.value); }); // текст ошибки должен объяснять РЕАЛЬНУЮ причину - раньше всегда показывался // один и тот же текст "проверьте номер", даже если сбой был из-за лимита // частоты запросов, сети или ошибки на сервере, что вводило в заблуждение. var CALL_ERROR_MESSAGES = { bad_phone: 'Проверьте номер телефона', rate_limited: 'Слишком много попыток. Позвоните нам: +7 (495) 178-04-80', telegram_failed: 'Не получилось отправить. Позвоните нам: +7 (495) 178-04-80', not_configured: 'Форма временно недоступна. Позвоните нам: +7 (495) 178-04-80', storage_failed: 'Не удалось сохранить заявку. Попробуйте ещё раз или позвоните: +7 (495) 178-04-80', method_not_allowed: 'Не получилось отправить. Позвоните нам: +7 (495) 178-04-80', network: 'Нет связи с сервером. Проверьте интернет и попробуйте ещё раз' }; function showCallError(code) { callError.textContent = CALL_ERROR_MESSAGES[code] || CALL_ERROR_MESSAGES.telegram_failed; callError.hidden = false; } callform.addEventListener('submit', function(e){ e.preventDefault(); if (callSending) return; if (!callform.querySelector('[data-vb-consent]').checked) { callform.reportValidity(); return; } var phoneDigits = callPhoneInput.value.replace(/\D+/g, ''); if (phoneDigits.length < 10) { showCallError('bad_phone'); callPhoneInput.focus(); return; } callError.hidden = true; setCallSending(true); var fd = new FormData(); fd.append('consent', 'Y'); fd.append('consent_version', '2026-10-21'); fd.append('name', callNameInput.value.trim()); fd.append('phone', callPhoneInput.value.trim()); var callSignature = callNameInput.value.trim()+'|'+callPhoneInput.value.trim()+'|'+location.href; if (!pendingCallRequest || pendingCallRequest.signature !== callSignature) pendingCallRequest = {id:leadRequestId(),signature:callSignature}; fd.append('request_id',pendingCallRequest.id); fd.append('page_url', location.origin + location.pathname); fetch('/local/tools/vb_chat/callback.php', { method: 'POST', body: new URLSearchParams(fd) }) .then(function(r){ return r.json(); }) .then(function(data){ setCallSending(false); if (data && data.ok) { callform.hidden = true; pendingCallRequest = null; callDone.hidden = false; setTimeout(closeCallPanel, 4000); } else { showCallError(data && data.error); } }) .catch(function(){ setCallSending(false); showCallError('network'); }); }); // --- позиционирование виджета (перетаскивание отключено, см. ниже) --- (function initReposition(){ // перетаскивание отключено по просьбе пользователя - кружок всегда стоит // на дефолтном (CSS) месте, окно чата открывается так, что его правый // нижний угол ровно там же (positionPanel). Меняться может только размер // панели - за верхний левый угол (см. initResize), правый нижний угол при // этом остаётся на месте кружка. window.addEventListener('resize', function(){ if (root.classList.contains('vb-chat--open')) positionPanel(); if (root.classList.contains('vb-chat--call-open')) positionCallPanel(); }); })(); // --- изменение размера окна за любой из 4 углов --- (function initResize(){ var MIN_W = 280, MIN_H = 320; var DEFAULT_W = 392, DEFAULT_H = 553; function saveSize(w, h) { try { localStorage.setItem('vb_chat_size', JSON.stringify({ w: w, h: h })); } catch (e) {} } function restoreSize() { try { var saved = JSON.parse(localStorage.getItem('vb_chat_size') || 'null'); // сохранённый размер (в т.ч. если пользователь осознанно СЖАЛ окно // меньше дефолта) применяем как есть - раньше тут стоял Math.max с // DEFAULT_W/H, из-за чего уменьшенный размер никогда не сохранялся // между страницами (всегда откатывался обратно к дефолту). Ниже // MIN_W/MIN_H он в любом случае никогда не будет - это уже // гарантирует сам ресайз (onResizeMove). var w = (saved && saved.w > 0) ? saved.w : DEFAULT_W; var h = (saved && saved.h > 0) ? saved.h : DEFAULT_H; var zoom = getZoom(); panel.style.width = Math.min(w, viewportW()) / zoom + 'px'; panel.style.height = Math.min(h, viewportH()) / zoom + 'px'; } catch (e) {} } restoreSize(); function onResizeMove(corner, startRect, dx, dy) { var zoom = getZoom(); // MIN_W/MIN_H заданы в номинальных CSS px (как min-width/min-height в // стилях) - приводим к физическим, чтобы сравнивать с startRect // (getBoundingClientRect, физические величины). var minW = nominalToPhysical(MIN_W), minH = nominalToPhysical(MIN_H); var maxW = viewportW(), maxH = viewportH(); // без отступа - до самого края экрана var l = startRect.left, t = startRect.top, w = startRect.width, h = startRect.height; if (corner === 'se' || corner === 'ne') { w = clamp(startRect.width + dx, minW, Math.min(maxW, maxW - startRect.left)); } else { w = clamp(startRect.width - dx, minW, Math.min(maxW, startRect.left + startRect.width)); l = startRect.left + startRect.width - w; } if (corner === 'se' || corner === 'sw') { h = clamp(startRect.height + dy, minH, Math.min(maxH, maxH - startRect.top)); } else { h = clamp(startRect.height - dy, minH, Math.min(maxH, startRect.top + startRect.height)); t = startRect.top + startRect.height - h; } panel.style.width = (w / zoom) + 'px'; panel.style.height = (h / zoom) + 'px'; setFixedPx(panel, l, t); return { w: w, h: h }; } document.querySelectorAll('.vb-chat__resize').forEach(function(handle){ var corner = handle.getAttribute('data-resize'); var startX, startY, startRect, sizing = false, lastSize = null; function move(clientX, clientY) { lastSize = onResizeMove(corner, startRect, clientX - startX, clientY - startY); } function up() { if (!sizing) return; sizing = false; root.classList.remove('vb-chat--resizing'); document.body.style.userSelect = ''; document.removeEventListener('mousemove', mouseMoveH); document.removeEventListener('mouseup', mouseUpH); document.removeEventListener('touchmove', touchMoveH); document.removeEventListener('touchend', touchUpH); if (lastSize) lastSize = snapPanelToEdges(corner); if (lastSize) { saveSize(lastSize.w, lastSize.h); // ресайз за nw/ne/sw двигает и left/top - обновляем сохранённую // позицию, иначе на новой странице она "уедет" от того места, // где реально остался угол после ресайза. savePanelPosition(); } } function mouseMoveH(e) { move(e.clientX, e.clientY); } function mouseUpH() { up(); } function touchMoveH(e) { if (e.touches[0]) { move(e.touches[0].clientX, e.touches[0].clientY); e.preventDefault(); } } function touchUpH() { up(); } function start(clientX, clientY) { startX = clientX; startY = clientY; startRect = panel.getBoundingClientRect(); sizing = true; root.classList.add('vb-chat--resizing'); document.body.style.userSelect = 'none'; } handle.addEventListener('mousedown', function(e){ if (e.button !== 0) return; e.preventDefault(); start(e.clientX, e.clientY); document.addEventListener('mousemove', mouseMoveH); document.addEventListener('mouseup', mouseUpH); }); handle.addEventListener('touchstart', function(e){ if (!e.touches[0]) return; start(e.touches[0].clientX, e.touches[0].clientY); document.addEventListener('touchmove', touchMoveH, { passive: false }); document.addEventListener('touchend', touchUpH); }, { passive: true }); }); })(); // --- перетаскивание открытого окна по экрану (за шапку) --- (function initPanelDrag(){ var DRAG_THRESHOLD = 6; // см. аналогичную защиту у кружка раньше в этом файле - естественное // дрожание пальца на тач-экране легко превышает несколько px, иначе тап // по шапке (например, по полю ввода) мог бы засчитаться как перетаскивание. var TOUCH_DRAG_THRESHOLD = 15; var startX, startY, startLeft, startTop, dragging = false, moved = false, threshold = DRAG_THRESHOLD; function onMove(clientX, clientY) { var dx = clientX - startX; var dy = clientY - startY; if (!moved && Math.sqrt(dx * dx + dy * dy) > threshold) { moved = true; root.classList.add('vb-chat--dragging'); document.body.style.userSelect = 'none'; } if (moved) { var pw = nominalToPhysical(panel.offsetWidth || 392); var ph = nominalToPhysical(panel.offsetHeight || 553); var left = clamp(startLeft + dx, 0, Math.max(0, viewportW() - pw)); var top = clamp(startTop + dy, 0, Math.max(0, viewportH() - ph)); setFixedPx(panel, left, top); } } function onUp() { if (!dragging) return; dragging = false; document.removeEventListener('mousemove', mouseMoveH); document.removeEventListener('mouseup', mouseUpH); document.removeEventListener('touchmove', touchMoveH); document.removeEventListener('touchend', touchUpH); root.classList.remove('vb-chat--dragging'); document.body.style.userSelect = ''; if (moved) { snapDraggedPanelToEdge(); savePanelPosition(); } } function mouseMoveH(e) { onMove(e.clientX, e.clientY); } function mouseUpH() { onUp(); } function touchMoveH(e) { if (e.touches[0]) { onMove(e.touches[0].clientX, e.touches[0].clientY); if (moved) e.preventDefault(); } } function touchUpH() { onUp(); } function start(clientX, clientY, isTouch) { var rect = panel.getBoundingClientRect(); startX = clientX; startY = clientY; startLeft = rect.left; startTop = rect.top; dragging = true; moved = false; threshold = isTouch ? TOUCH_DRAG_THRESHOLD : DRAG_THRESHOLD; } var handle = root.querySelector('[data-role="vb-chat-drag"]'); handle.addEventListener('mousedown', function(e){ if (e.button !== 0) return; // без preventDefault браузер параллельно с драгом выделяет текст на // странице e.preventDefault(); start(e.clientX, e.clientY, false); document.addEventListener('mousemove', mouseMoveH); document.addEventListener('mouseup', mouseUpH); }); handle.addEventListener('touchstart', function(e){ if (!e.touches[0]) return; start(e.touches[0].clientX, e.touches[0].clientY, true); document.addEventListener('touchmove', touchMoveH, { passive: false }); document.addEventListener('touchend', touchUpH); }, { passive: true }); })(); // синхронизируем подъём виджета с появлением кнопки "наверх" сайта - main.js // показывает .scroll-up на том же пороге (scrollTop > 150), иначе она // подлезет под нижний кружок; при возврате наверх виджет плавно опускается. (function syncRaiseWithScrollUp(){ function update() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0; root.classList.toggle('vb-chat--raised', scrollTop > 150); } update(); window.addEventListener('scroll', update, { passive: true }); })(); // если чат был открыт на предыдущей странице - открываем его и на этой // (в том же размере: panel к этому моменту уже восстановлена через // restoreSize() выше; позиция всегда дефолтная, кружок не перетаскивается). // localStorage общий для всех вкладок сайта, так что это работает и при // открытии новой вкладки. // Start with the unified contact menu collapsed; message history and badge are retained. (function initEmoji(){ var btn = root.querySelector('[data-role="vb-chat-emoji-btn"]'); var panel = root.querySelector('[data-role="vb-chat-emoji-panel"]'); if (!btn || !panel) return; function setOpen(v) { panel.hidden = !v; btn.setAttribute('aria-expanded', v ? 'true' : 'false'); } btn.addEventListener('mousedown', function(e){ e.preventDefault(); }); btn.addEventListener('click', function(){ setOpen(panel.hidden); }); panel.addEventListener('mousedown', function(e){ e.preventDefault(); }); panel.addEventListener('click', function(e){ var t = e.target.closest('[data-emoji]'); if (!t) return; var em = t.getAttribute('data-emoji'); var start = input.selectionStart, end = input.selectionEnd; if (typeof start !== 'number') { start = end = input.value.length; } var next = input.value.slice(0, start) + em + input.value.slice(end); if (next.length > input.maxLength) return; input.value = next; var pos = start + em.length; try { input.setSelectionRange(pos, pos); } catch (err) {} input.focus(); }); document.addEventListener('mousedown', function(e){ if (!panel.hidden && !panel.contains(e.target) && !btn.contains(e.target)) setOpen(false); }); document.addEventListener('keydown', function(e){ if (e.key === 'Escape') setOpen(false); }); // Keep the chat open until the server confirms durable acceptance. })(); var chatSendError = document.createElement('div'); chatSendError.className = 'vb-chat__send-error'; chatSendError.setAttribute('role', 'alert'); chatSendError.hidden = true; form.parentNode.insertBefore(chatSendError, form); function showChatSendError(code) { var errors = { rate_limited: 'Слишком много сообщений за короткое время. Подождите несколько минут и повторите отправку.', consent_required: 'Обновите страницу и снова отметьте согласие на обработку данных. Текст сообщения пока сохранён в поле.', consent_storage_failed: 'Не удалось сохранить согласие. Повторите отправку чуть позже.', bad_session: 'Обновите страницу и повторите отправку сообщения.', bad_origin: 'Откройте чат на vibroom.ru и повторите отправку.', empty_message: 'Введите сообщение.', network: 'Нет связи с сервером. Проверьте интернет и повторите отправку.', invalid_response: 'Сервер временно недоступен. Повторите отправку чуть позже.' }; chatSendError.textContent = errors[code] || 'Не удалось отправить сообщение. Повторите попытку или позвоните: +7 (495) 178-04-80.'; chatSendError.setAttribute('data-error-code', code || 'unknown'); chatSendError.hidden = false; } form.addEventListener('submit', function(e){ e.preventDefault(); var text = input.value.trim(); if (!text || sending) return; chatSendError.hidden = true; if (!form.querySelector('[data-vb-consent]').checked) { form.reportValidity(); return; } unlockSound(); playMessageSound('sent'); // Immediate submission feedback, independent of server latency. sending = true; // Add to the conversation only after durable acceptance. greeting.style.display = 'none'; // Preserve the draft if the request fails. input.disabled = true; var fd = new FormData(); fd.append('consent', 'Y'); fd.append('consent_version', '2026-10-21'); fd.append('message', text); fd.append('page_url', window.location.origin + window.location.pathname); fd.append('session_id', sessionId); if (!pendingChatRequest || pendingChatRequest.text !== text || pendingChatRequest.page !== location.href) pendingChatRequest = {id:leadRequestId(),text:text,page:location.href}; fd.append('request_id', pendingChatRequest.id); fetch('/local/tools/vb_chat/send.php', { method: 'POST', body: new URLSearchParams(fd) }) .then(function(r){ return r.json(); }) .then(function(data){ if (data && data.ok) { if (Number(data.message_id) > 0) addMsg(text, 'out', data.message_id); input.value = ''; pendingChatRequest = null; // Only poll advances the receive cursor; an outgoing ID must not skip a simultaneous reply. activateDelivery();startPolling(false);poll(); // Analytics signal contains no message text or contact details. document.dispatchEvent(new CustomEvent('vb:chat-sent')); } else { showChatSendError(data && data.error); } }) .catch(function(err){ showChatSendError(err instanceof SyntaxError ? 'invalid_response' : 'network'); }) .finally(function(){ sending = false; input.disabled = false; input.focus(); }); }); // на загрузке страницы: тихо подтягиваем историю/новые ответы (лёгкий опрос, без открытия окна) poll(); startPolling(false); })();

Штабелёры

Вы смотрели

Настройки cookie