Enhancing Your Plugin: Exploring a Transition to ES6

Hi ETOC developers. How are you?

I noticed that two files in your codebase rely on jQuery, even though the rest of your repository is free of it. This essentially forces users to load jQuery solely for these two files, which can be problematic for several reasons:

1. Performance: Loading jQuery adds unnecessary overhead, especially for users who are trying to keep their sites lightweight. Modern websites prioritize performance, and many developers avoid dependencies like jQuery for this reason.
2. Compatibility: Removing jQuery makes your plugin more universal. Modern JavaScript (ES6+) provides all the tools necessary to achieve the same functionality natively. By eliminating jQuery, you’re not only future-proofing your code but also ensuring compatibility with projects that avoid legacy dependencies.
3. Adoption: A dependency-free plugin is more appealing to developers. Many projects today, especially newer ones, are jQuery-free. By requiring jQuery, you might inadvertently discourage adoption by developers who want to avoid it.
4. Security and Maintenance: jQuery has been a target for vulnerabilities in the past. Although it’s actively maintained, relying on a third-party library means you’re at the mercy of its updates. A dependency-free approach eliminates this concern.

Given that jQuery isn’t used across the rest of your codebase, transitioning these two files to native JavaScript would bring your plugin in line with modern practices and make it more attractive to a wider audience.

The jQuery code currently in use can be easily replaced with modern ES6 features, as it seems to be primarily used for referencing DOM elements and attaching click listeners—tasks that are straightforward to handle with native JavaScript.

In my website, I do not use elementor or any other page builder. I use the native 20204 theme.
I avoid using plugins that relay on jq, and i do not load this lib at all. All my js code is written using ES6,

If you’re open to it, I allowed myself to offer a code revision using ChatGPT to demonstrate how the jQuery dependency can be eliminated entirely. The jQuery code in use can be easily replaced with modern ES6 features, as it seems to be primarily used for referencing DOM elements and attaching click listeners—tasks that are straightforward to handle with native JavaScript. Let me know how I can contribute further!

smooth.scrol.min.js

document.addEventListener("DOMContentLoaded", () => {
    let smoothScroll = false;
    
    if (typeof eztoc_smooth_local.JumpJsLinks !== "undefined" && parseInt(eztoc_smooth_local.JumpJsLinks) === 1) {
        smoothScroll = true;
    }

    document.querySelectorAll(".ez-toc-link").forEach(link => {
        const clone = link.cloneNode(true);
        link.replaceWith(clone);
    });

    document.querySelectorAll(".ez-toc-section").forEach(section => {
        section.setAttribute("ez-toc-data-id", #${decodeURI(section.getAttribute("id"))});
    });

    document.querySelectorAll("a.ez-toc-link").forEach(anchor => {
        anchor.addEventListener("click", event => {
            event.preventDefault();

            let dataHref = anchor.getAttribute("data-href");
            let href = anchor.getAttribute("href");

            if (parseInt(eztoc_smooth_local.add_request_uri) === 1) {
                if (dataHref) {
                    const parts = dataHref.split("#");
                    if (parts.length > 1) {
                        dataHref = #${parts[1]};
                    }
                }
                if (href) {
                    const parts = href.split("#");
                    if (parts.length > 1) {
                        href = #${parts[1]};
                    }
                }
            }

            const targetId = smoothScroll ? dataHref : href;
            let offset = 0;

            if (parseInt(eztoc_smooth_local.scroll_offset) > 30) {
                offset = parseInt(eztoc_smooth_local.scroll_offset);
            }

            const adminBar = document.querySelector("#wpadminbar");
            const header = document.querySelector("header");

            if (adminBar) {
                offset += adminBar.offsetHeight;
            }

            if (header && (getComputedStyle(header).position === "fixed" || getComputedStyle(header).position === "sticky")) {
                offset += header.offsetHeight;
            }

            const targetElement = document.querySelector([ez-toc-data-id="${decodeURI(targetId)}"]);
            if (targetElement) {
                const targetPosition = targetElement.offsetTop - offset;

                window.scrollTo({
                    top: targetPosition,
                    behavior: "smooth"
                });
            }
        });
    });
});

or sticky.kit.js

(() => {
    const stickInParent = function (options = {}) {
        const {
            sticky_class = "is_stuck",
            inner_scrolling = true,
            recalc_every = null,
            parent = null,
            offset_top = 0,
            spacer = null,
            bottoming = true
        } = options;

        const documentHeight = () => document.documentElement.scrollHeight;
        const windowHeight = () => window.innerHeight;
        const scrollTop = () => window.pageYOffset || document.documentElement.scrollTop;

        const applySticky = (element) => {
            if (element.dataset.stickyKit) return;
            element.dataset.stickyKit = true;

            const parentElement = parent ? element.closest(parent) : element.parentElement;
            if (!parentElement) {
                throw new Error("Failed to find stick parent");
            }

            let isStuck = false;
            let isBottoming = false;
            let lastScrollTop = null;
            let spacerElement = spacer ? element.closest(spacer) : document.createElement("div");
            const updateDimensions = () => {
                const parentStyles = getComputedStyle(parentElement);
                const elementStyles = getComputedStyle(element);

                const borderTopWidth = parseInt(parentStyles.borderTopWidth, 10) || 0;
                const paddingTop = parseInt(parentStyles.paddingTop, 10) || 0;
                const paddingBottom = parseInt(parentStyles.paddingBottom, 10) || 0;

                const parentTop = parentElement.getBoundingClientRect().top + scrollTop();
                const parentHeight = parentElement.offsetHeight;
                const elementTop = element.getBoundingClientRect().top + scrollTop();
                const elementHeight = element.offsetHeight;

                spacerElement.style.width = ${element.offsetWidth}px;
                spacerElement.style.height = ${elementHeight}px;
                spacerElement.style.display = elementStyles.display;

                return {
                    parentTop,
                    parentHeight,
                    elementTop,
                    elementHeight,
                    borderTopWidth,
                    paddingTop,
                    paddingBottom
                };
            };

            const stickHandler = () => {
                const scrollY = scrollTop();
                const dimensions = updateDimensions();
                const { parentTop, parentHeight, elementHeight } = dimensions;

                const stickyLimit = parentTop + parentHeight - elementHeight - offset_top;

                if (scrollY > parentTop - offset_top && scrollY < stickyLimit) {
                    if (!isStuck) {
                        isStuck = true;
                        element.style.position = "fixed";
                        element.style.top = ${offset_top}px;
                        element.style.width = ${spacerElement.offsetWidth}px;
                        element.classList.add(sticky_class);
                        parentElement.insertBefore(spacerElement, element);
                    }
                } else if (isStuck) {
                    isStuck = false;
                    element.style.position = "";
                    element.style.top = "";
                    element.style.width = "";
                    element.classList.remove(sticky_class);
                    parentElement.removeChild(spacerElement);
                }

                if (bottoming && isStuck && scrollY + elementHeight + offset_top > parentTop + parentHeight) {
                    if (!isBottoming) {
                        isBottoming = true;
                        element.style.position = "absolute";
                        element.style.top = "";
                        element.style.bottom = ${dimensions.paddingBottom}px;
                    }
                } else if (isBottoming) {
                    isBottoming = false;
                    element.style.position = "fixed";
                    element.style.bottom = "";
                    element.style.top = ${offset_top}px;
                }
            };

            window.addEventListener("scroll", stickHandler);
            window.addEventListener("resize", () => {
                updateDimensions();
                stickHandler();
            });

            stickHandler();
        };

        return this.forEach((element) => applySticky(element));
    };

    NodeList.prototype.stickInParent = stickInParent;
    HTMLElement.prototype.stickInParent = function (options) {
        return stickInParent.call([this], options);
    };
})();

Thank you

• This topic was modified 10 months, 3 weeks ago by neoswf.
• This topic was modified 10 months, 3 weeks ago by neoswf.