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.

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

score 2 · Answer 1 · edited May 23 '17 at 10:27

2

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.

edited May 23 '17 at 10:27

Community

1
1

answered Jan 15 '15 at 07:25

Günter Zöchbauer

623,577
216
2,003
1,567

Meh, didn't know you could do that on the scaffold component itself. Thanks Günter! – Jan Vladimir Mostert Jan 15 '15 at 08:45
1

You could also wrap `` with ` – Günter Zöchbauer Jan 15 '15 at 08:47
Awesome, that almost looks like a – Jan Vladimir Mostert Jan 15 '15 at 08:52
` – Günter Zöchbauer Jan 15 '15 at 08:53
1

` – Günter Zöchbauer Jan 15 '15 at 08:56
1

Only testing it now, seems jsElement.callMethod('closeDrawer', []); } doesn't actually close the drawer as it's supposed to, will log a bug. – Jan Vladimir Mostert Jan 15 '15 at 20:43
Logged a bug, you can vote for it here: https://code.google.com/p/dart/issues/detail?id=22077&thanks=22077&ts=1421355859 – Jan Vladimir Mostert Jan 15 '15 at 21:06
https://github.com/dart-lang/core-elements/issues would be the right place for this bug report. Where do you call the code from? – Günter Zöchbauer Jan 15 '15 at 21:11
I'm calling the code from a button at the moment, click button to open drawer, click button to toggle the drawer and click button to close the drawer just to be sure that it's not due to polymer not being initialised yet and I'm getting the same results. Will move it into a main function at startup once the paper-button's on-click can make it move in and out. – Jan Vladimir Mostert Jan 15 '15 at 21:15
Ok, I also think it can't be a timing issue then. – Günter Zöchbauer Jan 15 '15 at 21:16

score 2 · Accepted Answer · answered Jan 15 '15 at 21:25

2

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.

answered Jan 15 '15 at 21:25

Jake MacDonald

1,348
6
7

shadowRoot.querySelector('core-drawer-panel').forceNarrow = true; throws a stacktrace and so does: CoreScaffold e = shadowRoot.querySelector('core-scaffold'); e.shadowRoot.querySelector('core-drawer-panel').forceNarrow = true; Exception: Uncaught Error: Class 'CoreDrawerPanel' has no instance setter 'forceNarrow='. NoSuchMethodError: method not found: 'forceNarrow=' How do I set forceNarrow in dartCode and how would I set it in the HTML? Should I log an enhancement request to document this feature ? – Jan Vladimir Mostert Jan 15 '15 at 21:58
Seems my packages were a little bit out of date, updated to the latest version of polymer and paper_elements and is now working after a pub upgrade. – Jan Vladimir Mostert Jan 16 '15 at 05:24

score 1 · Answer 3 · answered Jan 15 '15 at 18:49

1

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

answered Jan 15 '15 at 18:49

Lymp

933
1
7
20

It seems to work for Jan therefore I guess it would be better to create a new question and put your code there. How do you invoke the code (custom main method, app-element, auto-binding-dart)? – Günter Zöchbauer Jan 15 '15 at 19:01
I'm actually only getting around to testing it now, I'm using: CoreScaffold scaff = shadowRoot.querySelector('core-scaffold'); IntelliJ doesn't give me an autocomplete on scaff.closeDrawer it and it doesn't close for me either. I don't actually see a CoreScaffold.dart anywhere, unless it's buried in another file. Busy investigating ... – Jan Vladimir Mostert Jan 15 '15 at 20:11
Only testing it now, seems jsElement.callMethod('closeDrawer', []); } doesn't actually close the drawer as it's supposed to, will log a bug. – Jan Vladimir Mostert Jan 15 '15 at 20:44
Logged a bug, you can vote for it here: https://code.google.com/p/dart/issues/detail?id=22077&thanks=22077&ts=1421355859 – Jan Vladimir Mostert Jan 15 '15 at 21:05
@Lymp, it seems my packages were a little bit out of date, updated to the latest version of polymer and paper_elements and is now working after a pub upgrade. See the discussion on github: https://github.com/dart-lang/polymer-dart/issues/12 – Jan Vladimir Mostert Jan 16 '15 at 05:25
Hi Jan, @GünterZöchbauer. Many thanks. I'm not 100% clear on the position of that thread. (I'm a beginner - big learning curves on many fronts.) Anyway, on a positive note, I am now using a toggle button to [successfully] open and close the drawer, using cdp.drawerWidth="50px"; (and 200px). I was missing the 'px' previously. This is actually quite useful, because I can "leave the drawer open a little", so the user has access to the menu in it. – Lymp Jan 19 '15 at 18:40

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

3 Answers3