Polymer Neon Animations does not work - javascript

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.

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 core-transition doesn't work

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>

Polymer example not working on Firefox

I was writing a Polymer app when I realized my paper-dropdown-menu element was not working on updated Firefox but giving no problems in Chrome.
All bower components are correctly installed and accessible.There is no console errors on any of the browsers.
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<style>
paper-dropdown-menu {
left: 24px;
width: 180px;
}
</style>
<paper-dropdown-menu label="Your favorite food">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>Pasta</paper-item>
<paper-item>Pizza</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<paper-button raised>CLICK ME</paper-button>
</body>
</html>
UPDATE: I tried downloading the paper-dropdown-menu demo and running it in localhost. Installed all components using bower but still don't work in Firefox. In Chrome runs fine.
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link href="bower_components/core-collapse/core-collapse.html" rel="import">
<link href="bower_components/core-menu/core-menu.html" rel="import">
<link href="bower_components/paper-dropdown/paper-dropdown.html" rel="import">
<link href="bower_components/paper-item/paper-item.html" rel="import">
<link href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
</head>
<body>
<template is="auto-binding">
<paper-dropdown-menu label="Your favorite pastry">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<script>
scope = document.querySelector('template[is=auto-binding]');
scope.pastries = [
'Apple fritter',
'Croissant',
'Donut'
];
</script>
</body>
</html>
For some reason it would not work on localhost port 8000 but works great on localhost port 80.
Just had to run the local server like this:
sudo python -m SimpleHTTPServer 80

How to Use Polymer Elements

I am working through some demo in Polymer. This one here:
https://www.polymer-project.org/components/core-ajax/demo.html
The code that works looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax this.</title>
<script src="../bower_components/platform/platform.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
</head>
<body>
<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"></core-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector("core-ajax");
ajax.addEventListener("core-response",
function(e) {
document.querySelector('template').model = {
response: e.detail.response
};
}
);
});
</script>
</body>
</html>
Which works quite fine. But I want to encapsulate this demo inside of a polymer element, called "test-element.html", but it doesn't work:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<polymer-element name="test-element">
<template>
<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"></core-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector("core-ajax");
ajax.addEventListener("core-response",
function(e) {
document.querySelector('template').model = {
response: e.detail.response
};
}
);
});
</script>
</template>
<script>
Polymer('test-element', {
});
</script>
</polymer-element>
Nothing is beeing displayed, when I use the element and import in inside my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Playground</title>
<script src="../bower_components/platform/platform.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="test-element.html">
<link rel="import" href="ajax-feedback.html">
</head>
<body>
<style>
* {margin: 0; padding: 0;}
</style>
<h1>Hello World</h1>
<test-element></test-element>
<ajax-feedback></ajax-feedback>
</body>
</html>
Please can someone explain to me, why I can't just put the code of the demo inside a polymer element and then reimport it inside my index.html?
Thank you very much.
George.
Two things: document.querySelector() won't work here: polymer elements use the shadow dom, which will hide the elements from CSS and querySelector(), and you've done this the hard way. You shouldn't need <script> tags inside <template>, and you don't need to hard code JS to carry the response to where it's going to be used.
This is the easy way:
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-ajax/core-ajax.html">
<polymer-element name="test-element" attributes="q">
<template>
<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"{{q}}"}'
handleAs="json" response="{{response}}"></core-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
</template>
<script>
Polymer({
response: null,
});
</script>
</polymer-element>
And then to use it:
<test-element q="chrome"></test-element>

Categories