Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TO - Additional Info Read More JS #457

Merged
merged 4 commits into from
Dec 12, 2024
Merged

TO - Additional Info Read More JS #457

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3fe9116
TO - Additional Info Read More JS
Justinabes007 Dec 12, 2024
7fa4557
Adding in the files needed for the scss
krugazul Dec 12, 2024
ccabb3a
Updates to SCSS file
Justinabes007 Dec 12, 2024
14d62aa
Updating the SASS files
krugazul Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added assets/css/scss/_additional.scss
View file
Open in desktop
Empty file.
146 changes: 146 additions & 0 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,26 @@
display: inline-block;
left: 12px;
}
.wp-block-query.lsx-to-slider{position:relative;}
.wp-block-query.lsx-to-slider .slick-arrow:before,
.wp-block-query .slick-lightbox-inner .slick-arrow:before{ border-color: #000!important;
height:30px; width:30px;}

.wp-block-query.lsx-to-slider .slick-arrow,
.slick-lightbox-inner .slick-arrow {cursor: pointer;
border-color: #000!important;height:30px; width:30px;}

.wp-block-query.lsx-to-slider .slick-arrow.slick-prev:before,
.wp-block-query .slick-lightbox-inner .slick-arrow.slick-prev:before{background: url('../img/left-arrow-dark.svg') no-repeat center center;
width: 20px;left: 3px;
height: 20px;}

.wp-block-query.lsx-to-slider .slick-arrow.slick-next:before,
.wp-block-query .slick-lightbox-inner .slick-arrow.slick-next:before{background: url('../img/right-arrow-dark.svg') no-repeat center center;
width: 20px;left: 3px;
height: 20px;}

.wp-block-query.lsx-to-slider .slick-slide{padding:15px!important;}

.lsx-to-slider .slick-dots:not(.dropdown-menu) {
align-items: center;
Expand Down Expand Up @@ -277,5 +297,131 @@
.lsx-units-wrapper .hidden {
display: none;
}
.wp-block-query.lsx-to-slider{gap: var(--wp--preset--spacing--small) var(--wp--preset--spacing--small);}

/*# sourceMappingURL=style.css.map */

/* Inner group for icon and label */
.fast-facts-wrapper > .wp-block-group .wp-block-group:first-child {
display: flex;
align-items: flex-start; /* Align content in this group to the top */
gap: 5px; /* Space between icon and text */
flex-shrink: 0; /* Prevent group from shrinking */
}

/* Style the image icon */
.fast-facts-wrapper > .wp-block-group .wp-block-image img {
width: 20px; /* Fixed width */
height: 20px; /* Fixed height */
display: inline-block;
object-fit: contain; /* Ensure image doesn't stretch or distort */
}

/* Styling for the label (e.g., "Special Interests:") */
.fast-facts-wrapper > .wp-block-group .wp-block-group:first-child p {
margin: 0;
white-space: nowrap; /* Prevent wrapping for label */
vertical-align: middle; /* Align text with the middle of the icon */
line-height: 1.2; /* Improve readability */
display: inline-block; /* Keep text inline */
}

/* Styling for the flowing text */
.fast-facts-wrapper > .wp-block-group .wp-block-group:last-child {
display: flex;
flex-wrap: nowrap; /* Keep the text flowing inline */
white-space: normal; /* Allow wrapping for text if it overflows */
overflow-wrap: break-word; /* Ensure long words wrap correctly */
word-break: break-word; /* Break long words when needed */
flex: 1; /* Allow the container to use available space */
align-items: flex-start; /* Ensure text starts at the top */
}

/* Specific styling for the text content */
.fast-facts-wrapper > .wp-block-group .wp-block-group:last-child p {
white-space: normal; /* Allow wrapping for long text */
overflow-wrap: break-word; /* Break words when needed */
word-break: break-word; /* Break words on legacy browsers */
line-height: 1.4; /* Improve readability */
text-transform: capitalize; /* Capitalize text */
padding: 0; /* Ensure no unnecessary padding */
margin: 0; /* Remove extra margins */
display: inline; /* Ensure the text flows inline with the label */
}

.facilities-list li::marker{display:none;}
.facilities-list{padding-left:0!important;}

.facilities-list li {
margin-left: 10px;
list-style: none; /* Remove default list marker */
position: relative; /* Position for pseudo-element */}

.facilities-list li::before{
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); /* Center the icon vertically */
width: 20px; /* Adjust the size of the tick icon */
height: 20px;
background-image: url('../img/tick.svg'); /* Replace with the path to your tick.svg */
background-size: contain;
background-repeat: no-repeat;
left:-28px
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

There is a minor issue with the CSS property left being declared twice for .facilities-list li::before. The second declaration will override the first one. If this is not intentional, you should remove the redundant declaration.

.facilities-list li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Center the icon vertically */
    width: 20px; /* Adjust the size of the tick icon */
    height: 20px;
    background-image: url('../img/tick.svg'); /* Replace with the path to your tick.svg */
    background-size: contain;
    background-repeat: no-repeat;
-371:     left:-28px
+371:     /* left:-28px */ // Commented out as it seems to be a duplicate
}


.additional-info .wp-block-group.content .read-more-btn,.additional-info .wp-block-group.content .read-less-btn{
color: #0073aa;
cursor: pointer;
font-weight: bold;
}

.additional-info .wp-block-group.content .read-more-btn:hover {
text-decoration: underline;
}

.additional-info .wp-block-group.content .read-less-btn{display:none;}

@media (min-width: 800px) {
.single-tour-operator .toggle-button {display:none;}
}

/* Optional: Responsive adjustments for smaller screens */
@media (max-width: 768px) {

/* Styling for the toggle button */
.single-tour-operator .toggle-button {
display: inline-flex;
align-items: center;
padding: 5px;
background: none;
border: none;
cursor: pointer;
font-size: 14px;
color: var(--wp--preset--color--contrast);
}

/* Styling for the SVG icons */
.single-tour-operator .toggle-icon {
width: 16px;
height: 16px;
fill: var(--wp--preset--color--contrast);
margin-left: 5px;
}

/* Collapsed state for the second wp-block-group */
.single-tour-operator section.wp-block-group .wp-block-group.collapsed {
display: none; /* Hide the content */
}


.fast-facts-wrapper > .wp-block-group {
flex-wrap: wrap; /* Allow wrapping for better readability */
gap: 5px;
}

.fast-facts-wrapper > .wp-block-group .wp-block-group.is-layout-flex:last-child {
flex-wrap: wrap; /* Allow text to wrap on smaller screens */
}
}
2 changes: 1 addition & 1 deletion assets/css/style.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions assets/css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@

@import 'scss/icons';
@import 'scss/slider';

@import 'scss/additional';

.lsx-itinerary-wrapper,
.lsx-units-wrapper {
.hidden {
display: none;
}
}

3 changes: 3 additions & 0 deletions assets/img/left-arrow-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/img/right-arrow-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 50 additions & 7 deletions assets/js/src/custom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ if ( window.location.hash ) {
draggable: false,
infinite: true,
swipe: false,
dots: true,
dots: false,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The change from dots: true to dots: false disables the display of dots for navigation in the slider. If this is intentional and aligns with the design requirements, then it's fine. However, if you still need the dots for navigation, you should revert this change.

- dots: false,
+ dots: true,

slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
Expand All @@ -217,23 +217,25 @@ if ( window.location.hash ) {
//appendDots: $this.parent(),
responsive: [
{
breakpoint: 1279,
breakpoint: 1028,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
draggable: false,
arrows: true,
swipe: false,
draggable: true,
arrows: false,
swipe: true,
dots: true,
}
},
{
breakpoint: lsx_to_params.slickSlider.mobile.breakpoint,
breakpoint: 782,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
draggable: true,
arrows: false,
swipe: true,
dots: true,
Comment on lines +220 to +238
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The changes made here are mostly related to responsive design. The breakpoints have been changed and some settings have been altered for different screen sizes. As long as these changes align with your design requirements and have been tested across different devices and screen sizes, they look good.

}
}
]
Expand Down Expand Up @@ -310,4 +312,45 @@ if ( window.location.hash ) {
lsx_to.build_slider_lightbox();
} );

} )( jQuery, window, document );
document.addEventListener('DOMContentLoaded', function () {
const paragraphs = document.querySelectorAll('.additional-info .wp-block-group.content p');

paragraphs.forEach(function (p) {
const text = p.innerText.trim();

if (text.split(' ').length > 30) { // Check if paragraph exceeds 30 words
const fullText = p.innerText.trim();
const truncatedText = fullText.split(' ').slice(0, 30).join(' ') + '...';
p.innerHTML = `<span class="truncated-text">${truncatedText}</span><span class="full-text" style="display: none;">${fullText}</span>`;

// Create Read More button
const readMoreBtn = document.createElement('span');
readMoreBtn.textContent = ' Read More';
readMoreBtn.classList.add('read-more-btn');
p.appendChild(readMoreBtn);

// Create Read Less button
const readLessBtn = document.createElement('span');
readLessBtn.textContent = ' Read Less';
readLessBtn.classList.add('read-less-btn');
p.appendChild(readLessBtn);

// Add functionality to toggle text
readMoreBtn.addEventListener('click', function () {
p.querySelector('.truncated-text').style.display = 'none';
p.querySelector('.full-text').style.display = 'inline';
readMoreBtn.style.display = 'none';
readLessBtn.style.display = 'inline';
});

readLessBtn.addEventListener('click', function () {
p.querySelector('.truncated-text').style.display = 'inline';
p.querySelector('.full-text').style.display = 'none';
readMoreBtn.style.display = 'inline';
readLessBtn.style.display = 'none';
});
}
Comment on lines +318 to +352
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The logic for creating "Read More" and "Read Less" buttons is directly manipulating the DOM inside a loop. This could lead to performance issues if there are many paragraphs on the page. It would be more efficient to use event delegation, where you attach an event listener to a parent element and handle events from its child elements based on the event's target.

Here's how you can refactor this code:

- paragraphs.forEach(function (p) {
-    const text = p.innerText.trim();
-    if (text.split(' ').length > 30) {  // Check if paragraph exceeds 30 words
-        const fullText = p.innerText.trim();
-        const truncatedText = fullText.split(' ').slice(0, 30).join(' ') + '...';
-        p.innerHTML = `<span class="truncated-text">${truncatedText}</span><span class="full-text" style="display: none;">${fullText}</span>`;
-
-        // Create Read More button
-        const readMoreBtn = document.createElement('span');
-        readMoreBtn.textContent = ' Read More';
-        readMoreBtn.classList.add('read-more-btn');
-        p.appendChild(readMoreBtn);
-
-        // Create Read Less button
-        const readLessBtn = document.createElement('span');
-        readLessBtn.textContent = ' Read Less';
-        readLessBtn.classList.add('read-less-btn');
-        p.appendChild(readLessBtn);
-
-        // Add functionality to toggle text
-        readMoreBtn.addEventListener('click', function () {
-            p.querySelector('.truncated-text').style.display = 'none';
-            p.querySelector('.full-text').style.display = 'inline';
-            readMoreBtn.style.display = 'none';
-            readLessBtn.style.display = 'inline';
-        });
-
-        readLessBtn.addEventListener('click', function () {
-            p.querySelector('.truncated-text').style.display = 'inline';
-            p.querySelector('.full-text').style.display = 'none';
-            readMoreBtn.style.display = 'inline';
-            readLessBtn.style.display = 'none';
-        });
-    }
-});
+ document.querySelector('.additional-info .wp-block-group.content').addEventListener('click', function (event) {
+     if (event.target.matches('.read-more-btn')) {
+         const p = event.target.parentNode;
+         p.querySelector('.truncated-text').style.display = 'none';
+         p.querySelector('.full-text').style.display = 'inline';
+         p.querySelector('.read-more-btn').style.display = 'none';
+         p.querySelector('.read-less-btn').style.display = 'inline';
+     } else if (event.target.matches('.read-less-btn')) {
+         const p = event.target.parentNode;
+         p.querySelector('.truncated-text').style.display = 'inline';
+         p.querySelector('.full-text').style.display = 'none';
+         p.querySelector('.read-more-btn').style.display = 'inline';
+         p.querySelector('.read-less-btn').style.display = 'none';
+     }
+ });

});
});
Comment on lines +315 to +354
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

This new code block adds a "Read More" / "Read Less" functionality to paragraphs that exceed 30 words. It seems to be well implemented, creating two buttons and toggling visibility between the truncated and full text versions of the paragraph. However, there are a few points to consider:

  1. Performance: Querying the DOM and manipulating it inside a loop can be costly in terms of performance. Consider using DocumentFragment to minimize reflows and repaints.

  2. Accessibility: Ensure that the 'Read More' and 'Read Less' buttons are accessible, i.e., can be tabbed to and activated using keyboard only. You might want to use <button> elements instead of <span> for better semantics and built-in accessibility features.

  3. Security: Directly injecting text into HTML using innerHTML can expose your site to Cross-Site Scripting (XSS) attacks if the text content is user-supplied or can be manipulated by users. If the text content is static and cannot be manipulated by users, this isn't an issue.

Here's a revised version of the code considering these points:

document.addEventListener('DOMContentLoaded', function () {
    const paragraphs = document.querySelectorAll('.additional-info .wp-block-group.content p');
    const fragment = document.createDocumentFragment();

    paragraphs.forEach(function (p) {
        const text = p.innerText.trim();

        if (text.split(' ').length > 30) {  // Check if paragraph exceeds 30 words
            const fullText = p.innerText.trim();
            const truncatedText = fullText.split(' ').slice(0, 30).join(' ') + '...';
            p.textContent = '';

            const truncatedSpan = document.createElement('span');
            truncatedSpan.className = 'truncated-text';
            truncatedSpan.textContent = truncatedText;

            const fullTextSpan = document.createElement('span');
            fullTextSpan.className = 'full-text';
            fullTextSpan.style.display = 'none';
            fullTextSpan.textContent = fullText;

            const readMoreBtn = document.createElement('button');
            readMoreBtn.textContent = ' Read More';
            readMoreBtn.classList.add('read-more-btn');

            const readLessBtn = document.createElement('button');
            readLessBtn.textContent = ' Read Less';
            readLessBtn.classList.add('read-less-btn');
            readLessBtn.style.display = 'none';

            readMoreBtn.addEventListener('click', function () {
                truncatedSpan.style.display = 'none';
                fullTextSpan.style.display = 'inline';
                readMoreBtn.style.display = 'none';
                readLessBtn.style.display = 'inline';
            });

            readLessBtn.addEventListener('click', function () {
                truncatedSpan.style.display = 'inline';
                fullTextSpan.style.display = 'none';
                readMoreBtn.style.display = 'inline';
                readLessBtn.style.display = 'none';
            });

            fragment.appendChild(truncatedSpan);
            fragment.appendChild(fullTextSpan);
            fragment.appendChild(readMoreBtn);
            fragment.appendChild(readLessBtn);

            p.appendChild(fragment);
        }
    });
});


} )( jQuery, window, document );
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image description CodeRabbit

The absence of a newline at the end of a file can cause issues with some tools that expect or require it. It's generally considered good practice to always end a file with a newline.

- } )( jQuery, window, document );
+ } )( jQuery, window, document );
+

Loading