Manually hiding and showing drawer-panel in core-scaffold using dart

Question

I'm experimenting with the core-scaffold component in polymer-dart, I like the layout, but I don't want the menu on the left to be visible if not logged in.

What is the correct way of hiding / showing that menu bar? (here's a sample of the drawer panel hiding and showing: https://www.polymer-project.org/samples/layout-elements/scaffold-app.vulcanized.html)

<core-scaffold>
    <core-header-panel id="menu-panel" navigation flex>


        <core-toolbar id="navheader">
            <span>Menu</span>
        </core-toolbar>
        <core-menu>
            <core-item label="Abc" on-click="{{abcClicked}}"></core-item>
            <core-item label="Def" on-click="{{defClicked}}"></core-item>
            <core-item label="Ghi" on-click="{{ghiClicked}}"></core-item>
        </core-menu>
    </core-header-panel>

    <span tool>{{title}}</span>
    <paper-tabs class="bottom fit" selected="0">
        <paper-tab on-click="{{abcClicked}}" class="">ABC</paper-tab>
        <paper-tab on-click="{{defClicked}}" class="">DEF</paper-tab>
        <paper-tab on-click="{{ghiClicked}}" class="">GHI</paper-tab>
    </paper-tabs>

    <div class="content">
        If drawer is hidden, press button to display drawer.

        <paper-button role="button" on-click="{{simulateLoginClicked}}" class="ink" affirmative raised>
            Simulate Login
        </paper-button>

        <paper-button role="button" on-click="{{simulateLogoutClicked}}" class="ink" affirmative raised>
            Simulate Logout
        </paper-button>


    </div>
</core-scaffold>

I'm using the querySelector to find the panel in the dom:

 CoreHedaerPanel chp = shadowRoot.querySelector("#menu-panel");

I don't see a show / hide method, just a hidden property, the hidden property if set to true only makes the content of the drawer panel disappear, the drawer panel itself is still there.

Update:

I'm doing:

CoreScaffold e = shadowRoot.querySelector('core-scaffold');
e.closeDrawer();

Stepping through the code, I can see closeDrawer exists, stepping into it I can see it's going into the method, but the drawer doesn't close. Same goes for togglePanel.

Just to make sure, I've deleted .pub and did a pub cache repair:

pub cache repair
]Downloading analyzer 0.22.4...
Downloading args 0.12.2+1...
Downloading barback 0.15.2+2...
Downloading browser 0.10.0+2...
Downloading code_transformers 0.2.3+2...
Downloading collection 1.1.0...
Downloading core_elements 0.4.0+6...
Downloading crypto 0.9.0...
Downloading csslib 0.11.0+2...
Downloading custom_element_apigen 0.1.3...
Downloading event_bus 0.3.0+2...
Downloading html5lib 0.12.0...
Downloading http 0.11.1+1...
Downloading http_parser 0.0.2+5...
Downloading json_object 1.0.18+2...
Downloading less_dart 0.1.3...
Downloading less_dart 0.1.4...
Downloading logging 0.9.2...
Downloading logging 0.9.3...
Downloading observe 0.12.2...
Downloading paper_elements 0.5.0...
Downloading path 1.3.0...
Downloading path 1.3.1...
Downloading polymer 0.15.1+5...
Downloading polymer_expressions 0.13.0+1...
Downloading pool 1.0.1...
Downloading quiver 0.18.2...
Downloading smoke 0.2.1+1...
Downloading source_maps 0.10.0+1...
Downloading source_span 1.0.2...
Downloading stack_trace 1.1.1...
Downloading stagehand 0.1.5+2...
Downloading string_scanner 0.1.3...
Downloading template_binding 0.13.1...
Downloading usage 0.0.5...
Downloading utf 0.9.0+1...
Downloading watcher 0.9.3...
Downloading web_components 0.9.0+1...
Downloading yaml 2.1.2...

So I'm either doing something wrong, or I've hit a bug ...

Have logged a bug in the meantime: https://github.com/dart-lang/polymer-dart/issues/12 and here: https://code.google.com/p/dart/issues/detail?id=22077&thanks=22077&ts=1421355859 not sure which one is the more official place to log it.

Update

Solution to my problem is:

To close the drawer:

  CoreScaffold e = shadowRoot.querySelector('core-scaffold');
  e.shadowRoot.querySelector('core-drawer-panel').forceNarrow = true;
  e.closeDrawer();

and to open the drawer again without overlay:

  CoreScaffold e = shadowRoot.querySelector('core-scaffold');
  e.shadowRoot.querySelector('core-drawer-panel').forceNarrow = false;
  e.openDrawer();

Answer 1

The issue here is when in non-responsive mode core-drawer-panel ignores all calls to togglePanel (it will always be visible). You can force responsive mode regardless of the size by setting .forceNarrow = true.

Answer 2

I hope this doesn't break SO rules. Anyway, my twopenny worth. I have tried:

CoreScaffold scaff = document.querySelector('core-scaffold');
scaff.closeDrawer();

scaff is indeed the correct element (I see it in debug), and closeDrawer() is called (I step through) - but the drawer does not close.

I thought I would try to set the width of the drawer:

CoreDrawerPanel cdp=scaff.shadowRoot.querySelector('core-drawer-panel');
cdp.drawerWidth ="70";

but that just makes the window go white=empty. (cdp is the correct element.)
It's taken me a while to discover how to get these two elements, so I hope that's a bit of help at least.
Steve

Answer 3

I guess you want to call closeDrawer() on <core-scaffold> at startup and on login one of the methods togglePanel() or openDrawer(). (see "Methods" section in https://www.polymer-project.org/docs/elements/core-elements.html#core-scaffold.

You can do this either in main() (see how to implement a main function in polymer apps) or wrap <core-scaffold> in a custom Polymer element and put the code in the ready() lifecycle method.