Error after opening drawer

[malakada]

I currently have pikabu configured and working great in a project locally. When the screen is resized smaller, I set up and enable pikabu, and when it becomes larger I undo all of that and display my UI normally for desktop view. This is working fine, except for that it doesn't return my UI back to normal desktop view after I pull a drawer out. I get this error in my console:

Uncaught TypeError: Cannot read property 'scrollHeight' of undefined

So, doing some digging, I found that it's looking for this:

https://github.com/mobify/pikabu/blob/master/src/pikabu.js#L516-L517

And that the sidebar is set here:

https://github.com/mobify/pikabu/blob/master/src/pikabu.js#L417

I found that when I accessed my pikabu object, that pikabu.activeSidebar contained null. Fantastic! "I can solve this!" I thought. So I manually called pikabu.openSidebar('left') which worked, but I still got the Cannot read properly 'scrollHeight' of undefined error. I checked pikabu.activeSidebar to see what it held, and it was holding left as expected. Hmn.

So then I took a look at pikabu.$sidebars and found that it was indeed holding an object with left and right. I tried running pikabu.$sidebars['left'] then, and got []. I then tried pikabu.$sidebars.left and still got [].

Any idea how to solve this? Is there something else I should be doing? This is how I am initing pikabu:

    self.pikabu = new Pikabu({
      viewportSelector: '.body-chatter',
      widths: {
        left: '90%',
        right: '90%'
      },
      selectors: {
        element: '#candy'
      }
    });

I have also set my m-pikabu-sidebar m-pikabu-left (and right) classes, as well as m-pikabu-nav-toggle and data-role='left' stuff on the toggle buttons.

Any input/help/advice would be greatly appreciated. Thanks!

[tedtate]

Hi @melissanoelle,

Thanks for reporting this issue!

I'm wondering are the m-pikabu-left and m-pikabu-right elements always available on the page or are you dynamically adding/removing them based on the browser size? It seems like Pikabu is losing access to that DOM element somewhere along the way.

Is it possible for you to post a version of the HTML/DOM that you are trying to run Pikabu on? Also, right after you run the code to initialize Pikabu, if you check self.pikabu.$sidebars.left is it still empty or is it populated at that point?

Cheers, Ted

[malakada]

Thanks for your response! I won't be able to respond to this until Monday though. Just thought I'd give you a heads up.

[malakada]

You are correct with your guess that I am unsetting and then resetting a new m-pikabu-right element as my UI changes. There is not a period of time where it is ever not set for a long period of time though, only that time in between removing it from one element and adding it to another.

I don't think it's possible for me to post access of what I'm working on anywhere online where you could reach it, unfortunately. Right after pikabu is initialized, pikabu.$sidebars.left is [].

[kpeatt]

Hey @melissanoelle,

Would it be possible to replace the contents of the right sidebar without replacing the whole sidebar? That might get around this issue until we figure out a method for re-initialization.

[malakada]

Unfortunately, it's not. The left panel does something like that, but I'm using pikabu on top of the Candy chat framework, and the right drawer contents aren't redrawn for each chat room, they're hidden to allow it to maintain state for the users in the roster.

On Sat, Sep 27, 2014 at 1:53 PM, Kyle Peatt [email protected] wrote:

Hey @melissanoelle https://github.com/melissanoelle,

Would it be possible to replace the contents of the right sidebar without replacing the whole sidebar? That might get around this issue until we figure out a method for re-initialization.

— Reply to this email directly or view it on GitHub https://github.com/mobify/pikabu/issues/40#issuecomment-57065384.

[malakada]

Did you need anything from me on this?

[tedtate]

@melissanoelle I don't think so. With the current implementation we don't have a way for you to re-create the Pikabu if elements that it relies upon are added or removed from the page. It works well if you are able to keep the structure of the page static but is lacking otherwise.

I'm wondering if maybe the best course of action would be to delete/re-creating the Pikabu when your document structure changes.

In future versions of Pikabu this use-case is something we want to be able to handle but at the moment I don't think we do a good job of it.