Polymer core-transition doesn't work - javascript

I've been playing with Polymer for a few days and I want to do a menu, that will appear/disappear after clicking on the menu button. The problem is that I can't figure out why my code doesn't work.
Here it is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Title</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-meta/core-meta.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-transition/core-transition.html">
<link rel="import" href="bower_components/core-media-query/core-media-query.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-shadow/paper-shadow.html">
</style>
</head>
<body unresolved>
<core-header-panel flex>
<paper-shadow z="1">
<core-toolbar>
<paper-icon-button icon="menu" onclick="handleMenu()"></paper-icon-button>
<div flex>Project Management System</div>
</core-toolbar>
</paper-shadow>
</core-header-panel>
<div id="menu" class="core-menu">
<core-item icon="settings" label="Settings"></core-item>
</div>
</body>
</html>
and the Javascript
<script>
document.addEventListener('polymer-ready', function() {
console.log('Polymer Ready');
});
var meta;
var transition;
function handleMenu() {
var menu = document.getElementById('menu');
meta = document.createElement('core-meta');
meta.type = 'transition';
console.log(meta.list);
console.log(transition);
transition.teardown(menu);
transition = getMeta().byId('core-transition-left');
transition.setup(menu);
transition.go(menu, true);
console.log('Tap');
}
</script>
When I click on the menu button an error will appear:
Uncaught TypeError: Cannot read property 'teardown' of undefined
I've done everything as it was on demo page, I've been searching for the correct solution or some answers but nothing... does any one have an idea? Thanks

Its not working because mainly your were missing the https://www.polymer-project.org/components/core-transition/core-transition-css.html from the demo page.
After that the getMeta() method was also missing and the menu element needed to have the transition setup applied to it.
See and try the example below:
document.addEventListener('polymer-ready', function() {
console.log('Polymer Ready');
setup();
});
var meta;
var transition;
var state = {
opened: false
};
function setup() {
var target = document.getElementById('menu');
if (transition) {
transition.teardown(target);
}
transition = getMeta().byId('core-transition-left');
transition.setup(target);
}
function getMeta() {
if (!meta) {
meta = document.createElement('core-meta');
meta.type = 'transition';
}
return meta;
}
function handleMenu() {
var target = document.getElementById('menu');
state.opened = !state.opened;
transition.go(target, state);
}
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="https://www.polymer-project.org/components/core-icons/core-icons.html">
<link rel="import" href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="https://www.polymer-project.org/components/core-meta/core-meta.html">
<link rel="import" href="https://www.polymer-project.org/components/core-item/core-item.html">
<link rel="import" href="https://www.polymer-project.org/components/core-transition/core-transition.html">
<link rel="import" href="https://www.polymer-project.org/components/core-media-query/core-media-query.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<link rel="import" href="https://www.polymer-project.org/components/core-transition/core-transition-css.html">
<body unresolved>
<core-header-panel flex>
<paper-shadow z="1">
<core-toolbar>
<paper-icon-button icon="menu" onclick="handleMenu()"></paper-icon-button>
<div flex>Project Management System</div>
</core-toolbar>
</paper-shadow>
</core-header-panel>
<div id="menu" class="core-menu">
<core-item icon="settings" label="Settings"></core-item>
</div>

Related

Why is my Polymer iron-icon appearing below my paper-input on navigation?

I have some simple code (Angular2 + Polymer) that creates a paper-input with a iron-icon as a suffix icon:
<paper-input type="text" [control]="email" label="Email">
<iron-icon suffix icon="mail"></iron-icon>
</paper-input>
Here is the full page, note that the materialize grid and row classes are the only materialize classes I brought into the project:
<div class="section">
<h1 class="paper-font-headline">Admin Registration</h1>
<div class="row">
<div class="col s12 m6 6">
<p class="paper-font-body2">some stuff here</p>
</div>
<div class="col s12 m6 6">
<paper-card class="stretch">
<div class="sub-section">
<form>
<paper-input type="text"
[control]="email"
label="Email">
<iron-icon suffix icon="mail"></iron-icon>
</paper-input>
</form>
</div>
</paper-card>
</div>
</div>
</div>
This looks pretty good on page load:
When I navigate away from the page and back, however, the icon falls below the input:
In the html you can clearly see that the icon is placed outside of the paper-input-container on navigation.
Has anyone seen this before? I am at a loss. One thing to note is this only happens when I use webcomponents-lite.js in my index.html file. webcomponents.js has other issues when used (shouldn't be used) but this is not one of them. This is Polymer 1.0. Thanks!
Edit:
This is not an issue in Chrome, but in the other major browsers.
Here are my imports in case they are relevant:
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script>
window.Polymer = window.Polymer || {};
window.Polymer.dom = 'shadow';
</script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<link rel="import" href="bower_components/paper-styles/classes/global.html">
<link rel="import" href="bower_components/paper-styles/classes/shadow.html">
<link rel="import" href="bower_components/paper-styles/classes/shadow-layout.html">
<link rel="import" href="bower_components/paper-styles/classes/typography.html">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-ripple/paper-ripple.html">
<link rel="import" href="bower_components/paper-card/paper-card.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
Here are my bower.json dependencies:
"dependencies": {
"webcomponentsjs": "~0.7.21",
"polymer": "Polymer/polymer#~1.3.0",
"paper-elements": "PolymerElements/paper-elements#~1.0.7"
}
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icon/core-icon.html">
<polymer-element name="my-element">
<template>
<style>
#paper_input {
left: 380px;
top: 380px;
position: absolute;
}
#core_icon {
left: 530px;
top: 390px;
position: absolute;
}
</style>
<paper-input label="Type something..." id="paper_input"></paper-input>
<core-icon icon="mail" id="core_icon"></core-icon>
</template>
<script>
Polymer({
});
</script>
</polymer-element>

Polymer input-header element does not have the expected behavior

I followed the steps in the following video
https://www.youtube.com/watch?v=ZDjiUmx51y8
and created my custom input-header Polymer element as below
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="input-header">
<template>
<style>
.dropdown-content {
padding: 0px;
}
</style>
<paper-toolbar>
<paper-icon-button icon="mail"></paper-icon-button>
<div class="title">{{label}}</div>
<paper-menu-button horizontal-align="right" vertical-align="top">
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<div class="dropdown-content">
<paper-input label="Thread name:" value="{{label}}"></paper-input>
</div>
</paper-menu-button>
</paper-toolbar>
</template>
<script>
Polymer({
is: 'input-header',
properties: {
label: {
type: String,
notify: true
}
}
});
</script>
</dom-module>
Then I called it in my index.html as follows
<input-header label="{{label}}"></input-header>
But I am not getting the behavior shown in the video
https://www.youtube.com/watch?v=ZDjiUmx51y8
where the input field appears when he clicks on the menu button.
Infact, nothing happens when I click on the menu button.
I am using the 1.2.1 version of polymer so I think I am on the latest version.
Any help would be appreciated.
As #GunterZochbauer pointed out, this was fixed by importing the paper elements in elements.html used in the input-header as follows
<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">

Polymer Neon Animations does not work

I am trying to implement neon-animation on a dialog by using polymer. The animations are not working. The popup is seen, but without any animation effects.
My code is as below:
<html>
<head>
<link rel="import" href="/bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html" />
<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html" />
<link rel="import" href="/bower_components/paper-button/paper-button.html" />
<link rel="import" href="/bower_components/paper-item/paper-item.html" />
<link rel="import" href="/bower_components/paper-item/paper-item-body.html" />
<link rel="import" href="/bower_components/iron-icon/iron-icon.html" />
<link rel="import" href="/bower_components/neon-animation/animations/scale-up-animation.html"/>
<link rel="import" href="/bower_components/neon-animation/animations/fade-out-animation.html"/>
<link rel="import" href="/bower_components/neon-animation/neon-animation-runner-behavior.html"/>
<link rel="import" href="/bower_components/neon-animation/neon-animations.html"/>
<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="/bower_components/paper-styles/paper-styles.html"/>
</head>
<body>
<section is="my-dialog" onclick="clickHandler(event)">
<paper-button data-dialog="animated" role="button">raised button</paper-button>
<paper-dialog id="animated" role="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
<h2>Header</h2>
<paper-dialog-scrollable>
Loremipsum... gfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhfgggggggggggggg
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
</paper-dialog>
</section>
<script>
function clickHandler(e) {
var button = e.target;
while (!button.hasAttribute('data-dialog') && button !== document.body) {
button = button.parentElement;
}
if (!button.hasAttribute('data-dialog')) {
return;
}
var id = button.getAttribute('data-dialog');
var dialog = document.getElementById(id);
if (dialog) {
dialog.open();
}
}
</script>
</body>
</html>
Please, tell me what I'm doing wrong ?
Thank you.
I just tried your code and it works. I created a Polymer application with the Yeoman generator, added the 4 required imports and replaced the index.html page by your code.
The 4 required imports are:
paper-button.html
paper-dialog.html
paper-dialog-scrollable.html
neon-animation.html
The others you have imported are not required. I can only advise to check the imports paths.
If you are using the Yeoman scaffolding and you are importing from your index.html file, then you will need to add a path to your imports that goes up one directory from your index.html then over to bower_components directory.
The way to do that is to add two dots and a slash to the beginning of the path name. i.e., ../
Example:
The complete import tag should look like this: (See the two dots?)
<link rel="import" href="../bower_components/neon-animation/neon-animations.html"/>
And do that for all your imports.

paper-dialog and paper-transition-center does not show when toggle() called

I have the following code
element.html
<link rel="import"
href="bower_components/core-toolbar/core-toolbar.html" />
<link rel="import"
href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import"
href="bower_components/core-icons/core-icons.html" />
<link rel="import"
href="bower_components/core-header-panel/core-header-panel.html" />
<link rel="import"
href="bower_components/core-drawer-panel/core-drawer-panel.html" />
<link rel="import"
href="bower_components/core-menu/core-menu.html" />
<link rel="import"
href="bower_components/core-item/core-item.html" />
<link rel="import"
href="bower_components/paper-fab/paper-fab.html" />
<link rel="import"
href="bower_components/paper-dialog-master/paper_dialog_transition.html">
<link rel="import"
href="bower_components/paper-dialog-master/paper_dialog.html">
Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Maps</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial=scalle=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements.html" />
<link rel="stylesheet" href="styles/Home.css" />
<script src="scripts/app.js"></script>
<style type="text/css">
#dlgAddMap
{
height:100px;
width:100px;
background:#fff;
}
</style>
</head>
<body fullbleed layout vertical>
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer>
<core-toolbar>Menu</core-toolbar>
<core-menu>
<core-item label="Maps"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<paper-icon-button id="navicon" icon="menu"></paper-icon-button>
<div>Maps</div>
</core-toolbar>
<div class="content">
<paper-fab icon="add" id="addMap" onclick="document.querySelector('#dlgAddMap').toggle();" class="addButton"></paper-fab>
</div>
</core-header-panel>
</core-drawer-panel>
<paper-dialog heading="Title for dialog" transition="paper-transition-center" id="dlgAddMap">
<paper-button label="Cancel" affirmative></paper-button>
<paper-button label="Accept" affirmative autofocus></paper-button>
</paper-dialog>
</body>
</html>
and for completeness
App.js
document.addEventListener('polymer-ready', function () {
var navicon = document.getElementById('navicon');
var addMap = document.getElementById('addMap');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function () {
drawerPanel.togglePanel();
});
addMap.addEventListener('click', function () {
try {
if (document.querySelector('#dlgAddMap')) {
document.querySelector('#dlgAddMap').toggle();
}
else {
alert('Cannot find the Add Map Dialog');
}
}
catch ( e )
{
alert(e.message);
}
});
});
The trouble is even when I click the paper-fab button I have not been able to get the dialog to show. Although you see the click even accepted by the button, nothing happens.
The answer in the end was with the imports. The polymer download uses an underline with the bower_components but uses a dash ('-') in the name of the folders and filenames for components. It was corrected by just correcting the entries in the elements.html
<link rel="import"
href="bower_components/core-toolbar/core-toolbar.html" />
<link rel="import"
href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import"
href="bower_components/core-icons/core-icons.html" />
<link rel="import"
href="bower_components/core-header-panel/core-header-panel.html" />
<link rel="import"
href="bower_components/core-drawer-panel/core-drawer-panel.html" />
<link rel="import"
href="bower_components/core-menu/core-menu.html" />
<link rel="import"
href="bower_components/core-item/core-item.html" />
<link rel="import"
href="bower_components/paper-button/paper-button.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/paper-dialog/paper-dialog-transition.html" />
<link rel="import"
href="bower_components/paper-dialog/paper-action-dialog.html" />

Polymer core-ajax behaves weird when in new polymer element

I put a core-ajax element in a new polymer element but instead of a response I get an Access Control error. When I use the element alone in my index.html on the same url, I get a regular response. Any idea why this is happening?
Polymer Element:
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/core-ajax/core-ajax.html">
<polymer-element name="reddit-service" attributes="posts subreddit">
<template>
<style>
:host {
display: block;
}
</style>
<core-ajax
auto
url="http://reddit.com/.json"
on-core-response="{{ajaxResponse}}"
handleAs="json"></core-ajax>
</template>
<script>
Polymer('reddit-service', {
created: function() {
this.posts = [];
},
ajaxResponse: function(event, response) {
console.log(event);
}
});
</script>
</polymer-element>
index.html:
<!DOCTYPE html>
<html>
<head>
<!-- META AND STUFF -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Polymer Reddit App</title>
<!-- POLYMER -->
<script src="components/platform/platform.js"></script>
<link rel="import" href="components/core-ajax/core-ajax.html">
<link rel="import" href="components/core-header-panel/core-header-panel.html">
<link rel="import" href="components/core-toolbar/core-toolbar.html">
<link rel="import" href="reddit-list.html">
</head>
<body unresolved>
<core-toolbar>Reddit with Polymer</core-toolbar>
<core-ajax
auto
url="http://www.reddit.com/.json"
handleAs="json"></core-ajax>
<script>
function handle(event, response) {
console.log(event);
}
document.addEventListener('core-response', handle, false);
</script>
</body>
</html>
In your custom element you're missing the www subdomain which seems to be required for it to work correctly.

Categories