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

Integration in Web Component #676

Open
jchome opened this issue Dec 15, 2023 · 0 comments
Open

Integration in Web Component #676

jchome opened this issue Dec 15, 2023 · 0 comments

Comments

@jchome
Copy link

jchome commented Dec 15, 2023

Hi,

I try to integrate this plugin in a Web Component (using a class extending HTMLElement, and defining a shadow-root), but the scroll bar does not display on mouse over. The scroll is not working also.
The Javascript seems to work as expected, because I see new nodes and CSS classes dedicated to the plugin, into my target of the scroll.
The CSS classes are applyed, I can see rules on the debug console of my browser.

This is the result from my browser (the "#shadow-root" node come from the Web Component):

<collapsable-sidebar title="Admin">
  #shadow-root (open)
	<link rel="stylesheet" href="/assets/js/collapsable-sidebar/style.css"> <!-- import CSS files, like jquery.mCustomScrollbar.min.css -->
	<nav id="sidebar" class="mCustomScrollbar _mCS_1 mCS-autoHide" style="overflow: visible;"><div id="mCSB_1" class="mCustomScrollBox mCS-minimal mCSB_vertical"><div id="mCSB_1_container" class="mCSB_container" style="position:relative; top:0; left:0;" dir="ltr">
        <div class="sidebar-header d-flex">
            <span class="title-full flex-fill pt-2 fs-5" id="sidebar-title">Admin</span>
            <button type="button" id="sidebarCollapse" class="btn">
                <i class="bi bi-list"></i>
            </button>
        </div>
		
        ...
		
    </div></div></nav>
	<script src="/assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
</collapsable-sidebar>

Here is my javascript:

class CollapsableSidebar extends HTMLElement {
  // ...
  connectedCallback() {
      const templateCloned = template.content.cloneNode(true);

      // Add the "style.css" file
      const cssImport = $(`<link rel="stylesheet" href="${dirname}/style.css" />`);
      $(templateCloned).prepend( cssImport );
      const shadow = this.attachShadow({mode : 'open' });
      shadow.append( templateCloned );

      $(shadow.getElementById("sidebar")).mCustomScrollbar({
        theme: "minimal",
        alwaysShowScrollbar: 1,
      });
  }
}

What did I missed in the configuration of the plugin ?

@jchome jchome changed the title Integration in Web Element Integration in Web Component Dec 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant