139 lines
4.7 KiB
JavaScript
139 lines
4.7 KiB
JavaScript
/* HotelSync Widget Loader — https://hotelsync.ru */
|
|
(function () {
|
|
var s = document.currentScript || (function () {
|
|
var t = document.getElementsByTagName('script');
|
|
return t[t.length - 1];
|
|
})();
|
|
|
|
var rawUrl = s.getAttribute('data-url') || '';
|
|
var mode = s.getAttribute('data-mode') || 'floating';
|
|
var btn = s.getAttribute('data-btn') || 'Забронировать';
|
|
var color = s.getAttribute('data-color') || '#4F46E5';
|
|
var cls = s.getAttribute('data-class') || 'hotelsync-book';
|
|
|
|
var url = rawUrl + (rawUrl.indexOf('?') >= 0 ? '&' : '?') + 'embed=true';
|
|
|
|
function init() {
|
|
/* ── Overlay ── */
|
|
var overlay = document.createElement('div');
|
|
overlay.style.cssText = [
|
|
'display:none',
|
|
'position:fixed', 'inset:0',
|
|
'background:rgba(0,0,0,.6)',
|
|
'backdrop-filter:blur(6px)',
|
|
'-webkit-backdrop-filter:blur(6px)',
|
|
'z-index:99998',
|
|
'align-items:center',
|
|
'justify-content:center',
|
|
'padding:16px',
|
|
'box-sizing:border-box',
|
|
].join(';');
|
|
|
|
/* ── Dialog — explicit height so iframe fills it ── */
|
|
var dialog = document.createElement('div');
|
|
dialog.style.cssText = [
|
|
'position:relative',
|
|
'width:100%',
|
|
'max-width:480px',
|
|
'height:90vh',
|
|
'max-height:720px',
|
|
'border-radius:20px',
|
|
'overflow:hidden',
|
|
'box-shadow:0 24px 64px rgba(0,0,0,.45)',
|
|
'background:#fff',
|
|
].join(';');
|
|
|
|
/* ── Close button — top-right corner of dialog ── */
|
|
var closeBtn = document.createElement('button');
|
|
closeBtn.innerHTML = '✕';
|
|
closeBtn.title = 'Закрыть';
|
|
closeBtn.style.cssText = [
|
|
'position:absolute', 'top:14px', 'right:14px', 'z-index:10',
|
|
'width:34px', 'height:34px', 'border-radius:50%',
|
|
'background:rgba(255,255,255,.95)',
|
|
'color:#374151',
|
|
'border:1px solid rgba(0,0,0,.12)',
|
|
'cursor:pointer',
|
|
'font-size:15px', 'font-weight:700',
|
|
'display:flex', 'align-items:center', 'justify-content:center',
|
|
'box-shadow:0 2px 8px rgba(0,0,0,.12)',
|
|
'transition:background .15s,transform .1s',
|
|
].join(';');
|
|
closeBtn.onmouseenter = function () { closeBtn.style.transform = 'scale(1.1)'; };
|
|
closeBtn.onmouseleave = function () { closeBtn.style.transform = 'scale(1)'; };
|
|
closeBtn.onclick = function () { overlay.style.display = 'none'; };
|
|
|
|
/* ── Iframe fills dialog completely ── */
|
|
var iframe = document.createElement('iframe');
|
|
iframe.src = url;
|
|
iframe.setAttribute('allow', 'payment');
|
|
iframe.style.cssText = [
|
|
'position:absolute', 'inset:0',
|
|
'width:100%', 'height:100%',
|
|
'border:none',
|
|
].join(';');
|
|
|
|
dialog.appendChild(iframe);
|
|
dialog.appendChild(closeBtn); // on top of iframe
|
|
overlay.appendChild(dialog);
|
|
|
|
overlay.addEventListener('click', function (e) {
|
|
if (e.target === overlay) overlay.style.display = 'none';
|
|
});
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') overlay.style.display = 'none';
|
|
});
|
|
|
|
document.body.appendChild(overlay);
|
|
window.hsOpenWidget = function () { overlay.style.display = 'flex'; };
|
|
|
|
/* ── Floating button ── */
|
|
if (mode === 'floating') {
|
|
var fab = document.createElement('button');
|
|
fab.textContent = btn;
|
|
fab.style.cssText = [
|
|
'position:fixed', 'bottom:24px', 'right:24px',
|
|
'background:' + color, 'color:#fff',
|
|
'border:none', 'padding:15px 28px',
|
|
'border-radius:50px',
|
|
'font-size:15px', 'font-family:inherit', 'font-weight:700',
|
|
'letter-spacing:.01em',
|
|
'cursor:pointer', 'z-index:99997',
|
|
'box-shadow:0 6px 24px rgba(0,0,0,.28)',
|
|
'transition:transform .15s,box-shadow .15s',
|
|
].join(';');
|
|
fab.onmouseenter = function () {
|
|
fab.style.transform = 'translateY(-2px)';
|
|
fab.style.boxShadow = '0 10px 32px rgba(0,0,0,.35)';
|
|
};
|
|
fab.onmouseleave = function () {
|
|
fab.style.transform = 'none';
|
|
fab.style.boxShadow = '0 6px 24px rgba(0,0,0,.28)';
|
|
};
|
|
fab.onclick = function () { window.hsOpenWidget(); };
|
|
document.body.appendChild(fab);
|
|
}
|
|
|
|
/* ── Class trigger ── */
|
|
if (mode === 'trigger') {
|
|
document.addEventListener('click', function (e) {
|
|
var el = e.target;
|
|
while (el) {
|
|
if (el.classList && el.classList.contains(cls)) {
|
|
e.preventDefault();
|
|
window.hsOpenWidget();
|
|
return;
|
|
}
|
|
el = el.parentElement;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|