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.

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

PROD: Show More links repeat #5

Closed
influxweb opened this issue Jul 22, 2019 · 0 comments

Comments

@influxweb
Copy link
Contributor

commented Jul 22, 2019

When the screen is resized, the Show More links may become duplicated and make for a confusing layout.

Correcting the Issue

This issue is due to there not being a reset to remove previously added toggles. I have added this update and it will be included in the next maintenance release.

To make the update prior to the next release, you will need to find the peekaboo() function in theme.js and update with the following:

User Interface -> JavaScript Resources -> theme:

/**
 * This is the Show/Hide functionality for the Show More links in the
 * product description section.
 */
(function () {
    'use strict';

    function vw(v) {
        let w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        return (v * w) / 100;
    }

    let showMoreSections = document.querySelectorAll('[data-hook="show-more"]');

    function peekaboo (reset) {
        if (showMoreSections.length > 0) {
            if (reset) {
                document.querySelectorAll('[data-hook="show-more-toggle"]').forEach(function (toggle) {
                    toggle.parentNode.removeChild(toggle);
                });
                return;
            }

            showMoreSections.forEach(function (showMore) {
                if (showMore.clientHeight > vw(30)) {
                    let showMoreToggle = document.createElement('button');
                    let showContent = '<span class="t-show-more__toggle-text">See More <span class="u-icon-chevron-down u-font-small"></span></span>';
                    let lessContent = '<span class="t-show-more__toggle-text">See Less <span class="u-icon-chevron-up u-font-small"></span></span>';

                    showMoreToggle.innerHTML = showContent;
                    showMoreToggle.classList.add('t-show-more__toggle');
                    showMoreToggle.setAttribute('data-hook', 'show-more-toggle');
                    showMore.classList.add('t-show-more');
                    showMore.appendChild(showMoreToggle);

                    showMoreToggle.addEventListener('click', function (clickEvent) {
                        clickEvent.preventDefault();
                        showMore.classList.toggle('t-show-more--active');
                        if (showMoreToggle.innerHTML === showContent) {
                            showMoreToggle.innerHTML = lessContent;
                        }
                        else {
                            showMoreToggle.innerHTML = showContent;
                        }
                    });
                }

            });
        }
    }
    peekaboo();

    let peekabooTimeout;

    window.addEventListener('resize', function () {
        peekaboo(true);
        if (peekabooTimeout) {
            window.cancelAnimationFrame(peekabooTimeout);
        }

        peekabooTimeout = window.requestAnimationFrame(function () {
            peekaboo();
        });
    }, false);

}());

@influxweb influxweb added this to the v1.0.1 milestone Jul 22, 2019

@influxweb influxweb self-assigned this Jul 22, 2019

influxweb added a commit that referenced this issue Jul 24, 2019

v1.0.1
This maintenance release addresses all issues contained in the v1.0.1 milestone. https://github.com/mivaecommerce/readytheme-colossus/milestone/1?closed=1

This closes #1, closes #2, closes #3, closes #4, closes #5, closes #6, and closes #7
@influxweb influxweb referenced this issue Jul 24, 2019

@influxweb influxweb closed this in #8 Jul 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.