diff --git a/assets/css/scss/_modals.scss b/assets/css/scss/_modals.scss index 4d98a968..15d3480e 100644 --- a/assets/css/scss/_modals.scss +++ b/assets/css/scss/_modals.scss @@ -21,8 +21,9 @@ .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ - padding: 20px; - border: 1px solid #888; + padding: 10px 20px; + border: 3px solid var(--wp--preset--color--primary); + border-radius: 6px; width: var(--wp--style--global--content-size); /* Could be more or less, depending on screen size */ } @@ -30,11 +31,12 @@ .close { color: #aaa; float: right; - font-size: 28px; + font-size: 32px; font-weight: bold; line-height: 0; height: auto; - padding-top: 5px; + padding-top: 10px; + margin-right: -8px; &:hover, &:focus { diff --git a/assets/css/style.css b/assets/css/style.css index eea33919..8a2f09f7 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -698,18 +698,20 @@ button.facetwp-reset { .lsx-modal .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ - padding: 20px; - border: 1px solid #888; + padding: 10px 20px; + border: 3px solid var(--wp--preset--color--primary); + border-radius: 6px; width: var(--wp--style--global--content-size); /* Could be more or less, depending on screen size */ } .lsx-modal .close { color: #aaa; float: right; - font-size: 28px; + font-size: 32px; font-weight: bold; line-height: 0; height: auto; - padding-top: 5px; + padding-top: 10px; + margin-right: -8px; } .lsx-modal .close:hover, .lsx-modal .close:focus { color: black; diff --git a/assets/js/src/custom.js b/assets/js/src/custom.js index 7ddf832c..cebc666b 100755 --- a/assets/js/src/custom.js +++ b/assets/js/src/custom.js @@ -5,420 +5,493 @@ * @subpackage scripts */ -var lsx_to = Object.create( null ); +var lsx_to = Object.create(null); -if ( window.location.hash ) { - ( document.body || document.documentElement ).scrollIntoView(); - setTimeout( function() { ( document.body || document.documentElement ).scrollIntoView(); }, 1 ); +if (window.location.hash) { + (document.body || document.documentElement).scrollIntoView(); + setTimeout(function () { + (document.body || document.documentElement).scrollIntoView(); + }, 1); } -;( function( $, window, document, undefined ) { - - 'use strict'; - - var $document = $( document ), - $window = $( window ), - window_height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, - window_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; - - /** - * Easing browser scroll on page load (document URL with hash). - * - * @package tour-operator - * @subpackage scripts - */ - lsx_to.set_easing_scroll_on_page_load = function() { - if ( window.location.hash ) { - var $to = $( window.location.hash ), - top = parseInt( $to.offset().top ); - - top -= $( '#wpadminbar' ).length > 0 ? $( '#wpadminbar' ).outerHeight( true ) : 0; - top -= $( '.top-menu-fixed #masthead' ).length > 0 ? $( '.top-menu-fixed #masthead' ).outerHeight( true ) : 0; - top -= $( '.lsx-to-navigation' ).length > 0 ? $( '.lsx-to-navigation' ).outerHeight( true ) : 0; - - $( 'html, body' ).animate( { scrollTop: top }, 800 ); - } - }; - - /** - * Read more effect. - * - * @package tour-operator - * @subpackage scripts - */ - lsx_to.set_read_more = function() { - $( '.single-tour-operator .wp-block-read-more' ).each( function() { - lsx_to.readMoreText = $(this).contents().filter(function() { - return this.nodeType === Node.TEXT_NODE; - }).text(); - - lsx_to.readMoreSet( $(this), $(this).parent( '.wp-block-group' ).find('.wp-block-post-content') ); - } ); - - $( '.single-tour-operator .wp-block-read-more' ).on( 'click', function( event ) { - event.preventDefault(); - $( this ).hide(); - - if ( $( this ).hasClass( 'less-link' ) ) { - lsx_to.readMoreSet( $(this), $(this).parent( '.wp-block-group' ).find('.wp-block-post-content') ); - } else { - lsx_to.readMoreOpen( $(this), $(this).parent( '.wp-block-group' ).find('.wp-block-post-content') ); - } - - $( this ).show(); - } ); - }; - - lsx_to.readMoreSet = function( button, contentWrapper, limit = 1 ) { - if ( 0 < contentWrapper.length ) { - if ( 1 < contentWrapper.children().length ) { - let counter = 0; - - contentWrapper.children().each( function() { - if ( limit <= counter ) { - $(this).hide(); - } - counter++; - }); - } else { - button.hide(); - } - button.removeClass('less-link'); - button.text( lsx_to.readMoreText ); - } else { - button.hide(); - } - } - - lsx_to.readMoreOpen = function( button, contentWrapper ) { - if ( 0 < contentWrapper.children().length ) { - contentWrapper.children().each( function() { - if ( ! $(this).hasClass('wp-block-read-more') ) { - $(this).show(); - } - }); - button.addClass( 'less-link' ); - button.text( 'Read Less' ); - button.show(); - } - } - - /** - * Read more (travel info) effect. - * - * @package tour-operator - * @subpackage scripts - */ - lsx_to.readMoreTIText = ''; - - lsx_to.set_read_more_travel_info = function() { - $( '.single-tour-operator .additional-info .lsx-to-more-link' ).on( 'click', function( event ) { - event.preventDefault(); - - let classes = $(this).closest( '.additional-info' ).attr('class'); - - const regex = /lsx-(.*?)-wrapper/; - const match = classes.match(regex); - const result = match ? match[1] : null; - - if ( null !== result ) { - $('.modal-' + result).toggleClass('open'); - } - } ); - - $( '.lsx-modal .close' ).on( 'click', function( event ) { - $(this).parents('.lsx-modal').removeClass('open'); - }); - }; - - lsx_to.removeEmptyParagraphs = function( contentWrapper ) { - if ( 0 < contentWrapper.length ) { - contentWrapper.children().each( function() { - if ( $(this).is('p') && $(this).html().trim() === '' ) { - $(this).remove(); - } - }); - } - } - - /** - * Read more (itinerary) effect. - * - * @package tour-operator - * @subpackage scripts - */ - - lsx_to.readMoreItinText = ''; - - lsx_to.set_read_more_itinerary = function() { - $( '.single-tour-operator .lsx-itinerary-wrapper .wp-block-read-more' ).each( function() { - $(this).show(); - lsx_to.readMoreItinText = $(this).find('a').text(); - lsx_to.readMoreSet( $(this), $(this).parent( 'div' ).find('.itinerary-description') ); - } ); - - $( '.single-tour-operator .lsx-itinerary-wrapper .wp-block-read-more' ).on( 'click', function( event ) { - event.preventDefault(); - $( this ).hide(); - - if ( $( this ).hasClass( 'less-link' ) ) { - lsx_to.readMoreSet( $(this), $(this).parent( 'div' ).find('.itinerary-description') ); - } else { - lsx_to.readMoreOpen( $(this), $(this).parent( 'div' ).find('.itinerary-description') ); - } - - $( this ).show(); - } ); - }; - - /** - * Slider - Pre build. - * - * @package tour-operator - * @subpackage scripts - */ - lsx_to.pre_build_slider = function( $slider ) { - - $slider.removeClass( 'is-layout-grid' ); - - $slider.on( 'init', function( event, slick ) { - if ( slick.options.arrows && slick.slideCount > slick.options.slidesToShow ) { - $slider.addClass( 'slick-has-arrows' ); - } - } ); - - $slider.on( 'setPosition', function( event, slick ) { - if ( ! slick.options.arrows ) { - $slider.removeClass( 'slick-has-arrows' ); - } else if ( slick.slideCount > slick.options.slidesToShow ) { - $slider.addClass( 'slick-has-arrows' ); - } - } ); - }; - - /** - * Slider. - * - * @package tour-operator - * @subpackage scripts - */ - lsx_to.build_slider = function( window_width ) { - // First slider: .lsx-to-slider - $( '.lsx-to-slider .wp-block-post-template:not(.slider-disabled)' ).each( function() { - var $this = $( this ); - - lsx_to.pre_build_slider( $this ); - - if ( 1 < $this.children().length ) { - $this.slick( { - draggable: false, - infinite: true, - swipe: false, - dots: false, - slidesToShow: 3, // Show 3 items at a time - slidesToScroll: 1, // Scroll 1 item at a time - autoplay: false, - autoplaySpeed: 0, - appendArrows: $this.parent(), // Ensure arrows are appended correctly - appendDots: $this.parent(), // Append dots in the right container - responsive: [ - { - breakpoint: 1228, - settings: { - slidesToShow: 3, - slidesToScroll: 1, - draggable: true, - arrows: false, - swipe: true, - dots: true, - } - }, - { - breakpoint: 1028, - settings: { - slidesToShow: 2, - slidesToScroll: 1, - draggable: true, - arrows: false, - swipe: true, - dots: true, - } - }, - { - breakpoint: 782, - settings: { - slidesToShow: 1, - slidesToScroll: 1, - draggable: true, - arrows: false, - swipe: true, - dots: true, - } - } - ] - } ); - } - } ); - - // Second slider: .lsx-to-slider.travel-information - $( '.lsx-travel-information-wrapper.lsx-to-slider .travel-information:not(.slider-disabled)' ).each( function() { - var $this = $( this ); - - lsx_to.pre_build_slider( $this ); - - // Ensure the second slider has 4 slides showing - if ( 1 < $this.children().length ) { - $this.slick( { - draggable: false, - infinite: true, - swipe: false, - dots: false, - slidesToShow: 4, // Show 4 items at a time - slidesToScroll: 1, // Scroll 1 item at a time - autoplay: false, - autoplaySpeed: 0, - appendArrows: $this.parent(), // Ensure arrows are appended correctly for this slider - appendDots: $this.parent(), // Append dots in the correct place - responsive: [ - { - breakpoint: 1028, - settings: { - slidesToShow: 3, - slidesToScroll: 1, - draggable: true, - arrows: true, - swipe: true, - dots: true, - } - }, - { - breakpoint: 782, - settings: { - slidesToShow: 1, - slidesToScroll: 1, - draggable: true, - arrows: true, - swipe: true, - dots: true, - } - } - ] - } ); - } - } ); - }; - - /** - * Slider Lightbox. - * - * @package tour-operator - * @subpackage scripts - */ - lsx_to.build_slider_lightbox = function() { - if ( 0 < $( '.wp-block-gallery.has-nested-images' ).length ) { - $( '.wp-block-gallery.has-nested-images' ).slickLightbox( { - caption: function( element, info ) { - return $( element ).find( 'img' ).attr( 'alt' ); - } - } ); - } - - if ( 0 < $( '.lsx-units-wrapper .unit-image a' ).length ) { - let roomImages = $('.lsx-units-wrapper .unit-image a img').map(function() { - return $(this).attr('src'); - }).get(); - console.log(roomImages); - - $( '.lsx-units-wrapper' ).slickLightbox( { - //images : roomImages, - itemSelector: '.unit-image a', - caption: function( element, info ) { - return $( element ).find( 'img' ).attr( 'alt' ); - } - } ); - } - }; - - /** - * On window resize. - * - * @package lsx - * @subpackage scripts - */ - $window.resize( function() { - - window_height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; - window_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; - - } ); - - /** - * On document ready. - * - * @package lsx - * @subpackage scripts - */ - $document.ready( function() { - lsx_to.readMoreText = 'Read more'; - lsx_to.set_read_more(); - lsx_to.set_read_more_travel_info(); - lsx_to.set_read_more_itinerary(); - lsx_to.build_slider( window_width ); - } ); - - /** - * On window load. - * - * @package lsx - * @subpackage scripts - */ - - $window.on('load', function() { - lsx_to.build_slider_lightbox(); - } ); - - document.addEventListener('DOMContentLoaded', function () { - // Select all sections within `.single-tour-operator` - const sections = document.querySelectorAll('.single-tour-operator section.wp-block-group, .single-tour-operator section.wp-block-cover'); - - sections.forEach(section => { - // Locate the first

within the section - const heading = section.querySelector('h2'); - // Locate the second div with the class wp-block-group - const toggleTarget = section.querySelectorAll('.wp-block-group')[1]; - - if (heading && toggleTarget) { - // Create a toggle button - const toggleButton = document.createElement('button'); - toggleButton.classList.add('toggle-button'); - toggleButton.innerHTML = ` +(function ($, window, document, undefined) { + "use strict"; + + var $document = $(document), + $window = $(window), + window_height = + window.innerHeight || + document.documentElement.clientHeight || + document.body.clientHeight, + window_width = + window.innerWidth || + document.documentElement.clientWidth || + document.body.clientWidth; + + /** + * Easing browser scroll on page load (document URL with hash). + * + * @package tour-operator + * @subpackage scripts + */ + lsx_to.set_easing_scroll_on_page_load = function () { + if (window.location.hash) { + var $to = $(window.location.hash), + top = parseInt($to.offset().top); + + top -= + $("#wpadminbar").length > 0 ? $("#wpadminbar").outerHeight(true) : 0; + top -= + $(".top-menu-fixed #masthead").length > 0 + ? $(".top-menu-fixed #masthead").outerHeight(true) + : 0; + top -= + $(".lsx-to-navigation").length > 0 + ? $(".lsx-to-navigation").outerHeight(true) + : 0; + + $("html, body").animate({ scrollTop: top }, 800); + } + }; + + /** + * Read more effect. + * + * @package tour-operator + * @subpackage scripts + */ + lsx_to.set_read_more = function () { + $(".single-tour-operator .wp-block-read-more").each(function () { + lsx_to.readMoreText = $(this) + .contents() + .filter(function () { + return this.nodeType === Node.TEXT_NODE; + }) + .text(); + + lsx_to.readMoreSet( + $(this), + $(this).parent(".wp-block-group").find(".wp-block-post-content") + ); + }); + + $(".single-tour-operator .wp-block-read-more").on( + "click", + function (event) { + event.preventDefault(); + $(this).hide(); + + if ($(this).hasClass("less-link")) { + lsx_to.readMoreSet( + $(this), + $(this).parent(".wp-block-group").find(".wp-block-post-content") + ); + } else { + lsx_to.readMoreOpen( + $(this), + $(this).parent(".wp-block-group").find(".wp-block-post-content") + ); + } + + $(this).show(); + } + ); + }; + + lsx_to.readMoreSet = function (button, contentWrapper, limit = 1) { + if (0 < contentWrapper.length) { + if (1 < contentWrapper.children().length) { + let counter = 0; + + contentWrapper.children().each(function () { + if (limit <= counter) { + $(this).hide(); + } + counter++; + }); + } else { + button.hide(); + } + button.removeClass("less-link"); + button.text(lsx_to.readMoreText); + } else { + button.hide(); + } + }; + + lsx_to.readMoreOpen = function (button, contentWrapper) { + if (0 < contentWrapper.children().length) { + contentWrapper.children().each(function () { + if (!$(this).hasClass("wp-block-read-more")) { + $(this).show(); + } + }); + button.addClass("less-link"); + button.text("Read Less"); + button.show(); + } + }; + + /** + * Read more (travel info) effect. + * + * @package tour-operator + * @subpackage scripts + */ + lsx_to.readMoreTIText = ""; + + lsx_to.set_read_more_travel_info = function () { + $(".single-tour-operator .additional-info .lsx-to-more-link").on( + "click", + function (event) { + event.preventDefault(); + + let classes = $(this).closest(".additional-info").attr("class"); + + const regex = /lsx-(.*?)-wrapper/; + const match = classes.match(regex); + const result = match ? match[1] : null; + + if (null !== result) { + $(".modal-" + result).toggleClass("open"); + } + } + ); + + $(".lsx-modal .close").on("click", function (event) { + $(this).parents(".lsx-modal").removeClass("open"); + }); + + // Close by clicking outside + $(document).on("click", function (event) { + if ($(event.target).is(".lsx-modal.open")) { + $(".lsx-modal.open").removeClass("open"); + } + }); + + // Close by pressing Escape + $(document).on("keydown", function (event) { + if (event.key === "Escape") { + $(".lsx-modal.open").removeClass("open"); + } + }); + }; + + lsx_to.removeEmptyParagraphs = function (contentWrapper) { + if (0 < contentWrapper.length) { + contentWrapper.children().each(function () { + if ($(this).is("p") && $(this).html().trim() === "") { + $(this).remove(); + } + }); + } + }; + + /** + * Read more (itinerary) effect. + * + * @package tour-operator + * @subpackage scripts + */ + + lsx_to.readMoreItinText = ""; + + lsx_to.set_read_more_itinerary = function () { + $(".single-tour-operator .lsx-itinerary-wrapper .wp-block-read-more").each( + function () { + $(this).show(); + lsx_to.readMoreItinText = $(this).find("a").text(); + lsx_to.readMoreSet( + $(this), + $(this).parent("div").find(".itinerary-description") + ); + } + ); + + $(".single-tour-operator .lsx-itinerary-wrapper .wp-block-read-more").on( + "click", + function (event) { + event.preventDefault(); + $(this).hide(); + + if ($(this).hasClass("less-link")) { + lsx_to.readMoreSet( + $(this), + $(this).parent("div").find(".itinerary-description") + ); + } else { + lsx_to.readMoreOpen( + $(this), + $(this).parent("div").find(".itinerary-description") + ); + } + + $(this).show(); + } + ); + }; + + /** + * Slider - Pre build. + * + * @package tour-operator + * @subpackage scripts + */ + lsx_to.pre_build_slider = function ($slider) { + $slider.removeClass("is-layout-grid"); + + $slider.on("init", function (event, slick) { + if ( + slick.options.arrows && + slick.slideCount > slick.options.slidesToShow + ) { + $slider.addClass("slick-has-arrows"); + } + }); + + $slider.on("setPosition", function (event, slick) { + if (!slick.options.arrows) { + $slider.removeClass("slick-has-arrows"); + } else if (slick.slideCount > slick.options.slidesToShow) { + $slider.addClass("slick-has-arrows"); + } + }); + }; + + /** + * Slider. + * + * @package tour-operator + * @subpackage scripts + */ + lsx_to.build_slider = function (window_width) { + // First slider: .lsx-to-slider + $(".lsx-to-slider .wp-block-post-template:not(.slider-disabled)").each( + function () { + var $this = $(this); + + lsx_to.pre_build_slider($this); + + if (1 < $this.children().length) { + $this.slick({ + draggable: false, + infinite: true, + swipe: false, + dots: false, + slidesToShow: 3, // Show 3 items at a time + slidesToScroll: 1, // Scroll 1 item at a time + autoplay: false, + autoplaySpeed: 0, + appendArrows: $this.parent(), // Ensure arrows are appended correctly + appendDots: $this.parent(), // Append dots in the right container + responsive: [ + { + breakpoint: 1228, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + draggable: true, + arrows: false, + swipe: true, + dots: true, + }, + }, + { + breakpoint: 1028, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + draggable: true, + arrows: false, + swipe: true, + dots: true, + }, + }, + { + breakpoint: 782, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + draggable: true, + arrows: false, + swipe: true, + dots: true, + }, + }, + ], + }); + } + } + ); + + // Second slider: .lsx-to-slider.travel-information + $( + ".lsx-travel-information-wrapper.lsx-to-slider .travel-information:not(.slider-disabled)" + ).each(function () { + var $this = $(this); + + lsx_to.pre_build_slider($this); + + // Ensure the second slider has 4 slides showing + if (1 < $this.children().length) { + $this.slick({ + draggable: false, + infinite: true, + swipe: false, + dots: false, + slidesToShow: 4, // Show 4 items at a time + slidesToScroll: 1, // Scroll 1 item at a time + autoplay: false, + autoplaySpeed: 0, + appendArrows: $this.parent(), // Ensure arrows are appended correctly for this slider + appendDots: $this.parent(), // Append dots in the correct place + responsive: [ + { + breakpoint: 1028, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + draggable: true, + arrows: true, + swipe: true, + dots: true, + }, + }, + { + breakpoint: 782, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + draggable: true, + arrows: true, + swipe: true, + dots: true, + }, + }, + ], + }); + } + }); + }; + + /** + * Slider Lightbox. + * + * @package tour-operator + * @subpackage scripts + */ + lsx_to.build_slider_lightbox = function () { + if (0 < $(".wp-block-gallery.has-nested-images").length) { + $(".wp-block-gallery.has-nested-images").slickLightbox({ + caption: function (element, info) { + return $(element).find("img").attr("alt"); + }, + }); + } + + if (0 < $(".lsx-units-wrapper .unit-image a").length) { + let roomImages = $(".lsx-units-wrapper .unit-image a img") + .map(function () { + return $(this).attr("src"); + }) + .get(); + console.log(roomImages); + + $(".lsx-units-wrapper").slickLightbox({ + //images : roomImages, + itemSelector: ".unit-image a", + caption: function (element, info) { + return $(element).find("img").attr("alt"); + }, + }); + } + }; + + /** + * On window resize. + * + * @package lsx + * @subpackage scripts + */ + $window.resize(function () { + window_height = + window.innerHeight || + document.documentElement.clientHeight || + document.body.clientHeight; + window_width = + window.innerWidth || + document.documentElement.clientWidth || + document.body.clientWidth; + }); + + /** + * On document ready. + * + * @package lsx + * @subpackage scripts + */ + $document.ready(function () { + lsx_to.readMoreText = "Read more"; + lsx_to.set_read_more(); + lsx_to.set_read_more_travel_info(); + lsx_to.set_read_more_itinerary(); + lsx_to.build_slider(window_width); + }); + + /** + * On window load. + * + * @package lsx + * @subpackage scripts + */ + + $window.on("load", function () { + lsx_to.build_slider_lightbox(); + }); + + document.addEventListener("DOMContentLoaded", function () { + // Select all sections within `.single-tour-operator` + const sections = document.querySelectorAll( + ".single-tour-operator section.wp-block-group, .single-tour-operator section.wp-block-cover" + ); + + sections.forEach((section) => { + // Locate the first

within the section + const heading = section.querySelector("h2"); + // Locate the second div with the class wp-block-group + const toggleTarget = section.querySelectorAll(".wp-block-group")[1]; + + if (heading && toggleTarget) { + // Create a toggle button + const toggleButton = document.createElement("button"); + toggleButton.classList.add("toggle-button"); + toggleButton.innerHTML = ` `; - - // Insert the button after the heading - heading.insertAdjacentElement('afterend', toggleButton); - - // Add click event listener to toggle visibility of the second wp-block-group - toggleButton.addEventListener('click', function () { - toggleTarget.classList.toggle('collapsed'); // Add or remove the collapsed class - - // Toggle the display of the up/down icons - const iconDown = toggleButton.querySelector('.icon-down'); - const iconUp = toggleButton.querySelector('.icon-up'); - - if (toggleTarget.classList.contains('collapsed')) { - iconDown.style.display = 'none'; - iconUp.style.display = 'inline'; - } else { - iconDown.style.display = 'inline'; - iconUp.style.display = 'none'; - } - }); - } - }); - }); - -} )( jQuery, window, document ); + + // Insert the button after the heading + heading.insertAdjacentElement("afterend", toggleButton); + + // Add click event listener to toggle visibility of the second wp-block-group + toggleButton.addEventListener("click", function () { + toggleTarget.classList.toggle("collapsed"); // Add or remove the collapsed class + + // Toggle the display of the up/down icons + const iconDown = toggleButton.querySelector(".icon-down"); + const iconUp = toggleButton.querySelector(".icon-up"); + + if (toggleTarget.classList.contains("collapsed")) { + iconDown.style.display = "none"; + iconUp.style.display = "inline"; + } else { + iconDown.style.display = "inline"; + iconUp.style.display = "none"; + } + }); + } + }); + }); +})(jQuery, window, document);