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>
Related
I am trying to implement a paper-dialog box that will reveal itself when a paper-fab is tapped in the image below:
my app's main screen
but I can't get the paper-dialog to open.
I have implemented paper-dialog into my app as following:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymerfire/firebase-query.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-view1">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-fab{
position:fixed;
right:20px;
bottom:68px;
--paper-fab-keyboard-focus-background:--accent-color;
}
</style>
<firebase-auth
id="auth"
user="{{user}}"
provider=""
status-known="{{statusKnown}}"
on-error="handleError">
</firebase-auth>
<firebase-query
id="query"
path="/posts"
data="{{posts}}">
</firebase-query>
<div class="card">
<h1>Post</h1>
<ul id="post-list">
<template is="dom-repeat" items="[[posts]]" as="post">
<li>
<p class="content">[[post.body]]</p>
</li>
</template>
</ul>
</div>
<paper-fab icon="add" onclick="dialog.open()"></paper-fab>
<paper-dialog id="dialog">
<paper-textarea id="post" label="Write your post here..."></paper-textarea>
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button on-tap="post" id="btnPost" raised class="indigo" hidden$="[[!user]]">Post</paper-button>
</paper-dialog>
</template>
<script>
Polymer({
is: 'my-view1',
properties:{
user:{
type: Object
},
statusKnown:{
type: Object
},
posts: {
type: Object
}
},
post: function() {
this.$.query.ref.push({
"Uid": this.user.uid,
"body": this.$.post.value
});
this.$.post.value = null;
}
});
</script>
</dom-module>
<paper-fab icon="add" onclick="dialog.open()"></paper-fab>
<paper-dialog id="dialog">
<paper-textarea id="post" label="Write your post here..."></paper-textarea>
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button on-tap="post" id="btnPost" raised class="indigo" hidden$="[[!user]]">Post</paper-button>
</paper-dialog>
This snippet here are taken from the demo on this page:
https://www.webcomponents.org/element/PolymerElements/paper-dialog/v1.1.0/demo/demo/index.html
but when I actually tap on the paper-fab, I get the following error:
Uncaught ReferenceError: dialog is not defined
at HTMLElement.onclick (view3:1)
onclick # view3:1
Does anyone have any idea how I can make the paper-dialog open when the paper-fab is tapped? I suppose I am missing some includes, but I cannot figure out which one.
at first, don't use onclick. There are Polymer event attributes like on-click or on-tap. Second, you should call function which will open the selected dialog
Example:
<paper-fab icon="add" on-tap="_openDialog"></paper-fab>
and inside script
_openDialog: function() {
this.$.dialog.open();
}
this.$.dialog find element with id dialog and call function open
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).
My code with swipable-container and dom-repeat of firebase-data
<iron-swipeable-container id="teamchat">
<paper-card class="swipe item blue">
<template is="dom-repeat" items="[[tcmmessages]]" as="tcmmessage">
<div class="card-content">
<b>[[tcmmessage.teamname]]</b><br>
[[tcmmessage.beitrag]]<br>
<span class="chatmetadata">von [[tcmmessage.username]]
• [[tcmmessage.update]] • [[tcmmessage.uptime]] </span>
</div>
</template>
</paper-card>
</iron-swipeable-container>
I have defined a listener
listeners: {
'teamchat.iron-swipe': '_onTeamChatSwipe'
},
and remove the firebase-data with '_onTeamChatSwipe'.
That work fine!
But when there is new firebase-data, how can I bring the iron-swipeable-container back again without refreshing the entire page? I don't find a solution.
It looks like you've created just one paper-card that contains multiple messages. When the card is swiped away, your code has no template to refill the container.
Did you actually mean to create a card for each message? That would require moving paper-card inside the template repeater like this:
<iron-swipeable-container id="teamchat">
<template is="dom-repeat" items="[[tcmmessages]]" as="tcmmessage">
<paper-card class="swipe item blue">
<div class="card-content">
<b>[[tcmmessage.teamname]]</b><br>
[[tcmmessage.beitrag]]<br>
<span class="chatmetadata">von [[tcmmessage.username]]
• [[tcmmessage.update]] • [[tcmmessage.uptime]] </span>
</div>
</paper-card>
</template>
</iron-swipeable-container>
When tcmmessages refills (via Firebase), the iron-swipeable-container automatically repopulates with a paper-card per message.
Here's a demo of similar code that shows that behavior:
<head>
<base href="https://polygit.org/polymer+1.4.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-card/paper-card.html">
<link rel="import" href="iron-swipeable-container/iron-swipeable-container.html">
<link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style include="iron-flex">
paper-card {
margin-bottom: 16px;
}
</style>
<template>
<iron-swipeable-container class="container">
<template is="dom-repeat" items="[[items]]">
<paper-card heading="{{item}}" class="layout vertical">
<div class="card-content">
Swipe me left or right
</div>
</paper-card>
</template>
</iron-swipeable-container>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties : {
items: {
type: Array,
value: function() {
return [1,2,3];
}
}
},
_clearListAfterDelay: function(delay) {
this.async(function() {
this.set('items', []);
}, delay);
},
_refillListAfterDelay: function(delay) {
this.async(function() {
this.push('items', 4);
this.push('items', 5);
}, delay);
},
ready: function() {
this._clearListAfterDelay(1000);
this._refillListAfterDelay(2000);
}
});
});
</script>
</dom-module>
</body>
codepen
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>
I thought I would get lucky and just do window.scrollTo(0,500) but that did not work because the core-header-panel is doing the scrolling for me.
Suppose you have two elements
<core-header-panel>
<core-animated-pages selected="{{s}}">
<section><my-element select={{s}}></my-element></section>
<section><my-element select={{s}}></my-element></section>
</core-animated-pages>
</core-header-panel>
</template>
I see the element I want to scroll to in the console but it does not scroll?
<polymer-element name="my-element" attributes="select">
<template>
....
</template>
<script>
Polymer('my-element', {
select:0,
selectChanged: function(){
var x=this.shadowRoot.querySelector("#id")
if (x){
console.log(x)
x.scrollIntoView()
}
}
});
</script>
</polymer-element>
EDIT:
<polymer-element name="my-element" attributes="select">
<template>
<core-animated-pages fit selected="{{select}}" id="core_page">
....
</core-animated-pages>
</template>
<script>
Polymer('my-element', {
ready: function(){
this.$.core_page.addEventListener("core-animated-pages-transition-end", function(e) {
var x=this.shadowRoot.querySelector("#id")
if (x){
console.log(x)
x.scrollIntoView()
}
})
}
});
</script>
</polymer-element>