Untitled
unknown
plain_text
2 years ago
24 kB
6
Indexable
(function() {
try {
/* main variables */
var debug = 0;
var variation_name = "";
var $;
/* all Pure helper functions */
function waitForElement(selector, trigger, delayInterval, delayTimeout) {
var interval = setInterval(function() {
if (
document &&
document.querySelector(selector) &&
document.querySelectorAll(selector).length > 0
) {
clearInterval(interval);
trigger();
}
}, delayInterval);
setTimeout(function() {
clearInterval(interval);
}, delayTimeout);
}
const egStickyHtml = `
<div class="eg-sticky-wrapper">
<!-- charter name and price -->
<div class="eg-info"></div>
<!-- cta -->
<div class="eg-cta-container">
</div>
</div>
`;
/* Variation Init */
function initStickyMob() {
/* start your code here */
if (window.innerWidth < 768) {
const egBody = document.querySelector("html body");
egBody.insertAdjacentHTML("beforeend", egStickyHtml);
// clearfix
const egClearFix = document.querySelector(".booking-flow .sidebar .totalPrice .clearfix");
let egContinueCta = `<button class="btn btn-primary">Continue</button>`;
const egSaveQuoteCta = document.querySelector(".booking-flow .sidebar .share-quote");
// insertng these elements inside our sticky wrapper
document.querySelector(".eg-sticky-wrapper .eg-info").insertAdjacentElement("afterbegin", egClearFix);
// inserting continue button html
document.querySelector(".eg-sticky-wrapper .eg-cta-container").insertAdjacentHTML("afterbegin", egContinueCta);
// inserting save quote cta
document.querySelector(".eg-sticky-wrapper .eg-cta-container").insertAdjacentElement("afterbegin", egSaveQuoteCta);
// continue btn click detect and submit form
document.querySelector(".eg-cta-container>.btn").addEventListener("click", () => {
// if extras form
if (document.querySelector(".extras form")) {
document.querySelector(".extras form > button[type=submit]").click();
} // if passenger details form
else if (document.querySelector("#tm-booking .passenger> form")) {
document.querySelector("#tm-booking .passenger> form > .clearfix button[type=submit]").click();
} // if paynow form
else if (document.querySelector("#tm-booking #checkoutForm")) {
document.querySelector("#tm-booking #checkoutForm input[type=submit]").click();
}
});
// changing text
document.querySelector(".eg-info label").textContent = `Total Charter Price`;
}
}
listener()
function listener() {
/* These are the modifications: */
window.addEventListener("locationchange", function() {
waitForElement('#booking-flow nav > .step:nth-child(2)', init, 50, 15000);
waitForElement('#booking-flow nav > .step > span', progress, 50, 15000);
});
history.pushState = ((f) =>
function pushState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("pushstate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.pushState);
history.replaceState = ((f) =>
function replaceState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("replacestate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.replaceState);
window.addEventListener("popstate", () => {
window.dispatchEvent(new Event("locationchange"));
});
}
function progress(){
document.querySelector("#booking-flow nav > .step:nth-child(2)").childNodes[2].textContent = "Contact Details";
setTimeout(()=>{
if (window.location.href.indexOf("https://www.moorings.com/booking/passengers") != -1){
document.querySelector("#booking-flow nav > .step:nth-child(1) > span").classList.add("eg-active");
}
else if(window.location.href.indexOf("https://www.moorings.com/booking/payment") != -1){
document.querySelector("#booking-flow nav > .step:nth-child(1) > span").classList.add("eg-active");
document.querySelector("#booking-flow nav > .step:nth-child(2) > span").classList.add("eg-active");
}
else{
console.log("there is some error")
}
}, 500)
}
// Extras page
var eg_images = {
insurance: `
<div class="egImg">
<img class="full-2-1-breakpoints-theme-moorings-xsw-1x" src="https://editor-assets.abtasty.com/46121/637c78a6e843c1669101734.png" width="768" height="384" alt="">
</div>
`,
wifi: `
<div class="egImg">
<img class="full-2-1-breakpoints-theme-moorings-xsw-1x" src='https://editor-assets.abtasty.com/46121/637c78ecd9bc91669101804.png' width="768" height="384" alt="">
</div>
`,
crew: {
cook: `
<div class="egImg">
<img class="full-2-1-breakpoints-theme-moorings-xsw-1x" src='https://editor-assets.abtasty.com/46121/637c785999bca1669101657.png' width="768" height="384" alt="">
</div>
`,
skipper: `
<div class="egImg">
<img class="full-2-1-breakpoints-theme-moorings-xsw-1x" src='https://editor-assets.abtasty.com/46121/637c78c60d1091669101766.png' width="768" height="384" alt="">
</div>
`
}
}
function initExtras() {
document.body.classList.add('egExtras');
let container = document.querySelectorAll("#tm-booking .main .extra-inner .extra-line-item");
let nonCollapsible = document.querySelectorAll("#tm-booking .main .nonCollapsible .extra-inner .extra-line-item");
if (nonCollapsible.length > 0) {
// non collapsible
for (var i = 0; i < nonCollapsible.length; i++) {
let egLabelCheck = nonCollapsible[i].parentElement.parentElement.previousElementSibling.textContent;
let egHtml = addingImage(egLabelCheck, nonCollapsible[i]);
nonCollapsible[i].insertAdjacentHTML("afterbegin", egHtml);
}
} else if (container.length > 0) {
for (var i = 0; i < container.length; i++) {
let egLabelCheck = container[i].parentElement.parentElement.parentElement.parentElement.previousElementSibling.textContent;
let egHtml = addingImage(egLabelCheck, container[i]);
container[i].insertAdjacentHTML("afterbegin", egHtml);
}
}
movingElements(document.querySelectorAll("#tm-booking .main .extra-inner"));
// mutation observer
let observer = new MutationObserver(mutations => {
// console.log(mutations); // console.log(the changes)
for (let mutation of mutations) {
for (let node of mutation.addedNodes) {
// we track only elements, skip other nodes (e.g. text nodes)
if ((node instanceof HTMLElement)) {
movingElements([node]);
}
// console.log('hello',node);
}
}
});
const ele = document.querySelectorAll("#tm-booking .main .extras form");
ele.forEach(ele => {
// observe everything except attributes
observer.observe(ele, {
subtree: true, // observe desendents children
childList: true
});
});
}
function addingImage(egLabelCheck, container) {
let egHtml = '';
if (egLabelCheck == 'Insurance') {
egHtml = eg_images.insurance;
} else if (egLabelCheck == "Wi-Fi Service") {
egHtml = eg_images.wifi;
} else if (egLabelCheck == "Crew") {
if (container.children[0].textContent == 'Hire a Skipper') {
egHtml = eg_images.crew.skipper;
} else if (container.children[0].textContent == 'Hire a Cook') {
egHtml = eg_images.crew.cook;
}
}
return egHtml;
}
// moving crew message and text note
function movingElements(elements) {
elements.forEach(ele => {
qualifier = ele.querySelector("span.qualifier");
priceQuantity = ele.querySelector(".price-quantity");
notes = ele.querySelector(".extra-description > .notes");
text = ele.querySelector(".extra-description > .text");
if (qualifier) {
priceQuantity.insertAdjacentElement("beforeend", qualifier);
}
if (notes) {
text.insertAdjacentElement("afterend", notes);
// notes.querySelector(".crew-message").textContent = notes.querySelector(".crew-message").textContent.replace("*","Note")
}
})
}
/* Initialize variation */
if(window.location.pathname == '/booking/extras' ){
waitForElement("#tm-booking .main .extra-inner", initExtras, 50, 15000);
}
/* Initialize variation */
if(window.screen.width < 768){
waitForElement('.booking-flow .sidebar .totalPrice .clearfix', initStickyMob, 50, 15000);
}
waitForElement('#booking-flow nav > .step', progress, 50, 15000);
} catch (e) {
if (debug) console.log(e, "error in Test" + variation_name);
}
})();
@media(max-width: 767px) {
/*hiding default ctas*/
.extras form>button[type=submit],
#tm-booking .passenger>form>.clearfix button[type=submit],
#tm-booking #checkoutForm input[type=submit] {
display: none;
}
/*hiding defalt ctas*/
body {
padding-bottom: 180px;
}
.eg-body {
position: relative;
}
.eg-sticky-wrapper {
position: fixed;
bottom: 0;
z-index: 999;
left: 0;
right: 0;
background: white;
padding: 18px;
box-shadow: 0 0 8px rgb(0 0 0 / 25%);
}
.eg-cta-container>.btn {
font-size: 16px;
color: #fff;
background-color: #b92d32;
border: none;
border-radius: 3px;
}
.eg-info {
font-size: 19px;
line-height: normal;
margin-bottom: 16px;
font-weight: 600;
}
.eg-info label {
font-weight: 600;
padding: 0;
margin: 0;
padding-right: 10px;
font-size: 16px;
color: black;
}
.eg-info .price {
margin: 0;
padding: 0;
text-align: right;
color: #b92d32;
font-size: 16px;
}
.eg-info .clearfix {
display: flex;
justify-content: space-between;
padding-top: 9px;
padding-bottom:9px;
background-color: #F5F4F2;
}
.eg-info .clearfix>* {
width: 100%;
}
.eg-cta-container {
display: flex;
gap: 36px;
justify-content: space-between;
}
.eg-cta-container>* {
flex: 1;
}
.eg-cta-container .share-quote {
margin-top: 0;
}
.eg-cta-container .share-quote a.btn {
width: 100%;
background: white;
white-space: unset !important;
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 3px;
padding-left: 0 !important;
padding-right: 0 !important;
}
.eg-cta-container .share-quote a.btn:hover {
color: black;
border-color: black;
}
/*inquiry msg*/
.eg-inquiry-msg {
background: #f5f4f2;
margin-top: 16px;
font-size: 16.8px;
padding: 10px;
text-align: center;
color: #000 !important;
border-radius: 6px;
display: block !important;
text-decoration: none !important;
}
}
/* Checkout progress bar */
@media (min-width: 768px) and (max-width: 1199px) {
html body #header-info {
top: 9px !important;
}
}
@media(min-width:1200px){
html body #header-info {
top: 40px !important;
}
}
@media (min-width: 768px) {
html body .navbar-header>.inner {
height: auto;
}
#header {
margin-top: 0 !important;
}
}
@media screen and (max-width: 767px) {
div#header-info {
display: none;
}
/* #booking-flow nav {
width: 90% !important;
} */
.steps nav::before {
top: 22px;
}
.row .steps {
padding-inline: 0;
padding-block: 5px !important;
}
}
.booking-flow .step {
flex: 1;
}
html body .booking-flow .steps .number {
margin-right: 0;
}
.navbar-header {
border-bottom: 0;
}
.navbar-brand {
top: 0rem !important;
padding-top: 1.6rem !important;
}
.navbar {
box-shadow: none;
height: auto;
min-height: auto;
}
nav .step {
display: flex !important;
flex-direction: column;
align-items: center;
background: none !important;
}
.booking-flow .step {
padding-left: 0 !important;
}
#booking-flow nav {
display: flex;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
position: relative;
justify-content: space-between;
width: 100%;
margin-inline: auto;
max-width: 1040px;
}
.steps nav::before {
content: "";
position: absolute;
height: 2px;
width: 77%;
background-color: rgb(0 0 0 /15%);
left: 50%;
transform: translateX(-50%);
top: 27%;
}
.steps nav::after {
content: '';
position: absolute;
height: 2px;
width: 26%;
background: #122447;
left: 14%;
top: 27%;
}
html body .steps > nav:has(.step:nth-child(1).active)::after {
width: 0 !important;
}
html body .steps > nav:has(.step:nth-child(2).active)::after {
width: 23% !important;
}
html body .steps > nav:has(.step:nth-child(3).active)::after {
width: 48% !important;
}
html body .steps > nav:has(.step:nth-child(4).active)::after {
width: 73% !important;
}
.site-header {
margin-bottom: 0 !important;
}
.step.active span.number {
background: #122447;
color: #fff !important;
height: 25px;
}
.booking-flow .step:not(.active) .number {
background: #fff;
}
.step.active,
.step:not(:first-child) {
color: #122447 !important;
}
#booking-flow nav>.step:not(.number) {
font-size: 12px;
color: #122447;
}
#booking-flow nav>.step {
padding: 0 !important;
height: auto !important;
min-width: unset !important;
}
.booking-flow .steps .number {
height: 30px !important;
width: 30px;
text-align: center;
line-height: 2.5;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
color: #122447;
margin-bottom: 8px;
border: 3px solid #122447;
}
.row .steps {
padding-inline: 0;
padding-block: 40px;
}
.eg-active {
background-color: #122447 !important;
color: #fff !important;
}
.booking-flow .step {
margin-left: 0 !important;
margin-top: 0 !important;
}
/*Extras CSS*/
html body.egExtras .calendar-calendar,
html body.egExtras .view .row>.list-group {
width: 85%;
}
html body.egExtras .booking-flow .main .extra .notes {
margin-top: 0;
}
html body.egExtras .booking-flow .main .extra .price-quantity {
align-items: flex-start;
}
/*chevrons*/
html body.egExtras .booking-flow .Collapsible__trigger:after {
content: '' !important;
background: url('https://editor-assets.abtasty.com/46121/6389f9042cf5f1669986564.svg');
width: 15px;
height: 15px;
background-repeat: no-repeat;
background-position: center;
}
html body.egExtras .booking-flow .Collapsible__trigger.is-closed:after {
transform: rotate(180deg);
}
/*css for error message*/
html body.egExtras .booking-flow .main .extra.capacity-error {
background: transparent !important;
}
html body.egExtras .booking-flow .main .extra.capacity-error .extra-inner {
background: rgba(215, 36, 65, .24);
}
html body.egExtras .extra-inner-capacity-message {
padding: 16px;
}
/*css for error message*/
html body.egExtras span.qualifier {
color: #bdbdbd;
font-size: 16px;
margin-top: 3px;
font-family: "Trade Gothic W01 Roman", Arial, Helvetica, sans-serif;
}
html body.egExtras .booking-flow .main .extra.child .extra-inner {
padding-top: 16px;
border-top: none;
}
html body.egExtras .booking-flow .main .extra:not(.child) {
margin-bottom: 0;
}
html body.egExtras .booking-flow .main .extra label {
gap: 10px;
}
html body.egExtras .booking-flow .main .extra .extra-description .text {
padding-inline: 15px;
}
html body.egExtras .booking-flow .main .extra .extra-description {
width: 100%;
margin-inline: 0 !important;
}
html body.egExtras .booking-flow .main .extra .extra-description .text {
width: 100%;
}
html body.egExtras .booking-flow .main .extra.child {
background-color: white;
padding-top: 0;
}
html body.egExtras .booking-flow .Collapsible__trigger:after {
float: right;
font-size: 18px;
}
html body.egExtras .booking-flow .Collapsible {
border-bottom: none;
}
html body.egExtras .booking-flow .Collapsible + .Collapsible {
margin-top: 28px;
}
html body.egExtras div.price-quantity>span.totalPrice {
font-weight: 400;
}
html body.egExtras .booking-flow .main .extra label,
html body.egExtras .booking-flow .main .extra .price-quantity {
font-size: 20px;
font-weight: 400;
font-family: "NewBaskervilleW01-Roman", serif;
}
html body.egExtras .booking-flow .main .extra .extra-description .text,
html body.egExtras .booking-flow .main .extra .extra-description .notes {
font-size: 16px;
}
html body.egExtras .extra-inner {
border: 1px solid #d0cdc5;
border-radius: 5px;
}
html body.egExtras .extra-description .text {
padding: 5px 25px 10px;
}
html body.egExtras .booking-flow .Collapsible__trigger {
background-color: rgb(204 204 204 /35%);
font-size: 20px;
font-weight: 400;
margin: auto;
border-radius: 4px;
}
html body.egExtras .extra-line-item {
background: #fff !important;
}
html body.egExtras span.totalPrice {
color: #1ba9e8;
font-weight: 600;
}
html body.egExtras .booking-flow .main .extra .price-quantity {
float: none;
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
}
html body.egExtras .booking-flow .main .extra .extra-line-item {
padding: 0;
border-radius: 5px;
}
html body.egExtras .booking-flow .main .extra label {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
width: 100%;
}
html body.egExtras .booking-flow input[type=checkbox] {
cursor: pointer;
order: 1;
min-width: 24px;
min-height: 24px;
}
html body.egExtras .price-quantity {
display: flex;
gap: 15px;
align-items: center;
}
html body.egExtras .booking-flow .main .extra .notes .crew-message {
border: none !important;
padding: 0;
margin: 0;
}
@media(min-width: 800px) {
html body.egExtras .booking-flow input[type=checkbox] {
order: 1;
min-width: 24px;
min-height: 24px;
}
html body.egExtras .booking-flow .main .extra label,
html body.egExtras .booking-flow .main .extra .price-quantity {
padding-left: 4.5%;
font-family: "NewBaskervilleW01-Roman", serif;
}
}
html body.egExtras .booking-flow .main .extra.child label,
html body.egExtras .booking-flow .main .extra.child .price-quantity {
padding-left: 16px;
}
@media(min-width: 768px) {
html body.egExtras .extras form .Collapsible .Collapsible__contentInner>div {
padding: 20px 0 0 0;
}
html body.egExtras .egImg {
width: 200px;
height: 100px;
grid-row-start: 1;
grid-row-end: 3;
}
html body.egExtras .booking-flow .main .extra:not(.child) .extra-line-item {
display: grid;
grid-template-columns: 202px 1fr;
}
html body.egExtras .booking-flow .main .extra label,
html body.egExtras .booking-flow .main .extra .price-quantity {
padding-left: 4%;
}
}
html body.egExtras .booking-flow input[type=checkbox] {
position: relative;
}
html body.egExtras .booking-flow input[type=checkbox]:checked::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
background: url('https://editor-assets.abtasty.com/46121/6389f8d421c6b1669986516.svg');
background-repeat: no-repeat;
background-position: center;
top: 0;
left: 0;
border: 1px solid;
border-radius: 2px;
}
@media(max-width: 767px) {
html body.egExtras .extras form .Collapsible .Collapsible__contentInner>div {
padding-top: 10px;
}
html body #hubspot-messages-iframe-container{
bottom:140px !important;
}
/* .steps {
width: 100%;
} */
html body.egExtras .egImg {
width: 100% !important;
}
html body.egExtras #booking-flow>div>div.steps {
width: 100%;
}
html body.egExtras .extra-line-item {
display: flex !important;
flex-direction: column;
}
html body.egExtras .booking-flow input[type=checkbox] {
order: 1;
min-width: 24px;
min-height: 24px;
accent-color: white;
}
/* .booking-flow .step {
font-size: 1.5rem;
}
.booking-flow .step {
padding-top: 9px;
} */
html body.egExtras .booking-flow .booking-details {
margin-bottom: 11px;
}
html body.egExtras .booking-flow .main .extra label {
padding: 10px 10px 0 10px;
}
html body.egExtras .booking-flow .main .extra .price-quantity {
padding: 10px;
}
html body.egExtras .extra-description .text {
padding: 0 10px 10px;
width: 100%;
}
html body.egExtras .booking-flow .main .extra {
padding: 0;
}
html body.egExtras .booking-flow .Collapsible__trigger {
width: 100%;
}
}
html body.egExtras .booking-flow .main .extra:not(:has( + .extra)) .extra-inner {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
html body.egExtras .extra-inner {
border: 1px solid #d0cdc5;
border-radius: 5px 5px 0 0;
}
/*setting border-radius for child*/
html body.egExtras .booking-flow .main .extra.child .extra-line-item {
border-radius: 0;
}
html body.egExtras .booking-flow .main .extra.child .extra-inner {
padding-top: 16px;
border-top: none;
border-radius: 0 0 5px 5px;
}
/* Nav and Footer Hide */
@media only screen and (min-width: 768px) {
/* Hide nav and footer */
.navbar-nav {
display: none;
}
footer {
display: none;
}
/* Adjust height of header area */
#navbar-collapse {
height: 111px !important;
}
/* hide hamburger button on smaller screen sizes */
.navbar-mobile {
display: none;
}
/* hide flag dropdown */
#block-menu-menu-locale-menu {
display: none;
}
/* hide manage my booking button */
.payment-button-navbar {
display: none;
}
/* hide COVID banner */
.abtasty-banner-wrapper {
display: none !important;
}
#header-manage-booking {
display: none;
}
#header {
margin-top: -58px;
}
#header-info {
position: absolute;
text-align: right;
width: auto;
right: 0;
}
}
@media only screen and (min-width:768px) and (max-width: 1199px) {
#header-info {
top: 65px;
}
#header {
margin-bottom: 30px;
}
}
@media only screen and (min-width: 1200px) {
#header-info {
top: 100px;
}
}