Search code examples
dartdart-polymer

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

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.

enter image description here

enter image description here

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();
Solution

  • 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.