It might be a good idea to add "swipe from the side" functionality to the side menus.
it is standard behavior in Android and Google apps and will make the components much more appealing to use in mobile web apps.
Great job guys!

http://stackoverflow.com/questions/24465169/position-polymer-core-drawer-panel-drawer-panel-to-the-right

Since the original poster didn't file the issue, I thought I would.

I've a google-map component that fully covers the main area:

<core-drawer-panel>
  <div drawer></div>
  <div main>
    <google-map fit latitude="37.77493" longitude="-122.41942"></google-map>
  </div>
</core-drawer-panel>

The issue is when the drawer is swiped from the edge, the google-map catches the event (down) and starts to pan the map.

Swiping to open the drawer doesn't work smoothly on the iPhone. Some times I get a only a small panel on the left, which can't be opened or closed.

It also frequently confilicts with the swipe back of Safari.

So I tried to disable it completely, but disabling doesn't completely disable the swipe behaviour.

Not sure if that the right solution - but after adding adding a check for disabled to touchStart

touchStart: function (e) {
  if (this.disableSwipe) return;

it seems to be disabled.

Can this event be made available please :)
I need a event that triggers when the drawer closes automatically or manually by the user in case forceNarrow is set.

Hi,

I'm trying to build an app with cordova. I tried it with android and ios emulator, and i can't swipe to open or close it. The drawer appear a bit when I touch the left edge of the app but I can't swipe it open

To start and stop edge peeking, you call startEdgePeek() and stopEdgePeak(). Pretty sure mountains have nothing to do with this. Not sure if this is fixed in the 0.8 already or not.

I.e. no #scrim. See Inbox's behavior: when a drawer is active, you can interact w/ the main content (and the drawer goes away on tap)

cc/ @chrisconover

I've defined a responsive width of 800px. This should show the drawer in landscape mode, but hide it in portrait mode.

It works correctly for the initial view. But nothing is adjusted when the orientation is changed later.

Expected result: after an oriantation change the drawer should be shown/hidden based on the current orientation.

This problem is caused by googlearchive/core-media-query#2 (including a potential fix)

When I click on menu button then togglePanel scroll to anchor link only on mobile, see in mobile emulation on Chrome.
I tested core-drawer-toggle and drawerPanel.togglePanel();.

Click here on Youtube video link on sidebar then on menu button...
http://polymer-starter-kit.startpolymer.org/#youtube-video

Currently dragging and releasing the drawer will use a fixed animation each time, making the experience feel somewhat unresponsive

Using an appropriately-durationed ease out transition will in the vast majority of cases mask this problem (drag + release -> fast, probably better than drag + release -> slow)

Original
Ease out

Setup:

    <core-drawer-panel>
      <core-header-panel drawer>
        <div> Toolbar </div>
        <div> Drawer content... </div>
      </core-header-panel>
      <core-header-panel main>
        <div> <core-icon-button icon="menu" core-drawer-toggle/> </div>
        <div> Main content... </div>
      </core-header-panel>
    </core-drawer-panel>

The 20px width of core-drawer-panel>#edgeSwipeOverlay can make taps of @core-drawer-toggle seem non-responsive.

@core-drawer-toggle's container can be given padding/margin-left to mask the issue but the icon looks a bit out-of-place.

I don't feel like there is any great "solution". What about an attribute to specify #edgeSwipeOverlay.style.top?? I'm guessing some might frown upon the swipe area not spanning the full viewport height.

0 down vote favorite

I would like to ask help with core-drawer-panel toggleAttribute. I am in course of developing a web app using Polymer, and I need to use at least two core-drawer-panel elements. This means that I need to modify the toggle trigger of the drawers, but if I perform this modification as shown in this code snippet below, it is not working:

<core-drawer-panel toggleAttribute="custom-drawer-toggle">
    <core-header-panel drawer>
        <core-toolbar>
            <div>Application</div>
        </core-toolbar>
        <div> Drawer content... </div>
    </core-header-panel>
    <core-header-panel main>
        <core-toolbar>
            <core-icon-button icon="menu" custom-drawer-toggle></core-icon-button>
            <div>Title</div>
        </core-toolbar>
        <div> Main content... </div>
    </core-header-panel>
</core-drawer-panel>

Can someone point me in the direction how this can be done properly?

Thank you very much!
molnarb14

e.g.

<core-drawer-panel>
  <nav drawer> Drawer panel... </nav>
  <main> Main panel... </main>
</core-drawer-panel>

or

<core-drawer-panel>
  <nav drawer> Drawer panel... </nav>
  <div role="main" > Main panel... </div>
</core-drawer-panel>

Now when I'm trying to open the drawer by swipe (on desktop) I'm selecting the text in the content panel. To avoid that I would have to add user-select: none css attribute to the whole panel or just add it when the swipe happens and remove after that. It would be nice enhancement if it's done inside core-drawer-panel element. It could detect if the swipe happened close enough to the left side and then add proper class with user-select: none. Disabling text selection is not good idea in all cases in desktop web applications so it should be done only when swiping.

Could we add support for 2 drawers, one left and one right? This is a common layout on mobile to handle offscreen menu and notifications.

I want to apply right and left drawer. How can I achieve it.

Like this for example.. :( and it's ugly

I need a drawer to be on the bottom, but can't do it with as is.

The docs say to use the rightDrawer attribute but the version that bower installs says to add the right-drawer class.

A release would be appreciated so bower will install the latest changes :)

The demo page doesn't work on Mobile Safari and iOS Chrome. The panel will open, but it won't close on the demo.

http://www.polymer-project.org/components/core-drawer-panel/demo.html

Here is a codepen that demonstrates the issue.

core-drawer-panel uses "touch-action: pan-y" to support edge-swiping to open/close the drawer. This is preventing (touch-based) horizontal scrolling within content that needs it.

My current workaround is setting disableSwipe="true". At a glance, my only thoughts for a patch are:

• set touch-action: pan-y in an appropriate eventDelegate
  • downHandler()?
  • startEdgePeak()?
• unset touch-action: pan-y in an appropriate eventDelegate
  • upHandler()?
  • stopEdgePeak()?

Thanks for any input.

Can the drawer panel listen for events that are bubbled up to it to toggle, or at least allow for false attribute values?

In my case I want to have a header with dynamic content through angular. I would like to either be able to add it to my ng-click, or have an angular binding to the core-drawer-toggle attribute.

From the source it looks like on-tap just checks if the target has the attribute.

tapHandler: function(e) {
      if (e.target && this.toggleAttribute && 
          e.target.hasAttribute(this.toggleAttribute)) {
        this.togglePanel();
      }
    },

Could this safely be changed to

tapHandler: function(e) {
      if (e.target && this.toggleAttribute && 
          e.target.getAttribute(this.toggleAttribute) !== null && 
           e.target.getAttribute(this.toggleAttribute) !== "false") {
                   this.togglePanel();
      }
    }

(or some variation of this)
If the attribute is there but doesn't have a value getAttribute will return "", and if the value is false it wont toggle, and if the attribute is not there it will return null, and not toggle.

I wanted to use the narrow layout to force the sidebar to always be offscreen and animate in. I was able to achieve this by setting a really high responsiveWidth but I was wondering if there's a more straightforward way to achieve this effect?

When an object enters the frame, ensure that it's moving at its peak velocity
...
Similarly, when an object exits the frame, maintain the object’s velocity

• Material design spec > Animation > Authentic motion > Special cases: Entering and exiting frame

i.e. enter=ease-out, exit=ease-in

Can core-responsive-change be fired after the narrow animation is done please?

".right-drawer.transition > #drawer" duplicates ".transition > #drawer" with identical contents

.transition > #drawer {
  transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
  transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
}

...

.right-drawer.transition > #drawer {
  transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
  transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
}

Related to: #3

The tap (outside the core-drawer-panel) bubbles up the DOM, and doesn't just close the panel (expected) but also fires an onClick for whatever else was touched (unexpected).

Related? jquery-archive/PEP#92

core-drawer-panel.css has a #main {position:absolute;...} rule. When using a shadowdom polyfill, this rule falls through to the paper-dialog #main node. This causes conflicting rules. This also applies to any contents which contain a #main id. I was able to work around this by applying a /deep/ rule to my paper-dialog which forces the position to fixed. The proper fix would be to make the core-drawer-panel #main rule more specific.

Ex:
core-drawer-panel.css

#main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

would become

core-selector > #main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

How to reproduce the issue:

1. Open the official demo: https://www.polymer-project.org/components/core-drawer-panel/demo.html
2. In the console:

drawer = document.querySelector('core-drawer-panel')
drawer.closeDrawer()
drawer.selected // 'main'

But nothing happened, the drawer does not close.

Am I misunderstanding the closeDrawer method here or it is truly an issue?

See demo here: https://www.polymer-project.org/samples/layout-elements/scaffold-app.vulcanized.html

The demo uses core-drawer-panel. A menu hamburger button should dusplay to the left of "Title", however it is currently display:none.

I forced display:none off, to see if the next functionality worked: Clicking the Menu button should toggle the left menu. It doesn't, and the core-drawer-panel is stuck in the menu/expanded state

Drawer width is hard coded in the css file. Is there a way to change it in the HTML tag or should I change the css file?

I have tested Core Element, Drawer panel locally and on the demo site. It doesnt seem to be working.

togglePanel should trigger on-core-responsive-change as wel. Currently it only gets triggered when you remove forceNarrow and resize the window.

If I look at the drawer in an Android app, I can drag it open/closed with a finger, as well as scrub between the open and closed states. It would be awesome if core-drawer-panel could do the same thing.

The use case is similar to how core-scroll-header fires events in-step with the scrolling. Users can latch onto those events and provide additional animations. Users may want to do the same while dragging core-drawer-panel.

I hate fighting against polymer because I always lose. As you can see in the example, fixing the height will be a struggle.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="mobile-web-app-capable" content="yes">

        <title>Test</title>

        <script src="../bower_components/webcomponentsjs/webcomponents.js"></script>

        <link rel="import" href="../bower_components/polymer/polymer.html">
        <link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
        <link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
        <link rel="import" href="../bower_components/core-icon-button/core-icon-button.html">

    </head>
    <body>
        <template is="auto-binding">
            <core-toolbar>
                <div flex>Title</div>
                <core-icon-button icon="perm-identity" on-tap="{{draw}}"></core-icon-button>
            </core-toolbar>
            <core-drawer-panel rightDrawer forceNarrow style="margin-top:100px">
                <div drawer style="padding-left:10px; background:white;">
                                      Drawer... 
                </div>
                <div main> 
                    Main panel... 
                </div>
            </core-drawer-panel>
        </template>
        <script>
            var t = document.querySelector('template');
            t.draw = function(e) {
              document.querySelector('core-drawer-panel').togglePanel()
            }
        </script>
    </body>
</html>