From 400bd1e8bfc48764235d79dbc7296f69ca0de05b Mon Sep 17 00:00:00 2001 From: Zared Rogers <66061110+ZaredRogers@users.noreply.github.com> Date: Tue, 7 Jan 2025 14:46:22 +0000 Subject: [PATCH] Styled and adjusted functionality of the Travel info modals --- assets/css/scss/_modals.scss | 10 +- assets/css/style.css | 10 +- assets/js/src/custom.js | 891 +++++++++++++++++++---------------- 3 files changed, 494 insertions(+), 417 deletions(-) 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