togglePanel method with core-drawer-panel not working
685 views
Skip to first unread message
lex.a...@gmail.com
Sep 8, 2014, 4:00:56 AM9/8/14
to polym...@googlegroups.com
Hi there, hoping for help again!
I am trying to set up a responsive side nave like in the docs, but somehow it works only in Firefox, not in Chrome, meaning nothing happens in Chrome when I click the "menu" icon that is set up to reveal the drawer panel, it does so in Firefox, however.
My "menu" icon is added as an attribute of a paper-icon-button nested inside a core-toolbar, a core-scroll-header-panel and a section, which has the "main" attribute.
This is my code.
<polymer-element name="my-element">
<template>
<style>...</style>
<core-drawer-panel transition id="core_drawer_panel" touch-action>
<section id="section" drawer>
<core-header-panel mode="standard" id="core_header_panel">
<core-toolbar id="core_toolbar">
<div id="div">Menu</div>
</core-toolbar>
<section id="section2">
<core-menu selected="0" selectedindex="0" id="core_menu">
<core-submenu id="core_submenu" icon="account-balance" label="Listings">
<core-item id="core_item" label="Item" horizontal center layout></core-item>
<core-item id="core_item1" label="Item 1" horizontal center layout></core-item>
<core-item id="core_item2" label="Item 2" horizontal center layout></core-item>
<core-item id="core_item3" label="Item 3" horizontal center layout></core-item>
</core-submenu>
<core-item id="core_item4" icon="flag" label="Current" horizontal center layout></core-item>
<core-item id="core_item5" icon="link" label="Links" horizontal center layout></core-item>
<core-item id="core_item6" icon="drive-zip" label="Cooperation" horizontal center layout></core-item>
</core-menu>
</section>
</core-header-panel>
</section>
<section id="section1" main>
<core-scroll-header-panel headermargin="128" condenses keepcondensedheader headerheight="192" id="core_scroll_header_panel">
<core-toolbar id="core_toolbar1" class="tall">
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<div id="div1" flex></div>
<core-icon-button icon="search" id="core_icon_button2"></core-icon-button>
<core-icon-button icon="more-vert" id="core_icon_button3"></core-icon-button>
<div id="div2" class="bottom indent title">Title</div>
</core-toolbar>
</core-scroll-header-panel>
</section>
</core-drawer-panel>
<script>
document.addEventListener('polymer-ready', function() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('core_drawer_panel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
});
</script>
</template>
Is this is my style:
<style shim-shadowdom>
:host {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
html,body {
height: 100%;
margin: 0;
background-color:#E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
#core_drawer_panel {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#section {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: white;
}
#section1 {
height: 100%;
box-sizing: border-box;
background-color: white;
}
#core_header_panel {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#core_toolbar {
color: white;
background: linear-gradient(rgb(86, 119, 252), rgb(42, 54, 177));
}
#core_toolbar1 {
color: white;
box-shadow: rgb(158, 158, 158) 0px 3px 6px;
background-color: transparent;
}
core-toolbar.tall {
height: 235px;
}
#section2 {
height: 400px;
background-color: white;
}
#core_scroll_header_panel {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
core-scroll-header-panel::shadow #headerBg {
background-image: url(http://rechtsanwalt-jmueller.de/user_gfx/RAM-DYN-PIC-DEFAULT.jpg);
}
core-scroll-header-panel::shadow #condensedHeaderBg {
background: linear-gradient(rgb(86, 119, 252), rgb(42, 54, 177));
}
.content {
padding: 10px 30px;
}
.title {
-webkit-transform-origin: 0px 50%;
transform-origin: 0px 50% 0px;
font-size: 28px;
}
#div3 {
width: 300px;
height: 400px;
}
core-icon-button {
color: rgb(42, 54, 177);
}
paper-icon-button {
color: rgb(42, 54, 177);
}
core-item::shadow core-icon {
color: rgb(86, 119, 252);
}
core-submenu::shadow core-icon {
color: rgb(42, 54, 177);
}
core-menu {
color: rgb(42, 54, 177);
}
</style>
I must have been missing something, but don't know what...
Lex
Frankie Fu
Sep 8, 2014, 5:44:17 PM9/8/14
to Atomiko Lex, polymer-dev
It seems there is a misunderstanding on how to create a polymer element. In your "my-element" element definition you have a script block inside the template that setup event listener and I am not sure if this is what you really want. It could be because they are copy and paste from some sample code. Anyway I would suggest to take a look at the doc for creating polymer element here:
I also attempted to tweak your code slightly to something that works:
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/78df841b-0ec6-455e-a6ae-2eb09c100fcb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Atomiko Lex
Sep 9, 2014, 2:23:04 AM9/9/14
to polym...@googlegroups.com
Good morning and thank you! It's problem solved, again!
I wil read the docs you suggested, and I guess I have to read the copy of "JavaScript: The Missing Manual" that's waiting on my desk here...
Lex
Reply all
Reply to author
Forward
0 new messages