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

Jump to bottom

Sivasish48: Issue #39287 Replacing the "show" method with a modified and Introduced a small delay before triggering the 'Offcanvas' #39593

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Sivasish48: Issue #39287 Replacing the "show" method with a modified and Introduced a small delay before triggering the 'Offcanvas' #39593

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 9 additions & 1 deletion js/src/offcanvas.js
View file
Open in desktop
Expand Up @@ -102,7 +102,11 @@ class Offcanvas extends BaseComponent {
}

this._isShown = true
this._backdrop.show()
this._element.classList.add("offcanvas-end") // Adding the class 'offcanvas-end' here
Copy link
Member

Choose a reason for hiding this comment

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

This feels wrong, every offcanvas isn't an offcanvas-end.

Copy link
Author

@Sivasish48 Sivasish48 Jan 23, 2024 •
edited by julien-deramond

Choose a reason for hiding this comment

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

My pardon.

show(relatedTarget) {
    if (this._isShown) {
        return;
    }

    const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget });

    if (showEvent.defaultPrevented) {
        return;
    }

    this._isShown = true;

    // Adding the class 'offcanvas-end' here
    this._backdrop.show();

    if (!this._config.scroll) {
        new ScrollBarHelper().hide();
    }

    this._element.setAttribute('aria-modal', true);
    this._element.setAttribute('role', 'dialog');
    this._element.classList.add(CLASS_NAME_SHOWING);

    const completeCallBack = () => {
        if (!this._config.scroll || this._config.backdrop) {
            this._focustrap.activate();
        }

        this._element.classList.add(CLASS_NAME_SHOW);
        this._element.classList.remove(CLASS_NAME_SHOWING);
        EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget });
    };

    // Introduce a small delay before triggering the Offcanvas
    setTimeout(completeCallBack, 50); // Adjust the delay as needed
}

Please suggest what should be done!


const showOffcanvas = ()=>{
this._backdrop.show()


if (!this._config.scroll) {
new ScrollBarHelper().hide()
Expand All @@ -123,8 +127,12 @@ class Offcanvas extends BaseComponent {
}

this._queueCallback(completeCallBack, this._element, true)

}

// calling a setTimeout to introduce a small delay triggering Offcanvas
setTimeout(showOffcanvas,50) // Adjust the delay as needed
}
hide() {
if (!this._isShown) {
return
Expand Down