Is it possible to make a short description using HTML tags?

[DenverCoder1]

On mobile, when the short description is created and the See more link is generated, the HTML tags get removed. Solutions provided in other issues such as #299 suggest disabling the short description with moreLength, but instead of doing this, I would rather create a different short description with HTML that has the See more link, in other words I'd like to customize the behavior of the slideShortDesc function.

Explain why the feature is useful Descriptions can contain advanced styling such as headers and UI chips at the start of the description and these don't appear nicely when converted to text. I would like a way to make the header and UI chips always appear the same in the short description and only the paragraphs afterwards should be abbreviated.

My current workaround is to change the behavior after the slide is loaded using code I copied from slide.js, but it would be nice if there was a way to easily access and override the internal methods.

// update the smallDescription when the slide is loaded
lightbox.on("slide_after_load", function(slide) {
    setTimeout(() => {
        document.body.classList.remove('gdesc-open');
        document.body.classList.remove('gdesc-closed');
    }, 400);

    // if the width of the window is more than 600px, don't truncate the description
    const descEl = slide.slide.querySelector(".gslide-desc");
    if (window.innerWidth > 600) {
        descEl.innerHTML = slide.slideConfig.description;
        return;
    }

    const parts = slide.slideConfig.description.split("<span class='end-of-small-desc'></span>");
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = parts[1];
    let description = parts[0];
    const maxLength = 30;
    if (tempDiv.textContent.length > maxLength) {
        description += `<p>${tempDiv.textContent.substr(0, maxLength)}... <a href="#" class="desc-more">See more</a></p>`;
    } else {
        description += tempDiv.textContent;
    }
    tempDiv.remove();
    slide.slideConfig.smallDescription = description
    descEl.innerHTML = slide.slideConfig.smallDescription;

    function addDescriptionEvents(desc, data) {
        let moreLink = desc.querySelector('.desc-more');
        if (!moreLink) {
            return false;
        }
        moreLink.addEventListener("click", (event) => {
            event.preventDefault();
            let desc = event.target.closest('.gslide-desc');
            if (!desc) {
                return false;
            }

            desc.innerHTML = data.description;
            document.body.classList.add('gdesc-open');

            let shortEvent = desc.closest('.gslide-description').addEventListener("click", (event) => {
                if (event.target.nodeName.toLowerCase() !== 'a') {
                    document.body.classList.remove('gdesc-open');
                    document.body.classList.add('gdesc-closed');
                    desc.innerHTML = data.smallDescription;
                    addDescriptionEvents(desc, data);

                    setTimeout(() => {
                        document.body.classList.remove('gdesc-closed');
                    }, 400);
                    desc.closest('.gslide-description').removeEventListener("click", shortEvent);
                }
            });
        })
    }
    addDescriptionEvents(descEl, slide.slideConfig);
});

[gingerchew]

Interesting idea, I think for right now this is out of scope. I think it would be worth revisiting once the next version comes out.

[DenverCoder1]

Thanks for the response.

If you do end up making this possible, a cleaner solution than supporting changing the function could be to just allow setting the shortDescription via an HTML attribute similar to how it can be done with description. If the shortDescription is provided and the user is on mobile, it could add the "See more" link to it and set the element to have that instead of trimming it with the slideShortDesc function and only if shortDescription is not provided, the slideShortDesc will need to be called.