I have followed the polymer demo to create a navigation drawer with a icon to open it on click. The demo only requires one click to open up the navigation drawer, but when I try it with my own code it required double clicks to open up. Any reason why? I have copied the code straight up from the demo. The function openDrawer() looks correct, but opening the drawers a double click. I don't know why it won't open on the first click.
<body fullbleed>
<template is="auto-binding" id="tmp">
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer id="drawer" mode="seamed">
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu selected="{{option}}" valueattr="data-category">
</core-menu>
</core-header-panel>
<core-header-panel main id="main" mode="seamed">
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu" onclick="openDrawer()"></paper-icon-button>
<span flex>Booklet</span>
</core-toolbar>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var pageStart = document.querySelector('#tmp');
pageStart.option = 'home';
});
function openDrawer() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
}
</script>
</body>
I see a few issues.
Because you have everything in an auto-binding template, you need to listen for template-bound instead of polymer-ready. Only when template-bound fires will your elements have been stamped to the DOM.
The other issue is that you're adding your click listener INSIDE your openDrawer method. You want to add the click listener in the template-bound handler.
Here's a jsbin example
<body fullbleed>
<template is="auto-binding" id="tmp">
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer id="drawer" mode="seamed">
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu selected="{{option}}" valueattr="data-category">
<core-item>Foo</core-item>
<core-item>Bar</core-item>
<core-item>Baz</core-item>
</core-menu>
</core-header-panel>
<core-header-panel main id="main" mode="seamed">
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<span flex>Booklet</span>
</core-toolbar>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
document.addEventListener('template-bound', function() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
});
</script>
</body>
Related
I have a paper-drawer-panel in one element and a toolbar in a child element. On the toolbar is a menu-button, that should toggle the drawer-panel but it does not. How can I tell the paper-drawer-panel to accept a command from the child element?
Parent-element:
<dom-module id="nav-drawer">
<template>
<paper-drawer-panel drawerFocusSelector="">
<div drawer id="drawerbox">
Contents of drawer panel here.
</div>
<div main>
<tool-bar></tool-bar>
</div>
<paper-drawer-panel>
</template>
</dom-module>
Child element:
<dom-module id="tool-bar">
<template>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
</paper-toolbar>
</template>
</dom-module>
Thanks for your help. I'm new to Polymer.
I found the answer myself:
The tool-bar element I changed as follows, adding attributes and an on-tap function.
<dom-module id="tool-bar" attributes="togdraw">
<template>
<paper-toolbar>
<paper-icon-button icon="menu" on-tap="toggleDrawer"></paper-icon-button>
</paper-toolbar>
</template>
<script>
.....
toggleDrawer: function() {
this.fire('eventFromChild',{togdraw:"drawer"});
}
....
</script>
</dom-module>
And the nav-drawer I changed like accordingly:
<dom-module id="nav-drawer">
<template>
<paper-drawer-panel drawerFocusSelector="" selected="{{selectPanel}}">
<div drawer id="drawerbox">
Contents of drawer panel here.
</div>
<div main>
<tool-bar></tool-bar>
</div>
<paper-drawer-panel>
</template>
<script>
....
properties: {
selectPanel: String
},
ready: function() {
this.addEventListener('eventFromChild', this.toggleDrawer);
},
toggleDrawer: function(event,selectPanel) {
this.selectPanel = event.detail.togdraw;
return selectPanel;
}
....
</script>
</dom-module>
Using the template from starter kit 2, is it possible to have the app drawer below the app-header? Right now the app drawer starts from the top of viewport and is columnized next to app-header.
I would like my app to be like google keep and google cloud console where the app header spans the entire width of the viewport and the app drawer begins underneath.
After reading the element catalog for app-layout, I did not see a offical api/attribute to set this. I've tried a few things but no success:
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<app-drawer>
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
</iron-selector>
</app-drawer>
Basically you need to use an app-drawer-layout inside an app-header-layout.
Here is a JSBin with the desired layout.
And the code itself:
<dom-module id="test-app">
<template>
<style>
:host {
display: block;
--app-primary-color: #3F51B5;
}
app-header {
background-color: var(--app-primary-color);
color: white;
}
app-drawer {
top: 64px;
--app-drawer-content-container: {
padding: 0px;
background-color: #eee;
};
}
</style>
<app-header-layout fullbleed>
<app-header fixed shadow>
<app-toolbar id="toolbar">
<paper-icon-button icon="menu" on-tap="_onTap"></paper-icon-button>
<div main-title>Stormwind</div>
</app-toolbar>
</app-header>
<app-drawer-layout>
<app-drawer id="drawer">
drawer content
</app-drawer>
<div>
main content
</div>
</app-drawer-layout>
</app-header-layout>
</template>
<script>
Polymer({
is: 'test-app',
properties: {
},
ready: function() {
},
attached: function() {
},
_onTap: function() {
this.$.drawer.toggle();
}
});
</script>
</dom-module>
NOTE
You need to manually handle the drawer button (the drawer-toggle property won't work).
Is there anything like drawer-toggle except that it doesn't toggle the menu? I want to add a similar attribute to paper-icon-button to show/hide the icon button based on whether the drawer is shown or not. I know I can get the boolean from app-drawer-layout.narrow, but my code is not exactly like the following and it's not easy to have an reference to <app-drawer-layout>. The following is just an example of providing the context of what I meant by drawer-toggle.
<app-drawer-layout>
<app-drawer>
drawer-content
</app-drawer>
<app-header-layout>
<app-header>
<app-toolbar>
<paper-icon-button icon="close" drawer-toggle></paper-icon-button>
<div main-title>App name</div>
</app-toolbar>
</app-header>
main content
</app-header-layout>
</app-drawer-layout>
You can bind a boolean property to the app-drawer-layout's narrow property and use this with an observer to show/hide the paper-icon-button. Example:
<dom-module id="test-app">
<template>
<style>
.hide {
display: none;
}
</style>
<app-drawer-layout fullbleed narrow="{{visible}}">
<app-drawer id="drawer">
drawer content
</app-drawer>
<app-header-layout>
<app-header>
<app-toolbar>
<paper-icon-button id="button" icon="menu" on-tap="_onTap"></paper-icon-button>
<div class="title" main-title>App name</div>
</app-toolbar>
</app-header>
<div>
main content
</div>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'test-app',
properties: {
visible: {
type: Boolean,
observer: '_visibleChanged'
}
},
_onTap: function() {
console.log(this.visible);
this.$.drawer.toggle();
},
_visibleChanged: function(value) {
this.toggleClass('hide', !value, this.$.button);
}
});
</script>
</dom-module>
Note that now you need to manually handle the drawer toggle (_onTap function).
Our paper-tabs are generated dynamically, how can we select the first tab by default and also fire the change event so that the iron page content is visible.
<paper-tabs id="scrollableTabs" selected={{selected}} scrollable >
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-tab on-click="listLiveTokens" >[[queue.queueName]]</paper-tab>
</template>
</paper-tabs>
list: function() {
this.loading=!this.loading;
this.$.list.url = "http://apicall";
var tmp = this.$.list.generateRequest();
console.log(tmp)
},
this script fetches the tab content from the api call
<iron-pages selected="{{selected}}">
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-material elevation="1">
<iron-list items="[[queueTokens]]" as="token">
<template>
<div>
<div class="item" tabindex="0">
<span class="avatar" >[[token.tokenNumber]]</span>
<a href$="{{_getDetailsLink(token.tokenId,token.tokenNumber,token.userName,token.statusType,token.userMobile,token.joinDate)}}">
<div class="pad">
<div class="primary">[[token.userName]]</div>
<div class="secondary">[[token.userMobile]]</div>
<div class="secondary dim">[[token.notes]]</div>
<div class="secondary dim">[[token.joinTime]]</div>
</div>
</a>
<iron-icon icon$="[[iconForItem(sminq)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-material>
</template>
</iron-pages>
An event will fire every time the dom-repeat changes. You could listen to changes and set selected to 0.
<template is="dom-repeat" items="[[liveQueues]]" as="queue" on-dom-change="setSelected">
In your prototype you define the function.
setSelected: function() {
this.$.scrollableTabs.selected = 0;
}
Note that the function is called every time you update liveQueues and you may not want to reset the tabs every time.
The iron pages should update automatically, if you have data-binding to selected.
Well, I think that ready function is the way to initialize !
ready: function() {
this.selected = 0;
}
How to place paper-icon-buttonin right corner of application header ?
Now my icon floats under title and it's not looking good.
Screenshot below
My element Code:
<polymer-element name="sidebar-layout" attributes="selected" noscript>
<template>
<link rel="stylesheet" href="/assets/css/sidebar-layout.css">
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Menu</core-toolbar>
<core menu theme="core-light-theme">
<core-item icon="info-outline" label="Notes" active?="{{selected == 'notes-page'}}"><a is="pushstate-anchor" href="/notes"></a></core-item>
<core-item icon="key" label="Logowanie" active?="{{selected == 'login-page'}}}}"><a is="pushstate-anchor" href="/login"></a></core-item>
<core-item icon="key" label="Pozalogowaniu" active?="{{selected == 'main-page'}}}}"><a is="pushstate-anchor" href="/main-page"></a></core-item>
</core>
</core-header-panel>
<div tool>
<content select=".title"></content>
<paper-icon-button id="morebutton"
icon="more-vert"></paper-icon-button>
</div>
<div class="content">
<content></content>
</div>
</core-scaffold>
</template>
</polymer-element>
Though you can do this using CSS pretty nicely here's a workaround that makes more semantic sense, adding a flex attribute to the <content> element or a <span> tag like I have dont below.
<polymer-element name="sidebar-layout" attributes="selected" noscript>
<template>
<link rel="stylesheet" href="/assets/css/sidebar-layout.css">
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Menu</core-toolbar>
<core menu theme="core-light-theme">
<core-item icon="info-outline" label="Notes" active?="{{selected == 'notes-page'}}"><a is="pushstate-anchor" href="/notes"></a></core-item>
<core-item icon="key" label="Logowanie" active?="{{selected == 'login-page'}}}}"><a is="pushstate-anchor" href="/login"></a></core-item>
<core-item icon="key" label="Pozalogowaniu" active?="{{selected == 'main-page'}}}}"><a is="pushstate-anchor" href="/main-page"></a></core-item>
</core>
</core-header-panel>
<div tool>
<content select=".title"></content>
<span flex></span>
<paper-icon-button id="morebutton"
icon="more-vert"></paper-icon-button>
</div>
<div class="content">
<content></content>
</div>
</core-scaffold>
</template>
</polymer-element>
This <span> tag with the flex attribute takes just the amount of space that it lets the icon fit in the far right.
More about the flex attribute at:
https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html
https://www.polymer-project.org/0.5/docs/elements/layout-elements.html
You should learn about layout attributes.
Specifically in this case the attribute justified does the job
<div horizontal layout justified tool>
<content select=".title"></content>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
</div>