Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
20 kB
1
Indexable
Never
(function () {
  if (!document.querySelector('.eg_desktop_bar'))
    try {
      var style = document.createElement('style');
      style.type = 'text/css';
      var cssCode = `html body .MarketingBanner{
    display: none;
}
html body .eg_bar_section{
    width: 100%;
    background: #fff;
    z-index: 1;
}

html body .app-header.app-header--sticky .eg_bar_section{
    display: none;
}

html body .eg_desktop_bar .eg_bar_wrapper {
    display: flex;
    padding: 15px;
    justify-content: center;
    gap: 70px;
}

html body .eg_desktop_bar .eg_bar{
    width: max-content;
    padding-right: 30px;
    position: relative;
}


html body .eg_tooltip_icon {
    position: absolute;
    right: -40px;
    cursor: pointer;
}

html body .eg_tooltip {
    position: absolute;
    top: 100%;
    right: -45px;
    background: #fff;
    width: 350px;
    padding: 30px;
    display: none;
    text-decoration: none;
    box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 19%);
    color: #000;
}


html body .eg_bar.eg_active .eg_tooltip{
    display: block;
    z-index: 99;
}

html body .eg_bar.eg_active .eg_tooltip::before{
    content: '';
    width: 15px;
    height: 15px;
    background: #fff;
    position: absolute;
    top: -5px;
    right: 35px;
    transform: rotate(45deg);
    box-shadow: -4px -4px 8px -2px rgb(0 0 0 / 19%);
}

html body .eg_tooltip > div{
    text-align: right;
}

html body .eg_tooltip .eg_cta{
    text-align: right;
    color: #82c0b7;
}

html body .eg_tooltip .eg_cta:hover{
    color: #388378;
}

html body .eg_bar:not(:first-child)::before{
    content: '';
    height: 100%;
    width: 1px;
    background: #c1c1c1;
    position: absolute;
    left: -30px;
    top: 0;
}

html body .eg_bar_wrapper p{
    margin: 0;
}

html body .feefo_content p,
html body .experience_content p,
html body .book_content p,
html body .webBooking_content p{
    color: #50aad2;
    font-weight: 600;
    line-height: 20px;
}

/* feefo content css */

html body .eg_bar.feefo img{
    max-height: 45px;
}

html body .eg_bar.feefo .feefo_content {
    position: relative;
}

html body .feefo_star_wrapper{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

html body .feefo_star_wrapper .eg_stars{
    display: flex;
}

html body .feefo_star_wrapper .eg_stars svg{
    width: 15px;
    height: 15px;
    margin-right: 0px;
    margin-top: 2px;
}

/* web booking */

html body .webBooking_content{
    position: relative;
}

html body .feefo_content p,
html body .webBooking_content p{
    padding-left: 35px;
}
html body .feefo_content .money_icon,
html body .webBooking_content .money_icon{
    position: absolute;
    left: 0;
}

/* book css  */

html body .book_content{
    position: relative;
}

html body .book_content p{
    padding-left: 35px;
}
html body .book_content .money_icon{
    position: absolute;
    left: 0;
}

/* experience */

html body .experience_content{
    position: relative;
}

html body .experience_content p{
    padding-left: 35px;
}
html body .experience_content .money_icon{
    position: absolute;
    left: 0;
}


html body .eg_mobile_bar{
    display: none !important;
}



@media screen and (max-width: 991px){

    html, body {
        max-width: 100%;
        overflow-x: hidden;
        position: relative;
    }

    html body.eg_usp .site-header .navbar{
        box-shadow: none;
    }
    html body .eg_mobile_bar{
        display: block !important;
        opacity: 0;
        position: absolute;
        z-index: 9 !important;
        top: 117px !important;
    }

    html body .eg_desktop_bar{
        display: none !important;
    }

    html body .eg_mobile_bar .eg_bar_wrapper {
        padding: 8px 0;
        outline: none;
    }

    html body .eg_mobile_bar .eg_bar{
        width: 50%;
        display: flex;
        height: 44px;
        padding-right: 40px;
    }


    html body .eg_bar_content{
        position: relative;
        width: max-content;
        margin: auto;
    }

    html body .eg_bar_content.eg_active .eg_tooltip{
        display: block;
        top: calc(100% + 15px);
        right: -74px;
    }

    html body .eg_bar_content.eg_active .eg_tooltip::before {
        content: '';
        width: 15px;
        height: 15px;
        background: #fff;
        position: absolute;
        top: -5px;
        right: 35px;
        transform: rotate(45deg);
        box-shadow: -4px -4px 8px -2px rgb(0 0 0 / 19%);
    }

    html body #block-sunsail-charters-search-widget{
        margin-top: 50px;
        position: relative;
    }

    html body .eg_bar:not(:first-child)::before{
        display: none;
    }

    html body .eg_bar.book,
    html body .eg_bar.webBooking{
        border-right: 1px solid #c1c1c1;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    html body .eg_mobile_bar {
        top: 191px !important;
    }

    html body #block-sunsail-charters-search-widget {
        margin-top: 60px !important;
    }
}

@media screen and (max-width: 767px){

  #navbar-collapse .navbar-nav{
    margin-top: 0 !important;
  }

  #navbar-collapse {
  z-index: 9999;
  position: relative !important;
}
    
    html body .eg_mobile_bar{
        top: -50px;
        display: block !important;
    }
    html body .eg_mobile_bar .eg_bar{
        width: 100%;
    }

    html body .eg_mobile_bar .eg_bar_wrapper {
        padding: 5px 0;
    }

    html body .eg_bar_wrapper p{
        line-height: 17px;
    }
    html body .feefo_star_wrapper .eg_stars{
        margin-top: -2px;
    }
    html body .eg_mobile_bar .eg_bar{
        height: 36px;
    }

    html body .eg_tooltip_icon{
        top: -5px;
    }

    html body .eg_bar.book,
    html body .eg_bar.feefo{
        border-right: none;
    }

    html body .eg_bar .money_icon{
        top: -5px;
    }

}`;
      style.appendChild(document.createTextNode(cssCode));
      document.head.appendChild(style);
      /* 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 */

      var eg_tooltip = '' +
        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="#50aad2">' +
        '<path d="M6 0C2.68619 0 0 2.68619 0 6C0 9.31381 2.68619 12 6 12C9.31381 12 12 9.31381 12 6C12 2.68619 9.31381 0 6 0ZM6 2.20824C6.5891 2.20824 7.06669 2.68583 7.06669 3.27493C7.06669 3.86402 6.5891 4.34162 6 4.34162C5.4109 4.34162 4.93331 3.86402 4.93331 3.27493C4.93331 2.68583 5.4109 2.20824 6 2.20824ZM7.59998 9.52514C7.59998 9.67228 7.48056 9.73338 7.33333 9.73338H4.66667C4.51944 9.73338 4.40002 9.67228 4.40002 9.52514V9.39177C4.40002 9.24445 4.51944 9.06672 4.66667 9.06672H4.93331V5.73339H4.66667C4.51944 5.73339 4.40002 5.67229 4.40002 5.52515V5.39178C4.40002 5.24446 4.51944 5.06673 4.66667 5.06673H6.80005C6.94728 5.06673 7.06669 5.24446 7.06669 5.39178V9.06678H7.33333C7.48056 9.06678 7.59998 9.24451 7.59998 9.39183V9.52514Z" fill="#50aad2"/>' +
        '</svg>';

      var eg_desktopBar = '' +
        '<div class="eg_desktop_bar eg_bar_section">' +
        '       <div class="eg_bar_wrapper">' +
        '             <div class="eg_bar webBooking">' +
        '                   <div class="webBooking_content">' +
        '                         <span class="eg_tooltip_icon tool">' + eg_tooltip + '</span>' +
        '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46121/62e3ab46359d81659087686.svg"></span> 45 Years <br>Experience</p>' +
        '                   </div>' +
        '                   <div class="eg_tooltip">' +
        '                         <p>We created the first flotilla in 1974. Today, you can sail our world-class fleet in the Caribbean, the Mediterranean, and far away islands..</p>' +
        '                   </div>' +
        '             </div>' +
        '             <div class="eg_bar feefo">' +
        '                   <div class="feefo_content">' +
        '                         <span class="eg_tooltip_icon tool">' + eg_tooltip + '</span>' +
        '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46115/62f5c36b293d11660273515.svg"></span> We include <br>more </p>' +
        '                   </div>' +
        '                   <div class="feefo eg_tooltip">' +
        '                         <p>Every yacht includes a fully-appointed galley, a dinghy for land excursions and linens and towels for you and your crew.</p>' +
        '                   </div>' +
        '             </div>' +
        '             <div class="eg_bar book">' +
        '                   <div class="book_content">' +
        '                         <span class="eg_tooltip_icon tool">' + eg_tooltip + '</span>' +
        '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46115/62f5c3f8452cb1660273656.svg"></span> Over 20+ <br>destinations</p>' +
        '                   </div>' +
        '                   <div class="eg_tooltip">' +
        '                         <p>From coral reefs in Belize and the British Virgin Islands to turquoise lagoons in Croatia and Thailand, you can sail our yachts in the world’s most exciting waters. </p>' +
        '                   </div>' +
        '             </div>' +
        '             <div class="eg_bar experience">' +
        '                   <div class="experience_content">' +
        '                         <span class="eg_tooltip_icon tool">' + eg_tooltip + '</span>' +
        '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46121/62e3ab652676c1659087717.svg"></span> On holiday <br>4-hour guarantee</p>' +
        '                   </div>' +
        '                   <div class="eg_tooltip">' +
        '                         <p> If you need assistance whilst on the water, our technicians are standing by to get you on your way.</p>' +
        '                   </div>' +
        '             </div>' +
        '       </div>' +
        '</div>';

      var eg_mobile_bar = '' +
        '<div class="eg_mobile_bar eg_bar_section">' +
        '       <div class="eg_bar_wrapper">' +
        '             <div class="eg_bar webBooking">' +
        '                <div class="eg_bar_content">' +
        '                   <div class="webBooking_content">' +
        '                         <span class="eg_tooltip_icon tool">' + eg_tooltip + '</span>' +
        '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46121/62e3ab46359d81659087686.svg"></span> 45 Years Experience</p>' +
        '                   </div>' +
        '                   <a class="eg_tooltip">' +
        '                         <p>We created the first flotilla in 1974. Today, you can sail our world-class fleet in the Caribbean, the Mediterranean, and far away islands.</p>' +
        '                   </a>' +
        '                </div>' +
        '             </div>' +
        '             <div class="eg_bar feefo">' +
        '                <div class="eg_bar_content">' +
        '                   <div class="feefo_content">' +
        '                         <span class="eg_tooltip_icon tool">' + eg_tooltip + '</span>' +
        '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46115/62f5c36b293d11660273515.svg"></span> We include more</p>' +
        '                   </div>' +
        '                   <a class="feefo eg_tooltip">' +
        '                         <p>Every yacht includes a fully-appointed galley, a dinghy for land excursions and linens and towels for you and your crew.</p>' +
        '                   </a>' +
        '                </div>' +
        '             </div>' +
        '             <div class="eg_bar book">' +
        '                <div class="eg_bar_content">' +
        '                   <div class="book_content">' +
        '                         <span class="eg_tooltip_icon tool">' + eg_tooltip + '</span>' +
        '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46115/62f5c3f8452cb1660273656.svg"></span> Over 20+ destinations</p>' +
        '                   </div>' +
        '                   <a class="eg_tooltip">' +
        '                         <p>From coral reefs in Belize and the British Virgin Islands to turquoise lagoons in Croatia and Thailand, you can sail our yachts in the world’s most exciting waters. </p>' +
        '                   </a>' +
        '                </div>' +
        '             </div>' +
        '             <div class="eg_bar experience">' +
        '                <div class="eg_bar_content">' +
        '                   <div class="experience_content">' +
        '                         <span class="eg_tooltip_icon tool">' + eg_tooltip + '</span>' +
        '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46121/62e3ab652676c1659087717.svg"></span> On holiday 4-hour guarantee</p>' +
        '                   </div>' +
        '                   <a class="eg_tooltip">' +
        '                         <p>If you need assistance whilst on the water, our technicians are standing by to get you on your way.</p>' +
        '                   </a>' +
        '                 </div>' +
        '             </div>' +
        '       </div>' +
        '</div>';

      /* Variation Init */
      function init() {
        /* start your code here */
        if (!document.querySelector('.eg_desktop_bar'))
          document.querySelector('#header.site-header').insertAdjacentHTML('afterend', eg_desktopBar + eg_mobile_bar);
        document.querySelector('body').classList.add('eg_usp');
        toggleTooltip();

        //USP box click 
        // var uspBox = document.querySelectorAll('.eg_desktop_bar .eg_bar:not(.webBooking)');
        // for(var i=0; i< uspBox.length; i++){
        //   uspBox[i].addEventListener('click',function(e){
        //     if(e.target != document.querySelector('span.tool'))
        //     window.location.href = this.getAttribute('eg-href');
        //   });
        // }
        // image and emoji slider
        waitForFlickity(function () {

          if (window.screen.width > 767) {
            var emojiSlider = new Flickity('.eg_mobile_bar .eg_bar_wrapper', {
              prevNextButtons: false,
              pageDots: false,
              contain: true,
              autoPlay: true,
              wrapAround: true,
              groupCells: true,
              groupCells: 2,
              cellAlign: 'left'
            });

            emojiSlider.on('staticClick', function (event, pointer, cellElement, cellIndex) {
              emojiSlider.playPlayer();
            });
            emojiSlider.on('pointerUp', function (event, pointer) {
              emojiSlider.player.play();
            });
            emojiSlider.on('change', function (index) {
              if (document.querySelector('.eg_mobile_bar .eg_active')) {
                document.querySelector('.eg_mobile_bar .eg_active').classList.remove('eg_active');
              }
            });

          } else {
            var emojiSlider = new Flickity('.eg_mobile_bar .eg_bar_wrapper', {
              prevNextButtons: false,
              pageDots: false,
              contain: true,
              autoPlay: true,
              wrapAround: true,
              groupCells: true,
              groupCells: 1,
              cellAlign: 'left'
            });

            emojiSlider.on('staticClick', function (event, pointer, cellElement, cellIndex) {
              emojiSlider.playPlayer();
            });
            emojiSlider.on('pointerUp', function (event, pointer) {
              emojiSlider.player.play();
            });
            emojiSlider.on('change', function (index) {
              if (document.querySelector('.eg_mobile_bar .eg_active')) {
                document.querySelector('.eg_mobile_bar .eg_active').classList.remove('eg_active');
              }
            });
          }

          document.querySelector('.eg_mobile_bar').style.opacity = '1';

        });

        document.addEventListener('click', function (e) {
          var getElement = e.target.closest('.eg_bar');
          if (!getElement) {
            if (document.querySelector('.eg_active')) {
              document.querySelector('.eg_active').classList.remove('eg_active');
            }
          }

        })


      }

      function toggleTooltip() {
        var icons = document.querySelectorAll('.eg_tooltip_icon');
        for (var i = 0; i < icons.length; i++) {
          icons[i].addEventListener('click', function () {
            if (!this.parentElement.parentElement.classList.contains('eg_active')) {
              if (document.querySelector('.eg_active')) {
                document.querySelector('.eg_active').classList.remove('eg_active');
              }
              this.parentElement.parentElement.classList.add('eg_active');
            } else {
              this.parentElement.parentElement.classList.remove('eg_active');
            }
          })
        }
      }

      function waitForFlickity(trigger) {
        var interval = setInterval(function () {
          if (
            window.Flickity
          ) {
            clearInterval(interval);
            trigger();
          }
        }, 50);
        setTimeout(function () {
          clearInterval(interval);
        }, 10000);
      }

      function addFlickitySliderScript() {
        var scriptTag = document.createElement('script');
        scriptTag.setAttribute('src', 'https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js');
        document.head.insertAdjacentElement('beforeend', scriptTag);
        var styleTag = document.createElement('link');
        styleTag.setAttribute('rel', 'https://unpkg.com/flickity@2/dist/flickity.min.css');
        styleTag.setAttribute('href', 'https://unpkg.com/flickity@2/dist/flickity.min.css');
        document.head.insertAdjacentElement('beforeend', styleTag);
      }
      addFlickitySliderScript();

      /* Initialize variation */
      waitForElement("#header.site-header", init, 50, 15000);
    } catch (e) {
      if (debug) console.log(e, "error in Test" + variation_name);
    }
})();