<iron-label> not forwarding taps to <paper-radio-button> - polymer

<div class="center horizontal layout">
<iron-label>
paper radio button
<paper-radio-button noink iron-label-target>Radio</paper-radio-button>
</iron-label>
</div>
Clicking on text paper radio button not forwarding clicks to the radio button but the documentation says: All taps on the iron-label will be forwarded to the "target" element.

It's working in this JS Bin for me.
<!doctype html>
<html>
<head>
<meta name="description" content="http://stackoverflow.com/questions/37816458">
<meta charset="utf-8">
<base href="http://polygit.org/components/">
<script href="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-label/iron-label.html" rel="import">
<link href="paper-radio-button/paper-radio-button.html" rel="import">
</head>
<body>
<dom-module id="my-el">
<template>
<iron-label>
clicking here should forward tap to paper-radio-button
<paper-radio-button noink iron-label-target on-tap="radioButtonTapped">Radio</paper-radio-button>
</iron-label>
</template>
<script>
Polymer({
is: 'my-el',
radioButtonTapped: function (e) {
console.log('tap');
}
});
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
https://jsbin.com/juzewi/edit?html,console,output

Related

Polymer 2.x code works in jsbin but not in codepen, plunker or jsfiddle

The below code works properly in this jsbin but it does not work in either this codepen, this plunker or this jsfiddle.
Why not? How can I get it to work in the three locations where it does not?
http://jsbin.com/yudavucola/1/edit?html,console,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/scale-up-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<dom-module id="my-el">
<template>
<button on-click="open">Open Dialog</button>
<paper-dialog
id="dialog"
entry-animation="scale-up-animation"
exit-animation="fade-out-animation"
modal
>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
constructor() {
super();
}
open() {
console.log('opening...');
this.$.dialog.open();
console.log('opened!');
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
Since every other site other than jsbin is using the secure version of HTTP i.e. HTTPS, the request to get the contents from the source http://polygit.org/polymer+:master/components/ is blocked. So, use secure connection and it will work in every other site.
You can check the console for more information.
Change <base> tag's href attribute from http://polygit.org/... to //polygit.org/.... This normalizes the import to work in both http and https environments.
Here are working examples in all repositories: JsBin, Codepen, Plunker and JsFiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="neon-animation/animations/scale-up-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
</head>
<body>
<dom-module id="my-el">
<template>
<button on-click="open">Open Dialog</button>
<paper-dialog
id="dialog"
entry-animation="scale-up-animation"
exit-animation="fade-out-animation"
modal
>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
constructor() {
super();
}
open() {
console.log('opening...');
this.$.dialog.open();
console.log('opened!');
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
Edit
Note that for a specific version of Polymer, you can use
<base href="//polygit.org/polymer2.0+:master/components/">
or
<base href="//polygit.org/polymer1.0+:master/components/">
etc.

Polymer 1.x: Using Font Awesome with paper-icon-button

Is there a way to use an icon from the Font Awesome library as the icon inside a paper-icon-button?
Here is my jsBin.
http://jsbin.com/rahesepeho/2/edit?html,output
<!doctype html>
<head>
<meta name="description" content="iron-data-table beta3">
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<style>
:host {
font-family: arial, sans-serif;
}
</style>
<template>
<p>The below <code>paper-icon-button</code> uses an image from Github.</p>
<paper-icon-button
src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
alt="octocat" title="octocat">
</paper-icon-button>
<p>How do I make the below <code>paper-icon-button</code> use an icon from Font Awesome?</p>
<paper-icon-button
src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
alt="octocat" title="octocat">
</paper-icon-button>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Per #Stefanvott on the Polymer Slack site:
There are at least two ways:
Use the following custom element https://customelements.io/philya/font-awesome-polymer-icons/ (Didn't work for me.)
Do this <paper-icon-button src="" class="fa fa-github-alt fa-lg"></paper-icon-button> per this jsBin. See below code.
Short version http://jsbin.com/hubonatopa/1/edit?html,output
paper-icon-button.fa {
padding: .5em;
height: 2em;
width: 2em;
}
<paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>
Full version http://jsbin.com/hubonatopa/1/edit?html,output
<!doctype html>
<head>
<meta name="description" content="iron-data-table beta3">
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> </head>
<body>
<dom-module id="x-foo">
<style>
:host {
font-family: arial, sans-serif;
}
paper-icon-button.fa {
padding: 10px;
line-height: 1em;
overflow: hidden;
}
</style> <template>
<p>The below <code>paper-icon-button</code> uses an image from Github.</p>
<paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
<p>How do I make the below <code>paper-icon-button</code> use an icon from Font Awesome?</p>
<paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
You can use this project! It's cool, bower package to use in polymer 1-2. Now it's last version of FA: 4.7. Here: https://github.com/vangware/fontawesome-iconset
in my case, on polymer v1.8 i had to create a custom style element as described in this link , paste font-awesome css there and then add it to my element using
<template>
<style include="shared-styles">
</style>
<paper-button> <i class="fa fa-facebook fa-lg"></i></paper-button>
..............
</template>

Polymer 1.x: <paper-toggle-botton> VALUE doesn't toggle off

I can't get the value of the <paper-toggle-button> element to toggle to the "off" value using <iron-form>.serialize(). Although the visual rendering does appear to toggle to the "off" position.
What am I doing wrong?
Here is a link to the JSBin demo.
Click the toggle button in the demo to see their values.
Each button begins with its value set to "off."
The first click on each button sets the value to "on."
At no time does the value ever toggle back to "off" after it toggles "on."
The visual rendering of each toggle button appears to work as expected.
http://jsbin.com/ruzuwaqiyi/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz/">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
paper-toggle-button {
display: block;
margin-bottom: 40px;
}
</style>
<form is="iron-form" id="form">
<p>Click each button to view the values.</p>
<paper-toggle-button name="foo" on-change="handle">foo</paper-toggle-button>
<paper-toggle-button name="bar" on-change="handle">bar</paper-toggle-button>
<paper-toggle-button name="baz" on-change="handle">baz</paper-toggle-button>
<paper-toggle-button name="bat" on-change="handle">bat</paper-toggle-button>
<p>See how the values never toggle back to "off?"
</form>
</template>
<script>
(function(){
Polymer({
is: 'x-element',
handle: function() {
alert(JSON.stringify(this.$.form.serialize()));
}
});
})();
</script>
</dom-module>
</body>
</html>
I think I'll just use the <paper-checkbox> element instead. JSBin
http://jsbin.com/dewixacagu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz/">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
paper-checkbox {
display: block;
margin-bottom: 40px;
}
</style>
<form is="iron-form" id="form">
<p>Click each button to view the values.</p>
<paper-checkbox name="foo" on-change="handle">foo</paper-checkbox>
<paper-checkbox name="bar" on-change="handle">bar</paper-checkbox>
<paper-checkbox name="baz" on-change="handle">baz</paper-checkbox>
<paper-checkbox name="qux" on-change="handle">qux</paper-checkbox>
<p>See how the values toggle back to "off" now?</p>
</form>
</template>
<script>
(function(){
Polymer({
is: 'x-element',
handle: function() {
alert(JSON.stringify(this.$.form.serialize()));
}
});
})();
</script>
</dom-module>
</body>
</html>

paper-tabs event listener to change selected?

In addition to paper tabs, I have other areas where a user can click to navigate. So, I want to set the paper-tab manually when this happens.
For paper-tabs, is there a event that I can fire in another template to change the selected attribute value? I saw that there was a iron-select but I think it fires after a change. In addition, I tried this.fire('iron-select', 1); in another template and the paper-tab did not change.
You can bind to the paper-tabs' selected attribute or you can change the value of the paper-tabs' selected property.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="paper-radio-group/paper-radio-group.html">
<link rel="import" href="paper-radio-button/paper-radio-button.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body class="fullbleed">
<template is="dom-bind" id="app">
<paper-header-panel>
<paper-toolbar>
<paper-tabs selected="{{selected}}" attr-for-selected="name">
<paper-tab name="one">One</paper-tab>
<paper-tab name="two">Two</paper-tab>
<paper-tab name="three">Three</paper-tab>
</paper-tabs>
</paper-toolbar>
<div class="container">
<paper-radio-group selected="{{selected}}">
<paper-radio-button name="one">One</paper-radio-button>
<paper-radio-button name="two">Two</paper-radio-button>
<paper-radio-button name="three">Three</paper-radio-button>
</paper-radio-group>
<div class="button-group">
<paper-button data-name="one" on-tap="selectTab">One</paper-button>
<paper-button data-name="two" on-tap="selectTab">Two</paper-button>
<paper-button data-name="three" on-tap="selectTab">Three</paper-button>
</div>
</div>
</paper-header-panel>
</template>
<script>
(function() {
var app = document.getElementById('app');
app.selected = "one";
app.selectTab = function(e) {
app.selected = e.target.dataset.name;
};
})();
</script>
</body>
</html>

Polymer 1.0: paper-tooltip not working

I can't seem to get <paper-tooltip> element to work for me.
Here is my JSBin.
What am I doing wrong?
<!doctype html>
<head>
<meta charset="utf-8">
<base href="http://polymer-magic-server.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<template>
<style></style>
<div class="with-tooltip" tabindex="0">
<input type="checkbox">Oxygen
<paper-tooltip>Atomic number: 8</paper-tooltip>
</div>
<paper-icon-button id="heart" icon="favorite" alt="heart"></paper-icon-button>
<paper-icon-button id="back" icon="arrow-back" alt="go back"></paper-icon-button>
<paper-icon-button id="fwd" icon="arrow-forward" alt="go forward"></paper-icon-button>
<paper-tooltip for="heart" margin-top="0"><3 <3 <3 </paper-tooltip>
<paper-tooltip for="back" margin-top="0">halp I am trapped in a tooltip</paper-tooltip>
<paper-tooltip for="fwd" margin-top="0">back to the future</paper-tooltip>
</template>
<script>
// only need this when both (1) in the main document and
// (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: "x-foo"
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Summary from comments:
Per #kevinashcraft:
You have to import paper-icon-button, iron-icons, and paper-tooltip. Here's a working JSBin.