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 1 commit
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
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 */
}
}
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.
43 changes: 42 additions & 1 deletion assets/js/src/custom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,4 +310,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