Untitled

(function() {
    try {
        /* main variables */
        var debug = 0;
        var variation_name = "";

        /* 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);
        }
        /* Variation functions */

        let eg_Img = `
    <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>
  `;
        var images = ['https://editor-assets.abtasty.com/46121/637c78a6e843c1669101734.png', 'https://editor-assets.abtasty.com/46121/637c785999bca1669101657.png', 'https://editor-assets.abtasty.com/46121/637c78c60d1091669101766.png', 'https://editor-assets.abtasty.com/46121/637c78ecd9bc91669101804.png']

        function init() {
            let container = document.querySelectorAll("#tm-booking .main .extra-inner .extra-line-item");
            for (var i = 0; i < container.length; i++) {
                let eg_Img = `
                <div class="egImg">
                <img class="full-2-1-breakpoints-theme-moorings-xsw-1x" src="${images[i]}" width="768" height="384" alt="">
                </div>
              `;
                container[i].insertAdjacentHTML("afterbegin", eg_Img);
            }
            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)) {
                            node.querySelector(".extra-line-item") && node.querySelector(".extra-line-item").insertAdjacentHTML("afterbegin", eg_Img);
                            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
                });
            });

            // adding read more read less
            readMoreLess();
        }

        function readMoreLess() {
            let egtoggle = document.querySelector("form > div:nth-child(1) div.extra-description.row > div.text")

            egtoggle.innerHTML = egtoggle.textContent.substring(0, 100) + `<span class="eg-hidden-text">${egtoggle.textContent.substring(100)}</span>` + `<span id="eg_show"><span style="color:black;">...</span>read more</span>`;

            let btn = document.querySelector("#eg_show")

            btn.addEventListener("click", function() {
                egtoggle.classList.toggle("eg_active");
                if (egtoggle.classList.contains("eg_active")) {
                    btn.innerHTML = "read less"
                } else {
                    btn.innerHTML = '<span style="color:black;">...</span>read more';
                }
            });
        }

        // 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 */
        waitForElement("#tm-booking .main .extra-inner", init, 50, 15000);
    } catch (e) {
        if (debug) console.log(e, "error in Test" + variation_name);
    }
})();


.col-md-12,
.calendar-calendar,
.view .row>.list-group {
    width: 85%;
}

.booking-flow .main .extra .notes {
    margin-top: 0;
}

.extras h2 {
    margin-left: 15px;
}

span.qualifier {
    color: #bdbdbd;
}

.booking-flow .main .extra.child {
    background-color: white;
}

.booking-flow .Collapsible__trigger:after {
    float: right;
    font-size: 11px;
    margin: 4px 0 8px;
}

.booking-flow .Collapsible {
    border-bottom: none;
}

.booking-flow .Collapsible__trigger {
    background-color: rgb(204 204 204 /35%);
}

.booking-flow .step {
    font-size: 1.8rem;
    margin-top: 0;
    height: 45px;
}

.booking-flow .steps .number {
    height: 28px;
}

.booking-flow .main .extra .extra-line-item {
    display: grid;
    grid-template-columns: 170px 1fr;
}

.egImg {
    width: 170px;
    grid-row-start: 1;
    grid-row-end: 3;
}

form > div:nth-child(1) div.extra-description.row > div.text{
    /*white-space: nowrap;*/
    width: 100%; 
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
 } 

form > div:nth-child(1) div.extra-description.row > div.text.eg_active .eg-hidden-text{
    display: inline !important;
}


 .eg-hidden-text{
    display: none;
 }


#eg_show {
    color: #1BA9E8;
    font-size: 14px;
    cursor: pointer;
    font-weight: 700;
    text-transform: lowercase;
}

.extra-inner {
    border: 1px solid #d0cdc5;
}

.text {
    padding: 5px 25px 10px;
}

.booking-flow .Collapsible__trigger {
    width: 96%;
    margin: auto;
}

.extra-line-item {
    background: #fff !important;
}

span.totalPrice {
    color: #1ba9e8;
    font-weight: 600;
}

.booking-flow .main .extra .price-quantity {
    float: none;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    padding-left: 5%;

}

.booking-flow .main .extra .extra-line-item {
    padding: 0;
}

.booking-flow .main .extra label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    width: 100%;
    font-weight: 600;
    padding-left: 5%;
}

.booking-flow input[type=checkbox] {
    order: 1;
}

.notes {
    padding-left: 3%;
}

.price-quantity {
    display: flex;
    gap: 15px;
}

.booking-flow .main .extra .notes .crew-message {
    border: none !important;
    padding: 0;
    margin: 0;
}

.booking-flow .main .extra .extra-description {
        width: 100%;
        margin-inline: 0 !important;
    }


@media(min-width: 768px) {
    .extras form .Collapsible .Collapsible__contentInner>div {
        padding: 15px 15px 0 15px;
    }
}

@media(max-width: 767px) {
    .extras form .Collapsible .Collapsible__contentInner>div {
        padding-top: 10px;
    }

    .steps {
        width: 100%;
    }

    .egImg {
        width: 100%;
    }


    .extra-line-item {
        display: flex !important;
        flex-direction: column;
    }



    .booking-flow .step {
        font-size: 1.5rem;
    }

    .booking-flow .step {
        padding-top: 9px;
    }

    .booking-flow .booking-details {
        margin-bottom: 11px;
    }

    .booking-flow .main .extra label {
        padding: 10px 10px 0 10px;
    }

    .booking-flow .main .extra .price-quantity {
        padding: 10px;
    }

    .text {
        padding: 0 10px 10px;
        width: 100%;
    }

    .booking-flow .main .extra {
        padding: 0;
    }

    .booking-flow .Collapsible__trigger {
        width: 100%;
    }
}